diff --git a/src/app/application/components/app-view/AppView.vue b/src/app/application/components/app-view/AppView.vue
index fee6a71ba..1f61e6f5c 100644
--- a/src/app/application/components/app-view/AppView.vue
+++ b/src/app/application/components/app-view/AppView.vue
@@ -51,12 +51,12 @@
       </header>
 
       <aside v-if="$slots.notifications">
-        <KAlert
+        <XAlert
           class="mb-4"
           appearance="warning"
         >
           <slot name="notifications" />
-        </KAlert>
+        </XAlert>
       </aside>
       <div class="stack">
         <slot
diff --git a/src/app/application/components/data-source/DataLoader.vue b/src/app/application/components/data-source/DataLoader.vue
index a74e6518b..e479469a6 100644
--- a/src/app/application/components/data-source/DataLoader.vue
+++ b/src/app/application/components/data-source/DataLoader.vue
@@ -19,7 +19,7 @@
           :error="allErrors[0]"
           :refresh="props.src !== '' ? refresh : () => {}"
         >
-          <!-- KAlert -->
+          <!-- XAlert -->
         </slot>
       </template>
       <slot
diff --git a/src/app/common/ErrorBlock.vue b/src/app/common/ErrorBlock.vue
index f6eaf9e8b..e6c015bcd 100644
--- a/src/app/common/ErrorBlock.vue
+++ b/src/app/common/ErrorBlock.vue
@@ -27,30 +27,30 @@
         v-if="(error instanceof ApiError)"
         class="badge-list"
       >
-        <KBadge
+        <XBadge
           :appearance="props.appearance"
           data-testid="error-status"
         >
           {{ error.status }}
-        </KBadge>
+        </XBadge>
 
-        <KBadge
+        <XBadge
           v-if="error.type"
           appearance="neutral"
           data-testid="error-type"
           max-width="auto"
         >
           type: {{ error.type }}
-        </KBadge>
+        </XBadge>
 
-        <KBadge
+        <XBadge
           v-if="error.instance"
           appearance="neutral"
           data-testid="error-trace"
           max-width="auto"
         >
           trace: <TextWithCopyButton :text="error.instance" />
-        </KBadge>
+        </XBadge>
       </div>
 
       <div class="error-block-message mt-4">
@@ -81,7 +81,7 @@
     <template
       v-else
     >
-      <KAlert
+      <XAlert
         appearance="danger"
       >
         <div
@@ -110,7 +110,7 @@
             {{ error.message }}
           </p>
         </div>
-      </KAlert>
+      </XAlert>
     </template>
   </div>
 </template>
diff --git a/src/app/common/StatusBadge.vue b/src/app/common/StatusBadge.vue
index 4293a75a6..638e779e7 100644
--- a/src/app/common/StatusBadge.vue
+++ b/src/app/common/StatusBadge.vue
@@ -1,13 +1,13 @@
 <template>
   <component :is="props.status === 'not_available' ? KTooltip : AnonymousComponent">
-    <KBadge
+    <XBadge
       class="status-badge"
       :appearance="BADGE_APPEARANCE[props.status]"
       max-width="auto"
       data-testid="status-badge"
     >
       {{ t(`http.api.value.${props.status}`) }}
-    </KBadge>
+    </XBadge>
     <template
       v-if="props.status === 'not_available'"
       #content
diff --git a/src/app/common/TagList.vue b/src/app/common/TagList.vue
index 1fe52372e..fb3a77dd3 100644
--- a/src/app/common/TagList.vue
+++ b/src/app/common/TagList.vue
@@ -7,10 +7,9 @@
       'tag-list--align-right': props.alignment === 'right',
     }"
   >
-    <KBadge
+    <XBadge
       v-for="(tag, index) in tagList"
       :key="index"
-      max-width="auto"
       class="tag"
       :appearance="tag.isKuma ? 'info' : 'neutral'"
     >
@@ -20,7 +19,7 @@
       >
         {{ tag.label }}:<b>{{ tag.value }}</b>
       </component>
-    </KBadge>
+    </XBadge>
   </component>
 </template>
 
diff --git a/src/app/common/TargetRef.vue b/src/app/common/TargetRef.vue
index 512e062f8..cf787b4d7 100644
--- a/src/app/common/TargetRef.vue
+++ b/src/app/common/TargetRef.vue
@@ -4,14 +4,14 @@
       v-if="routeTarget !== null"
       :to="routeTarget"
     >
-      <KBadge>
+      <XBadge>
         <slot />
-      </KBadge>
+      </XBadge>
     </RouterLink>
 
-    <KBadge v-else>
+    <XBadge v-else>
       <slot />
-    </KBadge>
+    </XBadge>
 
     <TagList
       v-if="props.targetRef.kind === 'MeshServiceSubset' && props.targetRef.tags"
diff --git a/src/app/connections/components/connection-traffic/ConnectionCard.vue b/src/app/connections/components/connection-traffic/ConnectionCard.vue
index 3ebc07932..ceffeb610 100644
--- a/src/app/connections/components/connection-traffic/ConnectionCard.vue
+++ b/src/app/connections/components/connection-traffic/ConnectionCard.vue
@@ -9,7 +9,7 @@
         :tags="[{label: 'kuma.io/service', value: props.service}]"
       />
       <div class="title">
-        <KBadge
+        <XBadge
           class="protocol"
           :appearance="props.protocol === 'passthrough' ? 'success' : 'info'"
         >
@@ -20,7 +20,7 @@
               defaultMessage: t(`http.api.value.${props.protocol}`),
             },
           ) }}
-        </KBadge>
+        </XBadge>
         <slot name="default" />
       </div>
     </template>
diff --git a/src/app/connections/views/ConnectionInboundSummaryClustersView.vue b/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
index d7a95d588..7c4d8f3bc 100644
--- a/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
+++ b/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.startsWith(`${props.data.service}::`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${props.data.service}::`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -55,7 +55,6 @@
 <script lang="ts" setup>
 import { RefreshIcon } from '@kong/icons'
 
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneInbound } from '@/app/data-planes/data'
 import type { ClustersDataSource } from '@/app/data-planes/sources'
 
diff --git a/src/app/connections/views/ConnectionInboundSummaryOverviewView.vue b/src/app/connections/views/ConnectionInboundSummaryOverviewView.vue
index d5ca172e1..be053ffc2 100644
--- a/src/app/connections/views/ConnectionInboundSummaryOverviewView.vue
+++ b/src/app/connections/views/ConnectionInboundSummaryOverviewView.vue
@@ -32,11 +32,11 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               :appearance="props.data.state === 'Ready' ? 'success' : 'danger'"
             >
               {{ t(`http.api.value.${props.data.state}`) }}
-            </KBadge>
+            </XBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard layout="horizontal">
@@ -45,11 +45,11 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               appearance="info"
             >
               {{ t(`http.api.value.${props.data.protocol}`) }}
-            </KBadge>
+            </XBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard layout="horizontal">
@@ -184,7 +184,7 @@
                               </dt>
                               <dd class="mt-2">
                                 <div>
-                                  <CodeBlock
+                                  <XCodeBlock
                                     :code="YAML.stringify(item.raw)"
                                     language="yaml"
                                     :show-copy-button="false"
@@ -211,7 +211,6 @@
 import { YAML } from '@/app/application'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import TagList from '@/app/common/TagList.vue'
diff --git a/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
index bcb6eb42c..32cdbcf48 100644
--- a/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
+++ b/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -30,7 +30,7 @@
           ].some(prefix => item.startsWith(prefix)) && (!item.includes('.rds.') || item.includes(`_${props.data.port}`))"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}.`, '').replace(`${props.data.name}.`, '')).join('\n')"
             is-searchable
