diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index 7807110c..22add063 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -125,21 +125,25 @@ watch(open, isOpen => {
               >
                 <span class="text-fg-subtle">$</span>
                 <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                <button
-                  type="button"
-                  :aria-label="
-                    copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                  "
-                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  @click="copyCommand"
-                >
-                  <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                  <span
-                    v-else
-                    class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                    aria-hidden="true"
-                  />
-                </button>
+                <div class="ms-auto flex items-center gap-2">
+                  <PackageManagerSelect />
+
+                  <button
+                    type="button"
+                    :aria-label="
+                      copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
+                    "
+                    class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                    @click="copyCommand"
+                  >
+                    <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+                    <span
+                      v-else
+                      class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
               </div>
 
               <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
new file mode 100644
index 00000000..8a9bc4df
--- /dev/null
+++ b/app/components/PackageManagerSelect.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { onClickOutside, useEventListener } from '@vueuse/core'
+
+const selectedPM = useSelectedPackageManager()
+
+const listRef = useTemplateRef('listRef')
+const triggerRef = useTemplateRef('triggerRef')
+const isOpen = shallowRef(false)
+const highlightedIndex = shallowRef(-1)
+
+const dropdownPosition = shallowRef<{ top: number; left: number } | null>(null)
+
+function getDropdownStyle(): Record<string, string> {
+  if (!dropdownPosition.value) return {}
+  return {
+    top: `${dropdownPosition.value.top}px`,
+    left: `${dropdownPosition.value.left}px`,
+  }
+}
+
+useEventListener('scroll', close, true)
+
+// Generate unique ID for accessibility
+const inputId = useId()
+const listboxId = `${inputId}-listbox`
+
+function toggle() {
+  if (isOpen.value) {
+    close()
+  } else {
+    if (triggerRef.value) {
+      const rect = triggerRef.value.getBoundingClientRect()
+      dropdownPosition.value = {
+        top: rect.bottom + 4,
+        left: rect.left,
+      }
+    }
+    isOpen.value = true
+    highlightedIndex.value = packageManagers.findIndex(pm => pm.id === selectedPM.value)
+  }
+}
+
+function close() {
+  isOpen.value = false
+  highlightedIndex.value = -1
+}
+
+function select(id: PackageManagerId) {
+  selectedPM.value = id
+  close()
+  triggerRef.value?.focus()
+}
+
+// Check for reduced motion preference
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+onClickOutside(listRef, close, { ignore: [triggerRef] })
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) return
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      highlightedIndex.value = (highlightedIndex.value + 1) % packageManagers.length
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      highlightedIndex.value =
+        highlightedIndex.value <= 0 ? packageManagers.length - 1 : highlightedIndex.value - 1
+      break
+    case 'Enter': {
+      event.preventDefault()
+      const pm = packageManagers[highlightedIndex.value]
+      if (pm) {
+        select(pm.id)
+      }
+      break
+    }
+    case 'Escape':
+      close()
+      triggerRef.value?.focus()
+      break
+  }
+}
+</script>
+
+<template>
+  <button
+    ref="triggerRef"
+    type="button"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
+    :aria-expanded="isOpen"
+    aria-haspopup="listbox"
+    :aria-label="$t('package.get_started.pm_label')"
+    :aria-controls="listboxId"
+    @click="toggle"
+    @keydown="handleKeydown"
+  >
+    <template v-for="pmOption in packageManagers" :key="pmOption.id">
+      <span
+        class="inline-block h-3 w-3 pm-select-content"
+        :class="pmOption.icon"
+        :data-pm-select="pmOption.id"
+        aria-hidden="true"
+      />
+      <span
+        class="pm-select-content"
+        :data-pm-select="pmOption.id"
+        :aria-hidden="pmOption.id !== selectedPM"
+        >{{ pmOption.label }}</span
+      >
+    </template>
+    <span
+      class="i-carbon:chevron-down w-3 h-3"
+      :class="[
+        { 'rotate-180': isOpen },
+        prefersReducedMotion ? '' : 'transition-transform duration-200',
+      ]"
+      aria-hidden="true"
+    />
+  </button>
+
+  <!-- Dropdown menu (teleported to body to avoid clipping) -->
+  <Teleport to="body">
+    <Transition
+      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
+      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
+      enter-to-class="opacity-100"
+      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
+      leave-from-class="opacity-100"
+      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
+    >
+      <ul
+        v-if="isOpen"
+        :id="listboxId"
+        ref="listRef"
+        role="listbox"
+        :aria-activedescendant="
+          highlightedIndex >= 0
+            ? `${listboxId}-${packageManagers[highlightedIndex]?.id}`
+            : undefined
+        "
+        :aria-label="$t('package.get_started.pm_label')"
+        :style="getDropdownStyle()"
+        class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50"
+      >
+        <li
+          v-for="(pm, index) in packageManagers"
+          :id="`${listboxId}-${pm.id}`"
+          :key="pm.id"
+          role="option"
+          :aria-selected="selectedPM === pm.id"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
+          :class="[
+            selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
+            highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+          ]"
+          @click="select(pm.id)"
+          @mouseenter="highlightedIndex = index"
+        >
+          <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
+          <span>{{ pm.label }}</span>
+          <span
+            v-if="selectedPM === pm.id"
+            class="i-carbon:checkmark w-3 h-3 text-accent ms-auto"
+            aria-hidden="true"
+          />
+        </li>
+      </ul>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+:root[data-pm] .pm-select-content {
+  display: none;
+}
+
+:root[data-pm='npm'] [data-pm-select='npm'],
+:root[data-pm='pnpm'] [data-pm-select='pnpm'],
+:root[data-pm='yarn'] [data-pm-select='yarn'],
+:root[data-pm='bun'] [data-pm-select='bun'],
+:root[data-pm='deno'] [data-pm-select='deno'],
+:root[data-pm='vlt'] [data-pm-select='vlt'] {
+  display: inline-block;
+}
+
+/* Fallback: when no data-pm is set, npm is selected by default */
+:root:not([data-pm]) .pm-select-content:not([data-pm-select='npm']) {
+  display: none;
+}
+</style>
diff --git a/app/components/PackageManagerTabs.vue b/app/components/PackageManagerTabs.vue
deleted file mode 100644
index 57812bec..00000000
--- a/app/components/PackageManagerTabs.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-const selectedPM = useSelectedPackageManager()
-
-const tablistNavigationKeys = new Set(['ArrowRight', 'ArrowLeft', 'Home', 'End'])
-
-function onTabListKeydown(event: KeyboardEvent) {
-  if (!tablistNavigationKeys.has(event.key)) return
-  const tablist = event.currentTarget as HTMLElement | null
-  if (!tablist) return
-
-  const tabs = Array.from(tablist.querySelectorAll<HTMLElement>('[role="tab"]'))
-  const count = Math.min(tabs.length, packageManagers.length)
-  if (!count) return
-
-  event.preventDefault()
-
-  let activeIndex = packageManagers.findIndex(pm => pm.id === selectedPM.value)
-  if (activeIndex < 0) activeIndex = 0
-
-  let nextIndex = activeIndex
-  if (event.key === 'ArrowRight') nextIndex = (activeIndex + 1) % count
-  if (event.key === 'ArrowLeft') nextIndex = (activeIndex - 1 + count) % count
-  if (event.key === 'Home') nextIndex = 0
-  if (event.key === 'End') nextIndex = count - 1
-
-  const nextTab = tabs[nextIndex]
-  const nextId = packageManagers[nextIndex]?.id
-  if (nextId && nextId !== selectedPM.value) {
-    selectedPM.value = nextId
-  }
-
-  nextTick(() => nextTab?.focus())
-}
-</script>
-
-<template>
-  <div
-    class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-    role="tablist"
-    :aria-label="$t('package.get_started.pm_label')"
-    @keydown="onTabListKeydown"
-  >
-    <button
-      v-for="pm in packageManagers"
-      :key="pm.id"
-      :id="`pm-tab-${pm.id}`"
-      role="tab"
-      :data-pm-tab="pm.id"
-      :aria-selected="selectedPM === pm.id"
-      :aria-controls="`pm-panel-${pm.id}`"
-      :tabindex="selectedPM === pm.id ? 0 : -1"
-      type="button"
-      class="pm-tab px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5 hover:text-fg"
-      @click="selectedPM = pm.id"
-    >
-      <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-      {{ pm.label }}
-    </button>
-  </div>
-</template>
-
-<style>
-/*
- * Package manager tab styling based on data-pm attribute on <html>.
- * Selected tab gets highlighted background and border.
- */
-
-[data-pm-tab] {
-  --pm-tab-bg: transparent;
-  --pm-tab-border: transparent;
-  --pm-tab-shadow: none;
-  background: var(--pm-tab-bg);
-  border-color: var(--pm-tab-border);
-  box-shadow: var(--pm-tab-shadow);
-  color: var(--fg-subtle);
-}
-
-:root[data-pm='npm'] [data-pm-tab='npm'],
-:root[data-pm='pnpm'] [data-pm-tab='pnpm'],
-:root[data-pm='yarn'] [data-pm-tab='yarn'],
-:root[data-pm='bun'] [data-pm-tab='bun'],
-:root[data-pm='deno'] [data-pm-tab='deno'],
-:root[data-pm='vlt'] [data-pm-tab='vlt'] {
-  --pm-tab-bg: var(--bg);
-  --pm-tab-border: var(--border);
-  --pm-tab-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: var(--fg);
-}
-
-/* Fallback: when no data-pm is set, npm is selected by default */
-:root:not([data-pm]) [data-pm-tab='npm'] {
-  --pm-tab-bg: var(--bg);
-  --pm-tab-border: var(--border);
-  --pm-tab-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: var(--fg);
-}
-</style>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 0be15840..7c1d95f4 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -798,8 +798,8 @@ function handleClick(event: MouseEvent) {
           <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('package.run.title') }}
           </h2>
