diff --git a/web/src/lib/components/MobileNavDrawer.svelte b/web/src/lib/components/MobileNavDrawer.svelte
index f9f2d7c7..5fa68d13 100644
--- a/web/src/lib/components/MobileNavDrawer.svelte
+++ b/web/src/lib/components/MobileNavDrawer.svelte
@@ -6,7 +6,7 @@
   import { mobileNav, closeMobileNav } from '$lib/stores/mobileNav.svelte';
 
   let previouslyFocused: HTMLElement | null = null;
-  let firstNavLink: HTMLAnchorElement | undefined = $state();
+  let drawerEl: HTMLElement | undefined = $state();
 
   const navItems = [
     { href: '/',                label: 'Home' },
@@ -36,7 +36,10 @@
   $effect(() => {
     if (mobileNav.value) {
       previouslyFocused = document.activeElement as HTMLElement | null;
-      Promise.resolve().then(() => firstNavLink?.focus());
+      Promise.resolve().then(() => {
+        const first = drawerEl?.querySelector<HTMLAnchorElement>('nav a');
+        first?.focus();
+      });
     } else if (previouslyFocused) {
       previouslyFocused.focus();
       previouslyFocused = null;
@@ -62,6 +65,7 @@
 {/if}
 
 <aside
+  bind:this={drawerEl}
   aria-label="Main navigation"
   aria-hidden={!mobileNav.value}
   inert={!mobileNav.value}
@@ -85,10 +89,9 @@
 
   <nav class="flex-1 overflow-y-auto p-2">
     <ul>
-      {#each navItems as item, i (item.href)}
+      {#each navItems as item (item.href)}
         <li>
           <a
-            bind:this={i === 0 ? firstNavLink : undefined}
             href={item.href}
             onclick={onLinkClick}
             class="flex items-center min-h-[44px] rounded px-3 py-2 hover:bg-surface-hover"