diff --git a/About.md b/About.md
new file mode 100644
index 0000000..5693cff
--- /dev/null
+++ b/About.md
@@ -0,0 +1,5 @@
+# ToDone
+
+An offline-first note-taking app that gets you from _To Do_ to **Done**
+
+Made by [Talentedunicorn](https://talentedunicorn.com) with 🫰 and [Svelte](https://svelte.dev)
diff --git a/package.json b/package.json
index de1ece0..dc4cffb 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
 		"svelte": "^5.16.0",
 		"svelte-check": "^4.1.1",
 		"svelte-loader": "^3.2.4",
+		"svelte-routing": "^2.13.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"vite": "^6.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c016690..05d685f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,6 +138,9 @@ importers:
       svelte-loader:
         specifier: ^3.2.4
         version: 3.2.4(svelte@5.16.0)
+      svelte-routing:
+        specifier: ^2.13.0
+        version: 2.13.0
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -5487,6 +5490,9 @@ packages:
       typescript:
         optional: true
 
+  svelte-routing@2.13.0:
+    resolution: {integrity: sha512-/NTxqTwLc7Dq306hARJrH2HLXOBtKd7hu8nxgoFDlK0AC4SOKnzisiX/9m8Uksei1QAWtlAEdF91YphNM8iDMg==}
+
   svelte2tsx@0.7.31:
     resolution: {integrity: sha512-exrN1o9mdCLAA7hTCudz731FIxomH/0SN9ZIX+WrY/XnlLuno/NNC1PF6JXPZVqp/4sMMDKteqyKoG44hliljQ==}
     peerDependencies:
@@ -12621,6 +12627,8 @@ snapshots:
       postcss: 8.4.49
       typescript: 5.7.2
 
+  svelte-routing@2.13.0: {}
+
   svelte2tsx@0.7.31(svelte@5.16.0)(typescript@5.7.2):
     dependencies:
       dedent-js: 1.0.1
diff --git a/src/App.svelte b/src/App.svelte
index 259ee5d..ccec93b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,37 +1,30 @@
 <script lang="ts">
-	import './app.css';
-	import Logo from './components/Logo.svelte';
-	import Menu from './components/Menu.svelte';
-	import { isLoggedin, tabs, currentTab, status, user } from './stores';
-	import Button from './components/Button.svelte';
-	import { checkAuth, initAuth0Client, login, logout } from './auth';
-	import { onMount } from 'svelte';
+	import { pwaInfo } from 'virtual:pwa-info';
+	import { Router, Route, navigate, links } from 'svelte-routing';
 	import { fly } from 'svelte/transition';
-	import List from './List.svelte';
 	import type { Auth0Client } from '@auth0/auth0-spa-js';
+
+	import './app.css';
+	import Button from './components/Button.svelte';
 	import ReloadPrompt from './components/ReloadPrompt.svelte';
-	import { pwaInfo } from 'virtual:pwa-info';
-	import ExportImport from './components/ExportImport.svelte';
 	import Toast from './components/Toast.svelte';
+	import Logo from './components/Logo.svelte';
 	import ToggleTheme from './components/ToggleTheme.svelte';
-	import { toastActions, toastMessage } from './stores';
-
-	let auth0: Auth0Client;
+	import About from './routes/About.svelte';
+	import NotFound from './routes/NotFound.svelte';
+	import Login from './routes/Login.svelte';
+	import Home from './routes/Home.svelte';
+	import { checkAuth, initAuth0Client, logout } from './auth';
+	import { toastActions, toastMessage, status, isLoggedin } from './stores';
+
+	let auth0 = $state<Auth0Client>();
 	let wrapper: HTMLElement;
 
-	let menuItems = $derived(
-		tabs.map((item) => ({
-			...item,
-			selected: item.label === $currentTab
-		}))
-	);
-
 	let showBackToTop = $state(false);
 
-	const handleMenu = (path: string) => {
-		currentTab.set(path);
-		scrollToTop();
-	};
+	const { url } = $props<{ url: string }>();
+
+	const synced = import.meta.env.VITE_SYNCED === 'true';
 
 	const scrollToTop = () => {
 		wrapper.scrollIntoView({
@@ -46,20 +39,24 @@
 		});
 	};
 
-	onMount(async () => {
-		handleBackToTop();
-		if (import.meta.env.VITE_SYNCED === 'true' && navigator.onLine) {
+	const initializeAuth = async () => {
+		if (synced && navigator.onLine) {
 			if (!auth0) {
 				auth0 = await initAuth0Client();
 			}
 			try {
 				await checkAuth(auth0);
-				if (!$isLoggedin) return;
+				if (!$isLoggedin) navigate('/login');
 			} catch (e) {
 				// Log out on failure
 				logout(auth0);
 			}
 		}
+	};
+
+	$effect(() => {
+		handleBackToTop();
+		initializeAuth();
 	});
 </script>
 
@@ -70,33 +67,19 @@
 </svelte:head>
 
 <main class="Wrapper" bind:this={wrapper}>
-	{#if import.meta.env.VITE_SYNCED === 'true' && !$isLoggedin}
-		<div class="Login">
-			<Logo />
-			<Button onclick={() => login(auth0)}>Log in</Button>
-			<ToggleTheme />
-		</div>
-	{:else}
-		<aside class="Menu">
-			<Menu {menuItems} goTo={handleMenu}>
-				<ExportImport />
-			</Menu>
-		</aside>
-		<header class="Header">
-			<h1 data-syncing={$status} class="Logo" title="ToDone"><Logo /></h1>
-
-			<ToggleTheme />
-		</header>
-		<section class="Content">
-			{#if $isLoggedin}
-				<div class="Profile">
-					<img src={$user.picture} alt={$user.nickname} />
-					<Button onclick={() => logout(auth0)}>Log out</Button>
-				</div>
-			{/if}
-			<List />
-		</section>
-	{/if}
+	<header class="Header" use:links>
+		<h1 data-syncing={$status} class="Logo" title="ToDone"><a href="/"><Logo /></a></h1>
+
+		<ToggleTheme />
+	</header>
+	<Router {url}>
+		<Route path="*"><NotFound /></Route>
+		<Route path="/"><Home {auth0} /></Route>
+		<Route path="/about"><About /></Route>
+		{#if synced}
+			<Route path="/login"><Login {auth0} /></Route>
+		{/if}
+	</Router>
 	{#if showBackToTop}
 		<footer class="Footer" transition:fly={{ y: 100, duration: 500 }}>
 			<Button onclick={scrollToTop}
@@ -137,35 +120,26 @@
 {/if}
 
 <style>
-	.Wrapper,
-	.Login {
+	.Wrapper {
 		flex-flow: column;
 		display: flex;
 		min-height: 100vh;
-	}
-
-	.Login {
-		padding: 2rem;
-		gap: 2rem;
-		align-items: flex-start;
-
-		:global(.ColorToggle) {
-			margin-left: auto;
+		.Footer {
+			align-self: flex-end;
+			position: sticky;
+			bottom: 2rem;
+			padding: 0 1rem 0 0;
+			display: flex;
+			justify-content: flex-end;
 		}
-	}
-
-	.Menu {
-		position: fixed;
-		top: 0;
-		z-index: 9;
-	}
 
-	.Header {
-		align-self: flex-end;
-		display: flex;
-		gap: 2rem;
-		flex-direction: row-reverse;
-		padding-top: 1rem;
+		.Header {
+			align-self: flex-end;
+			display: flex;
+			gap: 2rem;
+			flex-direction: row-reverse;
+			padding-top: 1rem;
+		}
 	}
 
 	.Logo {
@@ -173,46 +147,23 @@
 		padding: 0.2em;
 		background: var(--white);
 		position: relative;
-	}
-
-	.Footer {
-		align-self: flex-end;
-		position: sticky;
-		bottom: 2rem;
-		padding: 0 1rem 0 0;
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.Profile {
-		display: flex;
-		gap: 1rem;
-		margin: 2rem;
-		justify-content: end;
-		align-items: center;
+		&[data-syncing] {
+			--indicator-color: var(--primary);
+		}
 
-		img {
-			inline-size: 3rem;
+		&[data-syncing]:not([data-syncing='NOT_SYNCED'])::after {
+			content: '';
+			width: 0.5em;
+			height: 0.5em;
 			border-radius: 100%;
+			background: var(--indicator-color);
+			position: absolute;
+			top: -0.2em;
+			left: -0.2em;
 		}
-	}
 
-	[data-syncing] {
-		--indicator-color: var(--primary);
-	}
-
-	[data-syncing]:not([data-syncing='NOT_SYNCED'])::after {
-		content: '';
-		width: 0.5em;
-		height: 0.5em;
-		border-radius: 100%;
-		background: var(--indicator-color);
-		position: absolute;
-		top: -0.2em;
-		left: -0.2em;
-	}
-
-	[data-syncing='ERROR'] {
-		--indicator-color: var(--red);
+		&[data-syncing='ERROR'] {
+			--indicator-color: var(--red);
+		}
 	}
 </style>
diff --git a/src/List.svelte b/src/List.svelte
index f270fe3..77216f7 100644
--- a/src/List.svelte
+++ b/src/List.svelte
@@ -235,9 +235,6 @@
 
 	.Search {
 		align-self: flex-end;
-		position: sticky;
-		z-index: 1;
-		top: 1rem;
 		display: inline-flex;
 		gap: 1rem;
 		padding: 0.5rem;
diff --git a/src/app.css b/src/app.css
index 8e4da1e..05b1741 100644
--- a/src/app.css
+++ b/src/app.css
@@ -47,6 +47,10 @@ img {
 	max-width: 100%;
 }
 
+a {
+	color: var(--primary);
+}
+
 .visually-hidden {
 	position: absolute;
 	margin: -1px;
diff --git a/src/auth.ts b/src/auth.ts
index 038bf20..51a078c 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -1,4 +1,5 @@
 import { type Auth0Client, createAuth0Client } from '@auth0/auth0-spa-js';
+import { navigate } from 'svelte-routing';
 import { user, isLoggedin, token } from './stores';
 
 // Default Auth0 expiration time is 10 hours or something like that.
@@ -14,7 +15,7 @@ export const initAuth0Client = async () => {
 		domain: import.meta.env.VITE_AUTH0_DOMAIN,
 		cacheLocation: 'localstorage',
 		authorizationParams: {
-			redirect_uri: window.location.origin
+			redirect_uri
 		}
 	});
 };
@@ -78,4 +79,5 @@ export const logout = async (auth0: Auth0Client) => {
 			window.location.replace(url);
 		}
 	});
+	navigate('/login');
 };
diff --git a/src/main.ts b/src/main.ts
index 86b54f7..e8efb88 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,7 +19,8 @@ if (import.meta.env.MODE === 'production') {
 }
 
 const app = mount(App, {
-	target: document.getElementById('app') as HTMLElement
+	target: document.getElementById('app') as HTMLElement,
+	props: { url: '' }
 });
 
 export default app;
diff --git a/src/routes/About.svelte b/src/routes/About.svelte
new file mode 100644
index 0000000..7ab40af
--- /dev/null
+++ b/src/routes/About.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import ExportImport from '../components/ExportImport.svelte';
+
+	import content from '../../About.md?raw';
+</script>
+
+<svelte:head>
+	<title>About ToDone &#8212; Get it done!</title>
+</svelte:head>
+
+<section>
+	<div>
+		{@html marked(content)}
+	</div>
+
+	<div>
+		<h2>You own your data</h2>
+		<nav>
+			<ExportImport />
+		</nav>
+	</div>
+</section>
+
+<style>
+	section {
+		padding: 2rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		gap: 2rem;
+
+		nav {
+			display: inline-flex;
+			align-items: flex-start;
+			gap: 2rem;
+		}
+	}
+</style>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
new file mode 100644
index 0000000..87bc11b
--- /dev/null
+++ b/src/routes/Home.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Auth0Client } from '@auth0/auth0-spa-js';
+
+	import List from '../List.svelte';
+	import Button from '../components/Button.svelte';
+	import Menu from '../components/Menu.svelte';
+	import { isLoggedin, tabs, currentTab, user } from '../stores';
+	import { logout } from '../auth';
+	import { Link } from 'svelte-routing';
+
+	const { auth0 } = $props<{ auth0: Auth0Client | undefined }>();
+	let menuItems = $derived(
+		tabs.map((item) => ({
+			...item,
+			selected: item.label === $currentTab
+		}))
+	);
+
+	const handleMenu = (path: string) => {
+		currentTab.set(path);
+	};
+</script>
+
+<aside class="Menu">
+	<Menu {menuItems} goTo={handleMenu}>
+		<Link to="/about"><Button size="large" variant="link">About ToDone</Button></Link>
+	</Menu>
+</aside>
+<section class="Content">
+	{#if $isLoggedin}
+		<div class="Profile">
+			<img src={$user.picture} alt={$user.nickname} />
+			<Button onclick={() => logout(auth0)}>Log out</Button>
+		</div>
+	{/if}
+	<List />
+</section>
+
+<style>
+	.Menu {
+		position: fixed;
+		top: 0;
+		z-index: 9;
+	}
+
+	.Profile {
+		display: flex;
+		gap: 1rem;
+		margin: 2rem;
+		justify-content: end;
+		align-items: center;
+
+		img {
+			inline-size: 3rem;
+			border-radius: 100%;
+		}
+	}
+</style>
diff --git a/src/routes/Login.svelte b/src/routes/Login.svelte
new file mode 100644
index 0000000..6190b57
--- /dev/null
+++ b/src/routes/Login.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Auth0Client } from '@auth0/auth0-spa-js';
+	import { navigate } from 'svelte-routing';
+
+	import Button from '../components/Button.svelte';
+	import { isLoggedin } from '../stores';
+	import { login } from '../auth';
+
+	const { auth0 } = $props<{ auth0: Auth0Client | undefined }>();
+
+	$effect(() => {
+		// Navigate to homepage for valid sessions
+		if ($isLoggedin) {
+			navigate('/', { replace: true });
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Login to continue &#8212; Get it done!</title>
+</svelte:head>
+
+<div class="Login">
+	<Button onclick={() => login(auth0)}>Log in</Button>
+</div>
+
+<style>
+	.Login {
+		padding: 2rem;
+	}
+</style>
diff --git a/src/routes/NotFound.svelte b/src/routes/NotFound.svelte
new file mode 100644
index 0000000..9e1f440
--- /dev/null
+++ b/src/routes/NotFound.svelte
@@ -0,0 +1,13 @@
+<svelte:head>
+	<title>Not found &#8212; Get it done!</title>
+</svelte:head>
+
+<section>
+	<h1>The route was not found</h1>
+</section>
+
+<style>
+	section {
+		padding: 2rem;
+	}
+</style>