-          <!-- Package manager tabs -->
-          <PackageManagerTabs />
+          <!-- Package manager dropdown -->
+          <PackageManagerSelect />
         </div>
         <div
           role="tabpanel"
@@ -832,8 +832,8 @@ function handleClick(event: MouseEvent) {
               />
             </a>
           </h2>
-          <!-- Package manager tabs -->
-          <PackageManagerTabs />
+          <!-- Package manager dropdown -->
+          <PackageManagerSelect />
         </div>
         <div
           role="tabpanel"
@@ -1071,18 +1071,21 @@ function handleClick(event: MouseEvent) {
   grid-area: header;
   overflow-x: hidden;
 }
+
 .area-install {
   grid-area: install;
-  overflow-x: hidden;
 }
+
 .area-vulns {
   grid-area: vulns;
   overflow-x: hidden;
 }
+
 .area-readme {
   grid-area: readme;
   overflow-x: hidden;
 }
+
 .area-sidebar {
   grid-area: sidebar;
 }
diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
index 7d47dd49..677887a1 100644
--- a/test/nuxt/components.spec.ts
+++ b/test/nuxt/components.spec.ts
@@ -95,6 +95,7 @@ import ViewModeToggle from '~/components/ViewModeToggle.vue'
 import PackageVulnerabilityTree from '~/components/PackageVulnerabilityTree.vue'
 import PackageDeprecatedTree from '~/components/PackageDeprecatedTree.vue'
 import DependencyPathPopup from '~/components/DependencyPathPopup.vue'
+import PackageManagerSelect from '~/components/PackageManagerSelect.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -1293,4 +1294,12 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageManagerSelect', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageManagerSelect)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })