diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 771cf4e..03dd5f8 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -12,43 +12,37 @@
 	const badge = $derived(user?.role ? roleBadge[user.role] : null);
 </script>
 
-<header
-	class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface-900/80 px-6 backdrop-blur-md"
->
-	<div></div>
-
-	<div class="flex items-center gap-4">
-		{#if user}
-			<div class="flex items-center gap-3">
-				{#if user.isRootAdmin}
-					<span class="rounded px-1.5 py-0.5 text-[10px] font-700 bg-red-500/20 text-red-400">
-						ROOT
-					</span>
-				{:else if badge}
-					<span class="rounded px-1.5 py-0.5 text-[10px] font-700 {badge.color}">
-						{badge.label}
-					</span>
-				{/if}
-				{#if user.image}
-					<img src={user.image} alt={user.name} class="h-7 w-7 rounded-full" />
-				{/if}
-				<span class="font-500 text-sm text-text-primary">{user.name}</span>
-				<form method="post" action="/settings?/logout" use:enhance>
-					<button
-						type="submit"
-						class="rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary transition-colors hover:border-red-500/30 hover:text-red-400"
-					>
-						Logout
-					</button>
-				</form>
-			</div>
-		{:else}
-			<a
-				href="/login"
-				class="font-600 rounded-md bg-accent px-3.5 py-1.5 text-sm text-surface-900 transition-colors hover:bg-accent-hover"
-			>
-				Sign in with osu!
-			</a>
-		{/if}
-	</div>
-</header>
+<div class="flex items-center gap-4">
+	{#if user}
+		<div class="flex items-center gap-3">
+			{#if user.isRootAdmin}
+				<span class="rounded px-1.5 py-0.5 text-[10px] font-700 bg-red-500/20 text-red-400">
+					ROOT
+				</span>
+			{:else if badge}
+				<span class="rounded px-1.5 py-0.5 text-[10px] font-700 {badge.color}">
+					{badge.label}
+				</span>
+			{/if}
+			{#if user.image}
+				<img src={user.image} alt={user.name} class="h-7 w-7 rounded-full" />
+			{/if}
+			<span class="hidden font-500 text-sm text-text-primary sm:inline">{user.name}</span>
+			<form method="post" action="/settings?/logout" use:enhance>
+				<button
+					type="submit"
+					class="rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary transition-colors hover:border-red-500/30 hover:text-red-400"
+				>
+					Logout
+				</button>
+			</form>
+		</div>
+	{:else}
+		<a
+			href="/login"
+			class="font-600 rounded-md bg-accent px-3.5 py-1.5 text-sm text-surface-900 transition-colors hover:bg-accent-hover"
+		>
+			Sign in with osu!
+		</a>
+	{/if}
+</div>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 742b7f6..b8c5a7f 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -3,6 +3,8 @@
 
 	const user = $derived(page.data?.user);
 
+	let { open = $bindable(false) } = $props();
+
 	const nav = [
 		{ href: '/', label: 'Dashboard', icon: '⌂' },
 		{ href: '/matches', label: 'Matches', icon: '⚔' },
@@ -18,10 +20,27 @@
 
 	const isStaff = $derived(user?.role === 'referee' || user?.role === 'admin');
 	const isAdmin = $derived(user?.role === 'admin');
+
+	// Close sidebar on navigation (mobile)
+	$effect(() => {
+		page.url.pathname;
+		open = false;
+	});
 </script>
 
+<!-- Backdrop (mobile only) -->
+{#if open}
+	<button
+		class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
+		onclick={() => (open = false)}
+		aria-label="Close menu"
+	></button>
+{/if}
+
 <aside
-	class="fixed top-0 left-0 z-40 flex h-full w-56 flex-col border-r border-border bg-surface-800"
+	class="fixed top-0 left-0 z-50 flex h-full w-56 flex-col border-r border-border bg-surface-800 transition-transform duration-200 {open
+		? 'translate-x-0'
+		: '-translate-x-full'} lg:translate-x-0 lg:z-40"
 >
 	<!-- Logo -->
 	<a href="/" class="flex items-center gap-2.5 px-5 py-5">
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 62c758f..d5aed7d 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -9,6 +9,8 @@
 	const user = $derived(page.data?.user);
 	const activeMatch = $derived(page.data?.activeMatch);
 
+	let sidebarOpen = $state(false);
+
 	const stateLabel: Record<string, string> = {
 		CREATED: 'Starting',
 		LOBBY: 'In Lobby',
@@ -21,19 +23,50 @@
 {#if user}
 	<!-- Authenticated layout with sidebar -->
 	<div class="flex min-h-dvh">
-		<Sidebar />
-		<div class="ml-56 flex flex-1 flex-col">
-			<Header />
+		<Sidebar bind:open={sidebarOpen} />
+		<div class="flex flex-1 flex-col lg:ml-56">
+			<!-- Header with hamburger on mobile -->
+			<header
+				class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface-900/80 px-4 backdrop-blur-md lg:px-6"
+			>
+				<button
+					class="rounded-md p-2 text-text-secondary hover:bg-surface-700 hover:text-text-primary lg:hidden"
+					onclick={() => (sidebarOpen = !sidebarOpen)}
+					aria-label="Toggle menu"
+				>
+					<svg
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M4 6h16M4 12h16M4 18h16"
+						/>
+					</svg>
+				</button>
+				<div class="lg:flex-1"></div>
+				<Header />
+			</header>
+
 			{#if activeMatch && !page.url.pathname.startsWith('/matches/' + activeMatch.id)}
-				<div class="flex items-center justify-between border-b border-yellow-500/30 bg-yellow-500/10 px-6 py-2.5">
+				<div
+					class="flex items-center justify-between border-b border-yellow-500/30 bg-yellow-500/10 px-4 py-2.5 lg:px-6"
+				>
 					<div class="flex items-center gap-2.5 text-sm">
 						<div class="relative h-2 w-2">
-							<div class="absolute inset-0 animate-ping rounded-full bg-yellow-400 opacity-75"></div>
+							<div
+								class="absolute inset-0 animate-ping rounded-full bg-yellow-400 opacity-75"
+							></div>
 							<div class="h-2 w-2 rounded-full bg-yellow-400"></div>
 						</div>
-						<span class="font-600 text-yellow-300">Active match in progress</span>
-						<span class="text-xs text-yellow-400/70">
-							{activeMatch.name ?? 'Match'} &middot; {stateLabel[activeMatch.state] ?? activeMatch.state}
+						<span class="font-600 text-yellow-300">Active match</span>
+						<span class="hidden text-xs text-yellow-400/70 sm:inline">
+							{activeMatch.name ?? 'Match'} &middot; {stateLabel[activeMatch.state] ??
+								activeMatch.state}
 						</span>
 					</div>
 					<a
@@ -44,7 +77,7 @@
 					</a>
 				</div>
 			{/if}
-			<main class="flex-1 p-6">
+			<main class="flex-1 p-4 lg:p-6">
 				{@render children()}
 			</main>
 		</div>