diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/5.navigation/1.vertical-navigation.md
index 6a8f35a9..ca490870 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/5.navigation/1.vertical-navigation.md
@@ -16,7 +16,7 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
 - `icon` - The icon of the link.
 - `iconClass` - The class of the link icon.
 - `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
-- `badge` - A badge to display next to the label.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
 - `click` - The click handler of the link.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 5a767003..f1bec11d 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -34,9 +34,16 @@
             </span>
           </slot>
           <slot name="badge" :link="link" :is-active="isActive">
-            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-              {{ link.badge }}
-            </span>
+            <UBadge
+              v-if="link.badge"
+              v-bind="{
+                size: ui.badge.size,
+                color: ui.badge.color,
+                variant: ui.badge.variant,
+                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
+              }"
+              :class="ui.badge.base"
+            />
           </slot>
         </ULink>
       </li>
@@ -51,6 +58,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
@@ -66,6 +74,7 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
+    UBadge,
     ULink,
     UDivider
   },
diff --git a/src/runtime/types/vertical-navigation.d.ts b/src/runtime/types/vertical-navigation.d.ts
index e358908f..852484fb 100644
--- a/src/runtime/types/vertical-navigation.d.ts
+++ b/src/runtime/types/vertical-navigation.d.ts
@@ -1,5 +1,6 @@
 import type { Link } from './link'
 import type { Avatar } from './avatar'
+import type { Badge } from './badge'
 
 export interface VerticalNavigationLink extends Link {
   label: string
@@ -8,5 +9,5 @@ export interface VerticalNavigationLink extends Link {
   iconClass?: string
   avatar?: Avatar
   click?: Function
-  badge?: string | number
+  badge?: string | number | Badge
 }
diff --git a/src/runtime/ui.config/navigation/verticalNavigation.ts b/src/runtime/ui.config/navigation/verticalNavigation.ts
index 838ae63b..577546e9 100644
--- a/src/runtime/ui.config/navigation/verticalNavigation.ts
+++ b/src/runtime/ui.config/navigation/verticalNavigation.ts
@@ -20,9 +20,10 @@ export default {
     size: '3xs' as const
   },
   badge: {
-    base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
-    active: 'bg-white dark:bg-gray-900',
-    inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
+    base: 'flex-shrink-0 ml-auto relative rounded',
+    color: 'gray' as const,
+    variant: 'solid' as const,
+    size: 'xs' as const
   },
   divider: {
     wrapper: {