diff --git a/docs/app.vue b/docs/app.vue
index c7d7de09..870c43bf 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -24,19 +24,25 @@
       </template>
 
       <template #links>
-        <UDocsAsideAnchors :links="anchors" />
-        <UDocsAsideLinks :links="navigation" />
+        <UAsideAnchors :links="anchors" />
+        <UAsideLinks :links="links" />
       </template>
     </UHeader>
 
-    <UContainer>
-      <UDocsLayout :links="navigation" :anchors="anchors">
-        <NuxtPage />
-      </UDocsLayout>
-    </UContainer>
+    <UMain>
+      <UContainer>
+        <UPage>
+          <template #left>
+            <UAside :links="links" :anchors="anchors" />
+          </template>
+
+          <NuxtPage />
+        </UPage>
+      </UContainer>
+    </UMain>
 
     <ClientOnly>
-      <UDocsSearch :files="files" :links="navigation" />
+      <UDocsSearch :files="files" :links="links" />
     </ClientOnly>
 
     <UNotifications>
@@ -54,10 +60,13 @@
 <script setup lang="ts">
 const colorMode = useColorMode()
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: links } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  transform: (navigation) => mapContentLinks(navigation)
+})
+
 const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
 
-provide('navigation', navigation)
+provide('links', links)
 
 const anchors = [{
   label: 'Documentation',
diff --git a/docs/package.json b/docs/package.json
index 4b197846..253ce971 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28177244.dca5e05",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28177555.3102f36",
     "@nuxt/content": "^2.7.2",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/eslint-config": "^0.1.1",
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 24cd78bf..c2959323 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,33 +1,38 @@
 <template>
-  <UDocsPage v-if="page" :page="page" :surround="(surround as ParsedContent[])">
-    <ContentRenderer v-if="page && page.body" :value="page" class="prose prose-primary dark:prose-invert max-w-none" />
+  <UPage v-if="page">
+    <UPageHeader v-bind="page" :headline="headline" />
 
-    <UButton
-      :to="githubLink"
-      variant="link"
-      icon="i-heroicons-pencil-square"
-      label="Edit this page on GitHub"
-      :padded="false"
-      class="mt-12"
-    />
+    <UPageBody prose>
+      <ContentRenderer v-if="page && page.body" :value="page" />
+
+      <UButton
+        :to="githubLink"
+        variant="link"
+        icon="i-heroicons-pencil-square"
+        label="Edit this page on GitHub"
+        :padded="false"
+        class="mt-12"
+      />
+
+      <hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
+
+      <UDocsSurround :surround="surround" />
 
-    <template #footer>
       <Footer />
+    </UPageBody>
+
+    <template v-if="page.body?.toc?.links?.length" #right>
+      <UDocsToc :links="page.body.toc.links" />
     </template>
-  </UDocsPage>
-  <div v-else class="pt-8">
-    Page not found
-  </div>
+  </UPage>
+  <UPageError v-else />
 </template>
 
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
-
 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)
 )
@@ -40,4 +45,5 @@ if (process.server && !page.value) {
 useContentHead(page)
 
 const githubLink = computed(() => `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`)
+const headline = computed(() => page.value._dir?.title ? page.value._dir.title : useLowerCase(page.value._dir))
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4340202..f03922ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,8 +100,8 @@ importers:
         specifier: latest
         version: 1.1.62
       '@nuxt-themes/ui-kit':
-        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28177244.dca5e05
-        version: /@nuxt-themes/ui-kit-edge@0.0.1-28177244.dca5e05(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
+        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28177555.3102f36
+        version: /@nuxt-themes/ui-kit-edge@0.0.1-28177555.3102f36(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
       '@nuxt/content':
         specifier: ^2.7.2
         version: 2.7.2(rollup@3.26.2)
@@ -1231,8 +1231,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt-themes/ui-kit-edge@0.0.1-28177244.dca5e05(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
-    resolution: {integrity: sha512-AhjAIINdgNCa5ywqAW+dEbsL/eqKNPxBLOcyO+IkErjhFdgxuXur9HSlIYcWogfCsroMMyR0uHzkiFDqvtkDxA==}
+  /@nuxt-themes/ui-kit-edge@0.0.1-28177555.3102f36(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
+    resolution: {integrity: sha512-Z+49i7ghTddovFiA7TKPJxSwq5BHLWAEmSc+LTUJGodzv0X4CnapC7ZRGhQ+iBCnRw6liCiFFQruO0MeDySatA==}
     peerDependencies:
       '@nuxt/content': ^2.7.2
       '@nuxthq/ui': npm:@nuxthq/ui-edge@latest