diff --git a/content/1.getting-started/3.writing/2.pages.md b/content/1.getting-started/3.writing/2.pages.md
index 3116d874..ff083172 100644
--- a/content/1.getting-started/3.writing/2.pages.md
+++ b/content/1.getting-started/3.writing/2.pages.md
@@ -12,6 +12,14 @@ icon: lucide:book-type
 navBadges:
   - value: New
     type: lime
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#alert
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
+    target: _blank
 ---
 
 <!-- Content of the page -->
@@ -35,6 +43,9 @@ navBadges:
   ::field{name="navBadges" type="[]"}
   A list of badges appended to the end of the sidebar link.
   ::
+  ::field{name="badges" type="[]"}
+  A list of badges shown at the bottom of page title.
+  ::
   ::field{name="toc" type="boolean" default-value="true"}
   Whether to show the toc section for this page.
   ::
diff --git a/content/2.components/2.docs/alert.md b/content/2.components/2.docs/alert.md
index ee148f2f..0f32f5a5 100644
--- a/content/2.components/2.docs/alert.md
+++ b/content/2.components/2.docs/alert.md
@@ -1,9 +1,15 @@
 ---
 icon: lucide:triangle-alert
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#alert
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
+    target: _blank
 ---
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::alert{icon="lucide:info"}
diff --git a/content/2.components/2.docs/badge.md b/content/2.components/2.docs/badge.md
index b76401e0..49256944 100644
--- a/content/2.components/2.docs/badge.md
+++ b/content/2.components/2.docs/badge.md
@@ -1,10 +1,16 @@
 ---
 title: Badge
 icon: lucide:badge
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#badge
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
+    target: _blank
 ---
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#badge" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::badge
diff --git a/content/2.components/2.docs/button-link.md b/content/2.components/2.docs/button-link.md
index 88955564..ef8ca41c 100644
--- a/content/2.components/2.docs/button-link.md
+++ b/content/2.components/2.docs/button-link.md
@@ -4,11 +4,17 @@ icon: lucide:external-link
 navBadges:
   - value: New
     type: lime
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#buttonlink
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
+    target: _blank
+  - value: 0.6.5
 ---
 
