diff --git a/playground/components/NuxtButton.story.vue b/playground/components/forms/NuxtButton.story.vue
similarity index 100%
rename from playground/components/NuxtButton.story.vue
rename to playground/components/forms/NuxtButton.story.vue
diff --git a/playground/components/NuxtSelect.story.vue b/playground/components/forms/NuxtSelect.story.vue
similarity index 100%
rename from playground/components/NuxtSelect.story.vue
rename to playground/components/forms/NuxtSelect.story.vue
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index fdc2880..1318831 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue'
 import { onKeyStroke, useMagicKeys, onClickOutside } from '@vueuse/core'
+import Icon from './elements/Icon.vue'
 
 interface CommandItem {
   id: string | number
   label: string
-  action: () => void
 }
 
+const emits = defineEmits(['update'])
+
 const props = withDefaults(defineProps<{
   items: CommandItem[]
   keyCombo?: string
@@ -49,9 +51,9 @@ const filteredItems = computed(() => {
 })
 
 function handleSelect(item: CommandItem) {
-  item.action()
   isOpen.value = false
   searchQuery.value = ''
+  emits('update', item.id)
 }
 
 onKeyStroke('ArrowDown', (e) => {
@@ -104,6 +106,10 @@ function scrollIntoView(index: number) {
 </script>
 
 <template>
+  <div
+    v-if="isOpen"
+    class="command-pallete-bg"
+  />
   <div
     v-if="isOpen"
     ref="paletteRef"
@@ -121,25 +127,10 @@ function scrollIntoView(index: number) {
           class="command-palette-input"
           @focus="isOpen = true"
         >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-search command-palette-icon"
-        >
-          <circle
-            cx="11"
-            cy="11"
-            r="8"
-          />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
+        <Icon
+          name="search"
+          class="command-palette-icon"
+        />
       </div>
       <div
         ref="itemsRef"
@@ -163,11 +154,21 @@ function scrollIntoView(index: number) {
 </template>
 
 <style scoped>
+.command-pallete-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 40;
+}
+
 .command-palette {
   position: fixed;
-  top: 50%;
+  top: 25%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -20%);
   width: 100%;
   max-width: 600px;
   z-index: 50;
diff --git a/src/runtime/components/OpenInEditorButton.vue b/src/runtime/components/OpenInEditorButton.vue
deleted file mode 100644
index 87c7c5d..0000000
--- a/src/runtime/components/OpenInEditorButton.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <button
-    class="open-in-editor-button"
-    title="Open in editor"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-file-code"
-    ><path d="M10 12.5 8 15l2 2.5" /><path d="m14 12.5 2 2.5-2 2.5" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" /></svg>
-  </button>
-</template>
-
-<style scoped>
-.open-in-editor-button {
-  width: 24px;
-  height: 24px;
-  padding: 4px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.open-in-editor-button:hover {
-  background: #f9fafb;
-  color: #374151;
-  border-color: #d1d5db;
-}
-</style>
diff --git a/src/runtime/components/Story.vue b/src/runtime/components/Story.vue
index 3bfacdc..6997852 100644
--- a/src/runtime/components/Story.vue
+++ b/src/runtime/components/Story.vue
@@ -10,11 +10,10 @@
       >
         <slot name="title">
           <h2
-            v-if="title"
             class="story-title"
             :class="tvStory().title({ class: [classes?.title, storyClasses.title] })"
           >
-            {{ title }}
+            {{ title || story?.pascalName }}
           </h2>
         </slot>
         <slot name="actions">
@@ -23,7 +22,7 @@
             :class="tvStory().actions({ class: [classes?.actions, storyClasses.actions] })"
           >
             <DevOnly>
-              <OpenInEditorButton
+              <EditButton
                 @click="openInEditor"
               />
             </DevOnly>
@@ -50,11 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useSlots } from 'vue'
 import type { VNode } from 'vue'
+import { computed, inject, useSlots } from 'vue'
 import { tv } from 'tailwind-variants'
-import type { ComponentSlotClasses, BedtimeStory } from '../../types/module'
+import type { BedtimeStory, ComponentSlotClasses } from '../../types/module'
 import Variant from './Variant.vue'
+import EditButton from './buttons/EditButton.vue'
 // @ts-expect-error resolved at runtime
 import { useRuntimeConfig } from '#imports'
 
@@ -119,17 +119,22 @@ const layout = computed(() => {
     }
 
     else if (width) {
-      // grid
-      if (width.endsWith('%')) {
-        const percent = Number.parseInt(width)
+      let w = String(width)
+
+      // proportional
+      if (w.endsWith('%')) {
+        const percent = Number.parseInt(w)
         layout.type = 'grid'
         layout.cols = Math.round(1 / (percent / 100))
       }
 
-      // wrap
-      else if (width.endsWith('px')) {
+      // fixed size
+      else {
+        if (!w.endsWith('px')) {
+          w += 'px'
+        }
         layout.type = 'wrap'
-        layout.width = width
+        layout.width = w
       }
     }
   }
@@ -176,48 +181,59 @@ async function openInEditor() {
     display: var(--story-header-display);
     margin-bottom: var(--story-header-margin-bottom);
     gap: var(--story-header-gap);
+
     & > * + * {
       flex-shrink: 0;
     }
   }
-}
 
-.story-content[data-layout="none"] {
-  & > .variant-container + .variant-container {
-    margin-top: 1.5rem; /* aldi space-y-4 */
+  .story-content[data-layout="none"] {
+    & > .variant-container + .variant-container {
+      margin-top: 1.5rem; /* aldi space-y-4 */
+    }
   }
-}
 
-.story-content[data-layout="grid"] {
-  --gap: 1.5rem;
-  --columns: v-bind('layout.cols');
-  --numGaps: calc(var(--columns) - 1);
-  --allGaps: calc(var(--numGaps) * var(--gap));
+  .story-content[data-layout="grid"] {
+    --gap: 1.5rem;
+    --columns: v-bind('layout.cols');
+    --numGaps: calc(var(--columns) - 1);
+    --allGaps: calc(var(--numGaps) * var(--gap));
 
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
 
-  .variant-container {
-    width: calc(
-      (100% - var(--allGaps)) / var(--columns)
-    );
+    .variant-container {
+      width: calc(
+        (100% - var(--allGaps)) / var(--columns)
+      );
+    }
   }
-}
 
-.story-content[data-layout="wrap"] {
-  --gap: 1.5rem;
+  .story-content[data-layout="wrap"] {
+    --gap: 1.5rem;
 
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
 
-  .variant-container {
-    width: v-bind('layout.width');
+    .variant-container {
+      flex-shrink: 0;
+      width: v-bind('layout.width');
+    }
   }
-}
 
-.story-content > .variant-container {
-  overflow: hidden;
+  .story-content {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .variant-container.stretch {
+    display: flex !important;
+    overflow: hidden;
+    height: 100%;
+    flex-direction: column;
+    flex-grow: 1;
+  }
 }
 </style>
diff --git a/src/runtime/components/Variant.vue b/src/runtime/components/Variant.vue
index f58da45..14232a9 100644
--- a/src/runtime/components/Variant.vue
+++ b/src/runtime/components/Variant.vue
@@ -58,8 +58,8 @@
 import { inject, ref, watch } from 'vue'
 import { tv } from 'tailwind-variants'
 import type { ComponentSlotClasses, BedtimeStory } from '../../types/module'
-import CodeButton from './CodeButton.vue'
-import CopyButton from './CopyButton.vue'
+import CodeButton from './buttons/CodeButton.vue'
+import CopyButton from './buttons/CopyButton.vue'
 import TemplateView from './TemplateView.vue'
 // @ts-expect-error resolved at runtime
 import { useRoute, useRuntimeConfig } from '#imports'
@@ -128,6 +128,7 @@ watch(() => route.hash, (newHash) => {
     margin: var(--variant-content-margin);
     padding: var(--variant-content-padding);
     position: var(--variant-content-position);
+    background-color: var(--variant-content-bg-color);
   }
 
   .variant-content::after {
diff --git a/src/runtime/components/CodeButton.vue b/src/runtime/components/buttons/CodeButton.vue
similarity index 67%
rename from src/runtime/components/CodeButton.vue
rename to src/runtime/components/buttons/CodeButton.vue
index 71aee2f..34b8783 100644
--- a/src/runtime/components/CodeButton.vue
+++ b/src/runtime/components/buttons/CodeButton.vue
@@ -1,29 +1,22 @@
 <template>
   <button
-    class="code-button"
+    class="bt-button code-button"
     :class="{ active: model }"
     :title="model ? 'Hide code' : 'Show code'"
     @click="model = !model"
   >
-    <span class="code-icon">
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="16 18 22 12 16 6" />
-        <polyline points="8 6 2 12 8 18" />
-      </svg>
+    <span class="code-icon bt-icon">
+      <Icon
+        name="code"
+        size="full"
+      />
     </span>
   </button>
 </template>
 
 <script setup lang="ts">
+import Icon from '../elements/Icon.vue'
+
 defineOptions({
   name: 'StoryCodeButton',
 })
@@ -35,7 +28,7 @@ const model = defineModel<boolean>()
 .code-button {
   width: 24px;
   height: 24px;
-  padding: 6px;
+  padding: 3px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
diff --git a/src/runtime/components/CopyButton.vue b/src/runtime/components/buttons/CopyButton.vue
similarity index 57%
rename from src/runtime/components/CopyButton.vue
rename to src/runtime/components/buttons/CopyButton.vue
index ac92a5f..7119a1a 100644
--- a/src/runtime/components/CopyButton.vue
+++ b/src/runtime/components/buttons/CopyButton.vue
@@ -1,57 +1,20 @@
 <template>
   <button
-    class="copy-button"
+    class="bt-button copy-button"
     :class="{ copied }"
     :title="copied ? 'Copied!' : 'Copy to clipboard'"
     @click="copyToClipboard"
   >
-    <span
-      v-if="!copied"
-      class="copy-icon"
-    >
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <rect
-          x="9"
-          y="9"
-          width="13"
-          height="13"
-          rx="2"
-          ry="2"
-        />
-        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-      </svg>
-    </span>
-    <span
-      v-else
-      class="check-icon"
-    >
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="20 6 9 17 4 12" />
-      </svg>
-    </span>
+    <Icon
+      :name="copied ? 'check' : 'copy'"
+      size="xs"
+    />
   </button>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import Icon from '../elements/Icon.vue'
 
 defineOptions({
   name: 'StoryCopyButton',
@@ -84,7 +47,7 @@ async function copyToClipboard() {
 .copy-button {
   width: 24px;
   height: 24px;
-  padding: 6px;
+  padding: 3px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
@@ -96,6 +59,13 @@ async function copyToClipboard() {
   justify-content: center;
 }
 
+.bt-icon {
+  line-height: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
 .copy-button:hover {
   background: #f9fafb;
   color: #374151;
diff --git a/src/runtime/components/buttons/EditButton.vue b/src/runtime/components/buttons/EditButton.vue
new file mode 100644
index 0000000..85e2384
--- /dev/null
+++ b/src/runtime/components/buttons/EditButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <button
+    class="bt-button open-in-editor-button"
+    title="Open in editor"
+  >
+    <Icon name="edit" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import Icon from '../elements/Icon.vue'
+</script>
+
+<style scoped>
+.open-in-editor-button {
+  width: 24px;
+  height: 24px;
+  padding: 3px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.open-in-editor-button:hover {
+  background: #f9fafb;
+  color: #374151;
+  border-color: #d1d5db;
+}
+</style>
diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
new file mode 100644
index 0000000..7c83d2b
--- /dev/null
+++ b/src/runtime/components/elements/Icon.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'BtIcon',
+})
+
+// @see https://heroicons.com/outline
+const PATHS = {
+  'check': `<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />`,
+  'code': `<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />`,
+  'copy': `<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />`,
+  'edit': `<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />`,
+  'document': `<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />`,
+  'search': `<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />`,
+  'folder': `<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />`,
+  'folder-open': `<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />`,
+  'minus-circle': `<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />`,
+  'plus-circle': `<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />`,
+  'plus': `<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />`,
+  'minus': `<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />`,
+}
+
+const props = defineProps<{
+  name: keyof typeof PATHS
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full'
+}>()
+
+const path = computed(() => PATHS[props.name])
+const size = computed(() => props.size ?? 'md')
+const attrs = useAttrs()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    class="bt-icon"
+    :data-size="size"
+    v-bind="attrs"
+    v-html="path"
+  />
+</template>
+
+<style>
+.bt-icon{
+  display: inline-block;
+}
+
+.bt-icon[data-size="xs"] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.bt-icon[data-size="sm"] {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.bt-icon[data-size="md"] {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.bt-icon[data-size="lg"] {
+  width: 2rem;
+  height: 2rem;
+}
+
+.bt-icon[data-size="full"] {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/runtime/components/nav/NavFolder.vue b/src/runtime/components/nav/NavFolder.vue
new file mode 100644
index 0000000..744510e
--- /dev/null
+++ b/src/runtime/components/nav/NavFolder.vue
@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="bt-nav-folder"
+    :data-path="folder.path"
+    :data-level="level"
+  >
+    <!-- Folder title -->
+    <div
+      class="bt-nav-folder-header"
+      @click="isClosed = !isClosed"
+    >
+      <Icon
+        v-if="level > 0"
+        :name="isClosed ? 'plus' : 'minus'"
+        class="bt-nav-folder-icon"
+      />
+      <span class="bt-nav-folder-title">{{ folder.title }}</span>
+    </div>
+
+    <!-- folders -->
+    <div
+      v-if="!isClosed"
+      class="bt-nav-folder-container"
+    >
+      <div
+        v-if="folder.folders && folder.folders.length > 0"
+        class="bt-nav-folder-folders"
+      >
+        <NavFolder
+          v-for="subfolder in folder.folders"
+          :key="subfolder.title"
+          :folder="subfolder"
+          :level="level + 1"
+        />
+      </div>
+
+      <!-- stories -->
+      <div
+        v-if="folder.stories && folder.stories.length > 0"
+        class="bt-nav-folder-items"
+      >
+        <NavItem
+          v-for="story in folder.stories"
+          :key="story.kebabName"
+          :story="story"
+          :level="level + 1"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import Icon from '../elements/Icon.vue'
+import NavItem from './NavItem.vue'
+import type { NavFolderData } from './types'
+
+defineOptions({
+  name: 'NavFolder',
+})
+
+const props = withDefaults(defineProps<{
+  folder: NavFolderData
+  level?: number
+}>(), {
+  level: 0,
+})
+
+const isClosed = ref(false)
+
+function getClosedKey() {
+  return `bt-folder-closed:${props.folder.path}`
+}
+
+watch(isClosed, () => {
+  const key = getClosedKey()
+  if (isClosed.value) {
+    localStorage.setItem(key, '1')
+  }
+  else {
+    localStorage.removeItem(key)
+  }
+})
+onMounted(() => {
+  const key = getClosedKey()
+  const closed = !!localStorage.getItem(key)
+  if (closed) {
+    isClosed.value = true
+  }
+})
+</script>
+
+<style>
+.bt-nav-folder-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
+  padding: .25em 0;
+  user-select: none;
+}
+
+.bt-nav-folder-header:hover .bt-icon {
+  opacity: 1;
+}
+
+.bt-nav-folder-title {
+  margin-bottom: .1em;
+  font-weight: 500;
+  text-transform: capitalize;
+  cursor: default;
+  color: #374151;
+}
+
+.bt-nav-folder:not([data-level="0"]) > .bt-nav-folder-container {
+  margin-left: 1.3em;
+  margin-bottom: .5em;
+}
+
+.bt-nav-folder-container > * {
+  display: flex;
+  flex-direction: column;
+  gap: .25em;
+}
+
+.bt-nav-folder-items {
+  margin-bottom: .1em;
+}
+</style>
diff --git a/src/runtime/components/nav/NavItem.vue b/src/runtime/components/nav/NavItem.vue
new file mode 100644
index 0000000..fd6f391
--- /dev/null
+++ b/src/runtime/components/nav/NavItem.vue
@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="bt-nav-item"
+    :data-id="story.kebabName"
+    :data-path="path"
+    :data-level="level"
+  >
+    <NuxtLink
+      :to="`/stories/${story.kebabName}`"
+      class="bt-nav-item-link"
+      :class="{ 'bt-active': currentStory === story.kebabName }"
+    >
+      <div class="bt-nav-item-content">
+        <Icon
+          name="document"
+          size="sm"
+          class="bt-nav-item-icon"
+        />
+        <span class="bt-nav-item-title">{{ title }}</span>
+      </div>
+      <span class="bt-nav-item-variants">{{ Object.values(story.variants ?? {}).length || 1 }}</span>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import type { BedtimeStory } from '../../../types/module'
+import Icon from '../elements/Icon.vue'
+
+defineOptions({
+  name: 'NavItem',
+})
+
+const props = defineProps<{
+  story: BedtimeStory
+  level: number
+}>()
+
+const currentStory = computed(() => useRoute()?.params.slug as string)
+
+const path = computed(() => {
+  return props.story.shortPath
+    .replace(/\.story\.vue$/, '')
+    .trim()
+})
+
+const title = computed(() => {
+  return path.value.split('/').pop()
+})
+</script>
+
+<style>
+.bt-nav-item {
+  font-size: .85em;
+}
+
+.bt-nav-item-link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: .25em .4em;
+  text-decoration: none;
+  color: #374151;
+  transition: all 0.2s;
+  line-height: 1;
+  border-radius: .25em;
+}
+
+.bt-nav-item-link:hover {
+  background-color: #e5e7eb;
+}
+
+.bt-nav-item-link.bt-active {
+  background-color: #e5e7eb;
+  font-weight: 500;
+}
+
+.bt-nav-item-content {
+  display: flex;
+  gap: 0.4em;
+  align-items: center;
+}
+
+.bt-nav-item-icon {
+  transform: translateY(-.1em);
+}
+
+.bt-nav-item-variants {
+  font-variant: tabular-nums;
+  font-size: .75em;
+  line-height: 1;
+  padding: .25em;
+}
+
+/* legacy variables */
+
+.stories-sidebar-link {
+  display: block;
+  padding: var(--stories-sidebar-link-padding);
+  color: var(--stories-sidebar-link-color);
+  text-decoration: none;
+  border-radius: var(--stories-sidebar-link-border-radius);
+  transition: var(--stories-sidebar-link-transition);
+  font-size: var(--stories-sidebar-link-font-size);
+}
+
+.stories-sidebar-link:hover {
+  background-color: var(--stories-sidebar-link-bg-hover);
+}
+
+.stories-sidebar-link.active {
+  background-color: var(--stories-sidebar-link-active-bg);
+  font-weight: var(--stories-sidebar-link-active-weight);
+}
+</style>
diff --git a/src/runtime/components/nav/NavRoot.vue b/src/runtime/components/nav/NavRoot.vue
new file mode 100644
index 0000000..92e071c
--- /dev/null
+++ b/src/runtime/components/nav/NavRoot.vue
@@ -0,0 +1,116 @@
+<template>
+  <nav
+    class="bt-nav-root"
+    :style="{ display: !isMounted ? 'none' : undefined }"
+  >
+    <div v-if="tree">
+      <NavFolder
+        v-for="folder in nested.folders"
+        :key="folder.title"
+        :folder="folder"
+      />
+    </div>
+    <div
+      v-else
+      class="bt-nav-folder-items"
+    >
+      <NavItem
+        v-for="story in stories"
+        :key="story.shortPath"
+        :story="story"
+        :level="0"
+      />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import type { BedtimeStory } from '../../../types/module'
+import NavFolder from './NavFolder.vue'
+import NavItem from './NavItem.vue'
+import type { NavFolderData } from './types'
+
+defineOptions({
+  name: 'StoriesNav',
+})
+
+const props = defineProps<{
+  stories: BedtimeStory[]
+  tree?: boolean
+}>()
+
+/**
+ * Transform flat story list into hierarchical tree structure
+ */
+const nested = computed<NavFolderData>(() => {
+  const data: NavFolderData = {
+    title: 'root',
+    path: '/',
+    folders: [],
+    stories: [],
+  }
+
+  // tree
+  // sort stories to ensure consistent order
+  const sorted = [...props.stories].sort((a, b) =>
+    a.shortPath.localeCompare(b.shortPath),
+  )
+
+  // build the tree structure
+  for (const story of sorted) {
+    const parts = story.shortPath.split('/')
+    let current = data
+
+    // handle nested paths
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+
+      // find existing folder or create new one
+      let folder = current.folders.find(f => f.title === part)
+
+      if (!folder) {
+        folder = {
+          title: part,
+          path: parts.slice(0, i + 1).join('/'),
+          folders: [],
+          stories: [],
+        }
+        current.folders.push(folder)
+      }
+
+      current = folder
+    }
+
+    // add the story to the current level
+    current.stories.push(story)
+  }
+
+  // return
+  return data
+})
+
+// prevent fouc
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+
+<style>
+.bt-nav-root {
+  width: 100%;
+}
+
+.bt-nav-root .bt-icon {
+  opacity: 0.5;
+}
+
+.bt-nav-root {
+  > .bt-nav-folder +.bt-nav-folder {
+    margin-top: 1.5rem;
+    padding-top: 1em;
+    border-top: 1px solid #EEE;
+  }
+}
+</style>
diff --git a/src/runtime/components/nav/types.ts b/src/runtime/components/nav/types.ts
new file mode 100644
index 0000000..5bd142d
--- /dev/null
+++ b/src/runtime/components/nav/types.ts
@@ -0,0 +1,8 @@
+import type { BedtimeStory } from '../../../types/module'
+
+export interface NavFolderData {
+  title: string
+  path: string
+  folders: NavFolderData[]
+  stories: BedtimeStory[]
+}
diff --git a/src/runtime/composables/useOptions.ts b/src/runtime/composables/useOptions.ts
new file mode 100644
index 0000000..41362d6
--- /dev/null
+++ b/src/runtime/composables/useOptions.ts
@@ -0,0 +1,37 @@
+import { onMounted, watch } from 'vue'
+import { useState } from 'nuxt/app'
+
+interface Options {
+  tree: boolean
+}
+
+const KEY = 'bedtime-options'
+
+export function useOptions() {
+  // initialize with default values for consistent ssr
+  const options = useState<Options>(KEY, () => ({
+    tree: true,
+  }))
+
+  // client-side localstorage handling
+  if (import.meta.client) {
+    onMounted(() => {
+      const stored = localStorage.getItem(KEY)
+      if (stored) {
+        try {
+          options.value = JSON.parse(stored)
+        }
+        catch (err: unknown) {
+          console.error('Failed to parse stored options:', err)
+        }
+      }
+    })
+
+    // save changes to localstorage
+    watch(options, (values) => {
+      localStorage.setItem(KEY, JSON.stringify(values))
+    }, { deep: true })
+  }
+
+  return options
+}
diff --git a/src/runtime/composables/useScrollfix.ts b/src/runtime/composables/useScrollfix.ts
new file mode 100644
index 0000000..9b29421
--- /dev/null
+++ b/src/runtime/composables/useScrollfix.ts
@@ -0,0 +1,38 @@
+import { onMounted, onUpdated, type Ref } from 'vue'
+// @ts-expect-error resolved at runtime
+import { onBeforeRouteLeave, onBeforeRouteUpdate, type RouteLocationNormalized } from '#vue-router'
+// @ts-expect-error resolved at runtime
+import { useState } from '#imports'
+
+export function useFixScroll(ref: Ref<HTMLElement | undefined>) {
+  const id = ref.value?.id || ref.value?.className
+  if (ref.value && !id) {
+    console.warn('UseScrollFix requires that the fixed element have a unique class or id')
+  }
+
+  const lastScrollTop = useState<number>(`bedtime-${id}-scroll-top`, () => 0)
+  const saveScrollPosition = () => {
+    if (ref.value) {
+      lastScrollTop.value = ref.value.scrollTop
+    }
+  }
+  const restoreScrollPosition = () => {
+    if (ref.value) {
+      ref.value.scrollTop = lastScrollTop.value
+    }
+  }
+
+  onBeforeRouteLeave((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
+    saveScrollPosition()
+  })
+  onBeforeRouteUpdate((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
+    saveScrollPosition()
+  })
+
+  onMounted(() => {
+    restoreScrollPosition()
+  })
+  onUpdated(() => {
+    restoreScrollPosition()
+  })
+}
diff --git a/src/runtime/pages/story-view.vue b/src/runtime/pages/story-view.vue
index fdf8e1a..c40b8ea 100644
--- a/src/runtime/pages/story-view.vue
+++ b/src/runtime/pages/story-view.vue
@@ -4,27 +4,29 @@
     :data-bedtime-theme="theme"
   >
     <div class="stories-container">
-      <aside
-        ref="sidebarRef"
-        class="stories-sidebar"
-      >
-        <nav>
-          <ul>
-            <li
-              v-for="s in stories"
-              :key="s.kebabName"
-            >
-              <NuxtLink
-                :to="'/stories/' + s.kebabName"
-                class="stories-sidebar-link"
-                :class="{ active: currentStory === s.kebabName }"
-              >
-                {{ formatStoryName(s.pascalName) }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </nav>
+      <!-- sidebar -->
+      <aside class="stories-sidebar">
+        <div
+          ref="sidebarRef"
+          class="stories-sidebar-list"
+        >
+          <NavRoot
+            :stories="stories"
+            :tree="options.tree"
+          />
+        </div>
+
+        <div class="stories-sidebar-options">
+          <label class="select-none">
+            <input
+              v-model="options.tree"
+              type="checkbox"
+            > Show tree
+          </label>
+        </div>
       </aside>
+
+      <!-- main -->
       <main class="stories-main">
         <div class="story-page">
           <div
@@ -45,67 +47,44 @@
         </div>
       </main>
     </div>
-    <CommandPalette :items="storyItems" />
+    <CommandPalette
+      :items="storyItems"
+      @update="onCommandUpdate"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, provide, ref, onMounted, onUpdated } from 'vue'
+import { computed, defineAsyncComponent, provide, ref } from 'vue'
 import type { BedtimeStory } from '../../types/module'
+import { useOptions } from '../composables/useOptions'
+import NavRoot from '../components/nav/NavRoot.vue'
+import CommandPalette from '../components/CommandPalette.vue'
+import { useFixScroll } from '../composables/useScrollfix'
 // @ts-expect-error resolved at runtime
-import type { RouteLocationNormalized } from '#vue-router'
-// @ts-expect-error resolved at runtime
-import { useRoute, onBeforeRouteLeave, onBeforeRouteUpdate, useRuntimeConfig, useState, navigateTo, useHead } from '#imports'
+import { useRoute, useRuntimeConfig, navigateTo, useHead } from '#imports'
 // @ts-expect-error virtual file
 import { stories as storyList } from '#build/stories.mjs'
 
-const route = useRoute()
+// fix scroll jump
 const sidebarRef = ref<HTMLElement>()
-const stories = Object.values(storyList as Record<string, BedtimeStory>).sort((a, b) => a.pascalName.localeCompare(b.pascalName))
-const currentStory = computed(() => route.params.slug as string)
+useFixScroll(sidebarRef)
 
+// options
+const options = useOptions()
 const theme = useRuntimeConfig().public.bedtime?.viewer?.theme
 
-// This scroll position state stuff shouldn't be necessary
-// Maybe it's the fact that this isn't _really_ a Nuxt layout
-const lastScrollTop = useState<number>('bedtime-sidebar-scroll-top', () => 0)
-const saveScrollPosition = () => {
-  if (sidebarRef.value) {
-    lastScrollTop.value = sidebarRef.value.scrollTop
-  }
-}
-const restoreScrollPosition = () => {
-  if (sidebarRef.value) {
-    sidebarRef.value.scrollTop = lastScrollTop.value
-  }
-}
-onBeforeRouteLeave((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
-  saveScrollPosition()
-})
-onBeforeRouteUpdate((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
-  saveScrollPosition()
-})
-onMounted(() => {
-  restoreScrollPosition()
-})
-onUpdated(() => {
-  restoreScrollPosition()
-})
-
-function formatStoryName(name: string): string {
-  return name
-    .replace(/Story$/, '') // Remove 'Story' suffix
-    .trim()
-}
-
+// stories
+const stories = Object.values(storyList as Record<string, BedtimeStory>).sort((a, b) => a.pascalName.localeCompare(b.pascalName))
 const storyItems = computed(() => {
   return stories.map(story => ({
     id: story.kebabName,
     label: story.pascalName,
-    action: () => { navigateTo(`/stories/${story.kebabName}`) },
   }))
 })
 
+// page updates
+const route = useRoute()
 const slug = route.params.slug as string
 const story = storyList[slug]
 
@@ -114,10 +93,17 @@ provide('story', story)
 const storyComponent = story?.component
   ? defineAsyncComponent(story.component)
   : null
-
 useHead({
   title: story ? story.pascalName : 'Story Not Found',
 })
+
+function onCommandUpdate(id: string) {
+  navigateTo(`/stories/${id}`)
+  const target = document.querySelector(`.bt-nav-item[data-id="${id}"]`)
+  if (target) {
+    target?.scrollIntoView()
+  }
+}
 </script>
 
 <style scoped>
@@ -138,50 +124,32 @@ useHead({
   width: var(--stories-sidebar-width);
   background-color: var(--stories-sidebar-bg-color);
   border: var(--stories-sidebar-border);
-  padding: var(--stories-sidebar-padding);
-  overflow-y: auto;
-  flex-shrink: 0;
-}
-
-.stories-sidebar ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.stories-sidebar li {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.stories-sidebar-link {
-  display: block;
-  padding: var(--stories-sidebar-link-padding);
-  color: var(--stories-sidebar-link-color);
-  text-decoration: none;
-  border-radius: var(--stories-sidebar-link-border-radius);
-  transition: var(--stories-sidebar-link-transition);
-  font-size: var(--stories-sidebar-link-font-size);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.stories-sidebar-link:hover {
-  background-color: var(--stories-sidebar-link-bg-hover);
+.stories-sidebar-list {
+  padding: var(--stories-sidebar-padding);
+  height: 100%;
+  flex-grow: 1;
+  overflow-y: auto;
+  scroll-padding: 0.4rem;
 }
 
-.stories-sidebar-link.active {
-  background-color: var(--stories-sidebar-link-active-bg);
-  font-weight: var(--stories-sidebar-link-active-weight);
+.stories-sidebar-options {
+  display: flex;
+  align-items: center;
+  border-top: var(--stories-sidebar-border);
+  padding: var(--stories-sidebar-padding);
 }
 
 .stories-main {
   flex: 1;
   overflow-y: auto;
   padding: var(--stories-main-padding);
-  min-height: 0;
-}
-
-.story-page {
   background-color: var(--stories-main-bg-color);
+  min-height: 0;
 }
 
 .error {
diff --git a/src/runtime/variables.css b/src/runtime/variables.css
index 921199e..c69ad49 100644
--- a/src/runtime/variables.css
+++ b/src/runtime/variables.css
@@ -27,8 +27,11 @@
   --variant-actions-align-content: center;
   --variant-actions-display: flex;
   --variant-actions-gap: 0.5rem;
+
   --variant-border-color: #e5e5e5;
   --variant-container-padding: 0;
+
+  --variant-content-bg-color: #ffffff;
   --variant-content-border: 1px solid #e5e5e5;
   --variant-content-border-radius: 0.375rem;
   --variant-content-guide-color: #e5e5e5;
@@ -37,10 +40,12 @@
   --variant-content-padding: 1rem;
   --variant-content-position: relative;
   --variant-content-guideline-border: 0;
+
   --variant-header-align-content: center;
   --variant-header-display: flex;
   --variant-header-justify: space-between;
   --variant-header-gap: 0.5rem;
+
   --variant-title-font-size: 1rem;
   --variant-title-font-weight: 500;
   --variant-title-letter-spacing: -0.02em;
@@ -55,13 +60,15 @@
 
   /* Stories Layout */
   --stories-layout-height: 100vh;
-  --stories-main-bg-color: #fff;
+  --stories-main-bg-color: #f8f8f8;
   --stories-main-padding: 1.5rem;
+
   --stories-sidebar-bg-color: #f8f8f8;
   --stories-sidebar-border: 1px solid #e5e5e5;
   --stories-sidebar-padding: 1rem;
-  --stories-sidebar-width: 250px;
+  --stories-sidebar-width: 350px;
   --stories-sidebar-link-font-size: 0.875rem;
+  --stories-sidebar-link-color: ;
   --stories-sidebar-link-bg-color: #374151;
   --stories-sidebar-link-bg-hover: #e5e7eb;
   --stories-sidebar-link-padding: 0.5rem;