diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 676474a..6c055a0 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -208,48 +208,69 @@
 			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
 				libnovel
 			</a>
+
 			{#if data.user}
-			<a
-				href="/books"
-				class="text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
-			>
-				Library
-			</a>
-			<a
-				href="/browse"
-				class="text-sm transition-colors {page.url.pathname.startsWith('/browse') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
-			>
-				Discover
-			</a>
+				<!-- Desktop nav links (hidden on mobile) -->
+				<a
+					href="/books"
+					class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+				>
+					Library
+				</a>
+				<a
+					href="/browse"
+					class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/browse') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+				>
+					Discover
+				</a>
+
 				<div class="ml-auto flex items-center gap-4">
+					<!-- Desktop: admin + profile + sign out (hidden on mobile) -->
 					{#if data.user?.role === 'admin'}
 						<a
 							href="/admin/scrape"
-							class="text-sm transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+							class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
 						>
 							Scrape
 						</a>
 						<a
 							href="/admin/audio"
-							class="text-sm transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+							class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
 						>
 							Audio cache
 						</a>
 					{/if}
 					<a
 						href="/profile"
-						class="text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+						class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
 					>
 						{data.user.username}
 					</a>
-					<form method="POST" action="/logout">
-						<button
-							type="submit"
-							class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors"
-						>
+					<form method="POST" action="/logout" class="hidden sm:block">
+						<button type="submit" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
 							Sign out
 						</button>
 					</form>
+
+					<!-- Mobile: hamburger button -->
+					<button
+						onclick={() => (menuOpen = !menuOpen)}
+						aria-label="Toggle menu"
+						aria-expanded={menuOpen}
+						class="sm:hidden p-2 -mr-1 rounded text-zinc-400 hover:text-zinc-100 transition-colors"
+					>
+						{#if menuOpen}
+							<!-- X icon -->
+							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						{:else}
+							<!-- Hamburger icon -->
+							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+						{/if}
+					</button>
 				</div>
 			{:else}
 				<div class="ml-auto">
@@ -262,6 +283,60 @@
 				</div>
 			{/if}
 		</nav>
+
+		<!-- Mobile drawer (full-width, below the bar) -->
+		{#if data.user && menuOpen}
+			<div class="sm:hidden border-t border-zinc-700 bg-zinc-900 px-4 py-3 flex flex-col gap-1">
+				<a
+					href="/books"
+					onclick={() => (menuOpen = false)}
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/books') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+				>
+					Library
+				</a>
+				<a
+					href="/browse"
+					onclick={() => (menuOpen = false)}
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/browse') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+				>
+					Discover
+				</a>
+				<a
+					href="/profile"
+					onclick={() => (menuOpen = false)}
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname === '/profile' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+				>
+					Profile <span class="text-zinc-500 font-normal">({data.user.username})</span>
+				</a>
+				{#if data.user?.role === 'admin'}
+					<div class="my-1 border-t border-zinc-700/60"></div>
+					<p class="px-3 pt-1 pb-0.5 text-xs text-zinc-600 uppercase tracking-widest">Admin</p>
+					<a
+						href="/admin/scrape"
+						onclick={() => (menuOpen = false)}
+						class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+					>
+						Scrape tasks
+					</a>
+					<a
+						href="/admin/audio"
+						onclick={() => (menuOpen = false)}
+						class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+					>
+						Audio cache
+					</a>
+				{/if}
+				<div class="my-1 border-t border-zinc-700/60"></div>
+				<form method="POST" action="/logout">
+					<button
+						type="submit"
+						class="w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium text-red-400 hover:bg-zinc-800 transition-colors"
+					>
+						Sign out
+					</button>
+				</form>
+			</div>
+		{/if}
 	</header>
 
 	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
diff --git a/ui/src/routes/browse/+page.svelte b/ui/src/routes/browse/+page.svelte
index 85ba2f9..5f7ac67 100644
--- a/ui/src/routes/browse/+page.svelte
+++ b/ui/src/routes/browse/+page.svelte
@@ -152,6 +152,16 @@
 
 	// Admin: refresh catalogue
 	let refreshing = $state(false);
+
+	// ── Scroll-to-top button ─────────────────────────────────────────────────
+	let showScrollTop = $state(false);
+	$effect(() => {
+		function onScroll() {
+			showScrollTop = window.scrollY > 400;
+		}
+		window.addEventListener('scroll', onScroll, { passive: true });
+		return () => window.removeEventListener('scroll', onScroll);
+	});
 </script>
 
 <svelte:head>
@@ -559,3 +569,17 @@
 		<p class="text-center text-zinc-600 text-xs mt-8 pb-4">All novels loaded</p>
 	{/if}
 {/if}
+
+<!-- Scroll-to-top button -->
+{#if showScrollTop}
+	<button
+		onclick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+		class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-zinc-800 border border-zinc-600 text-zinc-300 shadow-lg hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
+		title="Back to top"
+		aria-label="Scroll to top"
+	>
+		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+		</svg>
+	</button>
+{/if}