diff --git a/apps/docs/app/app.config.ts b/apps/docs/app/app.config.ts
new file mode 100644
index 00000000..8023fece
--- /dev/null
+++ b/apps/docs/app/app.config.ts
@@ -0,0 +1,28 @@
+export default defineAppConfig({
+  docs: {
+    title: 'docs-please',
+    github: {
+      url: 'https://github.com/pleaseai/docs',
+      owner: 'pleaseai',
+      name: 'docs',
+      branch: 'main',
+    },
+  },
+  github: {
+    rootDir: 'apps/docs',
+  },
+  ui: {
+    pageHero: {
+      slots: {
+        title: 'font-semibold sm:text-6xl',
+        container: '!pb-0',
+      },
+    },
+    pageCard: {
+      slots: {
+        container: 'lg:flex min-w-0',
+        wrapper: 'flex-none',
+      },
+    },
+  },
+})
diff --git a/apps/docs/app/components/content/ColorModeSwitch.vue b/apps/docs/app/components/content/ColorModeSwitch.vue
index 01de3527..e0ccc8a8 100644
--- a/apps/docs/app/components/content/ColorModeSwitch.vue
+++ b/apps/docs/app/components/content/ColorModeSwitch.vue
@@ -3,28 +3,30 @@ import { SwitchRoot, SwitchThumb } from 'reka-ui'
 
 const colorMode = useColorMode()
 
-const isLight = computed(() => colorMode.value === 'light')
-
-function toggleColorMode(checked: boolean) {
-  colorMode.preference = checked ? 'light' : 'dark'
-}
+// Single computed with getter/setter for clean two-way binding
+const isLight = computed({
+  get: () => colorMode.value === 'light',
+  set: (value: boolean) => {
+    colorMode.preference = value ? 'light' : 'dark'
+  },
+})
 </script>
 
 <template>
   <ClientOnly>
     <div class="flex-1 flex items-center justify-center">
       <SwitchRoot
-        :checked="isLight"
+        v-model="isLight"
         aria-label="Toggle color mode"
         class="relative w-[140px] h-[280px] rounded-lg bg-muted cursor-pointer transition-colors"
-        @update:checked="toggleColorMode"
       >
         <SwitchThumb
           class="absolute top-[2px] left-[2px] flex items-center justify-center rounded-lg bg-background shadow-lg transition-all duration-300 ease-in-out size-[136px] data-[state=checked]:translate-y-[140px]"
         >
           <Icon
             :name="isLight ? 'lucide:sun' : 'lucide:moon'"
-            class="size-16 text-foreground"
+            size="48"
+            class="text-foreground"
           />
         </SwitchThumb>
       </SwitchRoot>