-:badge[0.6.5]{variant="outline"}
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#buttonlink" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4 flex gap-4"}
     :button-link[Get Started]{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
diff --git a/content/2.components/2.docs/callout.md b/content/2.components/2.docs/callout.md
index e41cd83c..5e51bc0d 100644
--- a/content/2.components/2.docs/callout.md
+++ b/content/2.components/2.docs/callout.md
@@ -1,10 +1,16 @@
 ---
 title: Callout
 icon: lucide:megaphone
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/callout
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
+    target: _blank
 ---
 
-:badge[* Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout" target="_blank"}
-
 ::alert{to="/components/alert"}
 `::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
 ::
diff --git a/content/2.components/2.docs/card-group.md b/content/2.components/2.docs/card-group.md
index 73e23e11..156661bd 100644
--- a/content/2.components/2.docs/card-group.md
+++ b/content/2.components/2.docs/card-group.md
@@ -1,10 +1,16 @@
 ---
 title: Card Group
 icon: lucide:layout-grid
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/card-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
+    target: _blank
 ---
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card-group" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::card-group
diff --git a/content/2.components/2.docs/card.md b/content/2.components/2.docs/card.md
index 2380420c..149dafdc 100644
--- a/content/2.components/2.docs/card.md
+++ b/content/2.components/2.docs/card.md
@@ -1,11 +1,19 @@
 ---
 title: Card
 icon: lucide:square
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/card
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#card
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Card.vue
+    target: _blank
 ---
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#card" target="_blank"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::card
diff --git a/content/2.components/2.docs/code-group.md b/content/2.components/2.docs/code-group.md
index 882e8d41..46eab412 100644
--- a/content/2.components/2.docs/code-group.md
+++ b/content/2.components/2.docs/code-group.md
@@ -1,11 +1,19 @@
 ---
 title: Code Group
 icon: lucide:code-xml
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/code-group
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#codegroup
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
+    target: _blank
 ---
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#codegroup" target="_blank"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/code-group" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::code-group
diff --git a/content/2.components/2.docs/field-group.md b/content/2.components/2.docs/field-group.md
index 5285d8fe..a0f217f3 100644
--- a/content/2.components/2.docs/field-group.md
+++ b/content/2.components/2.docs/field-group.md
@@ -1,10 +1,16 @@
 ---
 title: Field Group
 icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
+    target: _blank
 ---
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field-group" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::field-group
diff --git a/content/2.components/2.docs/field.md b/content/2.components/2.docs/field.md
index b7a05d0e..5ce177a6 100644
--- a/content/2.components/2.docs/field.md
+++ b/content/2.components/2.docs/field.md
@@ -1,10 +1,16 @@
 ---
 title: Field
 icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
+    target: _blank
 ---
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::field{name="Field" type="string" defaultValue="'default'" required}
diff --git a/content/2.components/2.docs/icon.md b/content/2.components/2.docs/icon.md
index 02de17ac..22024189 100644
--- a/content/2.components/2.docs/icon.md
+++ b/content/2.components/2.docs/icon.md
@@ -1,10 +1,16 @@
 ---
 title: Icon
 icon: lucide:star
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#icon
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
+    target: _blank
 ---
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#icon" target="_blank"}
-
 ::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
 The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
 ::
diff --git a/content/2.components/2.docs/read-more.md b/content/2.components/2.docs/read-more.md
index e673e599..dcb103c4 100644
--- a/content/2.components/2.docs/read-more.md
+++ b/content/2.components/2.docs/read-more.md
@@ -1,10 +1,16 @@
 ---
 title: Read More
 icon: lucide:bookmark
+badges:
+  - value: undocs
+    to: https://undocs.pages.dev/guide/components#read-more
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
+    target: _blank
 ---
 
-:badge[undocs]{variant="outline" to="https://undocs.pages.dev/guide/components#read-more" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     :read-more{to="/getting-started/writing/markdown"}
diff --git a/content/2.components/2.docs/shortcut.md b/content/2.components/2.docs/shortcut.md
index 756b8344..9d1114ba 100644
--- a/content/2.components/2.docs/shortcut.md
+++ b/content/2.components/2.docs/shortcut.md
@@ -1,11 +1,17 @@
 ---
 title: Shortcut
 icon: lucide:keyboard
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/shortcut
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Shortcut.vue
+    target: _blank
+  - value: 0.6.3
 ---
 
-:badge[0.6.3]{variant="outline"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/shortcut" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     :shortcut{value="meta"} :shortcut{value="K"} :br
diff --git a/content/2.components/2.docs/stack.md b/content/2.components/2.docs/stack.md
index 1e3af513..81b49248 100644
--- a/content/2.components/2.docs/stack.md
+++ b/content/2.components/2.docs/stack.md
@@ -4,10 +4,14 @@ icon: lucide:rows-3
 navBadges:
   - value: New
     type: lime
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
+    target: _blank
+  - value: 0.6.2
 ---
 
-:badge[0.6.2]{variant="outline"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::stack
diff --git a/content/2.components/2.docs/steps.md b/content/2.components/2.docs/steps.md
index 87899eaf..649f225c 100644
--- a/content/2.components/2.docs/steps.md
+++ b/content/2.components/2.docs/steps.md
@@ -1,6 +1,11 @@
 ---
 title: Steps
 icon: lucide:arrow-down-0-1
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
+    target: _blank
 ---
 
 ::code-group
diff --git a/content/2.components/2.docs/tabs.md b/content/2.components/2.docs/tabs.md
index de4fab28..173bc1ce 100644
--- a/content/2.components/2.docs/tabs.md
+++ b/content/2.components/2.docs/tabs.md
@@ -1,10 +1,16 @@
 ---
 title: Tabs
 icon: lucide:table-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/tabs
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
+    target: _blank
 ---
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/tabs" target="_blank"}
-
 #### Default Style
 
 ::code-group
diff --git a/content/2.components/3.page/accordion.md b/content/2.components/3.page/accordion.md
index 6435a7c6..8ee091b3 100644
--- a/content/2.components/3.page/accordion.md
+++ b/content/2.components/3.page/accordion.md
@@ -1,10 +1,14 @@
 ---
 title: Accordion
 icon: lucide:layout-list
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Accordion.vue
+    target: _blank
+  - value: 0.5.0
 ---
 
-:badge[0.5.0]{variant="outline"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::accordion{default-value="first-item" collapsible}
diff --git a/content/2.components/3.page/collapsible.md b/content/2.components/3.page/collapsible.md
index 109f00fc..b4bed476 100644
--- a/content/2.components/3.page/collapsible.md
+++ b/content/2.components/3.page/collapsible.md
@@ -1,14 +1,19 @@
 ---
 title: Collapsible
 icon: lucide:list-collapse
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/collapsible
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Collapsible.vue
+    target: _blank
+  - value: 0.5.8
 ---
 
-:badge[0.5.8]{variant="outline"}
-
 #### Simple
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout" target="_blank"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::collapsible
diff --git a/content/2.components/3.page/hero-alt.md b/content/2.components/3.page/hero-alt.md
index 24961166..a09d0a77 100644
--- a/content/2.components/3.page/hero-alt.md
+++ b/content/2.components/3.page/hero-alt.md
@@ -1,10 +1,14 @@
 ---
 title: HeroAlt
 icon: lucide:align-left
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/HeroAlt.vue
+    target: _blank
+  - value: 0.4.0
 ---
 
-:badge[0.4.0]{variant="outline"}
-
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::hero-alt
diff --git a/content/2.components/3.page/hero.md b/content/2.components/3.page/hero.md
index 54c8e3ea..d9898b52 100644
--- a/content/2.components/3.page/hero.md
+++ b/content/2.components/3.page/hero.md
@@ -1,6 +1,11 @@
 ---
 title: Hero
 icon: lucide:align-center
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Hero.vue
+    target: _blank
 ---
 
 ::code-group
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ac6006b1..3d0f3a36 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -47,6 +47,7 @@ export default defineNuxtConfig({
       fields: [
         'icon',
         'navBadges',
+        'badges',
         'toc',
         'sidebar',
       ],
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 8c8e6b9a..ce51e7fd 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -19,13 +19,27 @@
     <div class="mx-auto w-full min-w-0">
       <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb" class="mb-4" />
 
-      <div v-if="config.main.showTitle" class="mb-6 space-y-2">
+      <div v-if="config.main.showTitle" class="mb-6">
         <ProseH1>
           {{ page?.title }}
         </ProseH1>
-        <p class="text-lg text-muted-foreground">
+        <p class="pt-1 text-lg text-muted-foreground">
           {{ page?.description }}
         </p>
+
+        <div class="flex gap-2 pt-4">
+          <NuxtLink
+            v-for="(badge, i) in page?.badges"
+            :key="i"
+            :to="badge.to"
+            :target="badge.target"
+          >
+            <UiBadge :variant="badge.variant || 'secondary'" :type="badge.type" class="gap-1 rounded-md">
+              {{ badge.value }}
+              <SmartIcon v-if="badge.to || badge.icon" :size="12" :name="badge.icon || 'lucide:external-link'" />
+            </UiBadge>
+          </NuxtLink>
+        </div>
       </div>
 
       <Alert