diff --git a/docs/.vitepress/components/DocFooter.vue b/docs/.vitepress/components/DocFooter.vue
index e4a1bb66d..36808b4b4 100644
--- a/docs/.vitepress/components/DocFooter.vue
+++ b/docs/.vitepress/components/DocFooter.vue
@@ -85,15 +85,16 @@ const showFooter = computed(
           class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
           :class="[
             'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
-            'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
-            'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
+            'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
             'active:scale-98',
             'transition-all duration-200 ease-in-out',
+            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
           ]"
           :href="control.prev.link"
         >
           <span
-            class="text-xs text-muted-foreground transition-all duration-200 ease-in-out group-hover:text-foreground"
+            class="text-xs"
             v-html="theme.docFooter?.prev || t('docs.theme.doc.previous-page.title')"
           />
           <p class="mt-2 inline-flex items-center gap-1">
@@ -111,15 +112,16 @@ const showFooter = computed(
           class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
           :class="[
             'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
-            'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
-            'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
+            'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
             'active:scale-98',
             'transition-all duration-200 ease-in-out',
+            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
           ]"
           :href="control.next.link"
         >
           <span
-            class="text-xs text-muted-foreground transition-all duration-200 ease-in-out group-hover:text-foreground"
+            class="text-xs"
             v-html="theme.docFooter?.next || t('docs.theme.doc.next-page.title')"
           />
 
diff --git a/docs/.vitepress/components/DocSidebar.vue b/docs/.vitepress/components/DocSidebar.vue
index 94ea2c2d1..28c78eb53 100644
--- a/docs/.vitepress/components/DocSidebar.vue
+++ b/docs/.vitepress/components/DocSidebar.vue
@@ -24,7 +24,7 @@ defineProps<{
     >
       <CollapsibleTrigger
         :class="[
-          'group w-full inline-flex items-center justify-between py-1 pl-4 pr-4 text-sm font-bold',
+          'group w-full inline-flex items-center justify-between py-1 pl-3 pr-3 text-sm font-bold',
           'hover:bg-neutral/15 rounded-lg',
         ]"
       >
@@ -37,7 +37,7 @@ defineProps<{
       </CollapsibleTrigger>
       <CollapsibleContent
         :class="[
-          'overflow-hidden mt-1 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
+          'overflow-hidden mt-0.5 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
         ]"
       >
         <DocSidebarItem
diff --git a/docs/.vitepress/components/DocSidebarItem.vue b/docs/.vitepress/components/DocSidebarItem.vue
index 275007da8..98d0881fb 100644
--- a/docs/.vitepress/components/DocSidebarItem.vue
+++ b/docs/.vitepress/components/DocSidebarItem.vue
@@ -32,7 +32,7 @@ watch(isActiveLink, () => {
   >
     <a
       :href="item.link"
-      class="h-[2.15rem] w-full inline-flex items-center px-4"
+      class="min-h-[2.15rem] w-full inline-flex items-center px-3 py-0.5"
       v-html="item.text"
     />
   </div>
diff --git a/docs/.vitepress/components/DocTopbar.vue b/docs/.vitepress/components/DocTopbar.vue
index 76b8adf43..0b4f74e6f 100644
--- a/docs/.vitepress/components/DocTopbar.vue
+++ b/docs/.vitepress/components/DocTopbar.vue
@@ -20,17 +20,20 @@ const isSidebarOpen = ref(false)
 const sidebar = computed(() => (theme.value.sidebar as (DefaultTheme.SidebarItem & { icon?: string })[]))
 
 const sectionTabs = computed(() => sidebar.value
-  .map(val => ({
-    label: val.text,
-    link: flatten(val.items ?? [], 'items').filter(i => !!i?.link)?.[0]?.link,
-    icon: val.icon,
-  }))
+  .map((val) => {
+    return {
+      label: val.text,
+      link: flatten(val.items ?? [], 'items').filter(i => !!i?.link)?.[0]?.link ?? val.link,
+      icon: val.icon,
+    }
+  })
   .filter(i => !!i?.link),
 )
 
 function isCharacterPage(link?: string) {
   if (!link)
     return false
+
   return link.includes('/characters') || link.includes('/characters/')
 }
 
@@ -49,6 +52,8 @@ watch(path, () => {
   >
     <div class="hidden h-full items-center justify-between md:flex">
       <div class="h-full flex items-center">
+        <div />
+
         <a
           v-for="tab in sectionTabs.filter(i => !isCharacterPage(i.link))"
           :key="tab.label"