diff --git a/.starters/default/content/3.components/3.app/search.md b/.starters/default/content/3.components/3.app/_search.md
similarity index 100%
rename from .starters/default/content/3.components/3.app/search.md
rename to .starters/default/content/3.components/3.app/_search.md
diff --git a/.starters/default/content/3.components/3.app/text-direction.md b/.starters/default/content/3.components/3.app/_text-direction.md
similarity index 85%
rename from .starters/default/content/3.components/3.app/text-direction.md
rename to .starters/default/content/3.components/3.app/_text-direction.md
index ef6952236..1f50dad2d 100644
--- a/.starters/default/content/3.components/3.app/text-direction.md
+++ b/.starters/default/content/3.components/3.app/_text-direction.md
@@ -5,5 +5,5 @@ Docus and Elements is build using logical properties and values, which means it'
 ::callout{icon}
 This component still WIP 🚧
 
-It's not clear if it's useful to have for English based documentation, it needs an option of setting default text direction with `app.config`, and also saving user choice feature.
+It's not clear if it's useful to have for English-based documentation, it needs an option of setting default text direction with `app.config`, and also saving user choice feature.
 ::
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/1.navigation.md b/.starters/default/content/3.components/4.docs/1.navigation.md
new file mode 100644
index 000000000..6aa1a83ef
--- /dev/null
+++ b/.starters/default/content/3.components/4.docs/1.navigation.md
@@ -0,0 +1,9 @@
+# Navigation
+
+Component for rendering `Docs` tree navigation, from `content` folder structure. Could be nested and collapsible, depending on configuration.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/2.toc.md b/.starters/default/content/3.components/4.docs/2.toc.md
new file mode 100644
index 000000000..ce5a5748c
--- /dev/null
+++ b/.starters/default/content/3.components/4.docs/2.toc.md
@@ -0,0 +1,9 @@
+# Table of Contents
+
+A component for `Docs` article Table of Contents.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/3.toc-links.md b/.starters/default/content/3.components/4.docs/3.toc-links.md
new file mode 100644
index 000000000..63c62a1d7
--- /dev/null
+++ b/.starters/default/content/3.components/4.docs/3.toc-links.md
@@ -0,0 +1,9 @@
+# Table of Contents Links
+
+Renders `DocsToc` links tree.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/aside.md b/.starters/default/content/3.components/4.docs/aside.md
deleted file mode 100644
index 599b8ee02..000000000
--- a/.starters/default/content/3.components/4.docs/aside.md
+++ /dev/null
@@ -1 +0,0 @@
-# Aside
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/content-bottom.md b/.starters/default/content/3.components/4.docs/content-bottom.md
index e69de29bb..40a12d79a 100644
--- a/.starters/default/content/3.components/4.docs/content-bottom.md
+++ b/.starters/default/content/3.components/4.docs/content-bottom.md
@@ -0,0 +1,3 @@
+# Content Bottom
+
+Component for rendering content bottom section.
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/edit-on.md b/.starters/default/content/3.components/4.docs/edit-on.md
index e69de29bb..2a840b54a 100644
--- a/.starters/default/content/3.components/4.docs/edit-on.md
+++ b/.starters/default/content/3.components/4.docs/edit-on.md
@@ -0,0 +1,3 @@
+# Edit On
+
+Component for rendering `EditOn` GitHub link.
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/navigation.md b/.starters/default/content/3.components/4.docs/navigation.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/.starters/default/content/3.components/4.docs/prev-next.md b/.starters/default/content/3.components/4.docs/prev-next.md
index e69de29bb..6f97ed0dc 100644
--- a/.starters/default/content/3.components/4.docs/prev-next.md
+++ b/.starters/default/content/3.components/4.docs/prev-next.md
@@ -0,0 +1,64 @@
+# Prev Next
+
+Component for rendering `PrevNext` navigation links.
+
+## Design Tokens
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  docus: {
+    docs: {
+      prevNext: {
+        gap: '{space.8}',
+        padding: '{space.6}',
+        backgroundColor: {
+          initial: '{color.gray.50}',
+          dark: '{color.gray.900}'
+        },
+        borderRadius: '{radii.2xs}',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: {
+          initial: '{color.gray.200}',
+          dark: '{color.gray.800}'
+        },
+        boxShadow: {
+          static: {
+            initial: 'none',
+            dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.xs}'
+          },
+          hover: {
+            initial: 'none',
+            dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.lg}'
+          }
+        },
+        title: {
+          color: {
+            hover: '{color.primary.500}'
+          },
+          fontWeight: '{fontWeight.medium}',
+          marginBottom: '{space.2}'
+        },
+        directory: {
+          marginBottom: '{space.3}',
+          fontSize: '{text.xs.fontSize}',
+          lineHeight: '{text.xs.lineHeight}',
+          fontWeight: '{fontWeight.medium}',
+          color: '{color.gray.500}'
+        },
+        icon: {
+          size: '{space.8}',
+          marginBottom: '{space.4}'
+        },
+        description: {
+          fontSize: '{text.sm.fontSize}',
+          lineHeight: '{text.sm.lineHeight}',
+          color: '{color.gray.500}'
+        }
+      }
+    },
+  }
+})
+```
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/toc-links.md b/.starters/default/content/3.components/4.docs/toc-links.md
deleted file mode 100644
index 623bc8f05..000000000
--- a/.starters/default/content/3.components/4.docs/toc-links.md
+++ /dev/null
@@ -1 +0,0 @@
-# Table of Contents Links
\ No newline at end of file
diff --git a/.starters/default/content/3.components/4.docs/toc.md b/.starters/default/content/3.components/4.docs/toc.md
deleted file mode 100644
index c39c88a79..000000000
--- a/.starters/default/content/3.components/4.docs/toc.md
+++ /dev/null
@@ -1 +0,0 @@
-# Table of Contents
\ No newline at end of file
diff --git a/components/app/AppHeaderDialog.vue b/components/app/AppHeaderDialog.vue
deleted file mode 100644
index 771cdc327..000000000
--- a/components/app/AppHeaderDialog.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script setup lang="ts">
-const { navigation } = useContent()
-const { config } = useDocus()
-
-const filtered = computed(() => config.value.aside?.exclude || [])
-
-const links = computed(() => {
-  return (navigation.value || []).filter((item: any) => {
-    if (filtered.value.includes(item._path)) { return false }
-    return true
-  })
-})
-
-const { visible, open, close } = useMenu()
-
-watch(visible, v => (v ? open() : close()))
-</script>
-
-<template>
-  <button
-    aria-label="Menu"
-    @click="open"
-  >
-    <Icon
-      name="heroicons-outline:menu"
-      aria-hidden="”true”"
-    />
-  </button>
-
-  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
-  <teleport to="body">
-    <nav
-      v-if="visible"
-      class="dialog"
-      @click="close"
-    >
-      <div @click.stop>
-        <div class="wrapper">
-          <button
-            aria-label="Menu"
-            @click="close"
-          >
-            <Icon
-              name="heroicons-outline:x"
-              aria-hidden="”true”"
-            />
-          </button>
-
-          <div class="icons">
-            <AppSocialIcons />
-          </div>
-        </div>
-
-        <DocsAsideTree :links="links" />
-      </div>
-    </nav>
-  </teleport>
-</template>
-
-<style scoped lang="ts">
-css({
-  button: {
-    position: 'relative',
-    zIndex: '10',
-    display: 'flex',
-    padding: '{space.4} {space.4} {space.4} 0',
-    '@lg': {
-      display: 'none'
-    },
-    color: '{color.gray.500}',
-    '@dark': {
-      color: '{color.gray.400}',
-    },
-    '&:hover': {
-      color: '{color.gray.700}',
-      '@dark': {
-        color: '{color.gray.200}',
-      }
-    },
-  },
-  '.dialog': {
-    position: 'fixed',
-    inset: '0 0 0 0',
-    zIndex: '50',
-    display: 'flex',
-    alignItems: 'flex-start',
-    overflowY: 'auto',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    backdropFilter: '{elements.backdrop.filter}',
-    '@dark': {
-      backgroundColor: 'rgba(0, 0, 0, 0.5)'
-    },
-    '@lg': {
-      display: 'none'
-    },
-    '.icons': {
-      overflow: 'auto'
-    },
-    // Dialog content
-    '& > div': {
-      maxWidth: '{size.xs}',
-      width: '100%',
-      minHeight: '100%',
-      boxShadow: '{shadow.md}',
-      px: '{space.4}',
-      backgroundColor: '{color.white}',
-      '@dark': {
-        backgroundColor: '{color.black}',
-      },
-      '@sm': {
-        px: '{space.6}',
-      },
-      // Dialog header
-      '& > div': {
-        height: '{docus.header.height}',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderBottom: '1px solid transparent',
-        gap: '{space.2}',
-        '.icons': {
-          display: 'flex',
-          alignItems: 'center',
-        }
-      }
-    }
-  },
-  ':deep(.icon)': {
-    width: '{space.4}',
-    height: '{space.4}'
-  }
-})
-</style>
diff --git a/components/docs/DocsAside.vue b/components/docs/DocsAside.vue
deleted file mode 100644
index 2ae68a92f..000000000
--- a/components/docs/DocsAside.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-const { tree } = useDocus()
-</script>
-
-<template>
-  <nav>
-    <DocsNavigation v-if="tree?.length > 0" :links="tree" />
-    <NuxtLink v-else to="/" class="go-back-link">
-      <Icon name="heroicons-outline:arrow-left" class="icon" />
-      <span class="text">Go back</span>
-    </NuxtLink>
-  </nav>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.go-back-link': {
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '{text.sm.fontSize}',
-    lineHeight: '{text.sm.lineHeight}',
-    cursor: 'pointer',
-    color: '{elements.text.secondary.color.static}',
-    '&:hover': {
-      color: '{elements.text.secondary.color.hover}'
-    },
-    '.icon': {
-      width: '{space.4}',
-      height: '{space.4}'
-    },
-    '.text': {
-      marginInlineStart: '{space.2}'
-    }
-  }
-})
-</style>
diff --git a/components/docs/DocsContentBottom.vue b/components/docs/DocsContentBottom.vue
index dda6d9087..9e6f88e38 100644
--- a/components/docs/DocsContentBottom.vue
+++ b/components/docs/DocsContentBottom.vue
@@ -13,7 +13,10 @@ const { config } = useDocus()
       class="edit-link"
     >
       <Icon name="uil:edit" />
-      <DocsEditOn v-slot="{ url }" :page="page">
+      <DocsEditOn
+        v-slot="{ url }"
+        :page="page"
+      >
         <ProseA :to="url">
           <span>
             Edit this page on GitHub
diff --git a/components/layout/DocsLayout.vue b/components/layout/DocsLayout.vue
index 3313dbd06..3272b8731 100644
--- a/components/layout/DocsLayout.vue
+++ b/components/layout/DocsLayout.vue
@@ -63,15 +63,28 @@ onBeforeUnmount(() => {
     }"
   >
     <!-- Aside -->
-    <aside v-if="hasAside" ref="asideNav" class="aside-nav">
-      <AppNavigation v-if="config.aside?.navigation" vertical />
-      <DocsAside class="app-aside" />
+    <aside
+      v-if="hasAside"
+      ref="asideNav"
+      class="aside-nav"
+    >
+      <AppNavigation
+        v-if="config.aside?.navigation"
+        vertical
+      />
+      <DocsNavigation
+        v-if="tree?.length > 0"
+        :links="tree"
+      />
     </aside>
 
     <!-- Page Content -->
     <article class="page-content">
       <slot v-if="hasContent" />
-      <Alert v-else type="info">
+      <Alert
+        v-else
+        type="info"
+      >
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
       </Alert>
       <template v-if="hasContent && page && bottom">
@@ -83,7 +96,10 @@ onBeforeUnmount(() => {
     </article>
 
     <!-- ToC -->
-    <div v-if="hasToc" class="toc">
+    <div
+      v-if="hasToc"
+      class="toc"
+    >
       <div class="toc-wrapper">
         <button @click="isOpen = !isOpen">
           <span class="title">Table of Contents</span>