diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index 6271cfd0..f941bb37 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -122,7 +122,7 @@ const communityLinks = computed(() => [{
       </template>
 
       <template #title>
-        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
+        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
       </template>
 
       <template #description>
diff --git a/docs/app/pages/components.vue b/docs/app/pages/components.vue
index 26dcec9d..6e06aaeb 100644
--- a/docs/app/pages/components.vue
+++ b/docs/app/pages/components.vue
@@ -131,9 +131,9 @@ const categories = [{
             :ui="{ wrapper: 'order-last', container: 'lg:flex' }"
           >
             <template #title>
-              <div class="flex items-center gap-1.5">
+              <div class="flex items-center gap-0.5">
                 <span>{{ component.title }}</span>
-                <UBadge v-if="component.module === 'ui-pro'" label="PRO" size="sm" variant="subtle" />
+                <sup v-if="component.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
               </div>
             </template>