diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index c59bdd132..d8698ff33 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -22,6 +22,20 @@ const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
+const { searchQuery, updateSearchQuery } = usePackageSearchQuery()
+
+const router = useRouter()
+function handleSubmitSearch(queryValue: string) {
+  if (queryValue === '') {
+    return
+  }
+
+  router.replace({
+    name: 'search',
+    query: { ...route.query, q: queryValue },
+  })
+}
+
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
@@ -90,7 +104,7 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1"
+      class="relative container min-h-14 flex items-center gap-4 z-1"
       :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
@@ -130,13 +144,18 @@ onKeyStroke(
         }"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
-        <HeaderSearchBox
+        <SearchBox
+          v-if="!isOnHomePage"
           ref="searchBoxRef"
-          :inputClass="isSearchExpanded ? 'w-full' : ''"
-          :class="{ 'max-w-md': !isSearchExpanded }"
+          class="max-w-sm"
+          compact
+          :model-value="searchQuery"
+          @update:model-value="updateSearchQuery"
+          @submit="handleSubmitSearch"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />
+
         <ul
           v-if="!isSearchExpanded && isConnected && npmUser"
           :class="{ hidden: showFullSearch }"
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
deleted file mode 100644
index 2822fd2b1..000000000
--- a/app/components/Header/SearchBox.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { debounce } from 'perfect-debounce'
-import { normalizeSearchParam } from '#shared/utils/url'
-
-withDefaults(
-  defineProps<{
-    inputClass?: string
-  }>(),
-  {
-    inputClass: 'inline sm:block',
-  },
-)
-
-const emit = defineEmits(['blur', 'focus'])
-
-const router = useRouter()
-const route = useRoute()
-
-const isSearchFocused = shallowRef(false)
-
-const showSearchBar = computed(() => {
-  return route.name !== 'index'
-})
-
-// Local input value (updates immediately as user types)
-const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
-
-// Pages that have their own local filter using ?q
-const pagesWithLocalFilter = new Set(['~username', 'org'])
-
-// Debounced URL update for search query
-const updateUrlQuery = debounce((value: string) => {
-  // Don't navigate away from pages that use ?q for local filtering
-  if (pagesWithLocalFilter.has(route.name as string)) {
-    return
-  }
-  if (route.name === 'search') {
-    router.replace({ query: { q: value || undefined } })
-    return
-  }
-  if (!value) {
-    return
-  }
-
-  router.push({
-    name: 'search',
-    query: {
-      q: value,
-    },
-  })
-}, 250)
-
-// Watch input and debounce URL updates
-watch(searchQuery, value => {
-  updateUrlQuery(value)
-})
-
-// Sync input with URL when navigating (e.g., back button)
-watch(
-  () => route.query.q,
-  urlQuery => {
-    // Don't sync from pages that use ?q for local filtering
-    if (pagesWithLocalFilter.has(route.name as string)) {
-      return
-    }
-    const value = normalizeSearchParam(urlQuery)
-    if (searchQuery.value !== value) {
-      searchQuery.value = value
-    }
-  },
-)
-
-function handleSubmit() {
-  if (pagesWithLocalFilter.has(route.name as string)) {
-    router.push({
-      name: 'search',
-      query: {
-        q: searchQuery.value,
-      },
-    })
-  } else {
-    updateUrlQuery.flush()
-  }
-}
-
-// Expose focus method for parent components
-const inputRef = useTemplateRef('inputRef')
-function focus() {
-  inputRef.value?.focus()
-}
-defineExpose({ focus })
-</script>
-<template>
-  <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
-    <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
-      <label for="header-search" class="sr-only">
-        {{ $t('search.label') }}
-      </label>
-
-      <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-        <div class="search-box relative flex items-center">
-          <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
-          >
-            /
-          </span>
-
-          <InputBase
-            id="header-search"
-            ref="inputRef"
-            v-model="searchQuery"
-            type="search"
-            name="q"
-            :placeholder="$t('search.placeholder')"
-            no-correct
-            class="w-full min-w-25 ps-7"
-            @focus="isSearchFocused = true"
-            @blur="isSearchFocused = false"
-            size="small"
-          />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
-        </div>
-      </div>
-    </form>
-  </search>
-</template>
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
new file mode 100644
index 000000000..d43bc70df
--- /dev/null
+++ b/app/components/SearchBox.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+defineProps<{
+  compact?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', searchQuery: string): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const searchQuery = defineModel<string>({
+  default: '',
+})
+
+function handleSubmit() {
+  emit('submit', searchQuery.value)
+}
+
+function handleBlur() {
+  emit('blur')
+}
+function handleFocus() {
+  emit('focus')
+}
+
+// Expose focus method for parent components
+const inputRef = useTemplateRef('inputRef')
+function focus() {
+  inputRef.value?.focus()
+}
+
+defineExpose({
+  focus,
+})
+</script>
+
+<template>
+  <search class="w-full @container">
+    <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
+      <label for="search-box" class="sr-only">
+        {{ $t('search.label') }}
+      </label>
+
+      <div class="relative group">
+        <div
+          class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
+        />
+
+        <div class="search-box relative flex items-center">
+          <span
+            class="absolute text-fg-subtle font-mono pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            :class="compact ? 'inset-is-3 text-sm' : 'inset-is-4 text-xl'"
+          >
+            /
+          </span>
+
+          <input
+            id="search-box"
+            ref="inputRef"
+            v-model.trim="searchQuery"
+            type="search"
+            name="q"
+            :placeholder="$t('search.placeholder')"
+            v-bind="noCorrect"
+            class="w-full bg-bg-subtle border border-border text-base font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            :class="
+              compact ? 'ps-7 pe-3 py-1.5 rounded-md text-sm!' : 'ps-8 pe-24 h-14 py-4 rounded-xl'
+            "
+            @blur="handleBlur"
+            @focus="handleFocus"
+          />
+
+          <button
+            type="submit"
+            class="absolute hidden @xs:block group inset-ie-2.5 font-mono text-sm transition-[background-color,transform] duration-200 active:scale-95"
+            :class="
+              compact
+                ? 'px-1.5 py-0.5 @md:ps-4 @md:pe-4'
+                : 'rounded-md px-2.5 @md:ps-4 @md:pe-4 py-2 text-bg bg-fg/90 hover:bg-fg! group-focus-within:bg-fg/80'
+            "
+          >
+            <span
+              class="inline-block i-carbon:search align-middle w-4 h-4 @md:me-2"
+              aria-hidden="true"
+            ></span>
+            <span class="sr-only @md:not-sr-only">
+              {{ $t('search.button') }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </search>
+</template>
diff --git a/app/composables/npm/useNpmSearch.ts b/app/composables/npm/useNpmSearch.ts
index ca3504770..a79795335 100644
--- a/app/composables/npm/useNpmSearch.ts
+++ b/app/composables/npm/useNpmSearch.ts
@@ -42,6 +42,7 @@ export function packumentToSearchResult(
 export interface NpmSearchOptions {
   /** Number of results to fetch */
   size?: number
+  onResponse?: (result: { query: string }) => void
 }
 
 export const emptySearchResponse = {
@@ -99,6 +100,8 @@ export function useNpmSearch(
           size: opts.size ?? 25,
         })
 
+        opts.onResponse?.({ query: q })
+
         if (q !== toValue(query)) {
           return emptySearchResponse
         }
@@ -130,6 +133,8 @@ export function useNpmSearch(
             }),
           ])
 