diff --git a/bun.lock b/bun.lock
index 0e3b4785..5e05888c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -17,7 +17,6 @@
     },
     "apps/docs": {
       "name": "@pleaseai/docs-site",
-      "version": "0.1.0",
       "dependencies": {
         "docs-please": "workspace:*",
         "vite-plugin-wasm": "^3.5.0",
@@ -31,7 +30,7 @@
     },
     "packages/layer": {
       "name": "docs-please",
-      "version": "0.1.0",
+      "version": "0.2.0-beta.0",
       "dependencies": {
         "@iconify-json/lucide": "^1.2.75",
         "@nuxt/content": "^3.8.2",
@@ -43,12 +42,14 @@
         "@nuxtjs/mdc": "^0.18.4",
         "@tabler/icons-vue": "^3.35.0",
         "@vueuse/core": "^14.1.0",
+        "@vueuse/integrations": "^14.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "debug": "^4.4.1",
         "defu": "^6.1.4",
         "eslint": "^9.39.1",
         "exsolve": "^1.0.8",
+        "fuse.js": "^7.1.0",
         "lucide-vue-next": "^0.555.0",
         "nuxt-og-image": "^5.1.12",
         "oxc-parser": "^0.99.0",
@@ -868,6 +869,8 @@
 
     "@vueuse/core": ["@vueuse/core@14.1.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw=="],
 
+    "@vueuse/integrations": ["@vueuse/integrations@14.1.0", "", { "dependencies": { "@vueuse/core": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "async-validator": "^4", "axios": "^1", "change-case": "^5", "drauu": "^0.4", "focus-trap": "^7", "fuse.js": "^7", "idb-keyval": "^6", "jwt-decode": "^4", "nprogress": "^0.2", "qrcode": "^1.5", "sortablejs": "^1", "universal-cookie": "^7 || ^8", "vue": "^3.5.0" }, "optionalPeers": ["async-validator", "axios", "change-case", "drauu", "focus-trap", "fuse.js", "idb-keyval", "jwt-decode", "nprogress", "qrcode", "sortablejs", "universal-cookie"] }, "sha512-eNQPdisnO9SvdydTIXnTE7c29yOsJBD/xkwEyQLdhDC/LKbqrFpXHb3uS//7NcIrQO3fWVuvMGp8dbK6mNEMCA=="],
+
     "@vueuse/metadata": ["@vueuse/metadata@14.1.0", "", {}, "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA=="],
 
     "@vueuse/shared": ["@vueuse/shared@14.1.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw=="],
diff --git a/packages/layer/app/app.config.ts b/packages/layer/app/app.config.ts
index e452608c..51af4d66 100644
--- a/packages/layer/app/app.config.ts
+++ b/packages/layer/app/app.config.ts
@@ -1,8 +1,16 @@
 export default defineAppConfig({
   docs: {
     title: 'Documentation',
-    description: 'Documentation site powered by @pleaseai/docs',
+    description: 'Documentation site powered by docs-please',
     url: '',
+    header: {
+      title: '',
+      logo: {
+        light: '',
+        dark: '',
+        alt: '',
+      },
+    },
     github: {
       owner: '',
       name: '',
diff --git a/packages/layer/app/components/app/AppHeader.vue b/packages/layer/app/components/app/AppHeader.vue
index e65782aa..dedfaded 100644
--- a/packages/layer/app/components/app/AppHeader.vue
+++ b/packages/layer/app/components/app/AppHeader.vue
@@ -1,57 +1,112 @@
 <script setup lang="ts">
-import { Moon, Sun } from 'lucide-vue-next'
+import { Github, Moon, Sun } from 'lucide-vue-next'
 import { Button } from '~/components/ui/button'
+import { Separator } from '~/components/ui/separator'
 
+const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
+const isDark = computed(() => colorMode.value === 'dark')
+
 function toggleColorMode() {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  colorMode.preference = isDark.value ? 'light' : 'dark'
 }
 
-const appConfig = useAppConfig()
-const title = computed(() => appConfig.docs?.title || 'Docs')
+const links = computed(() => {
+  const result = []
+  if (appConfig.docs?.github?.url) {
+    result.push({
+      icon: Github,
+      to: appConfig.docs.github.url,
+      target: '_blank',
+      ariaLabel: 'GitHub',
+    })
+  }
+  return result
+})
 </script>
 
 <template>
   <header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <!-- Skip to main content link for accessibility -->
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-[100] focus:rounded-md focus:border focus:bg-background focus:px-4 focus:py-2"
+    >
+      Skip to main content
+    </a>
+
     <div class="container flex h-14 items-center">
       <!-- Logo -->
-      <div class="mr-4 flex">
-        <NuxtLink
-          to="/"
-          class="flex items-center space-x-2"
-        >
-          <span class="font-bold">{{ title }}</span>
-        </NuxtLink>
+      <NuxtLink
+        to="/"
+        class="mr-4 flex items-center gap-2"
+        :aria-label="`${appConfig.docs?.title || 'Home'} - Go to homepage`"
+      >
+        <AppHeaderLogo class="h-6 w-auto shrink-0" />
+      </NuxtLink>
+
+      <!-- Center (Search) -->
+      <div class="hidden flex-1 justify-center lg:flex">
+        <AppHeaderCenter />
       </div>
 
-      <!-- Navigation -->
-      <nav class="flex flex-1 items-center space-x-6 text-sm font-medium">
-        <NuxtLink
-          to="/docs"
-          class="text-muted-foreground transition-colors hover:text-foreground"
-        >
-          Documentation
-        </NuxtLink>
-      </nav>
-
-      <!-- Actions -->
-      <div class="flex items-center space-x-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          @click="toggleColorMode"
-        >
-          <Sun
-            v-if="colorMode.value === 'dark'"
-            class="size-5"
-          />
-          <Moon
-            v-else
-            class="size-5"
+      <!-- Spacer for mobile -->
+      <div class="flex-1 lg:hidden" />
+
+      <!-- Right Actions -->
+      <div class="flex items-center gap-1">
+        <!-- Search button (mobile) -->
+        <AppHeaderSearch class="lg:hidden" />
+
+        <!-- Color mode toggle -->
+        <ClientOnly>
+          <Button
+            variant="ghost"
+            size="icon"
+            @click="toggleColorMode"
+          >
+            <Moon
+              v-if="isDark"
+              class="size-5"
+            />
+            <Sun
+              v-else
+              class="size-5"
+            />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+
+          <template #fallback>
+            <div class="size-8 animate-pulse rounded-md bg-muted" />
+          </template>
+        </ClientOnly>
+
+        <!-- External links (GitHub, etc.) -->
+        <template v-if="links.length">
+          <Separator
+            orientation="vertical"
+            class="mx-1 h-6"
           />
-          <span class="sr-only">Toggle theme</span>
-        </Button>
+          <Button
+            v-for="link in links"
+            :key="link.to"
+            variant="ghost"
+            size="icon"
+            as-child
+          >
+            <a
+              :href="link.to"
+              :target="link.target"
+              :aria-label="link.ariaLabel"
+            >
+              <component
+                :is="link.icon"
+                class="size-5"
+              />
+            </a>
+          </Button>
+        </template>
       </div>
     </div>
   </header>
diff --git a/packages/layer/app/components/app/AppHeaderCenter.vue b/packages/layer/app/components/app/AppHeaderCenter.vue
new file mode 100644
index 00000000..44517090
--- /dev/null
+++ b/packages/layer/app/components/app/AppHeaderCenter.vue
@@ -0,0 +1,3 @@
+<template>
+  <AppSearchButton />
+</template>
diff --git a/packages/layer/app/components/app/AppHeaderLogo.vue b/packages/layer/app/components/app/AppHeaderLogo.vue
new file mode 100644
index 00000000..d90cdc5b
--- /dev/null
+++ b/packages/layer/app/components/app/AppHeaderLogo.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const logoSrc = computed(() => {
+  const header = appConfig.docs?.header
+  if (!header?.logo) return null
+
+  if (colorMode.value === 'dark' && header.logo.dark) {
+    return header.logo.dark
+  }
+  return header.logo.light || header.logo.dark
+})
+
+const logoAlt = computed(() => {
+  return appConfig.docs?.header?.logo?.alt || appConfig.docs?.title || 'Logo'
+})
+
+const title = computed(() => {
+  return appConfig.docs?.header?.title || appConfig.docs?.title || 'Documentation'
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <img
+      v-if="logoSrc"
+      :src="logoSrc"
+      :alt="logoAlt"
+      class="h-6 w-auto shrink-0"
+    >
+    <span
+      v-else
+      class="font-bold"
+    >
+      {{ title }}
+    </span>
+
+    <template #fallback>
+      <span class="font-bold">{{ title }}</span>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/packages/layer/app/components/app/AppHeaderSearch.vue b/packages/layer/app/components/app/AppHeaderSearch.vue
new file mode 100644
index 00000000..2718a709
--- /dev/null
+++ b/packages/layer/app/components/app/AppHeaderSearch.vue
@@ -0,0 +1,3 @@
+<template>
+  <AppSearchButton collapsed />
+</template>
diff --git a/packages/layer/app/components/app/AppSearch.vue b/packages/layer/app/components/app/AppSearch.vue
new file mode 100644
index 00000000..23711ddd
--- /dev/null
+++ b/packages/layer/app/components/app/AppSearch.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ArrowRight, FileText, Monitor, Moon, Sun } from 'lucide-vue-next'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '~/components/ui/command'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog'
+import { flattenNavigation, useContentSearch } from '~/composables/useContentSearch'
+
+const router = useRouter()
+const colorMode = useColorMode()
+const { open } = useContentSearch()
+const { data: navigation } = await useNavigation()
+
+const searchTerm = ref('')
+
+// Flatten navigation for search
+const searchItems = computed(() => flattenNavigation(navigation.value))
+
+// Fuse search
+const { results } = useFuse(searchTerm, searchItems, {
+  fuseOptions: {
+    keys: ['label', 'prefix'],
+    threshold: 0.3,
+  },
+  matchAllWhenSearchEmpty: true,
+})
+
+const filteredItems = computed(() => {
+  if (!searchTerm.value) {
+    return searchItems.value
+  }
+  return results.value.map(r => r.item)
+})
+
+// Group items by prefix (parent title)
+const groupedItems = computed(() => {
+  const groups = new Map<string, typeof searchItems.value>()
+
+  for (const item of filteredItems.value) {
+    const groupKey = item.prefix || 'Pages'
+    if (!groups.has(groupKey)) {
+      groups.set(groupKey, [])
+    }
+    groups.get(groupKey)!.push(item)
+  }
+
+  return Array.from(groups.entries()).map(([label, items]) => ({
+    label,
+    items,
+  }))
+})
+
+function runCommand(command: () => unknown) {
+  open.value = false
+  searchTerm.value = ''
+  command()
+}
+
+function handleColorMode(mode: 'system' | 'light' | 'dark') {
+  runCommand(() => {
+    colorMode.preference = mode
+  })
+}
+
+// Keyboard shortcut
+onMounted(() => {
+  const down = (e: KeyboardEvent) => {
+    if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+      if (
+        (e.target instanceof HTMLElement && e.target.isContentEditable)
+        || e.target instanceof HTMLInputElement
+        || e.target instanceof HTMLTextAreaElement
+        || e.target instanceof HTMLSelectElement
+      ) {
+        return
+      }
+      e.preventDefault()
+      open.value = !open.value
+    }
+  }
+  document.addEventListener('keydown', down)
+  onUnmounted(() => document.removeEventListener('keydown', down))
+})
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent
+      class="overflow-hidden p-0 shadow-lg"
+      :show-close-button="false"
+    >
+      <DialogHeader class="sr-only">
+        <DialogTitle>Search documentation</DialogTitle>
+        <DialogDescription>Search for pages in the documentation</DialogDescription>
+      </DialogHeader>
+      <Command
+        v-model:search-term="searchTerm"
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5"
+      >
+        <CommandInput placeholder="Search documentation..." />
+        <CommandList class="max-h-[300px]">
+          <CommandEmpty>No results found.</CommandEmpty>
+
+          <!-- Navigation groups -->
+          <CommandGroup
+            v-for="group in groupedItems"
+            :key="group.label"
+            :heading="group.label"
+          >
+            <CommandItem
+              v-for="item in group.items"
+              :key="item.id"
+              :value="item.label"
+              @select="() => runCommand(() => router.push(item.to!))"
+            >
+              <FileText
+                v-if="item.isDoc"
+                class="mr-2 size-4"
+              />
+              <ArrowRight
+                v-else
+                class="mr-2 size-4"
+              />
+              <span>{{ item.label }}</span>
+            </CommandItem>
+          </CommandGroup>
+
+          <CommandSeparator />
+
+          <!-- Theme group -->
+          <CommandGroup heading="Theme">
+            <CommandItem
+              value="System theme"
+              @select="() => handleColorMode('system')"
+            >
+              <Monitor class="mr-2 size-4" />
+              <span>System</span>
+              <span
+                v-if="colorMode.preference === 'system'"
+                class="ml-auto text-xs text-muted-foreground"
+              >
+                Active
+              </span>
+            </CommandItem>
+            <CommandItem
+              value="Light theme"
+              @select="() => handleColorMode('light')"
+            >
+              <Sun class="mr-2 size-4" />
+              <span>Light</span>
+              <span
+                v-if="colorMode.preference === 'light'"
+                class="ml-auto text-xs text-muted-foreground"
+              >
+                Active
+              </span>
+            </CommandItem>
+            <CommandItem
+              value="Dark theme"
+              @select="() => handleColorMode('dark')"
+            >
+              <Moon class="mr-2 size-4" />
+              <span>Dark</span>
+              <span
+                v-if="colorMode.preference === 'dark'"
+                class="ml-auto text-xs text-muted-foreground"
+              >
+                Active
+              </span>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/packages/layer/app/components/app/AppSearchButton.vue b/packages/layer/app/components/app/AppSearchButton.vue
new file mode 100644
index 00000000..ff6fce61
--- /dev/null
+++ b/packages/layer/app/components/app/AppSearchButton.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+import { Button } from '~/components/ui/button'
+import { Kbd, KbdGroup } from '~/components/ui/kbd'
+import { useContentSearch } from '~/composables/useContentSearch'
+
+interface Props {
+  collapsed?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  collapsed: false,
+})
+
+const { open } = useContentSearch()
+
+const isMac = computed(() => {
+  if (import.meta.server) return true
+  return navigator.platform.toUpperCase().includes('MAC')
+})
+</script>
+
+<template>
+  <Button
+    v-if="collapsed"
+    variant="ghost"
+    size="icon"
+    aria-label="Search documentation"
+    @click="open = true"
+  >
+    <Search class="size-5" />
+  </Button>
+  <Button
+    v-else
+    variant="outline"
+    class="relative h-8 w-full max-w-sm justify-start bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-48 lg:w-56 xl:w-64"
+    @click="open = true"
+  >
+    <Search class="mr-2 size-4" />
+    <span class="hidden lg:inline-flex">Search documentation...</span>
+    <span class="inline-flex lg:hidden">Search...</span>
+    <div class="absolute right-1.5 top-1.5 hidden gap-1 sm:flex">
+      <ClientOnly>
+        <KbdGroup>
+          <Kbd class="border">{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
+          <Kbd class="border">K</Kbd>
+        </KbdGroup>
+      </ClientOnly>
+    </div>
+  </Button>
+</template>
diff --git a/packages/layer/app/components/content/ProseKbd.vue b/packages/layer/app/components/content/ProseKbd.vue
new file mode 100644
index 00000000..1df168c6
--- /dev/null
+++ b/packages/layer/app/components/content/ProseKbd.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Kbd } from '~/components/ui/kbd'
+</script>
+
+<template>
+  <Kbd>
+    <slot />
+  </Kbd>
+</template>
diff --git a/packages/layer/app/components/ui/command/Command.vue b/packages/layer/app/components/ui/command/Command.vue
new file mode 100644
index 00000000..5f21581b
--- /dev/null
+++ b/packages/layer/app/components/ui/command/Command.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from '~/lib/utils'
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandDialog.vue b/packages/layer/app/components/ui/command/CommandDialog.vue
new file mode 100644
index 00000000..9c64d584
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent } from '~/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandEmpty.vue b/packages/layer/app/components/ui/command/CommandEmpty.vue
new file mode 100644
index 00000000..a081a8b8
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from '~/lib/utils'
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandGroup.vue b/packages/layer/app/components/ui/command/CommandGroup.vue
new file mode 100644
index 00000000..cbc12618
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandGroup.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from '~/lib/utils'
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandInput.vue b/packages/layer/app/components/ui/command/CommandInput.vue
new file mode 100644
index 00000000..732c6f42
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandInput.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from '~/lib/utils'
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandItem.vue b/packages/layer/app/components/ui/command/CommandItem.vue
new file mode 100644
index 00000000..5df7b905
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandItem.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from '~/lib/utils'
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props?.value!.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandList.vue b/packages/layer/app/components/ui/command/CommandList.vue
new file mode 100644
index 00000000..3cbe2537
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandList.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandSeparator.vue b/packages/layer/app/components/ui/command/CommandSeparator.vue
new file mode 100644
index 00000000..5f0a98fd
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/packages/layer/app/components/ui/command/CommandShortcut.vue b/packages/layer/app/components/ui/command/CommandShortcut.vue
new file mode 100644
index 00000000..ffeb92bc
--- /dev/null
+++ b/packages/layer/app/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/packages/layer/app/components/ui/command/index.ts b/packages/layer/app/components/ui/command/index.ts
new file mode 100644
index 00000000..af18933b
--- /dev/null
+++ b/packages/layer/app/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")
diff --git a/packages/layer/app/components/ui/dialog/Dialog.vue b/packages/layer/app/components/ui/dialog/Dialog.vue
new file mode 100644
index 00000000..ade52603
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogClose.vue b/packages/layer/app/components/ui/dialog/DialogClose.vue
new file mode 100644
index 00000000..c5fae043
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogContent.vue b/packages/layer/app/components/ui/dialog/DialogContent.vue
new file mode 100644
index 00000000..7b2840ab
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from '~/lib/utils'
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogDescription.vue b/packages/layer/app/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 00000000..aaac1423
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogFooter.vue b/packages/layer/app/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 00000000..42a2400b
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogHeader.vue b/packages/layer/app/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 00000000..3e5c2a74
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogOverlay.vue b/packages/layer/app/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 00000000..dd5d3e7d
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogScrollContent.vue b/packages/layer/app/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 00000000..ec6bd10d
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogTitle.vue b/packages/layer/app/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 00000000..fcf9f8a5
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/DialogTrigger.vue b/packages/layer/app/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..49667e99
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/packages/layer/app/components/ui/dialog/index.ts b/packages/layer/app/components/ui/dialog/index.ts
new file mode 100644
index 00000000..6768b090
--- /dev/null
+++ b/packages/layer/app/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/packages/layer/app/components/ui/kbd/Kbd.vue b/packages/layer/app/components/ui/kbd/Kbd.vue
new file mode 100644
index 00000000..a7f84a06
--- /dev/null
+++ b/packages/layer/app/components/ui/kbd/Kbd.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    :class="cn(
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/packages/layer/app/components/ui/kbd/KbdGroup.vue b/packages/layer/app/components/ui/kbd/KbdGroup.vue
new file mode 100644
index 00000000..41212d36
--- /dev/null
+++ b/packages/layer/app/components/ui/kbd/KbdGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('inline-flex items-center gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/packages/layer/app/components/ui/kbd/index.ts b/packages/layer/app/components/ui/kbd/index.ts
new file mode 100644
index 00000000..b613b0cc
--- /dev/null
+++ b/packages/layer/app/components/ui/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from "./Kbd.vue"
+export { default as KbdGroup } from "./KbdGroup.vue"
diff --git a/packages/layer/app/composables/useContentSearch.ts b/packages/layer/app/composables/useContentSearch.ts
new file mode 100644
index 00000000..cf9c4a2f
--- /dev/null
+++ b/packages/layer/app/composables/useContentSearch.ts
@@ -0,0 +1,52 @@
+import type { NavigationItem } from './useNavigation'
+
+const open = ref(false)
+
+export interface SearchItem {
+  id: string
+  label: string
+  icon?: Component
+  to?: string
+  onSelect?: () => void
+  prefix?: string
+  suffix?: string
+  active?: boolean
+  disabled?: boolean
+  isDoc?: boolean
+}
+
+export interface SearchGroup {
+  id: string
+  label: string
+  items: SearchItem[]
+}
+
+export function useContentSearch() {
+  return {
+    open,
+  }
+}
+
+export function flattenNavigation(items: NavigationItem[], prefix = '', isDocSection = false): SearchItem[] {
+  return items.flatMap((item) => {
+    const result: SearchItem[] = []
+    // Determine if this item is a doc page based on parent context or path
+    const itemIsDoc = isDocSection || item.path?.startsWith('/docs')
+
+    if (item.type === 'page' && item.path) {
+      result.push({
+        id: item.path,
+        label: item.title,
+        to: item.path,
+        prefix: prefix || undefined,
+        isDoc: itemIsDoc,
+      })
+    }
+
+    if (item.children?.length) {
+      result.push(...flattenNavigation(item.children, item.title, itemIsDoc))
+    }
+
+    return result
+  })
+}
diff --git a/packages/layer/app/layouts/default.vue b/packages/layer/app/layouts/default.vue
index 631ea070..83c0d4da 100644
--- a/packages/layer/app/layouts/default.vue
+++ b/packages/layer/app/layouts/default.vue
@@ -8,5 +8,6 @@
       <slot />
     </main>
     <AppFooter />
+    <AppSearch />
   </div>
 </template>
diff --git a/packages/layer/app/layouts/docs.vue b/packages/layer/app/layouts/docs.vue
index 1e24f171..653e11a3 100644
--- a/packages/layer/app/layouts/docs.vue
+++ b/packages/layer/app/layouts/docs.vue
@@ -23,5 +23,6 @@
       </div>
     </div>
     <AppFooter />
+    <AppSearch />
   </div>
 </template>
diff --git a/packages/layer/nuxt.config.ts b/packages/layer/nuxt.config.ts
index 0f003119..28ee7c19 100644
--- a/packages/layer/nuxt.config.ts
+++ b/packages/layer/nuxt.config.ts
@@ -61,6 +61,7 @@ export default defineNuxtConfig({
         'tabs': 'Tabs',
         'tabs-item': 'TabsItem',
         'u-color-mode-image': 'UColorModeImage',
+        'kbd': 'ProseKbd',
       },
     },
   },
diff --git a/packages/layer/nuxt.schema.ts b/packages/layer/nuxt.schema.ts
index 5084de31..c8b19dec 100644
--- a/packages/layer/nuxt.schema.ts
+++ b/packages/layer/nuxt.schema.ts
@@ -29,6 +29,50 @@ export default defineNuxtSchema({
           type: 'string',
         },
       },
+      header: {
+        $schema: {
+          title: 'Header Configuration',
+          description: 'Header configuration options',
+        },
+        title: {
+          $default: '',
+          $schema: {
+            title: 'Header Title',
+            description: 'Title displayed in the header (defaults to site title)',
+            type: 'string',
+          },
+        },
+        logo: {
+          $schema: {
+            title: 'Logo Configuration',
+            description: 'Logo images for light and dark modes',
+          },
+          light: {
+            $default: '',
+            $schema: {
+              title: 'Light Mode Logo',
+              description: 'Logo image for light mode',
+              type: 'string',
+            },
+          },
+          dark: {
+            $default: '',
+            $schema: {
+              title: 'Dark Mode Logo',
+              description: 'Logo image for dark mode',
+              type: 'string',
+            },
+          },
+          alt: {
+            $default: '',
+            $schema: {
+              title: 'Logo Alt Text',
+              description: 'Alt text for the logo image',
+              type: 'string',
+            },
+          },
+        },
+      },
       github: {
         $schema: {
           title: 'GitHub Configuration',
diff --git a/packages/layer/package.json b/packages/layer/package.json
index 27cd09a6..fb700980 100644
--- a/packages/layer/package.json
+++ b/packages/layer/package.json
@@ -42,12 +42,14 @@
     "@nuxtjs/mdc": "^0.18.4",
     "@tabler/icons-vue": "^3.35.0",
     "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "debug": "^4.4.1",
     "defu": "^6.1.4",
     "eslint": "^9.39.1",
     "exsolve": "^1.0.8",
+    "fuse.js": "^7.1.0",
     "lucide-vue-next": "^0.555.0",
     "nuxt-og-image": "^5.1.12",
     "oxc-parser": "^0.99.0",