@@ -51,7 +51,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -61,7 +61,6 @@
 import { RefreshIcon } from '@kong/icons'
 
 import { StatsSource } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'
 
 const props = defineProps<{
diff --git a/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue b/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
index fa0d6939d..951f94da2 100644
--- a/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
+++ b/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.startsWith(`${route.params.connection}::`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${route.params.connection}::`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -55,6 +55,5 @@
 <script lang="ts" setup>
 import { RefreshIcon } from '@kong/icons'
 
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { ClustersDataSource } from '@/app/data-planes/sources'
 </script>
diff --git a/src/app/connections/views/ConnectionOutboundSummaryOverviewView.vue b/src/app/connections/views/ConnectionOutboundSummaryOverviewView.vue
index 24ffd1cde..3286e65ce 100644
--- a/src/app/connections/views/ConnectionOutboundSummaryOverviewView.vue
+++ b/src/app/connections/views/ConnectionOutboundSummaryOverviewView.vue
@@ -24,11 +24,11 @@
             </template>
 
             <template #body>
-              <KBadge
+              <XBadge
                 appearance="info"
               >
                 {{ t(`http.api.value.${['grpc', 'http', 'tcp'].find(protocol => typeof props.data[protocol] !== 'undefined')}`) }}
-              </KBadge>
+              </XBadge>
             </template>
           </DefinitionCard>
           <div
@@ -123,7 +123,7 @@
                                       </DataCollection>
                                     </template>
                                   </DefinitionCard>
-                                  <CodeBlock
+                                  <XCodeBlock
                                     class="mt-2"
                                     :code="YAML.stringify(item.raw)"
                                     language="yaml"
@@ -233,7 +233,7 @@
                                         </dt>
                                         <dd class="mt-2">
                                           <div>
-                                            <CodeBlock
+                                            <XCodeBlock
                                               :code="YAML.stringify(item.raw)"
                                               language="yaml"
                                               :show-copy-button="false"
@@ -264,7 +264,6 @@
 import { YAML } from '@/app/application'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import type { DataplaneOverview } from '@/app/data-planes/data/'
diff --git a/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
index 3b3e19228..ad6a6c60d 100644
--- a/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
+++ b/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.includes(`.${route.params.connection}.`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map((item) => item.replace(`${route.params.connection}.`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -56,7 +56,6 @@
 import { RefreshIcon } from '@kong/icons'
 
 import { StatsSource } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneOverview } from '@/app/data-planes/data/'
 const props = defineProps<{
   dataplaneOverview: DataplaneOverview
diff --git a/src/app/data-planes/components/BuiltinGatewayPolicies.vue b/src/app/data-planes/components/BuiltinGatewayPolicies.vue
index d8f8896d2..117462fbd 100644
--- a/src/app/data-planes/components/BuiltinGatewayPolicies.vue
+++ b/src/app/data-planes/components/BuiltinGatewayPolicies.vue
@@ -81,12 +81,12 @@
                         v-if="routeEntry.origins.length > 0"
                         class="badge-list"
                       >
-                        <KBadge
+                        <XBadge
                           v-for="(policy, policyIndex) in routeEntry.origins"
                           :key="`${index}-${policyIndex}`"
                         >
                           {{ policy.type }}
-                        </KBadge>
+                        </XBadge>
                       </div>
                     </div>
                   </template>
diff --git a/src/app/data-planes/views/DataPlaneClustersView.vue b/src/app/data-planes/views/DataPlaneClustersView.vue
index 8aa9715f2..ea04fba57 100644
--- a/src/app/data-planes/views/DataPlaneClustersView.vue
+++ b/src/app/data-planes/views/DataPlaneClustersView.vue
@@ -20,7 +20,7 @@
           :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -40,13 +40,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/data-planes/views/DataPlaneConfigView.vue b/src/app/data-planes/views/DataPlaneConfigView.vue
index 3ff784316..1326f3db6 100644
--- a/src/app/data-planes/views/DataPlaneConfigView.vue
+++ b/src/app/data-planes/views/DataPlaneConfigView.vue
@@ -58,5 +58,5 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
diff --git a/src/app/data-planes/views/DataPlaneDetailView.vue b/src/app/data-planes/views/DataPlaneDetailView.vue
index 040709141..d579c54b3 100644
--- a/src/app/data-planes/views/DataPlaneDetailView.vue
+++ b/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -277,14 +277,14 @@
                   v-if="traffic"
                   #actions
                 >
-                  <KInputSwitch
+                  <XInputSwitch
                     v-model="route.params.inactive"
                     data-testid="dataplane-outbounds-inactive-toggle"
                   >
                     <template #label>
                       Show inactive
                     </template>
-                  </KInputSwitch>
+                  </XInputSwitch>
 
                   <KButton
                     appearance="primary"
@@ -489,14 +489,14 @@
             <template
               v-else
             >
-              <KAlert
+              <XAlert
                 class="mt-4"
                 appearance="warning"
               >
                 <div
                   v-html="t('data-planes.routes.item.mtls.disabled')"
                 />
-              </KAlert>
+              </XAlert>
             </template>
           </div>
 
diff --git a/src/app/data-planes/views/DataPlanePolicySummaryView.vue b/src/app/data-planes/views/DataPlanePolicySummaryView.vue
index c1736a24a..30cdfb6be 100644
--- a/src/app/data-planes/views/DataPlanePolicySummaryView.vue
+++ b/src/app/data-planes/views/DataPlanePolicySummaryView.vue
@@ -72,9 +72,9 @@
 </template>
 
 <script lang="ts" setup>
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import PolicySummary from '@/app/policies/components/PolicySummary.vue'
 import { PolicySource } from '@/app/policies/sources'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
 
 <style scoped>
diff --git a/src/app/data-planes/views/DataPlaneStatsView.vue b/src/app/data-planes/views/DataPlaneStatsView.vue
index 7393e922c..2eedcbf6c 100644
--- a/src/app/data-planes/views/DataPlaneStatsView.vue
+++ b/src/app/data-planes/views/DataPlaneStatsView.vue
@@ -20,7 +20,7 @@
           :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/stats/${props.data.dataplane.networking.inboundAddress}`"
           v-slot="{ data: statsData, refresh }: StatsSource"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="statsData!.raw"
             is-searchable
@@ -40,7 +40,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
@@ -52,7 +52,6 @@ import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import { RefreshIcon } from '@kong/icons'
 
 import type { DataplaneOverview } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { StatsSource } from '@/app/connections/sources'
 
 const props = defineProps<{
diff --git a/src/app/data-planes/views/DataPlaneSummaryView.vue b/src/app/data-planes/views/DataPlaneSummaryView.vue
index b4ee4d0f6..bf6bbf9d9 100644
--- a/src/app/data-planes/views/DataPlaneSummaryView.vue
+++ b/src/app/data-planes/views/DataPlaneSummaryView.vue
@@ -240,19 +240,19 @@
                           </template>
 
                           <template #body>
-                            <KBadge
+                            <XBadge
                               v-if="inbound.state === 'Ready'"
                               appearance="success"
                             >
                               {{ t(`http.api.value.${inbound.state}`) }}
-                            </KBadge>
+                            </XBadge>
 
-                            <KBadge
+                            <XBadge
                               v-else
                               appearance="danger"
                             >
                               {{ t(`http.api.value.${inbound.state}`) }}
-                            </KBadge>
+                            </XBadge>
                           </template>
                         </DefinitionCard>
 
diff --git a/src/app/data-planes/views/DataPlaneXdsConfigView.vue b/src/app/data-planes/views/DataPlaneXdsConfigView.vue
index 45946486a..61cb43bd8 100644
--- a/src/app/data-planes/views/DataPlaneXdsConfigView.vue
+++ b/src/app/data-planes/views/DataPlaneXdsConfigView.vue
@@ -25,7 +25,7 @@
           })"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="JSON.stringify(data, null, 2)"
             is-searchable
@@ -37,7 +37,7 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KCheckbox
+              <XCheckbox
                 v-model="route.params.includeEds"
                 label="Include Endpoints"
               />
@@ -49,7 +49,7 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
@@ -58,6 +58,4 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-
 </script>
diff --git a/src/app/diagnostics/views/DiagnosticsDetailView.vue b/src/app/diagnostics/views/DiagnosticsDetailView.vue
index bdb8563d9..3b6283113 100644
--- a/src/app/diagnostics/views/DiagnosticsDetailView.vue
+++ b/src/app/diagnostics/views/DiagnosticsDetailView.vue
@@ -31,7 +31,7 @@
           :src="uri(sources, `/config`, {})"
           v-slot="{ data }"
         >
-          <CodeBlock
+          <XCodeBlock
             data-testid="code-block-diagnostics"
             language="json"
             :code="JSON.stringify(data, null, 2)"
@@ -49,6 +49,5 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import { sources } from '@/app/control-planes/sources'
 </script>
diff --git a/src/app/external-services/views/ExternalServiceDetailView.vue b/src/app/external-services/views/ExternalServiceDetailView.vue
index 408f6bd11..2a87ffd10 100644
--- a/src/app/external-services/views/ExternalServiceDetailView.vue
+++ b/src/app/external-services/views/ExternalServiceDetailView.vue
@@ -88,8 +88,8 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import TagList from '@/app/common/TagList.vue'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
diff --git a/src/app/gateways/components/ListenerRoutes.vue b/src/app/gateways/components/ListenerRoutes.vue
index 9e7fee5d7..7500da223 100644
--- a/src/app/gateways/components/ListenerRoutes.vue
+++ b/src/app/gateways/components/ListenerRoutes.vue
@@ -27,9 +27,11 @@
                 @click="triggerAction"
               >
                 <div class="listener-card-header">
-                  <KBadge appearance="info">
+                  <XBadge
+                    appearance="info"
+                  >
                     {{ t(`http.api.value.${listener.protocol}`) }}
-                  </KBadge>
+                  </XBadge>
 
                   <RouterLink
                     :to="{
@@ -106,7 +108,9 @@
                           {{ t('builtin-gateways.detail.type') }}:
                         </dt>
                         <dd>
-                          <KBadge>{{ toRule.type }}</KBadge>
+                          <XBadge>
+                            {{ toRule.type }}
+                          </XBadge>
                         </dd>
                       </div>
 
@@ -139,7 +143,7 @@
                         </dt>
                         <dd>
                           <div class="list">
-                            <KBadge
+                            <XBadge
                               v-for="(origin, originIndex) in toRule.origins"
                               :key="originIndex"
                             >
@@ -155,7 +159,7 @@
                               >
                                 {{ origin.name }}
                               </RouterLink>
-                            </KBadge>
+                            </XBadge>
                           </div>
                         </dd>
                       </div>
diff --git a/src/app/gateways/views/BuiltinGatewayConfigView.vue b/src/app/gateways/views/BuiltinGatewayConfigView.vue
index 603ba67c3..7470c987b 100644
--- a/src/app/gateways/views/BuiltinGatewayConfigView.vue
+++ b/src/app/gateways/views/BuiltinGatewayConfigView.vue
@@ -59,5 +59,5 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
diff --git a/src/app/kuma/components/ApplicationShell.vue b/src/app/kuma/components/ApplicationShell.vue
index c0678649a..029ac78e7 100644
--- a/src/app/kuma/components/ApplicationShell.vue
+++ b/src/app/kuma/components/ApplicationShell.vue
@@ -30,7 +30,7 @@
               v-slot="{ data }"
             >
               <!-- make sure we have data but don't show errors or loaders -->
-              <KAlert
+              <XAlert
                 v-if="data && env('KUMA_VERSION') !== data.version"
                 class="upgrade-alert"
                 data-testid="upgrade-check"
@@ -48,7 +48,7 @@
                     Update
                   </KButton>
                 </div>
-              </KAlert>
+              </XAlert>
             </DataSource>
           </div>
         </slot>
@@ -60,7 +60,7 @@
           <div
             class="app-status app-status--mobile"
           >
-            <KPop
+            <XPop
               width="280"
             >
               <KButton
@@ -74,7 +74,7 @@
                   {{ t('common.product.name') }} <b>{{ env('KUMA_VERSION') }}</b> on <b>{{ t(`common.product.environment.${env('KUMA_ENVIRONMENT')}`) }}</b> ({{ t(`common.product.mode.${env('KUMA_MODE')}`) }})
                 </p>
               </template>
-            </KPop>
+            </XPop>
           </div>
 
           <p class="app-status app-status--desktop">
@@ -153,7 +153,7 @@
         <slot
           name="notifications"
         >
-          <KAlert
+          <XAlert
             v-if="!can('use state')"
             class="mb-4"
             appearance="warning"
@@ -164,7 +164,7 @@
                 v-html="t('common.warnings.GLOBAL_STORE_TYPE_MEMORY')"
               />
             </ul>
-          </KAlert>
+          </XAlert>
         </slot>
         <slot name="default" />
       </main>
diff --git a/src/app/meshes/components/MeshStatus.vue b/src/app/meshes/components/MeshStatus.vue
index 73270ac48..04b181b44 100644
--- a/src/app/meshes/components/MeshStatus.vue
+++ b/src/app/meshes/components/MeshStatus.vue
@@ -35,12 +35,12 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               v-if="!props.mesh.mtlsBackend"
               appearance="neutral"
             >
               {{ t('meshes.detail.disabled') }}
-            </KBadge>
+            </XBadge>
 
             <template v-else>
               {{ props.mesh.mtlsBackend.type }} / {{ props.mesh.mtlsBackend.name }}
diff --git a/src/app/meshes/views/MeshDetailView.vue b/src/app/meshes/views/MeshDetailView.vue
index d0f68587f..21467049f 100644
--- a/src/app/meshes/views/MeshDetailView.vue
+++ b/src/app/meshes/views/MeshDetailView.vue
@@ -23,9 +23,7 @@
         ]"
         :key="missingTLSPolicy"
       >
