diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index a2d3c6d7b6..d5f2c29339 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -13,18 +13,16 @@ const isHome = computed(() => route.name === 'index')
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <div class="flex flex-wrap items-center gap-x-3 sm:gap-6">
-          <NuxtLink
-            to="/about"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
-          >
+        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:flex items-center gap-6">
+          <NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -33,7 +31,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -42,7 +40,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -51,7 +49,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 86f4257b2b..6bafe78bd5 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -11,6 +11,39 @@ withDefaults(
 const { isConnected, npmUser } = useConnector()
 
 const showFullSearch = shallowRef(false)
+const showMobileMenu = shallowRef(false)
+
+// On mobile, clicking logo+search button expands search
+const route = useRoute()
+const isMobile = useIsMobile()
+const isSearchExpandedManually = shallowRef(false)
+const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
+
+// On search page, always show search expanded on mobile
+const isOnSearchPage = computed(() => route.name === 'search')
+const isSearchExpanded = computed(() => isOnSearchPage.value || isSearchExpandedManually.value)
+
+function expandMobileSearch() {
+  isSearchExpandedManually.value = true
+  nextTick(() => {
+    searchBoxRef.value?.focus()
+  })
+}
+
+function handleSearchBlur() {
+  showFullSearch.value = false
+  // Collapse expanded search on mobile after blur (with delay for click handling)
+  // But don't collapse if we're on the search page
+  if (isMobile.value && !isOnSearchPage.value) {
+    setTimeout(() => {
+      isSearchExpandedManually.value = false
+    }, 150)
+  }
+}
+
+function handleSearchFocus() {
+  showFullSearch.value = true
+}
 
 onKeyStroke(
   ',',
@@ -32,43 +65,66 @@ onKeyStroke(
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center justify-start"
+      class="container min-h-14 flex items-center justify-between gap-2"
     >
-      <!-- Start: Logo -->
-      <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
-        <div v-if="showLogo" class="flex items-center">
-          <NuxtLink
-            to="/"
-            :aria-label="$t('header.home')"
-            dir="ltr"
-            class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-          >
-            <img
-              aria-hidden="true"
-              :alt="$t('alt_logo')"
-              src="/logo.svg"
-              width="96"
-              height="96"
-              class="w-8 h-8 rounded-lg"
-            />
-            <span>npmx</span>
-          </NuxtLink>
-        </div>
-        <!-- Spacer when logo is hidden -->
-        <span v-else class="w-1" />
+      <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
+      <button
+        v-if="!isSearchExpanded"
+        type="button"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        :aria-label="$t('nav.tap_to_search')"
+        @click="expandMobileSearch"
+      >
+        <img
+          aria-hidden="true"
+          :alt="$t('alt_logo')"
+          src="/logo.svg"
+          width="96"
+          height="96"
+          class="w-8 h-8 rounded-lg"
+        />
+        <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
+      </button>
+
+      <!-- Desktop: Logo (navigates home) -->
+      <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
+        <NuxtLink
+          to="/"
+          :aria-label="$t('header.home')"
+          dir="ltr"
+          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <img
+            aria-hidden="true"
+            :alt="$t('alt_logo')"
+            src="/logo.svg"
+            width="96"
+            height="96"
+            class="w-8 h-8 rounded-lg"
+          />
+          <span>npmx</span>
+        </NuxtLink>
       </div>
+      <!-- Spacer when logo is hidden on desktop -->
+      <span v-else class="hidden sm:block w-1" />
 
       <!-- Center: Search bar + nav items -->
-      <div class="flex-1 flex items-center justify-center md:gap-6 mx-2">
-        <!-- Search bar (shown on all pages except home) -->
+      <div
+        class="flex-1 flex items-center justify-center md:gap-6"
+        :class="{ 'hidden sm:flex': !isSearchExpanded }"
+      >
+        <!-- Search bar (hidden on mobile unless expanded) -->
         <SearchBox
-          :inputClass="showFullSearch ? '' : 'max-w[6rem]'"
-          @focus="showFullSearch = true"
-          @blur="showFullSearch = false"
+          ref="searchBoxRef"
+          :inputClass="isSearchExpanded ? 'w-full' : ''"
+          :class="{ 'max-w-md': !isSearchExpanded }"
+          @focus="handleSearchFocus"
+          @blur="handleSearchBlur"
         />
         <ul
-          :class="{ 'hidden sm:flex': showFullSearch }"
-          class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
+          v-if="!isSearchExpanded"
+          :class="{ hidden: showFullSearch }"
+          class="hidden sm:flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
         >
           <!-- Packages dropdown (when connected) -->
           <li v-if="isConnected && npmUser" class="flex items-center">
@@ -82,34 +138,46 @@ onKeyStroke(
         </ul>
       </div>
 
-      <!-- End: User status + GitHub -->
-      <div
-        :class="{ 'hidden sm:flex': showFullSearch }"
-        class="flex-1 flex flex-wrap items-center justify-end sm:gap-3 ms-auto sm:ms-0"
-      >
-        <NuxtLink
-          to="/about"
-          class="px-2 py-1.5 sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
-        >
-          {{ $t('footer.about') }}
-        </NuxtLink>
-
+      <!-- End: Desktop nav items + Mobile menu button -->
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6">
+        <!-- Desktop: Settings link -->
         <NuxtLink
           to="/settings"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-2 px-2 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
           <kbd
-            class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
             aria-hidden="true"
           >
             ,
           </kbd>
         </NuxtLink>
 
-        <HeaderAccountMenu />
+        <!-- Desktop: Account menu -->
+        <div class="hidden sm:block">
+          <HeaderAccountMenu />
+        </div>
+
+        <!-- Mobile: Menu button (always visible, toggles menu) -->
+        <button
+          type="button"
+          class="sm:hidden p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
+          :aria-expanded="showMobileMenu"
+          @click="showMobileMenu = !showMobileMenu"
+        >
+          <span
+            class="w-6 h-6 inline-block"
+            :class="showMobileMenu ? 'i-carbon:close' : 'i-carbon:menu'"
+            aria-hidden="true"
+          />
+        </button>
       </div>
     </nav>
+
+    <!-- Mobile menu -->
+    <MobileMenu v-model:open="showMobileMenu" />
   </header>
 </template>
diff --git a/app/components/MobileMenu.vue b/app/components/MobileMenu.vue
new file mode 100644
index 0000000000..6b515e9f1b
--- /dev/null
+++ b/app/components/MobileMenu.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
+const { user: atprotoUser } = useAtproto()
+
+const showConnectorModal = shallowRef(false)
+const showAuthModal = shallowRef(false)
+
+function closeMenu() {
+  isOpen.value = false
+}
+
+function handleShowConnector() {
+  showConnectorModal.value = true
+  closeMenu()
+}
+
+function handleShowAuth() {
+  showAuthModal.value = true
+  closeMenu()
+}
+
+// Close menu on route change
+const route = useRoute()
+watch(() => route.fullPath, closeMenu)
+
+// Close on escape
+onKeyStroke('Escape', () => {
+  if (isOpen.value) {
+    isOpen.value = false
+  }
+})
+
+// Prevent body scroll when menu is open
+const isLocked = useScrollLock(document)
+watch(isOpen, open => (isLocked.value = open))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-150"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 sm:hidden"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="$t('nav.mobile_menu')"
+      >
+        <!-- Backdrop -->
+        <button
+          type="button"
+          class="absolute inset-0 bg-black/60 cursor-default"
+          :aria-label="$t('common.close')"
+          @click="closeMenu"
+        />
+
+        <!-- Menu panel (slides in from right) -->
+        <Transition
+          enter-active-class="transition-transform duration-200"
+          enter-from-class="translate-x-full"
+          enter-to-class="translate-x-0"
+          leave-active-class="transition-transform duration-200"
+          leave-from-class="translate-x-0"
+          leave-to-class="translate-x-full"
+        >
+          <nav
+            v-if="isOpen"
+            class="absolute inset-ie-0 top-0 bottom-0 w-72 bg-bg border-is border-border shadow-xl flex flex-col"
+          >
+            <!-- Header -->
+            <div class="flex items-center justify-between p-4 border-b border-border">
+              <span class="font-mono text-sm text-fg-muted">{{ $t('nav.menu') }}</span>
+              <button
+                type="button"
+                class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                :aria-label="$t('common.close')"
+                @click="closeMenu"
+              >
+                <span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
+              </button>
+            </div>
+
+            <!-- Navigation links -->
+            <div class="flex-1 overflow-y-auto overscroll-contain py-2">
+              <!-- Main navigation -->
+              <div class="px-2 py-2">
+                <NuxtLink
+                  to="/about"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.about') }}
+                </NuxtLink>
+
+                <NuxtLink
+                  to="/settings"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:settings w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('nav.settings') }}
+                </NuxtLink>
+
+                <!-- Connected user links -->
+                <template v-if="isConnected && npmUser">
+                  <NuxtLink
+                    :to="`/~${npmUser}`"
+                    class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                    @click="closeMenu"
+                  >
+                    <span class="i-carbon:package w-5 h-5 text-fg-muted" aria-hidden="true" />
+                    {{ $t('header.packages') }}
+                  </NuxtLink>
+
+                  <NuxtLink
+                    :to="`/~${npmUser}/orgs`"
+                    class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                    @click="closeMenu"
+                  >
+                    <span class="i-carbon:enterprise w-5 h-5 text-fg-muted" aria-hidden="true" />
+                    {{ $t('header.orgs') }}
+                  </NuxtLink>
+                </template>
+              </div>
+
+              <!-- Divider -->
+              <div class="mx-4 my-2 border-t border-border" />
+
+              <!-- External links (from footer) -->
+              <div class="px-2 py-2">
+                <span class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider">
+                  {{ $t('nav.links') }}
+                </span>
+
+                <a
+                  href="https://docs.npmx.dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                >
+                  <span class="i-carbon:document w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.docs') }}
+                  <span
+                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                    aria-hidden="true"
+                  />
+                </a>
+
+                <a
+                  href="https://repo.npmx.dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                >
+                  <span class="i-carbon:logo-github w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.source') }}
+                  <span
+                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                    aria-hidden="true"
+                  />
+                </a>
+
+                <a
+                  href="https://social.npmx.dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                >
+                  <span class="i-carbon:logo-x w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.social') }}
+                  <span
+                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                    aria-hidden="true"
+                  />
+                </a>
+
+                <a
+                  href="https://chat.npmx.dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                >
+                  <span class="i-carbon:chat w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.chat') }}
+                  <span
+                    class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                    aria-hidden="true"
+                  />
+                </a>
+              </div>
+            </div>
+
+            <!-- Divider -->
+            <div class="mx-4 my-2 border-t border-border" />
+
+            <!-- Account section -->
+            <div class="px-2 py-2">
+              <span
+                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
+              >
+                {{ $t('account_menu.account') }}
+              </span>
+
+              <!-- npm CLI connection status (only show if connected) -->
+              <button
+                v-if="isConnected && npmUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowConnector"
+              >
+                <img
+                  v-if="npmAvatar"
+                  :src="npmAvatar"
+                  :alt="npmUser"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
+                >
+                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">~{{ npmUser }}</span>
+                <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
+              </button>
+
+              <!-- Atmosphere connection status -->
+              <button
+                v-if="atprotoUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
+              </button>
+
+              <!-- Connect Atmosphere button (show if not connected) -->
+              <button
+                v-else
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
+              </button>
+            </div>
+
+            <!-- Footer -->
+            <div class="p-4 border-t border-border mt-auto">
+              <p class="font-mono text-xs text-fg-subtle text-center">
+                {{ $t('non_affiliation_disclaimer') }}
+              </p>
+            </div>
+          </nav>
+        </Transition>
+      </div>
+    </Transition>
+
+    <!-- Modals -->
+    <ConnectorModal v-model:open="showConnectorModal" />
+    <AuthModal v-model:open="showAuthModal" />
+  </Teleport>
+</template>
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index e2b3dbadb3..840d4ebf6e 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -81,6 +81,13 @@ function handleSearchFocus() {
   isSearchFocused.value = true
   emit('focus')
 }
+
+// Expose focus method for parent components
+const inputRef = shallowRef<HTMLInputElement | null>(null)
+function focus() {
+  inputRef.value?.focus()
+}
+defineExpose({ focus })
 </script>
 <template>
   <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
@@ -99,6 +106,7 @@ function handleSearchFocus() {
 
           <input
             id="header-search"
+            ref="inputRef"
             :autofocus="!isMobile"
             v-model="searchQuery"
             type="search"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1e22cc5d4d..3a425a81a9 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -46,7 +46,12 @@
     "popular_packages": "Popular packages",
     "search": "search",
     "settings": "settings",
-    "back": "back"
+    "back": "back",
+    "menu": "Menu",
+    "mobile_menu": "Navigation menu",
+    "open_menu": "Open menu",
+    "links": "Links",
+    "tap_to_search": "Tap to search"
   },
   "settings": {
     "title": "settings",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 1e22cc5d4d..3a425a81a9 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -46,7 +46,12 @@
     "popular_packages": "Popular packages",
     "search": "search",
     "settings": "settings",
-    "back": "back"
+    "back": "back",
+    "menu": "Menu",
+    "mobile_menu": "Navigation menu",
+    "open_menu": "Open menu",
+    "links": "Links",
+    "tap_to_search": "Tap to search"
   },
   "settings": {
     "title": "settings",