diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index ab0d557..21acbbf 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -754,15 +754,6 @@
 				></div>
 			{/if}
 
-			<!-- Backdrop for mobile hamburger menu -->
-			{#if menuOpen}
-				<div
-					class="fixed top-14 inset-x-0 bottom-0 z-40 sm:hidden"
-					style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
-					onpointerdown={() => { menuOpen = false; }}
-					aria-hidden="true"
-				></div>
-			{/if}
 			{:else}
 				<div class="ml-auto">
 					<a
@@ -895,6 +886,17 @@
 		{/if}
 	</header>
 
+	<!-- Backdrop for mobile hamburger menu — outside <header> so the blur
+	     only affects page content below, not the drawer items themselves -->
+	{#if menuOpen}
+		<div
+			class="fixed top-14 inset-x-0 bottom-0 z-40 sm:hidden"
+			style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
+			onpointerdown={() => { menuOpen = false; }}
+			aria-hidden="true"
+		></div>
+	{/if}
+
 	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
 		{#key page.url.pathname + page.url.search}
 			<div in:fade={{ duration: 180, delay: 60 }} out:fade={{ duration: 100 }}>