diff --git a/packages/kuma-gui/src/app/application/components/app-view/AppView.vue b/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
index 7e0a6d4ae..9a55f132c 100644
--- a/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
+++ b/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
@@ -53,7 +53,7 @@
       <aside v-if="$slots.notifications">
         <XAlert
           class="mb-4"
-          appearance="warning"
+          variant="warning"
         >
           <slot name="notifications" />
         </XAlert>
diff --git a/packages/kuma-gui/src/app/common/ErrorBlock.vue b/packages/kuma-gui/src/app/common/ErrorBlock.vue
index e6c015bcd..506714b40 100644
--- a/packages/kuma-gui/src/app/common/ErrorBlock.vue
+++ b/packages/kuma-gui/src/app/common/ErrorBlock.vue
@@ -82,7 +82,7 @@
       v-else
     >
       <XAlert
-        appearance="danger"
+        variant="danger"
       >
         <div
           class="error-block-message"
diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue
index 239283a6c..5e6ef8396 100644
--- a/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue
+++ b/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -508,7 +508,7 @@
             >
               <XAlert
                 class="mt-4"
-                appearance="warning"
+                variant="warning"
               >
                 <div
                   v-html="t('data-planes.routes.item.mtls.disabled')"
diff --git a/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue b/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
index d96551c98..d69abbc6d 100644
--- a/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
+++ b/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
@@ -195,9 +195,6 @@ html.no-navigation {
 </style>
 
 <style lang="scss" scoped>
-.upgrade-alert :deep(.k-button) {
-  color: $kui-color-text-inverse !important;
-}
 .app-content-container {
   padding-top: var(--AppHeaderHeight, initial);
   display: var(--AppDisplay);
diff --git a/packages/kuma-gui/src/app/onboarding/components/OnboardingAlert.vue b/packages/kuma-gui/src/app/onboarding/components/OnboardingAlert.vue
index b9c01b0f6..f5d2549e5 100644
--- a/packages/kuma-gui/src/app/onboarding/components/OnboardingAlert.vue
+++ b/packages/kuma-gui/src/app/onboarding/components/OnboardingAlert.vue
@@ -9,7 +9,7 @@
     >
       <XAlert
         v-if="data?.closed !== true"
-        appearance="success"
+        variant="success"
         dismissible
         data-testid="onboarding-notification"
         @dismiss="async () => {
diff --git a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue
index 6ddec7f58..ca664b74c 100644
--- a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue
+++ b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue
@@ -91,7 +91,7 @@
       </div>
       <XAlert
         v-if="Object.keys(props.data.status.acknowledgements).length === 0"
-        appearance="info"
+        variant="info"
       >
         <template #icon>
           <PortalIcon />
diff --git a/packages/kuma-gui/src/app/x/components/x-about-card/README.md b/packages/kuma-gui/src/app/x/components/x-about-card/README.md
new file mode 100644
index 000000000..e21733824
--- /dev/null
+++ b/packages/kuma-gui/src/app/x/components/x-about-card/README.md
@@ -0,0 +1 @@
+# x-about-card
diff --git a/packages/kuma-gui/src/app/x/components/x-alert/README.md b/packages/kuma-gui/src/app/x/components/x-alert/README.md
new file mode 100644
index 000000000..f5e6c989b
--- /dev/null
+++ b/packages/kuma-gui/src/app/x/components/x-alert/README.md
@@ -0,0 +1 @@
+# x-alert
diff --git a/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue b/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue
new file mode 100644
index 000000000..d53b8ba8d
--- /dev/null
+++ b/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue
@@ -0,0 +1,35 @@
+<template>
+  <KAlert
+    :appearance="props.variant"
+    :dismissible="props.dismissable"
+  >
+    <template
+      v-for="(_, key) in slots"
+      :key="key"
+      #[`${key}`]
+    >
+      <slot :name="key" />
+    </template>
+  </KAlert>
+</template>
+<script lang="ts" setup>
+import { KAlert } from '@kong/kongponents'
+import { useSlots } from 'vue'
+
+import type { AlertAppearance } from '@kong/kongponents'
+
+const slots = useSlots()
+
+const props = withDefaults(defineProps<{
+  variant?: AlertAppearance
+  dismissable?: boolean
+}>(), {
+  variant: 'warning',
+  dismissable: false,
+})
+</script>
+<style lang="scss" scoped>
+:deep(.k-button.primary) {
+  color: $kui-color-text-inverse !important;
+}
+</style>
diff --git a/packages/kuma-gui/src/app/x/index.ts b/packages/kuma-gui/src/app/x/index.ts
index 7e4967aa2..a2433cfcb 100644
--- a/packages/kuma-gui/src/app/x/index.ts
+++ b/packages/kuma-gui/src/app/x/index.ts
@@ -1,8 +1,9 @@
-import Kongponents, { KTooltip, KCard, KPop, KInputSwitch, KAlert, KCheckbox } from '@kong/kongponents'
+import Kongponents, { KTooltip, KCard, KPop, KInputSwitch, KCheckbox } from '@kong/kongponents'
 
 import XAboutCard from './components/x-about-card/XAboutCard.vue'
 import XAction from './components/x-action/XAction.vue'
 import XActionGroup from './components/x-action-group/XActionGroup.vue'
+import XAlert from './components/x-alert/XAlert.vue'
 import XBadge from './components/x-badge/XBadge.vue'
 import XBreadcrumbs from './components/x-breadcrumbs/XBreadcrumbs.vue'
 import XCodeBlock from './components/x-code-block/XCodeBlock.vue'
@@ -27,13 +28,13 @@ type Token = ReturnType<typeof token>
 
 declare module 'vue' {
   export interface GlobalComponents {
-    XAlert: typeof KAlert
     XCard: typeof KCard
     XPop: typeof KPop
     XInputSwitch: typeof KInputSwitch
     XCheckbox: typeof KCheckbox
     XTooltip: typeof KTooltip
     //
+    XAlert: typeof XAlert
     XIcon: typeof XIcon
     XI18n: typeof XI18n
     XInput: typeof XInput
@@ -75,7 +76,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     [$.xVueComponents, {
       service: () => {
         return [
-          ['XAlert', KAlert],
+          ['XAlert', XAlert],
           ['XCard', KCard],
           ['XPop', KPop],
           ['XInputSwitch', KInputSwitch],
diff --git a/packages/kuma-gui/src/app/zones/views/ZoneConfigView.vue b/packages/kuma-gui/src/app/zones/views/ZoneConfigView.vue
index d5f0cec86..c02457967 100644
--- a/packages/kuma-gui/src/app/zones/views/ZoneConfigView.vue
+++ b/packages/kuma-gui/src/app/zones/views/ZoneConfigView.vue
@@ -57,7 +57,7 @@
             v-else
             class="mt-4"
             data-testid="warning-no-subscriptions"
-            appearance="warning"
+            variant="warning"
           >
             {{ t('zone-cps.detail.no_subscriptions') }}
           </XAlert>