-        <AppView
-          :docs="t('meshes.href.docs')"
-        >
+        <AppView :docs="t('meshes.href.docs')">
           <template
             v-if="!props.mesh.mtlsBackend || missingTLSPolicy"
             #notifications
@@ -41,13 +39,11 @@
               />
             </ul>
           </template>
-          <div
-            class="stack"
-          >
+          <div class="stack">
             <AppAboutSection
-              :title="t('meshes.routes.item.subtitle', {name: props.mesh.name})"
-              :created="t('common.formats.datetime', {value: Date.parse(props.mesh.creationTime)})"
-              :modified="t('common.formats.datetime', {value: Date.parse(props.mesh.modificationTime)})"
+              :title="t('meshes.routes.item.subtitle', { name: props.mesh.name })"
+              :created="t('common.formats.datetime', { value: Date.parse(props.mesh.creationTime) })"
+              :modified="t('common.formats.datetime', { value: Date.parse(props.mesh.modificationTime) })"
             >
               <div class="columns">
                 <template
@@ -74,11 +70,11 @@
                       </template>
 
                       <template #body>
-                        <KBadge
+                        <XBadge
                           appearance="neutral"
                         >
                           {{ enabled ? t('meshes.detail.enabled') : t('meshes.detail.disabled') }}
-                        </KBadge>
+                        </XBadge>
                       </template>
                     </DefinitionCard>
                   </template>
