diff --git a/docs-v3/.data/content/contents.sqlite b/docs-v3/.data/content/contents.sqlite
index f3903b935..08d8f028c 100644
Binary files a/docs-v3/.data/content/contents.sqlite and b/docs-v3/.data/content/contents.sqlite differ
diff --git a/docs-v3/components/MobileSidebarOverlay.vue b/docs-v3/components/MobileSidebarOverlay.vue
index 7dda5704a..c6aa25e87 100644
--- a/docs-v3/components/MobileSidebarOverlay.vue
+++ b/docs-v3/components/MobileSidebarOverlay.vue
@@ -13,7 +13,7 @@
         @click.stop
         @touchmove.stop
       >
-        <div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div class="sticky top-0 z-10 flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 bg-white dark:bg-gray-900">
           <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
           <button
             @click.stop="$emit('close')"
diff --git a/docs-v3/components/case-studies/CaseStudiesCta.vue b/docs-v3/components/case-studies/CaseStudiesCta.vue
index 0beb5f77b..8b3afb625 100644
--- a/docs-v3/components/case-studies/CaseStudiesCta.vue
+++ b/docs-v3/components/case-studies/CaseStudiesCta.vue
@@ -14,27 +14,29 @@
         Start your project today and become our next case study.
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <NuxtLink
-          to="/docs"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 font-semibold rounded-xl transition-all duration-300 text-lg shadow-lg shadow-red-500/20 hover:shadow-red-500/30"
+        <AppButton
+          variant="primary"
+          href="/docs"
+          :icon="BookOpenIcon"
+          :is-nuxt-link="true"
+          :external="false"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
           Get Started with Restify
-        </NuxtLink>
-        <a
+        </AppButton>
+        <AppButton
+          variant="secondary"
           href="https://www.binarcode.com/recent-work"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700/50 hover:text-gray-900 dark:hover:text-white font-semibold rounded-xl transition-all duration-300 text-lg backdrop-blur-sm"
+          :icon="BriefcaseIcon"
+          :show-external-icon="true"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3-3 3 3 3-3 3 3V5a2 2 0 00-2-2z" />
-          </svg>
           Recent Projects
