diff --git a/docs/app.vue b/docs/app.vue
index 7b5b5d92..3327e6c0 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,39 +1,15 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <UHeader>
-      <template #left>
-        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-          <Logo class="w-8 h-8 text-primary" />
-
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
-        </NuxtLink>
-      </template>
-
-      <template #center>
-        <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
-      </template>
-
-      <template #right>
-        <ColorPicker />
-
-        <UColorModeButton />
-
-        <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
-        <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
-      </template>
-
-      <template #links>
-        <UAsideAnchors :links="anchors" />
-        <UAsideLinks :links="links" />
-      </template>
-    </UHeader>
+    <Header />
 
     <UMain>
       <UContainer>
         <UPage>
           <template #left>
-            <UAside :links="links" :anchors="anchors" />
+            <UAside :links="anchors">
+              <UNavigationTree :links="mapContentNavigation(navigation)" />
+            </UAside>
           </template>
 
           <NuxtPage />
@@ -42,7 +18,7 @@
     </UMain>
 
     <ClientOnly>
-      <UDocsSearch :files="files" :links="links" />
+      <UDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications>
@@ -59,14 +35,14 @@
 
 <script setup lang="ts">
 const colorMode = useColorMode()
+const { mapContentNavigation } = useElementsHelpers()
 
-const { data: links } = await useAsyncData('navigation', () => fetchContentNavigation(), {
-  transform: (navigation) => mapContentLinks(navigation)
+const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
 })
-
-const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
-
-provide('links', links)
 
 const anchors = [{
   label: 'Documentation',
@@ -109,4 +85,8 @@ useSeoMeta({
   twitterImage: '/social-preview.jpg',
   twitterCard: 'summary_large_image'
 })
+
+// Provide
+
+provide('navigation', navigation)
 </script>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
new file mode 100644
index 00000000..4564a369
--- /dev/null
+++ b/docs/components/Header.vue
@@ -0,0 +1,36 @@
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+        <Logo class="w-8 h-8 text-primary" />
+
+        <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
+      </NuxtLink>
+    </template>
+
+    <template #center>
+      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+    </template>
+
+    <template #right>
+      <ColorPicker />
+
+      <UColorModeButton />
+
+      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const { mapContentNavigation } = useElementsHelpers()
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>
diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
index c652248a..ffd7ce7d 100644
--- a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
+++ b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
@@ -1,11 +1,11 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const links = inject('links')
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 
-const groups = computed(() => links.value.map(item => ({
+const groups = computed(() => navigation.value.map(item => ({
   key: item.to,
   label: item.label,
   commands: files.value.filter(file => file._path.startsWith(item.to)).map(file => ({
diff --git a/docs/error.vue b/docs/error.vue
new file mode 100644
index 00000000..6fb841e6
--- /dev/null
+++ b/docs/error.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Header />
+
+    <UContainer>
+      <UMain>
+        <UPage>
+          <UPageError :error="error" />
+        </UPage>
+      </UMain>
+    </UContainer>
+
+    <ClientOnly>
+      <UDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+defineProps<{
+  error: NuxtError
+}>()
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
+})
+
+// Provide
+
+provide('navigation', navigation)
+</script>
diff --git a/docs/package.json b/docs/package.json
index 50164bd7..0858fa85 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-28178970.ce8b67a",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91",
     "@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 9d59cd90..3ffd0252 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,21 +1,15 @@
 <template>
-  <UPage v-if="page">
-    <UPageHeader v-bind="page" :headline="headline" />
+  <UPage>
+    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
     <UPageBody prose>
-      <ContentRenderer v-if="page && page.body" :value="page" />
+      <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="mt-12 not-prose">
-        <UButton
-          :to="githubLink"
-          variant="link"
-          icon="i-heroicons-pencil-square"
-          label="Edit this page on GitHub"
-          :padded="false"
-        />
+        <UButton :to="githubLink" variant="link" icon="i-heroicons-pencil-square" label="Edit this page on GitHub" :padded="false" />
       </div>
 
-      <hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
+      <hr v-if="surround?.length" class="my-8">
 
       <UDocsSurround :surround="surround" />
 
@@ -26,25 +20,24 @@
       <UDocsToc :links="page.body.toc.links" />
     </template>
   </UPage>
-  <UPageError v-else />
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
+const { findPageHeadline } = useElementsHelpers()
 
 const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
 const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
   .where({ _extension: 'md', navigation: { $ne: false } })
   .findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
 )
 
-if (process.server && !page.value) {
-  const event = useRequestEvent()
-  setResponseStatus(event, 404)
-}
-
 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))
+const headline = computed(() => findPageHeadline(page.value))
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f961899..ce399132 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,10 +107,10 @@ importers:
         version: 1.1.11
       '@iconify-json/simple-icons':
         specifier: latest
-        version: 1.1.62
+        version: 1.1.63
       '@nuxt-themes/ui-kit':
-        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a
-        version: /@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
+        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91
+        version: /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@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)
@@ -1258,8 +1258,8 @@ packages:
     dependencies:
       '@iconify/types': 2.0.0
 
-  /@iconify-json/simple-icons@1.1.62:
-    resolution: {integrity: sha512-idHWbDrd9HKtZq9XBJyVN5+QCxJ+oO4BJeJtNNi9GfFSgoA2ig0LZt7adj9uZ/zzEX0i5OY37OpuotkeFRCWfg==}
+  /@iconify-json/simple-icons@1.1.63:
+    resolution: {integrity: sha512-aIbo99YLjwZ53XxU9HC+CO9Br9H0vRuGmq8b0TOaGA1g7HX2ZlpmzPvWAte5xbmbohfRzAMX/OVsFhOT+CL+Aw==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
@@ -1447,8 +1447,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
-    resolution: {integrity: sha512-DgrTgcNV4rKVKe+esFjgsGb7janfEESJ6QdNnQh+G1sY8jXJoNdBXSLH8/yZvSBPBPi39THntZEudL2DubXXnA==}
+  /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
+    resolution: {integrity: sha512-O3csaribtIrr38DQadB5z79z2OOSPVHDoIlekWfs5oNqvWAf3dshFvayUG3WPOQVdR1Uitt8DwU7ZoZIjTRo2A==}
     peerDependencies:
       '@nuxt/content': ^2.7.2
       '@nuxthq/ui': npm:@nuxthq/ui-edge@latest
@@ -1457,6 +1457,7 @@ packages:
       '@nuxthq/ui': 'link:'
       '@vueuse/core': 10.3.0(vue@3.3.4)
       lodash-es: 4.17.21
+      tailwind-merge: 1.14.0
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -10871,6 +10872,10 @@ packages:
       - supports-color
     dev: false
 
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+    dev: true
+
   /tailwindcss@3.3.3:
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
     engines: {node: '>=14.0.0'}