diff --git a/.gitignore b/.gitignore
index b63d586..5f0c2de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ node_modules
 .eslintcache
 .env
 *.log
+
+public/pagefind/
diff --git a/astro.config.ts b/astro.config.ts
index 43026ee..3c03073 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -12,9 +12,11 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypePrettyCode from 'rehype-pretty-code'
 import UnoCSS from 'unocss/astro'
+import pagefind from 'vite-plugin-pagefind'
+import siteConfig from './src/site-config'
 
 export default defineConfig({
-  site: 'https://vinh.dev',
+  site: siteConfig.site,
   trailingSlash: 'never',
   build: {
     assets: '_assets',
@@ -23,6 +25,17 @@ export default defineConfig({
   experimental: {
     svg: true,
   },
+  vite: {
+    ssr: {
+      noExternal: [`${siteConfig.site}/pagefind/pagefind.js`],
+    },
+    plugins: [pagefind()],
+    build: {
+      rollupOptions: {
+        external: [`${siteConfig.site}/pagefind/pagefind.js`],
+      },
+    },
+  },
   integrations: [
     mdx(),
     sitemap(),
diff --git a/bun.lockb b/bun.lockb
index 0179be9..7cde6b6 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index cc067cf..4df547b 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
     "prepare": "simple-git-hooks",
     "compress": "esno scripts/img-compress-staged.ts",
     "dev": "astro dev --host",
-    "build": "astro build",
-    "postbuild": "pagefind --site dist",
+    "build": "astro build && pagefind",
     "preview": "astro preview",
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
@@ -18,6 +17,7 @@
     "@astrojs/mdx": "^4.0.1",
     "@astrojs/rss": "4.0.9",
     "@astrojs/sitemap": "3.2.1",
+    "@astrojs/svelte": "^7.0.1",
     "@astrojs/vue": "^5.0.1",
     "@unocss/reset": "^0.65.1",
     "astro": "^5.0.2",
@@ -57,7 +57,8 @@
     "reading-time": "^1.5.0",
     "rehype-pretty-code": "^0.14.0",
     "simple-git": "^3.27.0",
-    "simple-git-hooks": "^2.11.1"
+    "simple-git-hooks": "^2.11.1",
+    "vite-plugin-pagefind": "^0.2.10"
   },
   "simple-git-hooks": {
     "pre-commit": "bunx esno scripts/reading-time-hook.ts && bunx lint-staged"
diff --git a/pagefind.json b/pagefind.json
new file mode 100644
index 0000000..200da05
--- /dev/null
+++ b/pagefind.json
@@ -0,0 +1,4 @@
+{
+  "site": "dist",
+  "vite_plugin_pagefind": {}
+}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 080ec58..c0594e4 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ import { getLinkTarget } from '@/utils/link'
 import siteConfig from '@/site-config'
 import GlitchingLogo from './GlitchingLogo.vue'
 import Search from './Search.vue'
+import CommandPalette from './SearchCommandPalette.vue'
 import ThemeToggle from './ThemeToggle.vue'
 
 const navLinks = siteConfig.header.navLinks || []
@@ -48,11 +49,12 @@ const socialLinks = structuredClone(siteConfig.socialLinks).filter((link: Record
         />
       ))}
       <a target="_blank" href="/rss.xml" class="lt-md:hidden i-ri-rss-line nav-link" aria-label="RSS" />
-      <Search  client:load />
+      <Search  client:visible />
       <ThemeToggle client:load />
     </div>
   </nav>
 </header>
+<CommandPalette client:load />
 
 <style>
 .header h1 {
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 635ea04..64eb28f 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,145 +1,10 @@
-<script lang="ts" setup>
-import { animate } from 'motion'
-import { onMounted, onUnmounted, ref } from 'vue'
-import '@pagefind/default-ui/css/ui.css'
-
-const dialog = ref<HTMLDialogElement | null>(null)
-const dialogFrame = ref<HTMLElement | null>(null)
-const isDev = ref(import.meta.env.DEV)
-
-function openModal(event?: MouseEvent) {
-  if (dialog.value) {
-    dialog.value.showModal()
-
-    animate(
-      dialog.value,
-      {
-        clipPath: [
-          'polygon(0 0, 100% 0, 100% -200%, -200% -200%)',
-          'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
-        ],
-        opacity: [0, 1],
-      },
-      { duration: 0.2 },
-    )
-    document.body.classList.add('overflow-hidden')
-    dialog.value.querySelector('input')?.focus()
-    event?.stopPropagation()
-    window.addEventListener('click', onWindowClick)
-    window.addEventListener('keydown', handleEscKey)
-  }
-}
-
-function closeModal() {
-  if (dialog.value) {
-    dialog.value.close()
-    document.body.classList.remove('overflow-hidden')
-    window.removeEventListener('click', onWindowClick)
-    window.removeEventListener('keydown', handleEscKey)
-  }
-}
-
-function onWindowClick(event: MouseEvent) {
-  if (
-    document.body.contains(event.target as Node) &&
-    !dialogFrame.value?.contains(event.target as Node)
-  ) {
-    closeModal()
-  }
-}
-
-function handleEscKey(e: KeyboardEvent) {
-  if (e.key === 'Escape' && dialog.value?.open) {
-    closeModal()
-  }
-}
-
-onMounted(() => {
-  const openBtn = document.querySelector<HTMLButtonElement>('button[data-open-modal]')
-  const closeBtn = document.querySelector<HTMLButtonElement>('button[data-close-modal]')
-
-  if (openBtn) {
-    openBtn.addEventListener('click', openModal)
-    openBtn.disabled = false
-  }
-
-  if (closeBtn) {
-    closeBtn.addEventListener('click', closeModal)
-  }
-
-  window.addEventListener('keydown', (e) => {
-    if (e.key === '/' && !dialog.value?.open) {
-      openModal()
-      e.preventDefault()
-    }
-  })
-
-  if (!isDev.value) {
-    const onIdle = window.requestIdleCallback || (cb => setTimeout(cb, 1))
-    onIdle(async () => {
-      // @ts-expect-error package does not export types
-      const { PagefindUI } = await import('@pagefind/default-ui')
-      const _pagefindUI = new PagefindUI({
-        element: '#pagefind__search',
-        baseUrl: import.meta.env.BASE_URL,
-        bundlePath: `${import.meta.env.BASE_URL.replace(/\/$/, '')}/pagefind/`,
-        showImages: false,
-      })
-    })
-  }
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', onWindowClick)
-  window.removeEventListener('keydown', handleEscKey)
-})
+<script setup lang="ts">
+import { showSearch } from '@/stores/search'
 </script>
 
 <template>
-  <site-search id="search" class="ms-auto">
-    <button data-open-modal class="flex items-center justify-center gap-1 rounded-md">
-      <span class="i-ri-search-line" />
-    </button>
-    <dialog
-      ref="dialog"
-      aria-label="search"
-      class="mb-auto mt-16 max-h-[calc(100%-8rem)] max-w-full min-h-[15rem] w-full border border-zinc-500/25 bg-[#ffffffec] opacity-0 shadow sm:mx-auto sm:max-w-[48rem] sm:w-5/6 sm:rounded-md dark:bg-[#0a0910ec] backdrop:backdrop-blur"
-    >
-      <div ref="dialogFrame" class="dialog-frame flex flex-col gap-4 p-6 pt-0">
-        <!-- <button
-          data-close-modal
-          class="ms-auto cursor-pointer rounded-full bg-zinc-200 px-4 py-2 dark:bg-zinc-700"
-        >
-          Close
-        </button> -->
-        <span class="sticky top-0 z-10 flex items-center justify-center gap-1 from-[#ffffffff] via-[#ffffffec] to-transparent from-60% to-100% via-80% bg-gradient-to-b py-4 text-xs text-zinc-500 -mx-6 dark:from-[#0a0910ff] dark:via-[#0a0910ec] dark:to-transparent dark:from-60% dark:to-100% dark:via-80% dark:bg-gradient-to-b dark:text-zinc-400">
-          Press
-          <kbd>esc</kbd>
-          or click outside to dismiss
-        </span>
-        <div v-if="isDev" class="mx-auto text-center dark:text-white">
-          <p>
-            Search is only available in production builds. <br>
-            Try building and previewing the site to test it out locally.
-          </p>
-        </div>
-        <div v-else class="search-container overflow-auto dark:text-white">
-          <div id="pagefind__search" class="overflow-auto" />
-        </div>
-      </div>
-    </dialog>
-  </site-search>
+  <button @click="showSearch = true">
+    <span class="sr-only">search</span>
+    <span class="i-ri-search-line" />
+  </button>
 </template>
-
-<style>
-.dark {
-  --pagefind-ui-primary: #eeeeee;
-  --pagefind-ui-text: #eeeeee;
-  --pagefind-ui-background: #151616;
-  --pagefind-ui-border: #151616;
-  --pagefind-ui-tag: #151616;
-}
-.pagefind-ui__search-input:focus-visible {
-  outline: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
-}
-</style>
diff --git a/src/components/SearchCommandPalette.vue b/src/components/SearchCommandPalette.vue
new file mode 100644
index 0000000..779bd3a
--- /dev/null
+++ b/src/components/SearchCommandPalette.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { showSearch } from '@/stores/search'
+import { onMounted, ref, watch } from 'vue'
+
+const _props = withDefaults(defineProps<{
+  placeholder?: string
+  noResults?: string
+}>(), {
+  placeholder: 'Search...',
+  noResults: 'No results found',
+})
+
+declare const window: Window & typeof globalThis
+
+interface SearchResult {
+  title: string
+  content: string
+  href: string
+}
+
+const input = ref<HTMLInputElement>()
+const value = ref('')
+const showResults = ref(true)
+const currentSelection = ref(0)
+const results = ref<SearchResult[]>([])
+let pagefind: any
+
+async function setupSearch() {
+  try {
+    // @ts-expect-error - Ignore TS error for dynamic import
+    pagefind = await import('/pagefind/pagefind.js')
+  } catch (error) {
+    console.error('Pagefind module not found, will retry after build:', error)
+  }
+}
+
+async function search() {
+  if (!value.value.trim())
+    return
+
+  showResults.value = true
+  results.value = []
+
+  const searchResults = await pagefind.debouncedSearch(value.value)
+  if (!searchResults)
+    return
+
+  const newResults = []
+
+  for (let i = 0; i < searchResults.results.length && i < 5; i++) {
+    const result = await searchResults.results[i].data()
+    let excerpt = result.excerpt
+    excerpt = excerpt.replaceAll(
+      '<mark>',
+      '<span class="bg-blue-500/20 rounded-md p-0.5">',
+    )
+    excerpt = excerpt.replaceAll('</mark>', '</span>')
+
+    newResults[i] = {
+      title: result.meta.title,
+      content: excerpt,
+      href: result.url,
+    }
+  }
+
+  results.value = newResults
+}
+
+watch(() => value.value, (newValue) => {
+  if (!newValue.trim()) {
+    results.value = []
+    showResults.value = false
+  } else {
+    search()
+  }
+})
+
+watch(showSearch, (newValue) => {
+  if (newValue) {
+    currentSelection.value = 0
+    setTimeout(() => {
+      input.value?.focus()
+    }, 200)
+  } else {
+    value.value = ''
+  }
+})
+
+onMounted(() => {
+  setupSearch()
+
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'k' && event.metaKey) {
+      showSearch.value = !showSearch.value
+      event.preventDefault()
+    }
+
+    if (event.key === 'Escape' && showSearch.value) {
+      showSearch.value = false
+    }
+  })
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="showSearch" class="relative z-50">
+      <div
+        role="dialog"
+        aria-modal="true"
+        class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 pt-20 md:p-20"
+      >
+        <button
+          class="fixed inset-0 z-0 cursor-default bg-stone-500/30 backdrop-blur-sm transition-opacity dark:bg-stone-950/70"
+          @click="showSearch = false"
+        >
+          <span class="sr-only">hide search</span>
+        </button>
+
+        <div class="mx-auto max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all divide-y divide-stone-100 dark:bg-stone-900 dark:ring-white/20 dark:divide-white/10">
+          <div class="relative flex flex-grow items-stretch focus-within:z-10">
+            <input
+              ref="input"
+              v-model="value"
+              type="text"
+              :placeholder="placeholder"
+              class="h-12 w-full border-0 bg-transparent pl-4 pr-4 text-stone-900 sm:text-sm dark:text-stone-100 placeholder:text-stone-400 focus:outline-none focus:ring-0"
+              role="combobox"
+              aria-expanded="false"
+              aria-controls="options"
+              @keydown="(event) => {
+                if (event.key === 'Enter') {
+                  if (!value.trim()) {
+                    showSearch = false
+                    return
+                  }
+                  if (currentSelection >= 0 && currentSelection < results.length) {
+                    window.location.href = results[currentSelection].href
+                  }
+                  else {
+                    showSearch = false
+                  }
+                }
+                if (event.key === 'ArrowDown') {
+                  currentSelection++
+                  if (currentSelection >= results.length) currentSelection = 0
+                }
+                if (event.key === 'ArrowUp') {
+                  currentSelection--
+                  if (currentSelection < 0) currentSelection = results.length - 1
+                }
+              }"
+            >
+            <button
+              type="button"
+              class="relative inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm text-stone-900 font-semibold -ml-px dark:bg-stone-900 hover:bg-stone-50 dark:hover:bg-stone-800"
+              @click="search"
+            >
+              <slot name="icon">
+                <span class="i-ri-search-line text-stone-400" />
+              </slot>
+              <slot />
+            </button>
+          </div>
+
+          <Transition name="slide">
+            <div v-if="showResults && value.trim()">
+              <div v-if="results.length > 0" class="flex flex-col scroll-py-2 overflow-y-auto text-sm text-stone-800 divide-y divide-stone-100 dark:text-stone-200 dark:divide-white/5">
+                <a
+                  v-for="(result, i) in results"
+                  :key="i"
+                  :href="result.href"
+                  class="w-full select-none px-4 py-2 text-left" :class="[
+                    currentSelection === i ? 'bg-white/5' : 'hover:bg-white/5',
+                  ]"
+                  @click="showSearch = false"
+                >
+                  <div class="font-semibold">{{ result.title }}</div>
+                  <div class="line-clamp-2 mt-2 text-xs" v-html="result.content" />
+                </a>
+              </div>
+              <p v-else class="p-4 text-sm text-stone-500 dark:text-stone-400">
+                {{ noResults }}
+              </p>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.1s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+</style>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 8d717c3..62b4d03 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -34,7 +34,7 @@ const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(`R
 ---
 
 <BaseLayout title={title} description={description} image={image?.src} pageType="article">
-  <div class="prose mb-8 m-auto">
+  <div class="prose mb-8 m-auto" data-pagefind-body>
     <h1 class="mb-0">{title}</h1>
     <p class="!-mt-6 flex gap-2 op-50">
       {date && <time datetime={getDate(date)}>{date.split(',')}</time>}
diff --git a/src/site-config.ts b/src/site-config.ts
index 4d1fcda..82333dd 100644
--- a/src/site-config.ts
+++ b/src/site-config.ts
@@ -3,6 +3,7 @@ import type { SiteConfig } from '@/types'
 export const siteConfig: SiteConfig = {
   author: 'Vinh Pham',
   title: 'vinh.dev',
+  site: 'https://vinh.dev',
   subtitle: 'Thoughts and ideas',
   description: 'Thoughts and ideas',
   image: {
diff --git a/src/stores/search.ts b/src/stores/search.ts
new file mode 100644
index 0000000..8e1375f
--- /dev/null
+++ b/src/stores/search.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const showSearch = ref(false)
diff --git a/src/types.ts b/src/types.ts
index 15bb585..6be521a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,6 +57,7 @@ export interface Footer {
 export interface SiteConfig {
   author: string
   title: string
+  site: string
   subtitle: string
   description: string
   image: Image
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..d0ce7b1
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte'
+
+export default {
+  preprocess: vitePreprocess(),
+}
diff --git a/tsconfig.json b/tsconfig.json
index 46ac63f..13578bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,5 +9,5 @@
     "strictNullChecks": true
   },
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+  "exclude": ["public/pagefind", "dist"]
 }