-        </a>
+        </AppButton>
       </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { BookOpenIcon, BriefcaseIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
+</script>
diff --git a/docs-v3/components/docs/DocsPagination.vue b/docs-v3/components/docs/DocsPagination.vue
new file mode 100644
index 000000000..7ca9cbaca
--- /dev/null
+++ b/docs-v3/components/docs/DocsPagination.vue
@@ -0,0 +1,58 @@
+<template>
+  <nav
+    v-if="surround && (surround[0] || surround[1])"
+    class="mt-12 pt-6 border-t border-gray-200 dark:border-gray-700"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink
+        v-if="surround[0]"
+        :to="surround[0].path"
+        class="group flex-1 flex items-center gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all"
+      >
+        <ChevronLeftIcon
+          class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+        />
+        <div class="min-w-0">
+          <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Previous</div>
+          <div
+            class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
+          >
+            {{ surround[0].title }}
+          </div>
+        </div>
+      </NuxtLink>
+
+      <div v-else class="flex-1"></div>
+
+      <NuxtLink
+        v-if="surround[1]"
+        :to="surround[1].path"
+        class="group flex-1 flex items-center justify-end gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all text-right"
+      >
+        <div class="min-w-0">
+          <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Next</div>
+          <div
+            class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
+          >
+            {{ surround[1].title }}
+          </div>
+        </div>
+        <ChevronRightIcon
+          class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+        />
+      </NuxtLink>
+
+      <div v-else class="flex-1"></div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+const route = useRoute()
+
+const { data: surround } = await useAsyncData(`surround-${route.path}`, () => {
+  return queryCollectionItemSurroundings('content', route.path)
+})
+</script>
diff --git a/docs-v3/components/docs/DocsSidebar.vue b/docs-v3/components/docs/DocsSidebar.vue
index f1c26ba4e..5553b557a 100644
--- a/docs-v3/components/docs/DocsSidebar.vue
+++ b/docs-v3/components/docs/DocsSidebar.vue
@@ -3,7 +3,7 @@
     <nav class="fixed top-16 left-0 w-64 h-[calc(100vh-4rem)] overflow-y-auto px-4 py-6 bg-gray-50 dark:bg-gray-800/50 border-r border-gray-200 dark:border-gray-700">
       <div class="space-y-6">
         <NavigationSection 
-          v-for="section in docsNavigationSections" 
+          v-for="section in navigationSections" 
           :key="section.title"
           :title="section.title"
           :items="section.items"
@@ -22,7 +22,7 @@
   >
     <div class="space-y-6">
       <NavigationSection 
-        v-for="section in docsNavigationSections" 
+        v-for="section in navigationSections" 
         :key="section.title"
         :title="section.title"
         :items="section.items"
@@ -38,83 +38,30 @@
 <script setup lang="ts">
 const INITIALLY_COLLAPSED = ['Performance', 'Extensions', 'Testing']
 
-const docsNavigationSections = [
-  {
-    title: "Getting Started",
-    items: [
-      { title: "Quick Start", path: "/docs/quickstart" },
-    ]
-  },
-  {
-    title: "Authentication",
-    items: [
-      { title: "Authentication", path: "/docs/auth/authentication" },
-      { title: "Authorization", path: "/docs/auth/authorization" },
-      { title: "Profile Management", path: "/docs/auth/profile" }
-    ]
-  },
-  {
-    title: "API Resources",
-    items: [
-      { title: "Basic Repositories", path: "/docs/api/repositories-basic" },
-      { title: "Repositories", path: "/docs/api/repositories" },
-      { title: "Advanced Repositories", path: "/docs/api/repositories-advanced" },
-      { title: "Repository Generation", path: "/docs/api/repository-generation" },
-      { title: "Fields", path: "/docs/api/fields" },
-      { title: "Relations", path: "/docs/api/relations" },
-      { title: "REST Methods", path: "/docs/api/rest-methods" },
-      { title: "Validation Methods", path: "/docs/api/validation-methods" },
-      { title: "Actions", path: "/docs/api/actions" },
-      { title: "Getters", path: "/docs/api/getters" },
-      { title: "Serializer", path: "/docs/api/serializer" }
-    ]
-  },
-  {
-    title: "Search & Filtering",
-    items: [
-      { title: "Basic Filters", path: "/docs/search/basic-filters" },
-      { title: "Advanced Filters", path: "/docs/search/advanced-filters" },
-      { title: "Sorting", path: "/docs/search/sorting" }
-    ]
-  },
-  {
-    title: "GraphQL",
-    items: [
-      { title: "GraphQL Overview", path: "/docs/graphql/graphql" },
-      { title: "Schema Generation", path: "/docs/graphql/graphql-generation" }
-    ]
-  },
-  {
-    title: "MCP Integration",
-    items: [
-      { title: "MCP Server", path: "/docs/mcp/mcp" },
-      { title: "MCP Repositories", path: "/docs/mcp/repositories" },
-      { title: "MCP Fields", path: "/docs/mcp/fields" },
-      { title: "MCP Getters", path: "/docs/mcp/getters" },
-      { title: "JSON Schema Converter", path: "/docs/mcp/json-schema-converter" },
-      { title: "MCP Actions", path: "/docs/mcp/actions" }
-    ]
-  },
-  {
-    title: "Performance",
-    items: [
-      { title: "Performance Overview", path: "/docs/performance/performance" },
-      { title: "Optimization Solutions", path: "/docs/performance/solutions" }
-    ]
-  },
-  {
-    title: "Extensions",
-    items: [
-      { title: "Boost Package", path: "/docs/boost/boost" }
-    ]
-  },
-  {
-    title: "Testing",
-    items: [
-      { title: "Testing Guide", path: "/docs/testing/testing" }
-    ]
-  }
-]
+// Fetch docs navigation from Nuxt Content
+const { data: navigation } = await useAsyncData('docs-navigation', () => 
+  queryCollectionNavigation('content')
+)
+
+// Transform navigation tree to sidebar format
+const navigationSections = computed(() => {
+  if (!navigation.value) return []
+  
+  // Find the docs section in the navigation
+  const docsNav = navigation.value.find(item => item.path === '/docs')
+  if (!docsNav?.children) return []
+  
+  // Transform each section (folder) into sidebar format
+  return docsNav.children
+    .filter(section => section.children && section.children.length > 0)
+    .map(section => ({
+      title: section.title,
+      items: section.children.map(item => ({
+        title: item.title,
+        path: item.path
+      }))
+    }))
+})
 
 const isMobileMenuOpen = inject('isMobileMenuOpen', ref(false))
 const toggleMobileMenu = inject('toggleMobileMenu', () => {})
diff --git a/docs-v3/components/templates/TemplatesCustomCta.vue b/docs-v3/components/templates/TemplatesCustomCta.vue
index 646326576..682cb258f 100644
--- a/docs-v3/components/templates/TemplatesCustomCta.vue
+++ b/docs-v3/components/templates/TemplatesCustomCta.vue
@@ -5,19 +5,20 @@
       <p class="text-gray-400 mb-6">
         Our team can build a custom Laravel Restify template tailored specifically to your project needs.
       </p>
-      <a
+      <AppButton
+        variant="primary"
+        size="md"
         href="https://www.binarcode.com/estimate-project"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-all duration-200"
+        :icon="WrenchScrewdriverIcon"
+        :show-external-icon="true"
       >
         Get Your Custom Template
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
+      </AppButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import { WrenchScrewdriverIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
 </script>
diff --git a/docs-v3/components/templates/TemplatesHeader.vue b/docs-v3/components/templates/TemplatesHeader.vue
index e7b4c8bd7..bc0661b1a 100644
--- a/docs-v3/components/templates/TemplatesHeader.vue
+++ b/docs-v3/components/templates/TemplatesHeader.vue
@@ -8,28 +8,29 @@
     </p>
     
     <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
-      <a
+      <AppButton
+        variant="primary"
+        size="md"
         href="https://restifytemplates.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-all duration-200"
+        :icon="RocketLaunchIcon"
+        :show-external-icon="true"
       >
         Browse All Templates
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
-      <a
+      </AppButton>
+      <AppButton
+        variant="secondary"
+        size="md"
         href="https://www.binarcode.com/estimate-project"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 font-medium rounded-lg transition-all duration-200"
+        :icon="WrenchScrewdriverIcon"
+        :show-external-icon="true"
       >
-        Get Your Custom Template
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
+        Get Custom Template
+      </AppButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import { RocketLaunchIcon, WrenchScrewdriverIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
 </script>
diff --git a/docs-v3/components/ui/AppButton.vue b/docs-v3/components/ui/AppButton.vue
new file mode 100644
index 000000000..46b18539d
--- /dev/null
+++ b/docs-v3/components/ui/AppButton.vue
@@ -0,0 +1,64 @@
+<template>
+  <NuxtLink
+    v-if="isNuxtLink"
+    :to="href"
+    :class="buttonClasses"
+  >
+    <div v-if="variant === 'primary'" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+    <component v-if="icon" :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
+    <span class="relative z-10"><slot /></span>
+    <ArrowTopRightOnSquareIcon v-if="showExternalIcon && !isNuxtLink" class="relative z-10 w-4 h-4 ml-1" />
+  </NuxtLink>
+  <a
+    v-else
+    :href="href"
+    :target="external ? '_blank' : undefined"
+    :rel="external ? 'noopener noreferrer' : undefined"
+    :class="buttonClasses"
+  >
+    <div v-if="variant === 'primary'" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+    <component v-if="icon" :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
+    <span class="relative z-10"><slot /></span>
+  </a>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+
+type ButtonVariant = 'primary' | 'secondary'
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  href: string
+  icon?: Component
+  isNuxtLink?: boolean
+  external?: boolean
+  showExternalIcon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'lg',
+  isNuxtLink: false,
+  external: true,
+  showExternalIcon: false
+})
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'px-4 py-2 text-sm min-h-[40px]',
+  md: 'px-5 py-3 text-base min-h-[48px]',
+  lg: 'px-6 sm:px-8 py-4 text-base sm:text-lg min-h-[56px]'
+}
+
+const BASE_CLASSES = 'cursor-pointer group relative inline-flex items-center justify-center gap-3 font-semibold rounded-full overflow-hidden transition-all duration-300 hover:scale-105'
+
+const VARIANT_STYLES: Record<ButtonVariant, string> = {
+  primary: 'text-white bg-gradient-to-r from-blue-500 to-cyan-600 hover:shadow-2xl hover:shadow-blue-500/25',
+  secondary: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 backdrop-blur-sm hover:bg-gray-200 dark:hover:bg-white/10 hover:border-gray-400 dark:hover:border-white/20'
+}
+
+const buttonClasses = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[props.size]} ${VARIANT_STYLES[props.variant]}`)
+</script>
diff --git a/docs-v3/components/ui/AppLogo.vue b/docs-v3/components/ui/AppLogo.vue
new file mode 100644
index 000000000..6b4d911c1
--- /dev/null
+++ b/docs-v3/components/ui/AppLogo.vue
@@ -0,0 +1,28 @@
+<template>
+  <NuxtLink v-if="linkable" to="/" class="flex items-center group">
+    <span class="text-2xl font-bold tracking-tight">
+      <span class="bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-white dark:via-gray-200 dark:to-white bg-clip-text text-transparent drop-shadow-sm">
+        Laravel Restify
+      </span>
+      <span class="inline-block w-2 h-2 ml-0.5 mb-1 rounded-full bg-gradient-to-br from-red-500 to-red-600 shadow-lg shadow-red-500/50 group-hover:shadow-red-500/70 group-hover:scale-110 transition-all duration-300"></span>
+    </span>
+  </NuxtLink>
+  <div v-else class="flex items-center">
+    <span class="text-2xl font-bold tracking-tight">
+      <span class="bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-white dark:via-gray-200 dark:to-white bg-clip-text text-transparent drop-shadow-sm">
+        Laravel Restify
+      </span>
+      <span class="inline-block w-2 h-2 ml-0.5 mb-1 rounded-full bg-gradient-to-br from-red-500 to-red-600 shadow-lg shadow-red-500/50"></span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  linkable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  linkable: false
+})
+</script>
diff --git a/docs-v3/components/website/ContributorsSection.vue b/docs-v3/components/website/ContributorsSection.vue
index ab8623445..4e9fc1b9d 100644
--- a/docs-v3/components/website/ContributorsSection.vue
+++ b/docs-v3/components/website/ContributorsSection.vue
@@ -20,7 +20,7 @@
           <div class="absolute right-0 top-0 z-10 w-16 h-full bg-gradient-to-l from-white/80 dark:from-gray-900/80 to-transparent pointer-events-none"></div>
           
           <div class="flex animate-scroll-left space-x-4">
-            <div class="flex space-x-4 shrink-0">
+            <div class="flex space-x-4 shrink-0 p-1">
               <ContributorAvatar
                 v-for="contributor in contributors"
                 :key="contributor.username"
@@ -29,7 +29,7 @@
                 :contributions="contributor.contributions"
               />
             </div>
-            <div class="flex space-x-4 shrink-0">
+            <div class="flex space-x-4 shrink-0 p-1">
               <ContributorAvatar
                 v-for="contributor in contributors"
                 :key="`dup-${contributor.username}`"
@@ -46,7 +46,7 @@
             href="https://github.com/BinarCode/laravel-restify/graphs/contributors"
             target="_blank"
             rel="noopener noreferrer"
-            class="inline-flex items-center text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 font-medium transition-colors group"
+            class="inline-flex items-center text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 font-medium transition-colors group"
           >
             View All Contributors
             <ArrowRightIcon class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
diff --git a/docs-v3/components/website/CtaSection.vue b/docs-v3/components/website/CtaSection.vue
index 78e6a3089..1b51d12ad 100644
--- a/docs-v3/components/website/CtaSection.vue
+++ b/docs-v3/components/website/CtaSection.vue
@@ -58,29 +58,30 @@
               Explore the source code and contribute
             </p>
             <div class="bg-black/30 rounded-lg p-3 font-mono text-sm">
-              <span class="text-gray-500">$</span> <span class="text-green-400">git clone</span> <span class="text-cyan-400">{{ GIT_COMMAND }}</span>
+              <span class="text-gray-500">$</span> <span class="text-green-400">{{ GIT_COMMAND }}</span>
             </div>
           </div>
         </TerminalWindow>
       </div>
 
       <div class="flex flex-col sm:flex-row gap-4 justify-center px-4 md:px-0">
-        <HeroButton
-          type="primary"
+        <AppButton
+          variant="primary"
           href="/docs"
           :icon="BoltIcon"
           :is-nuxt-link="true"
+          :external="false"
         >
           Start Building
-        </HeroButton>
+        </AppButton>
 
-        <HeroButton
+        <AppButton
+          variant="secondary"
           href="https://github.com/binaryk/laravel-restify"
-          type="secondary"
           :icon="CodeBracketIcon"
         >
           Explore Code
-        </HeroButton>
+        </AppButton>
       </div>
     </div>
   </section>
@@ -92,7 +93,7 @@ import {
   CloudArrowDownIcon, 
   CodeBracketIcon
 } from '@heroicons/vue/24/outline'
-import HeroButton from './HeroButton.vue'
+import AppButton from '~/components/ui/AppButton.vue'
 import TerminalWindow from './TerminalWindow.vue'
 
 const COMPOSER_COMMAND = 'composer require binaryk/laravel-restify'
diff --git a/docs-v3/components/website/HeroButton.vue b/docs-v3/components/website/HeroButton.vue
deleted file mode 100644
index cffda9c19..000000000
--- a/docs-v3/components/website/HeroButton.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <NuxtLink
-    v-if="isNuxtLink"
-    :to="href"
-    :class="buttonClasses"
-  >
-    <div v-if="isPrimary" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-    <component :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
-    <span class="relative z-10"><slot /></span>
-  </NuxtLink>
-  <a
-    v-else
-    :href="href"
-    target="_blank"
-    rel="noopener noreferrer"
-    :class="buttonClasses"
-  >
-    <div v-if="isPrimary" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-    <component :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
-    <span class="relative z-10"><slot /></span>
-  </a>
-</template>
-
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-type ButtonType = 'primary' | 'secondary'
-
-interface Props {
-  type: ButtonType
-  href: string
-  icon: Component
-  isNuxtLink?: boolean
-}
-
-const props = defineProps<Props>()
-
-const isPrimary = computed(() => props.type === 'primary')
-
-const BASE_CLASSES = 'cursor-pointer group relative inline-flex items-center justify-center gap-3 px-6 sm:px-8 py-4 text-base sm:text-lg font-semibold rounded-full overflow-hidden transition-all duration-300 hover:scale-105 min-h-[56px]'
-
-const BUTTON_STYLES: Record<ButtonType, string> = {
-  primary: `${BASE_CLASSES} text-white bg-gradient-to-r from-blue-500 to-cyan-600 hover:shadow-2xl hover:shadow-blue-500/25`,
-  secondary: `${BASE_CLASSES} text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 backdrop-blur-sm hover:bg-gray-200 dark:hover:bg-white/10 hover:border-gray-400 dark:hover:border-white/20`
-}
-
-const buttonClasses = computed(() => BUTTON_STYLES[props.type])
-</script>
\ No newline at end of file
diff --git a/docs-v3/components/website/HeroSection.vue b/docs-v3/components/website/HeroSection.vue
index 4cc0cd515..4e246eb72 100644
--- a/docs-v3/components/website/HeroSection.vue
+++ b/docs-v3/components/website/HeroSection.vue
@@ -52,22 +52,23 @@
 
         <!-- Action Buttons -->
         <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center mt-6 md:mt-8 px-2 md:px-0">
-          <HeroButton
-            type="primary"
+          <AppButton
+            variant="primary"
             href="/docs"
             :icon="BoltIcon"
             :is-nuxt-link="true"
+            :external="false"
           >
             Start Building
-          </HeroButton>
+          </AppButton>
 
-          <HeroButton
-            type="secondary"
+          <AppButton
+            variant="secondary"
             href="https://github.com/binaryk/laravel-restify"
             :icon="CodeBracketIcon"
           >
             Explore Code
-          </HeroButton>
+          </AppButton>
         </div>
       </div>
 
@@ -144,7 +145,8 @@ import {
   ClipboardIcon, 
   CheckIcon 
 } from '@heroicons/vue/24/outline'
-import HeroButton from './HeroButton.vue'
+
+import AppButton from '~/components/ui/AppButton.vue'
 import HeroStat from './HeroStat.vue'
 import CodeSection from './CodeSection.vue'
 
diff --git a/docs-v3/components/website/WebsiteFooter.vue b/docs-v3/components/website/WebsiteFooter.vue
index 0c62bcdf7..73811f87b 100644
--- a/docs-v3/components/website/WebsiteFooter.vue
+++ b/docs-v3/components/website/WebsiteFooter.vue
@@ -4,11 +4,8 @@
       <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
         <!-- Brand and description - spans 2 columns on desktop -->
         <div class="col-span-1 md:col-span-2">
-          <div class="flex items-center space-x-2 mb-4">
-            <div class="w-8 h-8 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center">
-              <span class="text-white font-bold text-lg">R</span>
-            </div>
-            <span class="font-semibold text-xl text-gray-900 dark:text-white">Laravel Restify</span>
+          <div class="mb-4">
+            <AppLogo />
           </div>
           <p class="text-gray-600 dark:text-gray-400 mb-6 max-w-md">
             Build JSON:API compliant REST APIs and MCP servers from your Laravel Eloquent models 
@@ -34,17 +31,23 @@
           <h3 class="font-semibold mb-4 text-gray-900 dark:text-white">Resources</h3>
           <ul class="space-y-3">
             <li v-for="link in resourceLinks" :key="link.label">
-              <component 
-                :is="link.isExternal ? 'a' : 'NuxtLink'"
-                :to="!link.isExternal ? link.href : undefined"
-                :href="link.isExternal ? link.href : undefined"
-                :target="link.isExternal ? '_blank' : undefined"
-                :rel="link.isExternal ? 'noopener noreferrer' : undefined"
+              <NuxtLink 
+                v-if="!link.isExternal"
+                :to="link.href"
                 class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center group"
               >
                 {{ link.label }}
-                <ArrowTopRightOnSquareIcon v-if="link.isExternal" class="w-3 h-3 ml-1 opacity-50 group-hover:opacity-100" />
-              </component>
+              </NuxtLink>
+              <a 
+                v-else
+                :href="link.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center group"
+              >
+                {{ link.label }}
+                <ArrowTopRightOnSquareIcon class="w-3 h-3 ml-1 opacity-50 group-hover:opacity-100" />
+              </a>
             </li>
           </ul>
         </div>
@@ -90,6 +93,7 @@
 
 <script setup lang="ts">
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import AppLogo from '../ui/AppLogo.vue'
 
 const currentYear = new Date().getFullYear()
 
@@ -101,8 +105,8 @@ interface FooterLink {
 
 const resourceLinks: FooterLink[] = [
   { label: 'Documentation', href: '/docs', isExternal: false },
-  { label: 'Getting Started', href: '/docs/quickstart', isExternal: false },
-  { label: 'Changelog', href: 'https://github.com/binarcode/laravel-restify/blob/main/CHANGELOG.md', isExternal: true },
+  { label: 'Getting Started', href: '/docs/getting-started/quickstart', isExternal: false },
+  { label: 'Changelog', href: 'https://github.com/binarcode/laravel-restify/blob/10.x/CHANGELOG.md', isExternal: true },
   { label: 'Releases', href: 'https://github.com/binarcode/laravel-restify/releases', isExternal: true }
 ]
 
diff --git a/docs-v3/components/website/WebsiteNavbar.vue b/docs-v3/components/website/WebsiteNavbar.vue
index 93292d99b..d162d4b5e 100644
--- a/docs-v3/components/website/WebsiteNavbar.vue
+++ b/docs-v3/components/website/WebsiteNavbar.vue
@@ -11,14 +11,9 @@
             <Bars3Icon class="h-6 w-6" />
           </button>
           
-          <NuxtLink to="/" class="flex items-center ml-2 lg:ml-0 group">
-            <span class="text-2xl font-bold tracking-tight">
-              <span class="bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-white dark:via-gray-200 dark:to-white bg-clip-text text-transparent drop-shadow-sm">
-                Laravel Restify
-              </span>
-              <span class="inline-block w-2 h-2 ml-0.5 mb-1 rounded-full bg-gradient-to-br from-red-500 to-red-600 shadow-lg shadow-red-500/50 group-hover:shadow-red-500/70 group-hover:scale-110 transition-all duration-300"></span>
-            </span>
-          </NuxtLink>
+          <div class="ml-2 lg:ml-0">
+            <AppLogo :linkable="true" />
+          </div>
         </div>
 
         <div class="hidden lg:flex lg:items-center lg:space-x-8">
@@ -34,6 +29,10 @@
         </div>
 
         <div class="flex items-center space-x-4">
+          <!-- Mobile search icon (docs only) -->
+          <UContentSearchButton v-if="isDocsPage" class="lg:hidden" :collapsed="true" />
+          
+          <!-- Desktop search with label (docs only) -->
           <div v-if="isDocsPage" class="hidden lg:block">
             <UContentSearchButton label="Search..." :collapsed="false" />
           </div>
@@ -43,6 +42,10 @@
             target="_blank"
             rel="noopener noreferrer"
             class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white rounded-md p-2"
+            :class="{
+              'hidden lg:block': isDocsPage,
+              'block': !isDocsPage
+            }"
             aria-label="GitHub Repository"
           >
             <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
@@ -56,7 +59,7 @@
     </div>
     
     <div
-      v-if="isMobileMenuOpen"
+      v-if="showWebsiteMobileMenu"
       class="lg:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
     >
       <div class="px-2 pt-2 pb-3 space-y-1">
@@ -83,6 +86,7 @@
 
 <script setup lang="ts">
 import { Bars3Icon } from '@heroicons/vue/24/outline'
+import AppLogo from '../ui/AppLogo.vue'
 
 interface NavLink {
   to: string
@@ -98,24 +102,43 @@ const navLinks: NavLink[] = [
 ]
 
 const route = useRoute()
-const isMobileMenuOpen = ref(false)
+
+const injectedMobileMenuOpen = inject<Ref<boolean> | null>('isMobileMenuOpen', null)
+const injectedToggleMobileMenu = inject<(() => void) | null>('toggleMobileMenu', null)
+
+const localMobileMenuOpen = ref(false)
+const isMobileMenuOpen = injectedMobileMenuOpen ?? localMobileMenuOpen
 
 const isDocsPage = computed(() => route.path.startsWith('/docs'))
 
+const showWebsiteMobileMenu = computed(() => isMobileMenuOpen.value && !isDocsPage.value)
+
 function isActiveRoute(path: string): boolean {
   return route.path.startsWith(path)
 }
 
 function toggleMobileMenu(): void {
-  isMobileMenuOpen.value = !isMobileMenuOpen.value
+  if (injectedToggleMobileMenu) {
+    injectedToggleMobileMenu()
+    return
+  }
+
+  localMobileMenuOpen.value = !localMobileMenuOpen.value
 }
 
 function closeMobileMenu(): void {
-  isMobileMenuOpen.value = false
+  if (injectedMobileMenuOpen) {
+    injectedMobileMenuOpen.value = false
+  }
+  
+  localMobileMenuOpen.value = false
 }
 
 watch(() => route.path, closeMobileMenu)
 
-provide('isMobileMenuOpen', isMobileMenuOpen)
-provide('toggleMobileMenu', toggleMobileMenu)
+// Only provide if we're using local state (not on docs pages)
+if (!injectedMobileMenuOpen) {
+  provide('isMobileMenuOpen', isMobileMenuOpen)
+  provide('toggleMobileMenu', toggleMobileMenu)
+}
 </script>
diff --git a/docs-v3/content/docs/.navigation.yml b/docs-v3/content/docs/.navigation.yml
new file mode 100644
index 000000000..d408b2086
--- /dev/null
+++ b/docs-v3/content/docs/.navigation.yml
@@ -0,0 +1 @@
+title: Documentation
diff --git a/docs-v3/content/docs/1.getting-started/.navigation.yml b/docs-v3/content/docs/1.getting-started/.navigation.yml
new file mode 100644
index 000000000..bcd2ba145
--- /dev/null
+++ b/docs-v3/content/docs/1.getting-started/.navigation.yml
@@ -0,0 +1 @@
+title: Getting Started
diff --git a/docs-v3/content/docs/quickstart.md b/docs-v3/content/docs/1.getting-started/1.quickstart.md
similarity index 99%
rename from docs-v3/content/docs/quickstart.md
rename to docs-v3/content/docs/1.getting-started/1.quickstart.md
index f0bc17627..b06cff1b8 100644
--- a/docs-v3/content/docs/quickstart.md
+++ b/docs-v3/content/docs/1.getting-started/1.quickstart.md
@@ -1,5 +1,5 @@
 ---
-title: Quickstart
+title: Quick Start
 category: Getting Started
 ---
 
diff --git a/docs-v3/content/docs/2.auth/.navigation.yml b/docs-v3/content/docs/2.auth/.navigation.yml
new file mode 100644
index 000000000..b4716a44e
--- /dev/null
+++ b/docs-v3/content/docs/2.auth/.navigation.yml
@@ -0,0 +1 @@
+title: Authentication
diff --git a/docs-v3/content/docs/auth/authentication.md b/docs-v3/content/docs/2.auth/1.authentication.md
similarity index 99%
rename from docs-v3/content/docs/auth/authentication.md
rename to docs-v3/content/docs/2.auth/1.authentication.md
index 036cee8ac..dc81048b7 100644
--- a/docs-v3/content/docs/auth/authentication.md
+++ b/docs-v3/content/docs/2.auth/1.authentication.md
@@ -1,8 +1,6 @@
 ---
-title: Authentication setup
-menuTitle: Authentication
+title: Authentication
 category: Auth
-position: 1
 ---
 
 Laravel Restify provides comprehensive authentication with [Laravel Sanctum](https://laravel.com/docs/sanctum#api-token-authentication), including register, login, logout, forgot password, reset password, and email verification.
diff --git a/docs-v3/content/docs/auth/authorization.md b/docs-v3/content/docs/2.auth/2.authorization.md
similarity index 99%
rename from docs-v3/content/docs/auth/authorization.md
rename to docs-v3/content/docs/2.auth/2.authorization.md
index 6af92a562..f7e0e2a16 100644
--- a/docs-v3/content/docs/auth/authorization.md
+++ b/docs-v3/content/docs/2.auth/2.authorization.md
@@ -1,8 +1,6 @@
 ---
 title: Authorization
-menuTitle: Authorization
 category: Auth
-position: 1
 ---
 
 Laravel Restify provides a unified authorization system that protects both your REST API endpoints and MCP server tools using Laravel's built-in authorization features. This ensures that both human users and AI agents follow the same security rules when accessing your resources.
diff --git a/docs-v3/content/docs/auth/profile.md b/docs-v3/content/docs/2.auth/3.profile.md
similarity index 99%
rename from docs-v3/content/docs/auth/profile.md
rename to docs-v3/content/docs/2.auth/3.profile.md
index 45ed1af14..d26095b00 100644
--- a/docs-v3/content/docs/auth/profile.md
+++ b/docs-v3/content/docs/2.auth/3.profile.md
@@ -1,8 +1,6 @@
 ---
-title: User Profile
-menuTitle: Profile
+title: Profile Management
 category: Auth
-position: 1
 ---
 
 Laravel Restify provides a convenient profile endpoint that allows authenticated users to retrieve and update their profile information using the same repository system that powers the rest of your API.
diff --git a/docs-v3/content/docs/3.api/.navigation.yml b/docs-v3/content/docs/3.api/.navigation.yml
new file mode 100644
index 000000000..e59e7e61f
--- /dev/null
+++ b/docs-v3/content/docs/3.api/.navigation.yml
@@ -0,0 +1 @@
+title: API Resources
diff --git a/docs-v3/content/docs/api/repositories-basic.md b/docs-v3/content/docs/3.api/1.repositories-basic.md
similarity index 99%
rename from docs-v3/content/docs/api/repositories-basic.md
rename to docs-v3/content/docs/3.api/1.repositories-basic.md
index 5769adf10..3d0b52845 100644
--- a/docs-v3/content/docs/api/repositories-basic.md
+++ b/docs-v3/content/docs/3.api/1.repositories-basic.md
@@ -1,8 +1,6 @@
 ---
 title: Basic Repositories
-menuTitle: Basic Repositories
 category: API
-position: 4
 ---
 
 The Repository is the core of Laravel Restify. It defines how your models are exposed through API endpoints, handling CRUD operations automatically while giving you full control over fields, validation, and authorization.
diff --git a/docs-v3/content/docs/api/getters.md b/docs-v3/content/docs/3.api/10.getters.md
similarity index 99%
rename from docs-v3/content/docs/api/getters.md
rename to docs-v3/content/docs/3.api/10.getters.md
index 7c3a38285..cd751b75b 100644
--- a/docs-v3/content/docs/api/getters.md
+++ b/docs-v3/content/docs/3.api/10.getters.md
@@ -1,8 +1,6 @@
 ---
-title: Getters 
-menuTitle: Getters 
-category: API 
-position: 11
+title: Getters
+category: API
 ---
 
 ## Motivation
diff --git a/docs-v3/content/docs/api/serializer.md b/docs-v3/content/docs/3.api/11.serializer.md
similarity index 98%
rename from docs-v3/content/docs/api/serializer.md
rename to docs-v3/content/docs/3.api/11.serializer.md
index 24e890d2a..2a24062a1 100644
--- a/docs-v3/content/docs/api/serializer.md
+++ b/docs-v3/content/docs/3.api/11.serializer.md
@@ -1,8 +1,6 @@
 ---
 title: Serializer
-menuTitle: Serializer
 category: API
-position: 14
 ---
 
 ## Introduction
diff --git a/docs-v3/content/docs/api/repositories.md b/docs-v3/content/docs/3.api/2.repositories.md
similarity index 99%
rename from docs-v3/content/docs/api/repositories.md
rename to docs-v3/content/docs/3.api/2.repositories.md
index d6cea4efc..fe0e43e58 100644
--- a/docs-v3/content/docs/api/repositories.md
+++ b/docs-v3/content/docs/3.api/2.repositories.md
@@ -1,8 +1,6 @@
 ---
-title: Repository Overview
-menuTitle: Overview
-category: API 
-position: 5
+title: Repositories
+category: API
 ---
 
 The Repository is the core of Laravel Restify, providing a unified API layer that serves both human users via REST endpoints and AI agents via MCP tools.
diff --git a/docs-v3/content/docs/api/repositories-advanced.md b/docs-v3/content/docs/3.api/3.repositories-advanced.md
similarity index 99%
rename from docs-v3/content/docs/api/repositories-advanced.md
rename to docs-v3/content/docs/3.api/3.repositories-advanced.md
index ec11c8cc9..71745b5e6 100644
--- a/docs-v3/content/docs/api/repositories-advanced.md
+++ b/docs-v3/content/docs/3.api/3.repositories-advanced.md
@@ -1,8 +1,6 @@
 ---
 title: Advanced Repositories
-menuTitle: Advanced
-category: API 
-position: 7
+category: API
 ---
 
 This guide covers advanced repository features for experienced Laravel Restify users. If you're new to Restify, start with the [Basic Repositories](/api/repositories-basic) guide.
diff --git a/docs-v3/content/docs/api/repository-generation.md b/docs-v3/content/docs/3.api/4.repository-generation.md
similarity index 99%
rename from docs-v3/content/docs/api/repository-generation.md
rename to docs-v3/content/docs/3.api/4.repository-generation.md
index 655205c05..5334d60b3 100644
--- a/docs-v3/content/docs/api/repository-generation.md
+++ b/docs-v3/content/docs/3.api/4.repository-generation.md
@@ -1,12 +1,8 @@
 ---
-title: Repository Generation 
-menuTitle: Repository Generation 
-category: API 
-position: 12
+title: Repository Generation
+category: API
 ---
 
-# Repository Generation
-
 Laravel Restify provides powerful repository generation commands for both individual and bulk repository creation, with intelligent path detection and automatic relationship generation.
 
 ## Intelligent Path Detection
diff --git a/docs-v3/content/docs/api/fields.md b/docs-v3/content/docs/3.api/5.fields.md
similarity index 99%
rename from docs-v3/content/docs/api/fields.md
rename to docs-v3/content/docs/3.api/5.fields.md
index dac712b8d..f611ee160 100644
--- a/docs-v3/content/docs/api/fields.md
+++ b/docs-v3/content/docs/3.api/5.fields.md
@@ -1,8 +1,6 @@
 ---
-title: Fields 
-menuTitle: Fields 
-category: API 
-position: 8
+title: Fields
+category: API
 ---
 
 A field is basically the model's attribute representation.
diff --git a/docs-v3/content/docs/api/relations.md b/docs-v3/content/docs/3.api/6.relations.md
similarity index 99%
rename from docs-v3/content/docs/api/relations.md
rename to docs-v3/content/docs/3.api/6.relations.md
index 54a860ba8..82ba4f27a 100644
--- a/docs-v3/content/docs/api/relations.md
+++ b/docs-v3/content/docs/3.api/6.relations.md
@@ -1,14 +1,11 @@
 ---
-title: Relations 
-menuTitle: Relations 
-category: API 
-position: 10
+title: Relations
+category: API
 ---
 
 ## Introduction
 
 Eloquent provides a large variety of relationships. You can read about them [here](https://laravel.com/docs/eloquent-relationships).
-
 Restify handles all relationships and gives you an expressive way to list resource relationships.
 
 ## Definition
diff --git a/docs-v3/content/docs/api/rest-methods.md b/docs-v3/content/docs/3.api/7.rest-methods.md
similarity index 99%
rename from docs-v3/content/docs/api/rest-methods.md
rename to docs-v3/content/docs/3.api/7.rest-methods.md
index fa37fbb19..6c8f4e1a3 100644
--- a/docs-v3/content/docs/api/rest-methods.md
+++ b/docs-v3/content/docs/3.api/7.rest-methods.md
@@ -1,8 +1,6 @@
---- 
-title: REST Methods 
-menuTitle: Controllers 
-category: API 
-position: 13 
+---
+title: REST Methods
+category: API
 ---
 
 ## Introduction
diff --git a/docs-v3/content/docs/api/validation-methods.md b/docs-v3/content/docs/3.api/8.validation-methods.md
similarity index 98%
rename from docs-v3/content/docs/api/validation-methods.md
rename to docs-v3/content/docs/3.api/8.validation-methods.md
index 681419d6e..1dcf176b2 100644
--- a/docs-v3/content/docs/api/validation-methods.md
+++ b/docs-v3/content/docs/3.api/8.validation-methods.md
@@ -1,12 +1,8 @@
 ---
-title: Validation Methods 
-menuTitle: Validation Methods 
-category: API 
-position: 15
+title: Validation Methods
+category: API
 ---
 
-# Fluent Validation Methods
-
 Laravel Restify provides a fluent API for adding validation rules to fields, similar to Laravel Nova. This makes it easy to chain validation methods for cleaner and more readable code.
 
 ## Basic Usage
diff --git a/docs-v3/content/docs/api/actions.md b/docs-v3/content/docs/3.api/9.actions.md
similarity index 99%
rename from docs-v3/content/docs/api/actions.md
rename to docs-v3/content/docs/3.api/9.actions.md
index 00d3e0d69..1a9949e41 100644
--- a/docs-v3/content/docs/api/actions.md
+++ b/docs-v3/content/docs/3.api/9.actions.md
@@ -1,8 +1,6 @@
 ---
-title: Actions 
-menuTitle: Actions 
-category: API 
-position: 9
+title: Actions
+category: API
 ---
 
 ## Motivation
diff --git a/docs-v3/content/docs/4.search/.navigation.yml b/docs-v3/content/docs/4.search/.navigation.yml
new file mode 100644
index 000000000..25325376c
--- /dev/null
+++ b/docs-v3/content/docs/4.search/.navigation.yml
@@ -0,0 +1 @@
+title: Search & Filtering
diff --git a/docs-v3/content/docs/search/basic-filters.md b/docs-v3/content/docs/4.search/1.basic-filters.md
similarity index 99%
rename from docs-v3/content/docs/search/basic-filters.md
rename to docs-v3/content/docs/4.search/1.basic-filters.md
index 1e4f2ca99..0aa35dc7f 100644
--- a/docs-v3/content/docs/search/basic-filters.md
+++ b/docs-v3/content/docs/4.search/1.basic-filters.md
@@ -1,8 +1,6 @@
 ---
-title: Filters
-menuTitle: Filters
-category: Search & Filters
-position: 11
+title: Basic Filters
+category: Search & Filtering
 ---
 
 Restify provides few powerful ways to filter and search your data.
diff --git a/docs-v3/content/docs/search/advanced-filters.md b/docs-v3/content/docs/4.search/2.advanced-filters.md
similarity index 99%
rename from docs-v3/content/docs/search/advanced-filters.md
rename to docs-v3/content/docs/4.search/2.advanced-filters.md
index 18b0c32ae..afa9c8517 100644
--- a/docs-v3/content/docs/search/advanced-filters.md
+++ b/docs-v3/content/docs/4.search/2.advanced-filters.md
@@ -1,8 +1,6 @@
 ---
-title: Advanced filters
-menuTitle: Advanced filters
-category: Search & Filters
-position: 12
+title: Advanced Filters
+category: Search & Filtering
 ---
 
 Restify has [base filters](/search/basic-filters) for usual `search` or `matching`. 
diff --git a/docs-v3/content/docs/search/sorting.md b/docs-v3/content/docs/4.search/3.sorting.md
similarity index 98%
rename from docs-v3/content/docs/search/sorting.md
rename to docs-v3/content/docs/4.search/3.sorting.md
index 19f77923a..2175d818b 100644
--- a/docs-v3/content/docs/search/sorting.md
+++ b/docs-v3/content/docs/4.search/3.sorting.md
@@ -1,9 +1,6 @@
 ---
-title: Sort
-menuTitle: Sort
-description: Sorting 
-category: Search & Filters
-position: 13
+title: Sorting
+category: Search & Filtering
 ---
 
  ## Definition
diff --git a/docs-v3/content/docs/5.graphql/.navigation.yml b/docs-v3/content/docs/5.graphql/.navigation.yml
new file mode 100644
index 000000000..ca247547f
--- /dev/null
+++ b/docs-v3/content/docs/5.graphql/.navigation.yml
@@ -0,0 +1 @@
+title: GraphQL
diff --git a/docs-v3/content/docs/graphql/graphql.md b/docs-v3/content/docs/5.graphql/1.graphql.md
similarity index 98%
rename from docs-v3/content/docs/graphql/graphql.md
rename to docs-v3/content/docs/5.graphql/1.graphql.md
index 8f554130e..8a6cf3ea7 100644
--- a/docs-v3/content/docs/graphql/graphql.md
+++ b/docs-v3/content/docs/5.graphql/1.graphql.md
@@ -1,12 +1,8 @@
 ---
-title: GraphQL Integration
-menuTitle: GraphQL
+title: GraphQL Overview
 category: GraphQL
-position: 16
 ---
 
-# GraphQL Integration
-
 Laravel Restify provides powerful GraphQL integration, allowing you to automatically generate GraphQL schemas and resolvers from your existing Restify repositories. This enables you to quickly add GraphQL capabilities to your API without rewriting your business logic.
 
 ## Overview
diff --git a/docs-v3/content/docs/graphql/graphql-generation.md b/docs-v3/content/docs/5.graphql/2.graphql-generation.md
similarity index 99%
rename from docs-v3/content/docs/graphql/graphql-generation.md
rename to docs-v3/content/docs/5.graphql/2.graphql-generation.md
index e5937fa73..8e11be5d5 100644
--- a/docs-v3/content/docs/graphql/graphql-generation.md
+++ b/docs-v3/content/docs/5.graphql/2.graphql-generation.md
@@ -1,12 +1,8 @@
 ---
-title: GraphQL Schema Generation
-menuTitle: Schema Generation
+title: Schema Generation
 category: GraphQL
-position: 17
 ---
 
-# GraphQL Schema Generation
-
 Laravel Restify can automatically generate GraphQL schemas and resolvers from your existing Restify repositories, allowing you to quickly add GraphQL capabilities to your API.
 
 ## Overview
diff --git a/docs-v3/content/docs/6.mcp/.navigation.yml b/docs-v3/content/docs/6.mcp/.navigation.yml
new file mode 100644
index 000000000..a2ccdafa7
--- /dev/null
+++ b/docs-v3/content/docs/6.mcp/.navigation.yml
@@ -0,0 +1 @@
+title: MCP Integration
diff --git a/docs-v3/content/docs/mcp/mcp.md b/docs-v3/content/docs/6.mcp/1.mcp.md
similarity index 99%
rename from docs-v3/content/docs/mcp/mcp.md
rename to docs-v3/content/docs/6.mcp/1.mcp.md
index 7d533ff31..ab86170b8 100644
--- a/docs-v3/content/docs/mcp/mcp.md
+++ b/docs-v3/content/docs/6.mcp/1.mcp.md
@@ -1,8 +1,6 @@
 ---
-title: Model Context Protocol (MCP)
-menuTitle: MCP
+title: MCP Server
 category: MCP
-position: 1
 ---
 
 Laravel Restify provides seamless integration with the Model Context Protocol (MCP), allowing AI agents to interact with your REST API resources through structured tool interfaces. So you can simply tranform your repositories into a tools for AI agents to consume. Incredible!
diff --git a/docs-v3/content/docs/mcp/repositories.md b/docs-v3/content/docs/6.mcp/2.repositories.md
similarity index 99%
rename from docs-v3/content/docs/mcp/repositories.md
rename to docs-v3/content/docs/6.mcp/2.repositories.md
index 540a555e8..395121fa8 100644
--- a/docs-v3/content/docs/mcp/repositories.md
+++ b/docs-v3/content/docs/6.mcp/2.repositories.md
@@ -1,8 +1,6 @@
 ---
 title: MCP Repositories
-menuTitle: Repositories
 category: MCP
-position: 2
 ---
 
 Laravel Restify repositories provide first-class support for Model Context Protocol (MCP), enabling AI agents to efficiently interact with your APIs. This page covers MCP-specific repository features that optimize token usage and provide tailored data structures for AI consumption.
diff --git a/docs-v3/content/docs/mcp/fields.md b/docs-v3/content/docs/6.mcp/3.fields.md
similarity index 99%
rename from docs-v3/content/docs/mcp/fields.md
rename to docs-v3/content/docs/6.mcp/3.fields.md
index 088f88c0a..fb736b5ed 100644
--- a/docs-v3/content/docs/mcp/fields.md
+++ b/docs-v3/content/docs/6.mcp/3.fields.md
@@ -1,8 +1,6 @@
 ---
 title: MCP Fields
-menuTitle: Fields
 category: MCP
-position: 3
 ---
 
 Laravel Restify fields provide MCP-specific methods to optimize data structures for AI agent consumption, reduce token usage, and control field visibility based on user permissions.
diff --git a/docs-v3/content/docs/mcp/getters.md b/docs-v3/content/docs/6.mcp/4.getters.md
similarity index 99%
rename from docs-v3/content/docs/mcp/getters.md
rename to docs-v3/content/docs/6.mcp/4.getters.md
index ba3fdb2df..b2a4b7d99 100644
--- a/docs-v3/content/docs/mcp/getters.md
+++ b/docs-v3/content/docs/6.mcp/4.getters.md
@@ -1,8 +1,6 @@
 ---
 title: MCP Getters
-menuTitle: Getters
 category: MCP
-position: 4
 ---
 
 Laravel Restify Getters can be exposed to AI agents through the Model Context Protocol (MCP), enabling intelligent data retrieval and analytics. This page covers how to configure getters for MCP integration and optimize them for AI consumption.
diff --git a/docs-v3/content/docs/mcp/json-schema-converter.md b/docs-v3/content/docs/6.mcp/5.json-schema-converter.md
similarity index 99%
rename from docs-v3/content/docs/mcp/json-schema-converter.md
rename to docs-v3/content/docs/6.mcp/5.json-schema-converter.md
index 465276de6..11643eefe 100644
--- a/docs-v3/content/docs/mcp/json-schema-converter.md
+++ b/docs-v3/content/docs/6.mcp/5.json-schema-converter.md
@@ -1,8 +1,6 @@
 ---
 title: JSON Schema Converter
-menuTitle: JSON Schema Converter
 category: MCP
-position: 5
 ---
 
 `JsonSchemaFromRulesAction` converts Laravel validation rules into `Illuminate\\JsonSchema` types that are ready to surface to Model Context Protocol (MCP) agents. Restify runs this converter automatically for MCP actions and getters, but you can invoke it yourself whenever you need a programmatic JSON Schema.
diff --git a/docs-v3/content/docs/mcp/actions.md b/docs-v3/content/docs/6.mcp/6.actions.md
similarity index 99%
rename from docs-v3/content/docs/mcp/actions.md
rename to docs-v3/content/docs/6.mcp/6.actions.md
index 265e02f72..dd248a5ff 100644
--- a/docs-v3/content/docs/mcp/actions.md
+++ b/docs-v3/content/docs/6.mcp/6.actions.md
@@ -1,8 +1,6 @@
 ---
 title: MCP Actions
-menuTitle: Actions
 category: MCP
-position: 6
 ---
 
 Laravel Restify Actions can be exposed to AI agents through the Model Context Protocol (MCP), allowing intelligent automation of complex operations. This page covers how to configure actions for MCP integration and optimize them for AI consumption.
diff --git a/docs-v3/content/docs/7.performance/.navigation.yml b/docs-v3/content/docs/7.performance/.navigation.yml
new file mode 100644
index 000000000..2de023cda
--- /dev/null
+++ b/docs-v3/content/docs/7.performance/.navigation.yml
@@ -0,0 +1 @@
+title: Performance
diff --git a/docs-v3/content/docs/performance/performance.md b/docs-v3/content/docs/7.performance/1.performance.md
similarity index 98%
rename from docs-v3/content/docs/performance/performance.md
rename to docs-v3/content/docs/7.performance/1.performance.md
index 438f7fc32..a4691b54e 100644
--- a/docs-v3/content/docs/performance/performance.md
+++ b/docs-v3/content/docs/7.performance/1.performance.md
@@ -1,9 +1,6 @@
 ---
-title: Performance
-menuTitle: Performance
-description: Performance
-category: Advanced
-position: 14
+title: Performance Overview
+category: Performance
 ---
 
 ## Policy Caching
diff --git a/docs-v3/content/docs/performance/solutions.md b/docs-v3/content/docs/7.performance/2.solutions.md
similarity index 94%
rename from docs-v3/content/docs/performance/solutions.md
rename to docs-v3/content/docs/7.performance/2.solutions.md
index a1ca3b0da..e53928e2b 100644
--- a/docs-v3/content/docs/performance/solutions.md
+++ b/docs-v3/content/docs/7.performance/2.solutions.md
@@ -1,9 +1,6 @@
 ---
-title: AI Solution
-menuTitle: AI Solution
-description: AI Solution
-category: Advanced
-position: 14
+title: Optimization Solutions
+category: Performance
 ---
 
 Inspired by the [Marcel's Article](https://beyondco.de/blog/ai-powered-error-solutions-for-laravel).
diff --git a/docs-v3/content/docs/8.boost/.navigation.yml b/docs-v3/content/docs/8.boost/.navigation.yml
new file mode 100644
index 000000000..c8733bcab
--- /dev/null
+++ b/docs-v3/content/docs/8.boost/.navigation.yml
@@ -0,0 +1 @@
+title: Extensions
diff --git a/docs-v3/content/docs/boost/boost.md b/docs-v3/content/docs/8.boost/1.boost.md
similarity index 95%
rename from docs-v3/content/docs/boost/boost.md
rename to docs-v3/content/docs/8.boost/1.boost.md
index 24a34974b..4f159e0cc 100644
--- a/docs-v3/content/docs/boost/boost.md
+++ b/docs-v3/content/docs/8.boost/1.boost.md
@@ -1,8 +1,6 @@
 ---
-title: Model Context Protocol (MCP)
-menuTitle: Restify Boost
-category: Boost
-position: 20
+title: Boost Package
+category: Extensions
 ---
 
 ## MCP Server for Laravel Restify Developers
diff --git a/docs-v3/content/docs/9.testing/.navigation.yml b/docs-v3/content/docs/9.testing/.navigation.yml
new file mode 100644
index 000000000..3bfd62b61
--- /dev/null
+++ b/docs-v3/content/docs/9.testing/.navigation.yml
@@ -0,0 +1 @@
+title: Testing
diff --git a/docs-v3/content/docs/testing/testing.md b/docs-v3/content/docs/9.testing/1.testing.md
similarity index 55%
rename from docs-v3/content/docs/testing/testing.md
rename to docs-v3/content/docs/9.testing/1.testing.md
index 00161845e..a3c2e64d9 100644
--- a/docs-v3/content/docs/testing/testing.md
+++ b/docs-v3/content/docs/9.testing/1.testing.md
@@ -1,9 +1,6 @@
 ---
-title: Testing Repositories
-menuTitle: Testing Repositories
-description: Unlike traditional static method calls, repositories may be mocked. This provides a great advantage over traditional static methods and grants you the same testability you would have if you were using dependency injection. When testing, you may often want to mock a call to a Restify repository in one of your controllers. For example, consider the following controller action
+title: Testing Guide
 category: Testing
-position: 15
 ---
 
 ```php
