diff --git a/frontend/src/lib/components/TopNav.svelte b/frontend/src/lib/components/TopNav.svelte
index 38ee85e..6e8c858 100644
--- a/frontend/src/lib/components/TopNav.svelte
+++ b/frontend/src/lib/components/TopNav.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 
 	interface Props {
@@ -12,7 +13,7 @@
 
 <header class="topnav" role="banner">
 	<div class="topnav-inner">
-		<a href="/app" class="wordmark" aria-label="Home">
+		<a href={resolve('/app')} class="wordmark" aria-label="Home">
 			<span class="wordmark-text">Language Learning App</span>
 		</a>
 
@@ -20,7 +21,17 @@
 			<ul class="nav-links" role="list">
 				<li>
 					<a
-						href="/app/articles"
+						href={resolve('/app/adventures')}
+						class="nav-link"
+						class:is-active={isActive('/app/adventures')}
+						aria-current={isActive('/app/adventures') ? 'page' : undefined}
+					>
+						Adventures
+					</a>
+				</li>
+				<li>
+					<a
+						href={resolve('/app/articles')}
 						class="nav-link"
 						class:is-active={isActive('/app/articles')}
 						aria-current={isActive('/app/articles') ? 'page' : undefined}
@@ -73,7 +84,7 @@
 		background-color: var(--glass-bg);
 		backdrop-filter: blur(var(--glass-blur));
 		-webkit-backdrop-filter: blur(var(--glass-blur));
-		box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
+		box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
 	}
 
 	.topnav-inner {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3fe77b4..33fd8e8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -130,7 +130,7 @@
 		background-color: var(--glass-bg);
 		backdrop-filter: blur(var(--glass-blur));
 		-webkit-backdrop-filter: blur(var(--glass-blur));
-		box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
+		box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
 	}
 
 	.sitenav-inner {
@@ -187,7 +187,7 @@
 	/* ---------- Left margin ---------- */
 
 	.left-margin {
-		border-right: 1px solid var(--color-outline-variant);
+		border-right: 1px solid var(--colour-outline-variant);
 		padding: var(--space-12) var(--space-5) var(--space-8);
 		display: flex;
 		flex-direction: column;
@@ -288,7 +288,7 @@
 
 	.divider {
 		border: none;
-		border-top: 1px solid var(--color-outline-variant);
+		border-top: 1px solid var(--colour-outline-variant);
 		margin: 0;
 	}
 
@@ -325,7 +325,7 @@
 	/* ---------- Right rail ---------- */
 
 	.right-rail {
-		border-left: 1px dashed var(--color-outline-variant);
+		border-left: 1px dashed var(--colour-outline-variant);
 		padding: var(--space-12) var(--space-4);
 		display: flex;
 		align-items: flex-start;
@@ -338,7 +338,7 @@
 		font-weight: var(--weight-medium);
 		letter-spacing: var(--tracking-wider);
 		text-transform: uppercase;
-		color: var(--color-outline);
+		color: var(--colour-outline);
 		writing-mode: vertical-rl;
 		transform: rotate(180deg);
 		white-space: nowrap;
@@ -364,7 +364,7 @@
 
 		.left-margin {
 			border-right: none;
-			border-bottom: 1px solid var(--color-outline-variant);
+			border-bottom: 1px solid var(--colour-outline-variant);
 			padding: var(--space-6) var(--space-6) var(--space-5);
 			flex-direction: row;
 			flex-wrap: wrap;
diff --git a/frontend/src/routes/app/+page.svelte b/frontend/src/routes/app/+page.svelte
index d6987b7..9fb5c45 100644
--- a/frontend/src/routes/app/+page.svelte
+++ b/frontend/src/routes/app/+page.svelte
@@ -87,7 +87,7 @@
 	/* ---------- Left margin ---------- */
 
 	.left-margin {
-		border-right: 1px solid var(--color-outline-variant);
+		border-right: 1px solid var(--colour-outline-variant);
 		padding: var(--space-12) var(--space-5) var(--space-8);
 		display: flex;
 		flex-direction: column;
@@ -188,7 +188,7 @@
 
 	.divider {
 		border: none;
-		border-top: 1px solid var(--color-outline-variant);
+		border-top: 1px solid var(--colour-outline-variant);
 		margin: 0;
 	}
 
@@ -249,7 +249,7 @@
 	/* ---------- Right rail ---------- */
 
 	.right-rail {
-		border-left: 1px dashed var(--color-outline-variant);
+		border-left: 1px dashed var(--colour-outline-variant);
 		padding: var(--space-12) var(--space-4);
 		display: flex;
 		align-items: flex-start;
@@ -262,7 +262,7 @@
 		font-weight: var(--weight-medium);
 		letter-spacing: var(--tracking-wider);
 		text-transform: uppercase;
-		color: var(--color-outline);
+		color: var(--colour-outline);
 		writing-mode: vertical-rl;
 		transform: rotate(180deg);
 		white-space: nowrap;
@@ -288,7 +288,7 @@
 
 		.left-margin {
 			border-right: none;
-			border-bottom: 1px solid var(--color-outline-variant);
+			border-bottom: 1px solid var(--colour-outline-variant);
 			padding: var(--space-6) var(--space-6) var(--space-5);
 			flex-direction: row;
 			flex-wrap: wrap;
diff --git a/frontend/src/routes/app/jobs/[job_id]/+page.svelte b/frontend/src/routes/app/jobs/[job_id]/+page.svelte
index 71d5a84..adc722b 100644
--- a/frontend/src/routes/app/jobs/[job_id]/+page.svelte
+++ b/frontend/src/routes/app/jobs/[job_id]/+page.svelte
@@ -171,7 +171,7 @@
 	.spinner {
 		width: 1.25rem;
 		height: 1.25rem;
-		border: 2px solid var(--color-outline-variant);
+		border: 2px solid var(--colour-outline-variant);
 		border-top-color: var(--color-primary);
 		border-radius: 50%;
 		animation: spin 0.9s linear infinite;
diff --git a/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte b/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
index fb2a6ee..133007b 100644
--- a/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
+++ b/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
@@ -59,7 +59,7 @@
 		flex-direction: column;
 		gap: var(--space-3);
 		padding-top: var(--space-4);
-		border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
+		border-top: 1px solid color-mix(in srgb, var(--colour-outline-variant) 30%, transparent);
 	}
 
 	.section-title {