diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 12fabcf..5b1611c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import "../main.css";
-	import Footer from "./footer.svelte";
+	import Footer from "./Footer.svelte";
+	import Nav from "./Nav.svelte";
 
 	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
@@ -26,16 +27,7 @@
 			</a>
 			<span></span>
 
-			<div
-				class="max-md:hidden text-lg flex gap-2 h-full items-center
-						*:py-1 *:px-2 *:h-min *:bg-coral-100 *:rounded-md *:border-b-2 *:border-r-2 *:border-coral-200 text-blue-950
-						*:hover:bg-coral-200 <-TODO-fix-that-hover"
-			>
-				<a href="/colors" class="no-link-style">colors</a>
-				<a href="/docs/intro" class="no-link-style">intro</a>
-				<a href="https://fleurixos.org" class="no-link-style">Try {DISTRO}</a>
-				<a href="https://petalpkgs.org" class="no-link-style">Use {PKGS}</a>
-			</div>
+			<Nav />
 		</div>
 	</nav>
 
diff --git a/src/routes/footer.svelte b/src/routes/Footer.svelte
similarity index 100%
rename from src/routes/footer.svelte
rename to src/routes/Footer.svelte
diff --git a/src/routes/Nav.svelte b/src/routes/Nav.svelte
new file mode 100644
index 0000000..05c5364
--- /dev/null
+++ b/src/routes/Nav.svelte
@@ -0,0 +1,17 @@
+{#snippet link(to, title)}
+	<a
+		href={to}
+		class="no-link-style
+    		   py-1 px-2 h-min bg-coral-100 rounded-md border-b-2 border-r-2 border-coral-200 text-blue-950 hover:bg-coral-200"
+		>{title}</a
+	>
+{/snippet}
+
+<div class="max-md:hidden text-lg flex gap-2 h-full items-center">
+	{@render link("/docs/intro", "intro")}
+	{@render link("/colors", "colors")}
+	<!--
+		{@render link("https://fleurixos.org", `Try ${DISTRO}`)}
+		{@render link("https://petalpkgs.org", `Use ${PKGS}`)}
+	-->
+</div>