diff --git a/docs-v3/layouts/docs.vue b/docs-v3/layouts/docs.vue
index bf6fb8100..e1532cedc 100644
--- a/docs-v3/layouts/docs.vue
+++ b/docs-v3/layouts/docs.vue
@@ -13,9 +13,11 @@
         
         <main class="flex-1 min-w-0">
           <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <article class="prose prose-gray dark:prose-invert prose-lg max-w-none">
+            <article class="prose prose-gray dark:prose-invert prose-lg max-w-full overflow-x-hidden">
               <slot />
             </article>
+            
+            <DocsPagination />
           </div>
         </main>
         
diff --git a/docs-v3/nuxt.config.ts b/docs-v3/nuxt.config.ts
index 282563426..a9d96b661 100644
--- a/docs-v3/nuxt.config.ts
+++ b/docs-v3/nuxt.config.ts
@@ -7,6 +7,31 @@ export default defineNuxtConfig({
     '@vueuse/nuxt'
   ],
 
+  // Nuxt Content configuration
+  content: {
+    build: {
+      markdown: {
+        highlight: {
+          langs: [
+            'php',
+            'javascript',
+            'typescript',
+            'json',
+            'bash',
+            'shell',
+            'yaml',
+            'vue',
+            'html',
+            'css',
+            'graphql',
+            'sql',
+            'diff'
+          ]
+        }
+      }
+    }
+  },
+
   // Nuxt UI configuration for content
   ui: {
     content: true,
diff --git a/docs-v3/pages/community/index.vue b/docs-v3/pages/community/index.vue
index b94cecdfa..0b71ab494 100644
--- a/docs-v3/pages/community/index.vue
+++ b/docs-v3/pages/community/index.vue
@@ -110,17 +110,15 @@
             Explore a complete example of Laravel Restify in action with our demo repository. 
             See real-world implementation and get inspired for your own projects.
           </p>
-          <a
+          <AppButton
+            variant="primary"
+            size="md"
             href="https://github.com/BinarCode/restify-demo"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex items-center text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 font-medium transition-colors"
+            :icon="CodeBracketIcon"
+            :show-external-icon="true"
           >
             View Demo Repository
-            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-            </svg>
-          </a>
+          </AppButton>
         </div>
       </div>
     </div>
@@ -128,6 +126,8 @@
 </template>
 
 <script setup lang="ts">
+import { CodeBracketIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
 import ContributorsSection from '~/components/website/ContributorsSection.vue'
 
 useHead({
diff --git a/docs-v3/pages/docs/[...slug].vue b/docs-v3/pages/docs/[...slug].vue
index b2fa5f6f5..952875cce 100644
--- a/docs-v3/pages/docs/[...slug].vue
+++ b/docs-v3/pages/docs/[...slug].vue
@@ -6,9 +6,6 @@
           <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
             {{ post.title }}
           </h1>
-          <p v-if="post.description" class="text-xl text-gray-600 dark:text-gray-400">
-            {{ post.description }}
-          </p>
         </header>
         
         <div class="prose-docs">
diff --git a/docs-v3/pages/docs/index.vue b/docs-v3/pages/docs/index.vue
index c2704d2aa..53d35caea 100644
--- a/docs-v3/pages/docs/index.vue
+++ b/docs-v3/pages/docs/index.vue
@@ -14,7 +14,7 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12 not-prose">
         <!-- Get Started -->
         <NuxtLink
-          to="/docs/quickstart"
+          to="/docs/getting-started/quickstart"
           class="group block p-6 glass-card glass-card-accent-red"
         >
           <div class="flex items-center mb-3">
diff --git a/docs-v3/pages/playground/index.vue b/docs-v3/pages/playground/index.vue
index 7b9f6cb46..d49fac65b 100644
--- a/docs-v3/pages/playground/index.vue
+++ b/docs-v3/pages/playground/index.vue
@@ -39,7 +39,7 @@
           <div class="flex space-x-2">
             <button
               @click="switchToHttp"
-              :class="activeTab === 'http' ? 'bg-red-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
+              :class="activeTab === 'http' ? 'bg-primary-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
               class="flex-1 px-6 py-4 rounded-lg font-medium transition-all duration-200"
             >
               <div class="flex items-center justify-center space-x-2">
@@ -52,7 +52,7 @@
             </button>
             <button
               @click="switchToMcp"
-              :class="activeTab === 'mcp' ? 'bg-red-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
+              :class="activeTab === 'mcp' ? 'bg-primary-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
               class="flex-1 px-6 py-4 rounded-lg font-medium transition-all duration-200"
             >
               <div class="flex items-center justify-center space-x-2">
@@ -194,7 +194,7 @@
             <button
               @click="sendRequest"
               :disabled="isLoading"
-              class="w-full bg-red-500 hover:bg-red-600 disabled:bg-red-500/50 disabled:cursor-not-allowed text-white font-medium py-4 px-6 rounded-lg transition-colors text-lg"
+              class="w-full bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500/50 disabled:cursor-not-allowed text-white font-medium py-4 px-6 rounded-lg transition-colors text-lg"
             >
               {{ isLoading ? 'Sending...' : 'Send Request' }}
             </button>
@@ -293,7 +293,7 @@
           <div class="flex flex-col sm:flex-row gap-4 justify-center">
             <NuxtLink
               to="/docs/quickstart"
-              class="inline-flex items-center px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-medium rounded-lg transition-colors"
+              class="inline-flex items-center px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-colors"
             >
               Get Started Now
             </NuxtLink>