@@ -122,12 +118,12 @@
                     </template>
 
                     <template #body>
-                      <KBadge
+                      <XBadge
                         v-if="!props.mesh.mtlsBackend"
                         appearance="neutral"
                       >
                         {{ t('meshes.detail.disabled') }}
-                      </KBadge>
+                      </XBadge>
 
                       <template v-else>
                         {{ props.mesh.mtlsBackend.type }} / {{ props.mesh.mtlsBackend.name }}
@@ -168,9 +164,9 @@ import { AppAboutSection } from '@kong-ui-public/app-layout'
 
 import type { Mesh } from '../data'
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import ResourceStatus from '@/app/common/ResourceStatus.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 
 const props = defineProps<{
   mesh: Mesh
diff --git a/src/app/onboarding/components/OnboardingAlert.vue b/src/app/onboarding/components/OnboardingAlert.vue
index eaddd2944..283e4ae4c 100644
--- a/src/app/onboarding/components/OnboardingAlert.vue
+++ b/src/app/onboarding/components/OnboardingAlert.vue
@@ -7,7 +7,7 @@
       :src="`/me/-onboarding-alert`"
       v-slot="{ submit }"
     >
-      <KAlert
+      <XAlert
         v-if="data?.closed !== true"
         appearance="success"
         dismissible
@@ -34,7 +34,7 @@
             {{ t('main-overview.detail.onboarding.get_started_link') }}
           </KButton>
         </div>
-      </KAlert>
+      </XAlert>
     </DataSink>
   </DataSource>
 </template>
diff --git a/src/app/onboarding/views/OnboardingAddNewServicesCodeView.vue b/src/app/onboarding/views/OnboardingAddNewServicesCodeView.vue
index 7ff1e80e4..76d45b140 100644
--- a/src/app/onboarding/views/OnboardingAddNewServicesCodeView.vue
+++ b/src/app/onboarding/views/OnboardingAddNewServicesCodeView.vue
@@ -29,7 +29,7 @@
             <template v-if="can('use kubernetes')">
               <p>To run execute the following command:</p>
 
-              <CodeBlock
+              <XCodeBlock
                 language="bash"
                 :code="t('onboarding.routes.add-services-code.k8s')"
               />
@@ -43,7 +43,7 @@
                 >the GitHub repository</a> for the demo application:
               </p>
 
-              <CodeBlock
+              <XCodeBlock
                 language="bash"
                 :code="`git clone ${t('onboarding.routes.add-services-code.repo')}`"
               />
@@ -106,7 +106,6 @@ import LoadingBox from '../components/LoadingBox.vue'
 import OnboardingHeading from '../components/OnboardingHeading.vue'
 import OnboardingNavigation from '../components/OnboardingNavigation.vue'
 import OnboardingPage from '../components/OnboardingPage.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneOverviewCollectionSource } from '@/app/data-planes/sources'
 </script>
 
diff --git a/src/app/policies/components/PolicySummary.vue b/src/app/policies/components/PolicySummary.vue
index 2afdac808..ce42e3eac 100644
--- a/src/app/policies/components/PolicySummary.vue
+++ b/src/app/policies/components/PolicySummary.vue
@@ -16,18 +16,18 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               v-if="props.policy.spec.targetRef"
               appearance="neutral"
             >
               {{ props.policy.spec.targetRef.kind }}<span v-if="props.policy.spec.targetRef.name">:<b>{{ props.policy.spec.targetRef.name }}</b></span>
-            </KBadge>
-            <KBadge
+            </XBadge>
+            <XBadge
               v-else
               appearance="neutral"
             >
               Mesh
-            </KBadge>
+            </XBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard
diff --git a/src/app/policies/components/PolicyTypeEntryList.vue b/src/app/policies/components/PolicyTypeEntryList.vue
index cb6400c3e..450507c84 100644
--- a/src/app/policies/components/PolicyTypeEntryList.vue
+++ b/src/app/policies/components/PolicyTypeEntryList.vue
@@ -95,7 +95,7 @@
 
             <template #config="{ row }: { row: PolicyTypeEntryConnection, rowKey: number }">
               <template v-if="row.config">
-                <CodeBlock
+                <XCodeBlock
                   :code="YAML.stringify(row.config)"
                   language="yaml"
                   :show-copy-button="false"
@@ -118,7 +118,6 @@
 import { YAML } from '@/app/application'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import TagList from '@/app/common/TagList.vue'
 import type { PolicyType, PolicyTypeEntry, PolicyTypeEntryConnection } from '@/types/index.d'
diff --git a/src/app/policies/views/PolicyDetailConfigView.vue b/src/app/policies/views/PolicyDetailConfigView.vue
index 7478bceac..11866de62 100644
--- a/src/app/policies/views/PolicyDetailConfigView.vue
+++ b/src/app/policies/views/PolicyDetailConfigView.vue
@@ -49,7 +49,7 @@
 <script lang="ts" setup>
 import type { Policy } from '../data'
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 const props = defineProps<{
   data: Policy
 }>()
diff --git a/src/app/policies/views/PolicyDetailView.vue b/src/app/policies/views/PolicyDetailView.vue
index a4559b035..acce6a882 100644
--- a/src/app/policies/views/PolicyDetailView.vue
+++ b/src/app/policies/views/PolicyDetailView.vue
@@ -72,18 +72,18 @@
             </template>
 
             <template #body>
-              <KBadge
+              <XBadge
                 v-if="props.data.spec.targetRef"
                 appearance="neutral"
               >
                 {{ props.data.spec.targetRef.kind }}<span v-if="props.data.spec.targetRef.name">:<b>{{ props.data.spec.targetRef.name }}</b></span>
-              </KBadge>
-              <KBadge
+              </XBadge>
+              <XBadge
                 v-else
                 appearance="neutral"
               >
                 Mesh
-              </KBadge>
+              </XBadge>
             </template>
           </DefinitionCard>
         </div>
diff --git a/src/app/policies/views/PolicyListView.vue b/src/app/policies/views/PolicyListView.vue
index f2f08c41f..b01972618 100644
--- a/src/app/policies/views/PolicyListView.vue
+++ b/src/app/policies/views/PolicyListView.vue
@@ -26,26 +26,26 @@
             <KCard>
               <header>
                 <div>
-                  <KBadge
+                  <XBadge
                     v-if="type.isExperimental"
                     appearance="warning"
                   >
                     {{ t('policies.collection.beta') }}
-                  </KBadge>
+                  </XBadge>
 
-                  <KBadge
+                  <XBadge
                     v-if="type.isInbound"
                     appearance="neutral"
                   >
                     {{ t('policies.collection.inbound') }}
-                  </KBadge>
+                  </XBadge>
 
-                  <KBadge
+                  <XBadge
                     v-if="type.isOutbound"
                     appearance="neutral"
                   >
                     {{ t('policies.collection.outbound') }}
-                  </KBadge>
+                  </XBadge>
 
                   <XAction
                     action="docs"
@@ -188,18 +188,18 @@
                         </template>
 
                         <template #targetRef="{ row }">
-                          <KBadge
+                          <XBadge
                             v-if="typeof row.spec?.targetRef !== 'undefined'"
                             appearance="neutral"
                           >
                             {{ row.spec.targetRef.kind }}<span v-if="row.spec.targetRef.name">:<b>{{ row.spec.targetRef.name }}</b></span>
-                          </KBadge>
-                          <KBadge
+                          </XBadge>
+                          <XBadge
                             v-else
                             appearance="neutral"
                           >
                             Mesh
-                          </KBadge>
+                          </XBadge>
                         </template>
 
                         <template #zone="{ row }">
diff --git a/src/app/policies/views/PolicySummaryView.vue b/src/app/policies/views/PolicySummaryView.vue
index c2e137b8b..85288c995 100644
--- a/src/app/policies/views/PolicySummaryView.vue
+++ b/src/app/policies/views/PolicySummaryView.vue
@@ -92,7 +92,7 @@
 <script lang="ts" setup>
 import PolicySummary from '../components/PolicySummary.vue'
 import type { Policy, PolicyType } from '../data'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 
 const props = defineProps<{
   items: Policy[]
diff --git a/src/app/rules/components/RuleFilter.vue b/src/app/rules/components/RuleFilter.vue
index 8b601c7b7..bc3bfa911 100644
--- a/src/app/rules/components/RuleFilter.vue
+++ b/src/app/rules/components/RuleFilter.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="filter">
-    <KBadge appearance="neutral">
+    <XBadge appearance="neutral">
       {{ props.filter.type }}
-    </KBadge>
+    </XBadge>
 
     <div>
       <template v-if="props.filter.type === 'RequestHeaderModifier'">
diff --git a/src/app/rules/components/RuleList.vue b/src/app/rules/components/RuleList.vue
index 420deb341..38c2ee2df 100644
--- a/src/app/rules/components/RuleList.vue
+++ b/src/app/rules/components/RuleList.vue
@@ -88,7 +88,7 @@
 
                 <template #config="{ row }">
                   <template v-if="Object.keys(row.raw).length > 0">
-                    <CodeBlock
+                    <XCodeBlock
                       :code="YAML.stringify(row.raw)"
                       language="yaml"
                       :show-copy-button="false"
@@ -113,7 +113,6 @@ import { useI18n, YAML } from '@/app/application'
 import AppCollection from '@/app/application/components/app-collection/AppCollection.vue'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import RuleMatchers from '@/app/rules/components/RuleMatchers.vue'
 import type { Rule } from '@/app/rules/data'
diff --git a/src/app/rules/components/RuleMatch.vue b/src/app/rules/components/RuleMatch.vue
index bfbaff0ef..7b9003c66 100644
--- a/src/app/rules/components/RuleMatch.vue
+++ b/src/app/rules/components/RuleMatch.vue
@@ -3,13 +3,13 @@
     <template v-if="props.match.method">
       <div class="match">
         <dt>
-          <KBadge appearance="neutral">
+          <XBadge appearance="neutral">
             Method
-          </KBadge>
+          </XBadge>
         </dt>
 
         <dd>
-          <KBadge>{{ props.match.method }}</KBadge>
+          <XBadge>{{ props.match.method }}</XBadge>
         </dd>
       </div>
     </template>
@@ -17,9 +17,9 @@
     <template v-if="props.match.path">
       <div class="match">
         <dt>
-          <KBadge appearance="neutral">
+          <XBadge appearance="neutral">
             Path
-          </KBadge>
+          </XBadge>
         </dt>
 
         <dd>
@@ -36,9 +36,9 @@
       >
         <div class="match">
           <dt>
-            <KBadge appearance="neutral">
+            <XBadge appearance="neutral">
               QueryParameter
-            </KBadge>
+            </XBadge>
           </dt>
 
           <dd>
@@ -58,9 +58,9 @@
         class="match"
       >
         <dt>
-          <KBadge appearance="neutral">
+          <XBadge appearance="neutral">
             Header
-          </KBadge>
+          </XBadge>
         </dt>
 
         <dd>
diff --git a/src/app/services/views/MeshExternalServiceDetailView.vue b/src/app/services/views/MeshExternalServiceDetailView.vue
index 2c1d3406c..c21aa3fb6 100644
--- a/src/app/services/views/MeshExternalServiceDetailView.vue
+++ b/src/app/services/views/MeshExternalServiceDetailView.vue
@@ -17,11 +17,15 @@
             <DefinitionCard
               v-if="props.data.namespace.length > 0"
             >
-              <template #title>
+              <template
+                #title
+              >
                 Namespace
               </template>
 
-              <template #body>
+              <template
+                #body
+              >
                 {{ props.data.namespace }}
               </template>
             </DefinitionCard>
@@ -77,11 +81,11 @@
               <template
                 #body
               >
-                <KBadge
+                <XBadge
                   appearance="neutral"
                 >
                   {{ data.spec.tls?.enabled ? 'Enabled' : 'Disabled' }}
-                </KBadge>
+                </XBadge>
               </template>
             </DefinitionCard>
           </div>
@@ -115,8 +119,8 @@
 
 <script lang="ts" setup>
 import type { MeshExternalService } from '../data'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 
 const props = defineProps<{
   data: MeshExternalService
diff --git a/src/app/services/views/MeshExternalServiceSummaryView.vue b/src/app/services/views/MeshExternalServiceSummaryView.vue
index 2fee361b8..d101344c1 100644
--- a/src/app/services/views/MeshExternalServiceSummaryView.vue
+++ b/src/app/services/views/MeshExternalServiceSummaryView.vue
@@ -47,11 +47,15 @@
                 v-if="item.namespace.length > 0"
                 layout="horizontal"
               >
-                <template #title>
+                <template
+                  #title
+                >
                   Namespace
                 </template>
 
-                <template #body>
+                <template
+                  #body
+                >
                   {{ item.namespace }}
                 </template>
               </DefinitionCard>
@@ -83,22 +87,16 @@
                 v-if="item.spec.match"
                 layout="horizontal"
               >
-                <template
-                  #title
-                >
+                <template #title>
                   Port
                 </template>
-                <template
-                  #body
-                >
+                <template #body>
                   <KumaPort
                     :port="item.spec.match"
                   />
                 </template>
               </DefinitionCard>
-              <DefinitionCard
-                layout="horizontal"
-              >
+              <DefinitionCard layout="horizontal">
                 <template
                   #title
                 >
@@ -107,11 +105,11 @@
                 <template
                   #body
                 >
-                  <KBadge
+                  <XBadge
                     appearance="neutral"
                   >
                     {{ item.spec.tls?.enabled ? 'Enabled' : 'Disabled' }}
-                  </KBadge>
+                  </XBadge>
                 </template>
               </DefinitionCard>
             </div>
@@ -153,9 +151,9 @@
 </template>
 
 <script lang="ts" setup>
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import type { MeshExternalService } from '@/app/services/data'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 const props = defineProps<{
   items: MeshExternalService[]
 }>()
diff --git a/src/app/services/views/MeshMultiZoneServiceDetailView.vue b/src/app/services/views/MeshMultiZoneServiceDetailView.vue
index f2f68ed65..8b6bd0b57 100644
--- a/src/app/services/views/MeshMultiZoneServiceDetailView.vue
+++ b/src/app/services/views/MeshMultiZoneServiceDetailView.vue
@@ -47,13 +47,13 @@
                 #body
               >
                 <KTruncate>
-                  <KBadge
+                  <XBadge
                     v-for="(value, key) in data.spec.selector.meshService.matchLabels"
                     :key="`${key}:${value}`"
                     appearance="info"
                   >
                     {{ key }}:{{ value }}
-                  </KBadge>
+                  </XBadge>
                 </KTruncate>
               </template>
             </DefinitionCard>
@@ -91,8 +91,8 @@
 
 <script lang="ts" setup>
 import type { MeshMultiZoneService } from '../data'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 
 const props = defineProps<{
   data: MeshMultiZoneService
diff --git a/src/app/services/views/MeshMultiZoneServiceListView.vue b/src/app/services/views/MeshMultiZoneServiceListView.vue
index 88388e453..416445594 100644
--- a/src/app/services/views/MeshMultiZoneServiceListView.vue
+++ b/src/app/services/views/MeshMultiZoneServiceListView.vue
@@ -87,13 +87,13 @@
                   #labels="{ row: item }"
                 >
                   <KTruncate>
-                    <KBadge
+                    <XBadge
                       v-for="(value, key) in item.spec.selector.meshService.matchLabels"
                       :key="`${key}:${value}`"
                       appearance="info"
                     >
                       {{ key }}:{{ value }}
-                    </KBadge>
+                    </XBadge>
                   </KTruncate>
                 </template>
                 <template #actions="{ row: item }">
diff --git a/src/app/services/views/MeshMultiZoneServiceSummaryView.vue b/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
index a45cff4dc..b7d24991a 100644
--- a/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
+++ b/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
@@ -78,13 +78,13 @@
                   #body
                 >
                   <KTruncate>
-                    <KBadge
+                    <XBadge
                       v-for="(value, key) in item.spec.selector.meshService.matchLabels"
                       :key="`${key}:${value}`"
                       appearance="info"
                     >
                       {{ key }}:{{ value }}
-                    </KBadge>
+                    </XBadge>
                   </KTruncate>
                 </template>
               </DefinitionCard>
@@ -127,9 +127,9 @@
 </template>
 
 <script lang="ts" setup>
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import type { MeshMultiZoneService } from '@/app/services/data'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 const props = defineProps<{
   items: MeshMultiZoneService[]
 }>()
diff --git a/src/app/services/views/MeshServiceConfigView.vue b/src/app/services/views/MeshServiceConfigView.vue
index ce95137e3..a5901ddfb 100644
--- a/src/app/services/views/MeshServiceConfigView.vue
+++ b/src/app/services/views/MeshServiceConfigView.vue
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import type { MeshService } from '../data'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 const props = defineProps<{
   data: MeshService
 }>()
diff --git a/src/app/services/views/MeshServiceDetailView.vue b/src/app/services/views/MeshServiceDetailView.vue
index d49c8523f..2d4bb15d5 100644
--- a/src/app/services/views/MeshServiceDetailView.vue
+++ b/src/app/services/views/MeshServiceDetailView.vue
@@ -26,11 +26,11 @@
               </template>
 
               <template #body>
-                <KBadge
+                <XBadge
                   :appearance="props.data.spec.state === 'Available' ? 'success' : 'danger'"
                 >
                   {{ props.data.spec.state }}
-                </KBadge>
+                </XBadge>
               </template>
             </DefinitionCard>
             <DefinitionCard
@@ -98,13 +98,13 @@
                 #body
               >
                 <KTruncate>
-                  <KBadge
+                  <XBadge
                     v-for="(value, key) in data.spec.selector.dataplaneTags"
                     :key="`${key}:${value}`"
                     appearance="info"
                   >
                     {{ key }}:{{ value }}
-                  </KBadge>
+                  </XBadge>
                 </KTruncate>
               </template>
             </DefinitionCard>
diff --git a/src/app/services/views/MeshServiceListView.vue b/src/app/services/views/MeshServiceListView.vue
index e2a7b4202..e2ea247ab 100644
--- a/src/app/services/views/MeshServiceListView.vue
+++ b/src/app/services/views/MeshServiceListView.vue
@@ -99,11 +99,11 @@
                 <template
                   #state="{ row: item }"
                 >
-                  <KBadge
+                  <XBadge
                     :appearance="item.spec.state === 'Available' ? 'success' : 'danger'"
                   >
                     {{ item.spec.state }}
-                  </KBadge>
+                  </XBadge>
                 </template>
                 <template
                   #status="{ row: item }"
diff --git a/src/app/services/views/MeshServiceSummaryView.vue b/src/app/services/views/MeshServiceSummaryView.vue
index 7a9362573..ef614b13c 100644
--- a/src/app/services/views/MeshServiceSummaryView.vue
+++ b/src/app/services/views/MeshServiceSummaryView.vue
@@ -18,7 +18,9 @@
         #item="{ item }"
       >
         <AppView>
-          <template #title>
+          <template
+            #title
+          >
             <h2>
               <XAction
                 :to="{
@@ -54,11 +56,11 @@
                 <template
                   #body
                 >
-                  <KBadge
+                  <XBadge
                     :appearance="item.spec.state === 'Available' ? 'success' : 'danger'"
                   >
                     {{ item.spec.state }}
-                  </KBadge>
+                  </XBadge>
                 </template>
               </DefinitionCard>
               <DefinitionCard
@@ -137,9 +139,7 @@
                   </KTruncate>
                 </template>
               </DefinitionCard>
-              <DefinitionCard
-                layout="horizontal"
-              >
+              <DefinitionCard layout="horizontal">
                 <template
                   #title
                 >
@@ -149,13 +149,13 @@
                   #body
                 >
                   <KTruncate>
-                    <KBadge
+                    <XBadge
                       v-for="(value, key) in item.spec.selector.dataplaneTags"
                       :key="`${key}:${value}`"
                       appearance="info"
                     >
                       {{ key }}:{{ value }}
-                    </KBadge>
+                    </XBadge>
                   </KTruncate>
                 </template>
               </DefinitionCard>
@@ -198,9 +198,9 @@
 </template>
 
 <script lang="ts" setup>
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import type { MeshService } from '@/app/services/data'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 const props = defineProps<{
   items: MeshService[]
 }>()
diff --git a/src/app/subscriptions/components/SubscriptionDetails.vue b/src/app/subscriptions/components/SubscriptionDetails.vue
index 756c31b4c..3f1c72b63 100644
--- a/src/app/subscriptions/components/SubscriptionDetails.vue
+++ b/src/app/subscriptions/components/SubscriptionDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="stack">
-    <KAlert
+    <XAlert
       v-if="statuses.length === 0"
       appearance="info"
     >
@@ -9,7 +9,7 @@
       </template>
 
       {{ t('common.detail.subscriptions.no_stats', { id: props.subscription.id }) }}
-    </KAlert>
+    </XAlert>
 
     <template v-else>
       <div>
@@ -50,7 +50,6 @@
 
 <script lang="ts" setup>
 import { PortalIcon } from '@kong/icons'
-import { KAlert } from '@kong/kongponents'
 import { PropType, computed } from 'vue'
 
 import { useI18n } from '@/app/application'
diff --git a/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue b/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue
index 9bc474492..02209fe24 100644
--- a/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue
+++ b/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue
@@ -16,7 +16,7 @@
       </template>
 
       <KCard>
-        <CodeBlock
+        <XCodeBlock
           language="yaml"
           :code="YAML.stringify(props.data)"
           is-searchable
@@ -34,7 +34,6 @@
 
 <script lang="ts" setup>
 import { YAML } from '@/app/application'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { KDSSubscription } from '@/app/zones/data'
 const props = defineProps<{
   data: KDSSubscription
diff --git a/src/app/common/code-block/README.md b/src/app/x/components/x-code-block/README.md
similarity index 100%
rename from src/app/common/code-block/README.md
rename to src/app/x/components/x-code-block/README.md
diff --git a/src/app/common/code-block/ResourceCodeBlock.vue b/src/app/x/components/x-code-block/ResourceCodeBlock.vue
similarity index 97%
rename from src/app/common/code-block/ResourceCodeBlock.vue
rename to src/app/x/components/x-code-block/ResourceCodeBlock.vue
index 693c7d773..92c8deb30 100644
--- a/src/app/common/code-block/ResourceCodeBlock.vue
+++ b/src/app/x/components/x-code-block/ResourceCodeBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CodeBlock
+    <XCodeBlock
       language="yaml"
       :code="yamlUniversal"
       :is-searchable="props.isSearchable"
@@ -43,14 +43,13 @@
           </XCopyButton>
         </XDisclosure>
       </template>
-    </CodeBlock>
+    </XCodeBlock>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import CodeBlock from './CodeBlock.vue'
 import { useI18n, YAML } from '@/app/application'
 
 type Resolve = (data: Object) => void
diff --git a/src/app/common/code-block/CodeBlock.vue b/src/app/x/components/x-code-block/XCodeBlock.vue
similarity index 100%
rename from src/app/common/code-block/CodeBlock.vue
rename to src/app/x/components/x-code-block/XCodeBlock.vue
diff --git a/src/app/common/code-block/highlightElement.spec.ts b/src/app/x/components/x-code-block/highlightElement.spec.ts
similarity index 100%
rename from src/app/common/code-block/highlightElement.spec.ts
rename to src/app/x/components/x-code-block/highlightElement.spec.ts
diff --git a/src/app/common/code-block/highlightElement.ts b/src/app/x/components/x-code-block/highlightElement.ts
similarity index 100%
rename from src/app/common/code-block/highlightElement.ts
rename to src/app/x/components/x-code-block/highlightElement.ts
diff --git a/src/app/x/index.ts b/src/app/x/index.ts
index 2275415d1..902aa57b3 100644
--- a/src/app/x/index.ts
+++ b/src/app/x/index.ts
@@ -1,9 +1,10 @@
-import Kongponents, { KCard, KBadge } from '@kong/kongponents'
+import Kongponents, { KCard, KPop, KInputSwitch, KAlert, KCheckbox } from '@kong/kongponents'
 
 import XAction from './components/x-action/XAction.vue'
 import XActionGroup from './components/x-action-group/XActionGroup.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'
 import XCopyButton from './components/x-copy-button/XCopyButton.vue'
 import XDisclosure from './components/x-disclosure/XDisclosure.vue'
 import XEmptyState from './components/x-empty-state/XEmptyState.vue'
@@ -23,13 +24,19 @@ type Token = ReturnType<typeof token>
 
 declare module 'vue' {
   export interface GlobalComponents {
+    XCard: typeof KCard
+    XPop: typeof KPop
+    XInputSwitch: typeof KInputSwitch
+    XCheckbox: typeof KCheckbox
+    //
     XIcon: typeof XIcon
     XInput: typeof XInput
     XAction: typeof XAction
+    XAlert: typeof KAlert
     XActionGroup: typeof XActionGroup
-    XCard: typeof KCard
-    XBadge: typeof KBadge
+    XBadge: typeof XBadge
     XCopyButton: typeof XCopyButton
+    XCodeBlock: typeof XCodeBlock
     XBreadcrumbs: typeof XBreadcrumbs
     XEmptyState: typeof XEmptyState
     XPrompt: typeof XPrompt
@@ -61,16 +68,22 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     [$.xVueComponents, {
       service: () => {
         return [
+          ['XCard', KCard],
+          ['XPop', KPop],
+          ['XInputSwitch', KInputSwitch],
+          ['XCheckbox', KCheckbox],
+          //
           ['XAction', XAction],
           ['XActionGroup', XActionGroup],
           ['XBadge', XBadge],
           ['XBreadcrumbs', XBreadcrumbs],
-          ['XCard', KCard],
           ['XCopyButton', XCopyButton],
+          ['XCodeBlock', XCodeBlock],
           ['XEmptyState', XEmptyState],
           ['XIcon', XIcon],
           ['XInput', XInput],
           ['XPrompt', XPrompt],
+          ['XAlert', KAlert],
           ['XProvider', XProvider],
           ['XSelect', XSelect],
           ['XTabs', XTabs],
diff --git a/src/app/zone-egresses/views/ZoneEgressClustersView.vue b/src/app/zone-egresses/views/ZoneEgressClustersView.vue
index eb33d7108..690204605 100644
--- a/src/app/zone-egresses/views/ZoneEgressClustersView.vue
+++ b/src/app/zone-egresses/views/ZoneEgressClustersView.vue
@@ -19,7 +19,7 @@
           :src="`/zone-egresses/${route.params.zoneEgress}/data-path/clusters`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -39,13 +39,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/zone-egresses/views/ZoneEgressConfigView.vue b/src/app/zone-egresses/views/ZoneEgressConfigView.vue
index 65a11f693..97ddcdd50 100644
--- a/src/app/zone-egresses/views/ZoneEgressConfigView.vue
+++ b/src/app/zone-egresses/views/ZoneEgressConfigView.vue
@@ -55,5 +55,5 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
diff --git a/src/app/zone-egresses/views/ZoneEgressStatsView.vue b/src/app/zone-egresses/views/ZoneEgressStatsView.vue
index 1ac326eb4..8d01a3f81 100644
--- a/src/app/zone-egresses/views/ZoneEgressStatsView.vue
+++ b/src/app/zone-egresses/views/ZoneEgressStatsView.vue
@@ -19,7 +19,7 @@
           :src="`/zone-egresses/${route.params.zoneEgress}/data-path/stats`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -39,13 +39,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/zone-egresses/views/ZoneEgressXdsConfigView.vue b/src/app/zone-egresses/views/ZoneEgressXdsConfigView.vue
index 23d033ce1..48921af45 100644
--- a/src/app/zone-egresses/views/ZoneEgressXdsConfigView.vue
+++ b/src/app/zone-egresses/views/ZoneEgressXdsConfigView.vue
@@ -23,7 +23,7 @@
           })"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="JSON.stringify(data, null, 2)"
             is-searchable
@@ -35,7 +35,7 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KCheckbox
+              <XCheckbox
                 v-model="route.params.includeEds"
                 label="Include Endpoints"
               />
@@ -47,7 +47,7 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
@@ -56,5 +56,4 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 </script>
diff --git a/src/app/zone-ingresses/views/ZoneIngressClustersView.vue b/src/app/zone-ingresses/views/ZoneIngressClustersView.vue
index aae679ed1..85f7d74ee 100644
--- a/src/app/zone-ingresses/views/ZoneIngressClustersView.vue
+++ b/src/app/zone-ingresses/views/ZoneIngressClustersView.vue
@@ -19,7 +19,7 @@
           :src="`/zone-ingresses/${route.params.zoneIngress}/data-path/clusters`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -39,13 +39,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/zone-ingresses/views/ZoneIngressConfigView.vue b/src/app/zone-ingresses/views/ZoneIngressConfigView.vue
index 7792bd4cc..ce5dba3e9 100644
--- a/src/app/zone-ingresses/views/ZoneIngressConfigView.vue
+++ b/src/app/zone-ingresses/views/ZoneIngressConfigView.vue
@@ -55,5 +55,5 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>
diff --git a/src/app/zone-ingresses/views/ZoneIngressStatsView.vue b/src/app/zone-ingresses/views/ZoneIngressStatsView.vue
index 00d503601..75332f2f6 100644
--- a/src/app/zone-ingresses/views/ZoneIngressStatsView.vue
+++ b/src/app/zone-ingresses/views/ZoneIngressStatsView.vue
@@ -19,7 +19,7 @@
           :src="`/zone-ingresses/${route.params.zoneIngress}/data-path/stats`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -39,13 +39,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/zone-ingresses/views/ZoneIngressXdsConfigView.vue b/src/app/zone-ingresses/views/ZoneIngressXdsConfigView.vue
index 16acced29..d3a6a43d6 100644
--- a/src/app/zone-ingresses/views/ZoneIngressXdsConfigView.vue
+++ b/src/app/zone-ingresses/views/ZoneIngressXdsConfigView.vue
@@ -23,7 +23,7 @@
           })"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="JSON.stringify(data, null, 2)"
             is-searchable
@@ -35,7 +35,7 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KCheckbox
+              <XCheckbox
                 v-model="route.params.includeEds"
                 label="Include Endpoints"
               />
@@ -47,7 +47,7 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
@@ -56,5 +56,4 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 </script>
diff --git a/src/app/zones/views/ZoneConfigView.vue b/src/app/zones/views/ZoneConfigView.vue
index c43a810b3..d5f0cec86 100644
--- a/src/app/zones/views/ZoneConfigView.vue
+++ b/src/app/zones/views/ZoneConfigView.vue
@@ -40,7 +40,7 @@
         </template>
 
         <KCard>
-          <CodeBlock
+          <XCodeBlock
             v-if="Object.keys(props.data.zoneInsight.config).length > 0"
             language="json"
             :code="JSON.stringify(props.data.zoneInsight.config, null, 2)"
@@ -53,14 +53,14 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           />
 
-          <KAlert
+          <XAlert
             v-else
             class="mt-4"
             data-testid="warning-no-subscriptions"
             appearance="warning"
           >
             {{ t('zone-cps.detail.no_subscriptions') }}
-          </KAlert>
+          </XAlert>
         </KCard>
       </AppView>
     </DataSource>
@@ -69,7 +69,6 @@
 
 <script lang="ts" setup>
 import type { ZoneOverview } from '../data'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import { sources } from '@/app/control-planes/sources'
 const props = defineProps<{
   data: ZoneOverview