diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f0ef8d5..8f4473d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,16 +1,75 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
+	import { page } from '$app/state';
 	// @ts-expect-error shh
 	import 'ghostsui';
 	import '../app.css';
 
 	let { children } = $props();
+
+	const home = $derived.by(() => {
+		return page.url.pathname === '/'
+			? '~'
+			: '../'.repeat(page.url.pathname.split('/').length - 1);
+	});
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<nav>
+	<a href="/" class:active={page.url.pathname === '/'}>
+		<h1>{home}</h1>
+	</a>
+
+	<a href="/ufos" class:active={page.url.pathname.startsWith('/ufos')}>
+		ufos
+	</a>
+</nav>
+
 <main>
 	{@render children()}
 </main>
+
+<style>
+	nav {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		background-color: var(--background-secondary);
+		border-radius: 12px;
+		padding: 0px 12px;
+
+		max-width: 1400px;
+		margin: 12px auto;
+
+		@media (width < 1400px) {
+			margin-inline: 12px;
+		}
+
+		h1 {
+			font-size: 1.2rem;
+		}
+
+		a {
+			color: var(--text);
+			margin: 0px;
+
+			&:has(h1) {
+				margin-right: auto;
+			}
+
+			&.active {
+				color: var(--secondary);
+			}
+
+			&:hover,
+			&:active,
+			&:focus-visible {
+				color: var(--primary);
+			}
+		}
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..aa799d0
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,37 @@
+<p>Pick a thingy to get started <span>^</span></p>
+
+<style>
+	p {
+		display: flex;
+		padding-inline-end: 12px;
+
+		span {
+			position: relative;
+			text-align: right;
+			flex-grow: 1;
+
+			&:before,
+			&:after {
+				display: block;
+				content: '';
+
+				height: 1px;
+				width: calc(100% - 1ch);
+				border: 1.2px dashed var(--text-grey);
+
+				position: absolute;
+				top: 50%;
+				right: 4px;
+				transform: translateY(calc(-50% + 4px));
+			}
+
+			&:after {
+				width: 1px;
+				height: 8px;
+				right: 3.674px;
+				transform: translateY(calc(-50%));
+				z-index: -1;
+			}
+		}
+	}
+</style>