+          opts.onResponse?.({ query: q })
+
           if (!pkg) {
             return emptySearchResponse
           }
@@ -165,6 +170,8 @@ export function useNpmSearch(
           60,
         )
 
+        opts.onResponse?.({ query: q })
+
         // If query changed/outdated, return empty search response
         if (q !== toValue(query)) {
           return emptySearchResponse
diff --git a/app/composables/usePackageSearchQuery.ts b/app/composables/usePackageSearchQuery.ts
new file mode 100644
index 000000000..c301c1077
--- /dev/null
+++ b/app/composables/usePackageSearchQuery.ts
@@ -0,0 +1,21 @@
+import { debounce } from 'perfect-debounce'
+
+export function usePackageSearchQuery() {
+  const searchQuery = useState<string>('package_search_query', () => '')
+
+  const route = useRoute()
+  onMounted(() => {
+    if (route.query.q) {
+      searchQuery.value = normalizeSearchParam(route.query.q)
+    }
+  })
+
+  const updateSearchQuery = debounce((newSearchQuery: string) => {
+    searchQuery.value = newSearchQuery
+  }, 400)
+
+  return {
+    searchQuery,
+    updateSearchQuery,
+  }
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 66ea291a3..a5f141f13 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,27 +1,18 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
-const isSearchFocused = shallowRef(false)
+async function handleSearchSubmit() {
+  if (!searchQuery.value) {
+    return
+  }
 
-async function search() {
-  const query = searchQuery.value.trim()
-  if (!query) return
   await navigateTo({
-    path: '/search',
-    query: query ? { q: query } : undefined,
+    name: 'search',
+    query: { q: searchQuery.value },
   })
-  const newQuery = searchQuery.value.trim()
-  if (newQuery !== query) {
-    await search()
-  }
 }
 
-const handleInput = isTouchDevice()
-  ? search
-  : debounce(search, 250, { leading: true, trailing: true })
-
 useSeoMeta({
   title: () => $t('seo.home.title'),
   ogTitle: () => $t('seo.home.title'),
@@ -61,56 +52,12 @@ defineOgImageComponent('Default', {
           {{ $t('tagline') }}
         </p>
 
-        <search
-          class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
+        <SearchBox
+          class="max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
-        >
-          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
-            <label for="home-search" class="sr-only">
-              {{ $t('search.label') }}
-            </label>
-
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-              <div
-                class="absolute z-1 -inset-px pointer-events-none rounded-lg bg-gradient-to-r from-fg/0 to-accent/5 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
-              />
-
-              <div class="search-box relative flex items-center">
-                <span
-                  class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
-                >
-                  /
-                </span>
-
-                <InputBase
-                  id="home-search"
-                  v-model="searchQuery"
-                  type="search"
-                  name="q"
-                  autofocus
-                  :placeholder="$t('search.placeholder')"
-                  no-correct
-                  size="large"
-                  class="w-full ps-8 pe-24"
-                  @focus="isSearchFocused = true"
-                  @blur="isSearchFocused = false"
-                  @input="handleInput"
-                />
-
-                <ButtonBase
-                  type="submit"
-                  variant="primary"
-                  class="absolute inset-ie-2"
-                  classicon="i-carbon:search"
-                >
-                  <span class="sr-only sm:not-sr-only">
-                    {{ $t('search.button') }}
-                  </span>
-                </ButtonBase>
-              </div>
-            </div>
-          </form>
-        </search>
+          v-model="searchQuery"
+          @submit="handleSearchSubmit"
+        />
 
         <BuildEnvironment class="mt-4" />
       </header>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index a44d8af13..9e2d766fa 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -34,8 +34,7 @@ const updateUrlPage = debounce((page: number) => {
   })
 }, 500)
 
-// The actual search query (from URL, used for API calls)
-const query = computed(() => normalizeSearchParam(route.query.q))
+const { searchQuery: query } = usePackageSearchQuery()
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = shallowRef(false)
@@ -194,6 +193,12 @@ const {
   isRateLimited,
 } = useNpmSearch(query, () => ({
   size: requestedSize.value,
+  onResponse: data => {
+    router.replace({
+      name: 'search',
+      query: { ...route.query, q: data.query },
+    })
+  },
 }))
 
 // Client-side sorted results for display
@@ -700,24 +705,6 @@ watch(displayResults, results => {
 })
 
 function handleResultsKeydown(e: KeyboardEvent) {
-  // If the active element is an input, navigate to exact match or wait for results
-  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
-    // Get value directly from input (not from route query, which may be debounced)
-    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
-    if (!inputValue) return
-
-    // Check if first result matches the input value exactly
-    const firstResult = displayResults.value[0]
-    if (firstResult?.package.name === inputValue) {
-      pendingEnterQuery.value = null
-      return navigateToPackage(firstResult.package.name)
-    }
-
-    // No match yet - store input value, watcher will handle navigation when results arrive
-    pendingEnterQuery.value = inputValue
-    return
-  }
-
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
index f40403267..5292cfdc5 100644
--- a/test/e2e/interactions.spec.ts
+++ b/test/e2e/interactions.spec.ts
@@ -88,24 +88,19 @@ test.describe('Search Pages', () => {
   test('/ (homepage) → search, keeps focus on search input', async ({ page, goto }) => {
     await goto('/', { waitUntil: 'hydration' })
 
-    const homeSearchInput = page.locator('#home-search')
-    await homeSearchInput.click()
+    const searchInput = page.locator('#search-box')
+    await searchInput.click()
     await page.keyboard.type('vue')
+    await page.keyboard.press('Enter')
 
-    // Wait for navigation to /search (debounce is 250ms)
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
     await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
       timeout: 15000,
     })
 
-    // Home search input should be gone (we're on /search now)
-    await expect(homeSearchInput).not.toBeVisible()
-
-    // Header search input should now exist and be focused
-    const headerSearchInput = page.locator('#header-search')
-    await expect(headerSearchInput).toBeVisible()
-    await expect(headerSearchInput).toBeFocused()
+    await expect(searchInput).toBeVisible()
+    await expect(searchInput).toBeFocused()
   })
 
   test('/settings → search, keeps focus on search input', async ({ page, goto }) => {
@@ -116,6 +111,7 @@ test.describe('Search Pages', () => {
 
     await searchInput.click()
     await searchInput.fill('vue')
+    await page.keyboard.press('Enter')
 
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
@@ -123,7 +119,7 @@ test.describe('Search Pages', () => {
       timeout: 15000,
     })
 
-    const headerSearchInput = page.locator('#header-search')
+    const headerSearchInput = page.locator('#search-box')
     await expect(headerSearchInput).toBeFocused()
   })
 })
@@ -167,15 +163,15 @@ test.describe('Keyboard Shortcuts', () => {
   test('"c" does not navigate when search input is focused', async ({ page, goto }) => {
     await goto('/settings', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 
     await page.keyboard.press('c')
 
-    // Should still be on settings, not navigated to compare
+    // // Should still be on settings, not navigated to compare
     await expect(page).toHaveURL(/\/settings/)
-    // The 'c' should have been typed into the input
+    // // The 'c' should have been typed into the input
     await expect(searchInput).toHaveValue('c')
   })
 
@@ -208,7 +204,7 @@ test.describe('Keyboard Shortcuts', () => {
   test('"," does not navigate when any modifier key is pressed', async ({ page, goto }) => {
     await goto('/settings', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 
@@ -227,7 +223,7 @@ test.describe('Keyboard Shortcuts', () => {
   test('"," does not navigate when search input is focused', async ({ page, goto }) => {
     await goto('/compare', { waitUntil: 'hydration' })
 
-    const searchInput = page.locator('#header-search')
+    const searchInput = page.locator('#search-box')
     await searchInput.focus()
     await expect(searchInput).toBeFocused()
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 104c008e6..86a3b59a3 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -138,7 +138,7 @@ import {
   FilterPanel,
   HeaderAccountMenu,
   HeaderConnectorModal,
-  HeaderSearchBox,
+  SearchBox,
   InputBase,
   LicenseDisplay,
   LoadingSpinner,
@@ -2169,9 +2169,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('HeaderSearchBox', () => {
+  describe('SearchBox', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(HeaderSearchBox)
+      const component = await mountSuspended(SearchBox)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
@@ -2435,7 +2435,7 @@ describe('background theme accessibility', () => {
   const components = [
     { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
     { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
-    { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },
+    { name: 'SearchBox', mount: () => mountSuspended(SearchBox) },
     {
       name: 'LoadingSpinner',
       mount: () => mountSuspended(LoadingSpinner, { props: { text: 'Loading...' } }),