diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 02377aa..c701e04 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import "./layout.css";
 	import favicon from "$lib/assets/favicon.svg";
 	import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
@@ -23,11 +24,12 @@
 		class="sticky top-0 z-40 border-b bg-background/80 backdrop-blur lg:col-span-2"
 	>
 		<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
-			<a href="/" class="font-semibold tracking-tight">AMQ Train</a>
+			<a href={resolve("/")} class="font-semibold tracking-tight">AMQ Train</a>
 
 			<nav class="flex items-center gap-2 text-sm">
-				<a href="/" class="rounded-md px-3 py-2 hover:bg-muted">Anime</a>
-				<a href="/list" class="rounded-md px-3 py-2 hover:bg-muted">Lists</a>
+				<a href={resolve("/")}>Anime</a>
+				<a href={resolve("/songs")}>Songs</a>
+				<a href={resolve("/list")}>List</a>
 			</nav>
 		</div>
 	</header>
@@ -48,3 +50,9 @@
 
 <!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
      mounted in the desktop sidebar column above. -->
+<style>
+	@reference "./layout.css";
+	nav > a {
+		@apply rounded-md px-3 py-2 hover:bg-muted;
+	}
+</style>