diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index da3c203..6e4c68e 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import '../app.css';
+	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
-	let { children } = $props();
+	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 </script>
 
 <svelte:head>
@@ -16,9 +18,34 @@
 			<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-zinc-400 hover:text-zinc-100 text-sm transition-colors">
 				Library
 			</a>
+			<a href="/browse" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
+				Browse
+			</a>
+				<div class="ml-auto flex items-center gap-4">
+					<span class="text-zinc-400 text-sm hidden sm:block">{data.user.username}</span>
+					<form method="POST" action="/logout">
+						<button
+							type="submit"
+							class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors"
+						>
+							Sign out
+						</button>
+					</form>
+				</div>
+			{:else}
+				<div class="ml-auto">
+					<a
+						href="/login"
+						class="text-sm px-3 py-1.5 rounded bg-amber-400 text-zinc-900 font-semibold hover:bg-amber-300 transition-colors"
+					>
+						Sign in
+					</a>
+				</div>
+			{/if}
 		</nav>
 	</header>