diff --git a/docs/app.vue b/docs/app.vue
index 1009301cb8..073f927088 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -2,25 +2,11 @@
   <div>
     <Header />
 
-    <UContainer>
-      <div class="relative grid lg:grid-cols-10 lg:gap-8">
-        <DocsAside class="lg:col-span-2" />
+    <UContainer class="grid lg:grid-cols-10 lg:gap-8">
+      <DocsAside class="lg:col-span-2" />
 
-        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
-          <DocsPageHeader />
-
-          <NuxtPage />
-
-          <DocsPageFooter class="mt-12" />
-
-          <hr class="border-gray-200 dark:border-gray-800 my-6">
-
-          <DocsPrevNext />
-
-          <DocsFooter class="mt-16" />
-        </div>
-
-        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
+      <div class="lg:col-span-8">
+        <NuxtPage />
       </div>
     </UContainer>
 
@@ -33,9 +19,12 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
 const colorMode = useColorMode()
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+provide('navigation', navigation)
+
 // Computed
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
index d5d203cda4..507f24fbcf 100644
--- a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
+++ b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
@@ -1,7 +1,7 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const { navigation } = useContent()
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 
diff --git a/docs/components/docs/DocsAsideLinks.vue b/docs/components/docs/DocsAsideLinks.vue
index f4c18f0646..1457c3e0f2 100644
--- a/docs/components/docs/DocsAsideLinks.vue
+++ b/docs/components/docs/DocsAsideLinks.vue
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const { navigation } = useContent() as { navigation: NavItem[] }
+const navigation: Ref<NavItem[]> = inject('navigation')
 
 function mapContentLinks (links: NavItem[]) {
   return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
diff --git a/docs/components/docs/DocsPageFooter.vue b/docs/components/docs/DocsPageFooter.vue
index 0dd32ddae7..278b60ede4 100644
--- a/docs/components/docs/DocsPageFooter.vue
+++ b/docs/components/docs/DocsPageFooter.vue
@@ -13,5 +13,10 @@
 </template>
 
 <script setup lang="ts">
-const { page } = useContent()
+defineProps({
+  page: {
+    type: Object,
+    default: null
+  }
+})
 </script>
diff --git a/docs/components/docs/DocsPageHeader.vue b/docs/components/docs/DocsPageHeader.vue
index 316c2405c8..b108ad7e79 100644
--- a/docs/components/docs/DocsPageHeader.vue
+++ b/docs/components/docs/DocsPageHeader.vue
@@ -33,5 +33,10 @@
 </template>
 
 <script setup lang="ts">
-const { page } = useContent()
+defineProps({
+  page: {
+    type: Object,
+    default: null
+  }
+})
 </script>
diff --git a/docs/components/docs/DocsPrevNext.vue b/docs/components/docs/DocsPrevNext.vue
index a6b9be81f8..1a44f80f8d 100644
--- a/docs/components/docs/DocsPrevNext.vue
+++ b/docs/components/docs/DocsPrevNext.vue
@@ -1,11 +1,17 @@
 <template>
   <div class="grid gap-6 sm:grid-cols-2">
-    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
+    <DocsPrevNextCard
+      v-if="prev"
+      :title="prev.title"
+      :description="prev.description"
+      :to="prev._path"
+      icon="i-heroicons-arrow-left-20-solid"
+    />
     <span v-else class="hidden sm:block">&nbsp;</span>
     <DocsPrevNextCard
       v-if="next"
-      :title="next.navigation?.title || next.title"
-      :description="next.navigation?.description || next.description"
+      :title="next.title"
+      :description="next.description"
       :to="next._path"
       icon="i-heroicons-arrow-right-20-solid"
       class="text-right"
@@ -14,5 +20,14 @@
 </template>
 
 <script setup lang="ts">
-const { prev, next } = useContent()
+defineProps({
+  prev: {
+    type: Object,
+    default: null
+  },
+  next: {
+    type: Object,
+    default: null
+  }
+})
 </script>
diff --git a/docs/components/docs/DocsSearch.vue b/docs/components/docs/DocsSearch.vue
index cfa0beb037..1de4b26c3e 100644
--- a/docs/components/docs/DocsSearch.vue
+++ b/docs/components/docs/DocsSearch.vue
@@ -23,9 +23,11 @@
 </template>
 
 <script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
 import type { Command } from '../../../src/runtime/types'
 
-const { navigation } = useContent()
+const navigation: Ref<NavItem[]> = inject('navigation')
+
 const router = useRouter()
 const { usingInput } = useShortcuts()
 const { isSearchModalOpen } = useDocs()
diff --git a/docs/components/docs/DocsToc.vue b/docs/components/docs/DocsToc.vue
index a61b158126..5c7fa9e6e6 100644
--- a/docs/components/docs/DocsToc.vue
+++ b/docs/components/docs/DocsToc.vue
@@ -13,7 +13,12 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
+defineProps({
+  toc: {
+    type: Object,
+    default: null
+  }
+})
 
 const isTocOpen = ref(false)
 </script>
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
deleted file mode 100644
index d7450f1260..0000000000
--- a/docs/layouts/default.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="prose prose-primary dark:prose-invert max-w-none">
-    <slot />
-  </div>
-</template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 4425990f41..a61bd67733 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -15,7 +15,6 @@ export default defineNuxtConfig({
     'nuxt-component-meta'
   ],
   content: {
-    documentDriven: true,
     highlight: {
       theme: {
         light: 'material-lighter',
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
new file mode 100644
index 0000000000..80f03929c2
--- /dev/null
+++ b/docs/pages/[...slug].vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="grid lg:grid-cols-10 lg:gap-8">
+    <div class="pt-8 pb-16" :class="page.body?.toc ? 'lg:col-span-8' : 'lg:col-span-10'">
+      <DocsPageHeader :page="page" />
+
+      <ContentRenderer v-if="page.body" :value="page" class="prose prose-primary dark:prose-invert max-w-none" />
+
+      <DocsPageFooter :page="page" class="mt-12" />
+
+      <hr class="border-gray-200 dark:border-gray-800 my-6">
+
+      <DocsPrevNext :prev="prev" :next="next" />
+
+      <DocsFooter class="mt-16" />
+    </div>
+
+    <DocsToc v-if="page.body?.toc" :toc="page.body.toc" class="lg:col-span-2" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
+const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
+  .only(['_path', 'title', 'navigation', 'description'])
+  .where({ _extension: 'md', navigation: { $ne: false } })
+  .findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
+)
+
+const [prev, next] = surround.value
+
+useContentHead(page)
+</script>