diff --git a/src/lib/components/DeviceDropdown.svelte b/src/lib/components/DeviceDropdown.svelte
new file mode 100644
index 000000000..c490125be
--- /dev/null
+++ b/src/lib/components/DeviceDropdown.svelte
@@ -0,0 +1,508 @@
+<script lang="ts">
+  import { ChevronDown, Search } from 'lucide-svelte';
+  import {
+    openMenu as openGlobalMenu,
+    closeMenu as closeGlobalMenu,
+    subscribe as subscribeFloatingMenu,
+    getActiveMenuId,
+    MENU_INACTIVITY_TIMEOUT
+  } from '$lib/stores/floatingMenuStore';
+
+  interface DeviceOption {
+    value: string;        // Display name
+    id: string;           // Device ID (for categorization)
+    isDefault?: boolean;
+  }
+
+  interface DeviceGroup {
+    key: string;          // Group identifier
+    label: string;        // Display label
+    devices: DeviceOption[];
+  }
+
+  interface Props {
+    value: string;
+    devices: DeviceOption[];
+    onchange: (value: string) => void;
+    wide?: boolean;
+    expandLeft?: boolean;
+  }
+
+  let { value, devices, onchange, wide = false, expandLeft = false }: Props = $props();
+
+  let isOpen = $state(false);
+  let isHovering = $state(false);
+  let dropdownRef = $state<HTMLDivElement | null>(null);
+  let menuRef = $state<HTMLDivElement | null>(null);
+  let searchInputRef = $state<HTMLInputElement | null>(null);
+  let searchQuery = $state('');
+
+  const menuId = `device-dropdown-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+
+  // Show search when many devices
+  const showSearch = $derived(devices.length > 5);
+
+  // Group devices by category
+  const groupedDevices = $derived.by(() => {
+    const groups: DeviceGroup[] = [];
+
+    // Defaults group
+    const defaults: DeviceOption[] = [];
+    // Bit-perfect group (hw: devices)
+    const bitPerfect: DeviceOption[] = [];
+    // Plugin Hardware group (plughw: devices)
+    const pluginHw: DeviceOption[] = [];
+    // Other devices
+    const others: DeviceOption[] = [];
+
+    for (const device of devices) {
+      // System Default is always first
+      if (device.value === 'System Default') {
+        defaults.push(device);
+      }
+      // Default ALSA Output
+      else if (device.id === 'default' || device.isDefault) {
+        defaults.push(device);
+      }
+      // Bit-perfect direct hardware (hw:X,Y)
+      else if (device.id.startsWith('hw:')) {
+        bitPerfect.push(device);
+      }
+      // Plugin hardware (plughw:X,Y)
+      else if (device.id.startsWith('plughw:')) {
+        pluginHw.push(device);
+      }
+      // Everything else
+      else {
+        others.push(device);
+      }
+    }
+
+    if (defaults.length > 0) {
+      groups.push({ key: 'defaults', label: 'Defaults', devices: defaults });
+    }
+    if (bitPerfect.length > 0) {
+      groups.push({ key: 'bitperfect', label: 'Bit-perfect (Auto-detected)', devices: bitPerfect });
+    }
+    if (pluginHw.length > 0) {
+      groups.push({ key: 'pluginhw', label: 'Plugin Hardware', devices: pluginHw });
+    }
+    if (others.length > 0) {
+      groups.push({ key: 'others', label: 'Other Outputs', devices: others });
+    }
+
+    return groups;
+  });
+
+  // Filtered groups based on search
+  const filteredGroups = $derived.by(() => {
+    if (!searchQuery.trim()) return groupedDevices;
+
+    const query = searchQuery.toLowerCase();
+    return groupedDevices
+      .map(group => ({
+        ...group,
+        devices: group.devices.filter(d =>
+          d.value.toLowerCase().includes(query) ||
+          d.id.toLowerCase().includes(query)
+        )
+      }))
+      .filter(group => group.devices.length > 0);
+  });
+
+  // Flat list of all filtered devices (for counting)
+  const totalFilteredDevices = $derived(
+    filteredGroups.reduce((sum, g) => sum + g.devices.length, 0)
+  );
+
+  let fixedPosition = $state<{ top: number; left: number; width: number } | null>(null);
+
+  const ITEM_HEIGHT = 36;
+  const GROUP_HEADER_HEIGHT = 28;
+  const SEARCH_HEIGHT = 48;
+  const MENU_PADDING = 8;
+  const MAX_VISIBLE_ITEMS = 6;
+  const MENU_GAP = 4;
+
+  const expectedMenuHeight = $derived(
+    showSearch
+      ? SEARCH_HEIGHT + (MAX_VISIBLE_ITEMS * ITEM_HEIGHT) + MENU_PADDING
+      : Math.min(devices.length + groupedDevices.length, 10) * ITEM_HEIGHT + MENU_PADDING
+  );
+
+  function calculatePosition() {
+    if (!dropdownRef) return;
+
+    const triggerRect = dropdownRef.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const playerHeight = 104;
+    const safeBottom = viewportHeight - playerHeight;
+    const menuHeight = menuRef?.offsetHeight || expectedMenuHeight;
+    const menuWidth = menuRef?.offsetWidth || (wide ? 320 : 280);
+
+    const spaceBelow = safeBottom - triggerRect.bottom - MENU_GAP;
+    const spaceAbove = triggerRect.top - MENU_GAP;
+
+    let top: number;
+    if (spaceBelow >= menuHeight) {
+      top = triggerRect.bottom + MENU_GAP;
+    } else if (spaceAbove >= menuHeight) {
+      top = triggerRect.top - menuHeight - MENU_GAP;
+    } else {
+      top = spaceBelow >= spaceAbove ? triggerRect.bottom + MENU_GAP : triggerRect.top - menuHeight - MENU_GAP;
+    }
+
+    let left: number;
+    if (expandLeft) {
+      left = triggerRect.right - menuWidth;
+      if (left < 8) left = 8;
+    } else {
+      left = triggerRect.left;
+      if (left + menuWidth > viewportWidth - 8) {
+        left = viewportWidth - menuWidth - 8;
+      }
+    }
+
+    fixedPosition = { top, left, width: triggerRect.width };
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (dropdownRef && !dropdownRef.contains(event.target as Node) &&
+        menuRef && !menuRef.contains(event.target as Node)) {
+      closeDropdown();
+    }
+  }
+
+  function openDropdown() {
+    calculatePosition();
+    openGlobalMenu(menuId);
+    isOpen = true;
+    searchQuery = '';
+
+    requestAnimationFrame(() => {
+      if (showSearch) {
+        searchInputRef?.focus();
+      }
+      calculatePosition();
+    });
+  }
+
+  function closeDropdown() {
+    isOpen = false;
+    searchQuery = '';
+    fixedPosition = null;
+    closeGlobalMenu(menuId);
+  }
+
+  function handleOptionClick(device: DeviceOption) {
+    onchange(device.value);
+    closeDropdown();
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      closeDropdown();
+    }
+  }
+
+  $effect(() => {
+    const unsubscribe = subscribeFloatingMenu(() => {
+      const activeId = getActiveMenuId();
+      if (activeId !== null && activeId !== menuId && isOpen) {
+        isOpen = false;
+        searchQuery = '';
+        fixedPosition = null;
+      }
+    });
+    return unsubscribe;
+  });
+
+  $effect(() => {
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+
+      const recalc = () => calculatePosition();
+      window.addEventListener('scroll', recalc, true);
+      window.addEventListener('resize', recalc);
+
+      let idleTimer: ReturnType<typeof setTimeout> | null = null;
+
+      const scheduleIdleClose = () => {
+        if (idleTimer) clearTimeout(idleTimer);
+        idleTimer = setTimeout(() => {
+          if (isOpen && !isHovering) closeDropdown();
+        }, MENU_INACTIVITY_TIMEOUT);
+      };
+
+      if (!isHovering) scheduleIdleClose();
+
+      const onActivity = () => {
+        if (!isHovering) scheduleIdleClose();
+      };
+
+      window.addEventListener('pointermove', onActivity, true);
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        window.removeEventListener('scroll', recalc, true);
+        window.removeEventListener('resize', recalc);
+        window.removeEventListener('pointermove', onActivity, true);
+        if (idleTimer) clearTimeout(idleTimer);
+      };
+    }
+  });
+
+  const menuMaxHeight = $derived(`${expectedMenuHeight}px`);
+</script>
+
+<div class="dropdown" class:wide bind:this={dropdownRef}>
+  <button class="trigger" onclick={() => isOpen ? closeDropdown() : openDropdown()}>
+    <span class="value-text">{value}</span>
+    <ChevronDown size={16} class="chevron" />
+  </button>
+</div>
+
+{#if isOpen && fixedPosition}
+  <div
+    class="menu"
+    class:searchable={showSearch}
+    role="listbox"
+    bind:this={menuRef}
+    onmouseenter={() => isHovering = true}
+    onmouseleave={() => isHovering = false}
+    style:top="{fixedPosition.top}px"
+    style:left="{fixedPosition.left}px"
+    style:min-width="{fixedPosition.width}px"
+    style:max-height={menuMaxHeight}
+  >
+    {#if showSearch}
+      <div class="search-container">
+        <Search size={14} class="search-icon" />
+        <input
+          bind:this={searchInputRef}
+          type="text"
+          class="search-input"
+          placeholder="Search devices..."
+          bind:value={searchQuery}
+          onkeydown={handleKeyDown}
+        />
+      </div>
+    {/if}
+    <div
+      class="options-container"
+      class:with-search={showSearch}
+      style:max-height={showSearch ? `${MAX_VISIBLE_ITEMS * ITEM_HEIGHT + 100}px` : undefined}
+    >
+      {#each filteredGroups as group (group.key)}
+        <div class="group">
+          <div class="group-header">{group.label}</div>
+          {#each group.devices as device (device.value)}
+            <button
+              class="option"
+              class:selected={device.value === value}
+              onclick={() => handleOptionClick(device)}
+              title={device.id !== device.value ? `${device.value}\n${device.id}` : device.value}
+            >
+              <span class="option-text">{device.value}</span>
+              {#if group.key === 'bitperfect'}
+                <span class="badge bit-perfect">BP</span>
+              {/if}
+            </button>
+          {/each}
+        </div>
+      {:else}
+        <div class="no-results">No devices found</div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .dropdown {
+    position: relative;
+  }
+
+  .dropdown.wide {
+    min-width: 280px;
+  }
+
+  .trigger {
+    height: 40px;
+    width: 280px;
+    padding: 0 16px;
+    background-color: var(--bg-tertiary);
+    border-radius: 8px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background-color 150ms ease;
+  }
+
+  .dropdown.wide .trigger {
+    width: 280px;
+  }
+
+  .value-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    text-align: left;
+  }
+
+  .trigger:hover {
+    background-color: var(--bg-hover);
+  }
+
+  .trigger :global(.chevron) {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .menu {
+    position: fixed;
+    width: max-content;
+    min-width: 280px;
+    background-color: var(--bg-tertiary);
+    border-radius: 8px;
+    padding: 4px 0;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
+    flex-shrink: 0;
+  }
+
+  .search-container :global(.search-icon) {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    padding: 0;
+    min-width: 0;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .options-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-muted) transparent;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .options-container::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .options-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .options-container::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 9999px;
+  }
+
+  .group {
+    margin-bottom: 4px;
+  }
+
+  .group:last-child {
+    margin-bottom: 0;
+  }
+
+  .group-header {
+    padding: 8px 12px 4px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .option {
+    width: 100%;
+    height: 36px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    text-align: left;
+    font-size: 12px;
+    color: var(--text-secondary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 150ms ease, color 150ms ease;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .option-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+  .option:hover {
+    background-color: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .option.selected {
+    background-color: rgba(66, 133, 244, 0.15);
+    color: var(--text-primary);
+  }
+
+  .badge {
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+
+  .badge.bit-perfect {
+    background: rgba(59, 130, 246, 0.2);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+  }
+
+  .no-results {
+    padding: 12px 16px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+</style>
diff --git a/src/lib/components/views/SettingsView.svelte b/src/lib/components/views/SettingsView.svelte
index c27c46185..9b2807522 100644
--- a/src/lib/components/views/SettingsView.svelte
+++ b/src/lib/components/views/SettingsView.svelte
@@ -7,6 +7,7 @@
   import { ArrowLeft, ChevronRight, ChevronDown, ChevronUp, Loader2, Sun, Moon, SunMoon } from 'lucide-svelte';
   import Toggle from '../Toggle.svelte';
   import Dropdown from '../Dropdown.svelte';
+  import DeviceDropdown from '../DeviceDropdown.svelte';
   import VolumeSlider from '../VolumeSlider.svelte';
   import UpdateCheckResultModal from '../updates/UpdateCheckResultModal.svelte';
   import WhatsNewModal from '../updates/WhatsNewModal.svelte';
@@ -461,6 +462,39 @@
     return map;
   });
 
+  // Device options for grouped dropdown (ALSA Direct only)
+  let groupedDeviceOptions = $derived.by(() => {
+    // System Default is always first
+    const options: { value: string; id: string; isDefault?: boolean }[] = [
+      { value: 'System Default', id: 'system-default', isDefault: true }
+    ];
+
+    // Generate unique display names (same logic as deviceOptions)
+    const displayNames = backendDevices.map(d => {
+      if (d.description && selectedBackend === 'ALSA Direct') {
+        return d.description;
+      }
+      return needsTranslation(d.name) ? getDevicePrettyName(d.name) : d.name;
+    });
+
+    backendDevices.forEach((device, idx) => {
+      let displayName = displayNames[idx];
+
+      // If duplicate, append device ID to make unique
+      if (displayNames.filter(n => n === displayName).length > 1) {
+        displayName = `${displayName} [${device.name}]`;
+      }
+
+      options.push({
+        value: displayName,
+        id: device.id,
+        isDefault: device.is_default
+      });
+    });
+
+    return options;
+  });
+
   // ALSA plugin options (derived)
   let alsaPluginOptions = $derived(alsaPlugins.map(p => p.name));
 
@@ -1883,6 +1917,14 @@
       </div>
       {#if isLoadingDevices}
         <span class="loading-text">Loading devices...</span>
+      {:else if selectedBackend === 'ALSA Direct'}
+        <DeviceDropdown
+          value={outputDevice}
+          devices={groupedDeviceOptions}
+          onchange={handleBackendDeviceChange}
+          wide
+          expandLeft
+        />
       {:else}
         <Dropdown
           value={outputDevice}