diff --git a/package-lock.json b/package-lock.json
index 4848f99..cb41222 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1178,9 +1178,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.53.4",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.53.4.tgz",
-			"integrity": "sha512-iAIPEahFgDJJyvz8g0jP08KvqnM6JvdW8YfsygZ+pMeMvyM2zssWMltcsotETvjSZ82G3VlitgDtBIvpQSZrTA==",
+			"version": "2.55.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.55.0.tgz",
+			"integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1189,7 +1189,7 @@
 				"@types/cookie": "^0.6.0",
 				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
-				"devalue": "^5.6.3",
+				"devalue": "^5.6.4",
 				"esm-env": "^1.2.2",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
@@ -2036,9 +2036,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.6.3",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.3.tgz",
-			"integrity": "sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==",
+			"version": "5.6.4",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.4.tgz",
+			"integrity": "sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==",
 			"license": "MIT"
 		},
 		"node_modules/es-module-lexer": {
@@ -2452,9 +2452,9 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-			"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
+			"integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
 			"dev": true,
 			"license": "ISC"
 		},
diff --git a/src/app.html b/src/app.html
index 3d8585e..7c40556 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,7 +5,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="manifest" href="/manifest.webmanifest" />
 		<meta name="title" content="OwlBoard | Your fasted route to live and reference data" />
-		<meta name="description" content="Live station departures, Live train tracking, PIS Codes & more" />
+		<meta
+			name="description"
+			content="Live station departures, Live train tracking, PIS Codes & more"
+		/>
 		<meta name="theme-color" content="#4fd1d1" />
 		<link rel="canonical" href="https://owlboard.info" />
 		<meta property="og:type" content="website" />
diff --git a/src/lib/assets/img/stop-error.svg b/src/lib/assets/img/stop-error.svg
new file mode 100644
index 0000000..c8aefe3
--- /dev/null
+++ b/src/lib/assets/img/stop-error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 2496 3495"><path stroke="#000" stroke-miterlimit="10" d="M-29-28h2552v4439H-29z"/><path fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width=".9" d="M0 0h2495v3494H0z"/><path d="m814 2164-137 2q-2-28-11-46-28-54-120-54-52 0-83 21a65 65 0 0 0-32 56q0 27 18 40 21 17 97 26 158 19 213 65 61 51 61 137 0 97-71 154-71 56-193 56-124 0-199-62-77-62-80-167h140q3 52 41 82 37 29 102 29 56 0 90-23 33-22 33-61 0-17-9-31-20-31-93-40-122-16-167-33a175 175 0 0 1-117-164q0-92 68-146 69-54 181-54 122 0 192 57 72 57 76 156m104-216h126v154h108v101h-108v251q0 34 11 42 11 9 88 9h8v107l-36 1h-89q-61-4-88-37-12-17-16-41t-4-115v-217h-72v-101h72zm508 140q111 0 180 72t69 190q0 122-66 194-67 72-180 72-112 0-180-71-67-70-67-190 0-121 67-194 68-73 177-73m2 106q-57 0-91 44t-34 119q0 70 34 112 35 42 91 42 57 0 90-42 32-42 32-115t-33-117q-33-43-89-43m311-92h122v33q49-47 129-47 102 0 166 74 65 73 65 190 0 119-63 191-63 73-167 73-78 0-124-46v184h-128zm233 92q-66 0-91 51-16 31-16 121 0 61 16 94 25 50 95 50 56 0 88-41 32-42 32-115 0-74-34-117-33-43-90-43"/><circle cx="1247.7" cy="1049.7" r="708.7" fill="#e31837"/><path fill="#1a1a1a" d="M-17 2908h2530v42H-17z"/><path fill="#1a1a1a" d="M978 3051v46H857v77h94v44h-94v79h121v46H799v-292zm39 292v-219h33q9 0 12 3 4 4 5 11l3 22q10-18 23-29t30-11q15 0 24 7l-4 42-3 6-6 1-9-1-12-1-14 2-10 7q-5 4-9 10l-7 14v136zm161 0v-219h33q8 0 12 3 3 4 4 11l3 22q10-18 23-29t31-11q14 0 23 7l-4 42q0 4-3 6l-5 1-10-1-11-1q-8 0-14 2l-11 7q-5 4-8 10l-7 14v136zm252-222q24 0 44 8 20 7 34 22t21 36 8 46-8 47-21 36-34 22-44 8-44-8q-20-7-34-22-15-15-22-36-8-21-8-47t8-46 22-36 34-22 44-8m0 183q25 0 37-18t12-52-12-53-37-17-38 17-12 53 12 52 38 18m145 39v-219h33q8 0 12 3 3 4 4 11l3 22q10-18 23-29 14-11 31-11 14 0 24 7l-5 42q0 4-2 6l-6 1-10-1-11-1q-8 0-14 2l-11 7-8 10-7 14v136z" aria-label="Error" font-family="Carlito" font-size="451" font-weight="700" style="line-height:.9;-inkscape-font-specification:&quot;Carlito Bold&quot;;text-align:center;white-space:pre" text-anchor="middle"/></svg>
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
new file mode 100644
index 0000000..e584ae6
--- /dev/null
+++ b/src/lib/components/ui/Button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+	type ButtonColor = 'brand' | 'accent' | 'bg';
+
+	interface Props {
+		children: import('svelte').Snippet;
+		href?: string;
+		color?: ButtonColor;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: any;
+	}
+
+	let { children, href, color = 'bg', onclick, ...rest }: Props = $props();
+
+	const isLink = $derived(!!href);
+	const isExternal = $derived(href?.startsWith('http'));
+</script>
+
+{#if isLink}
+	<a
+		{href}
+		class="btn {color}"
+		target={isExternal ? '_blank' : undefined}
+		rel={isExternal ? 'noopener noreferrer' : undefined}
+		{...rest}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button class="btn {color}" {onclick} {...rest}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.4rem 1.2rem;
+		width: fit-content;
+		min-width: 90px;
+		min-height: 48px;
+		border: none;
+		border-radius: 20px;
+		cursor: pointer;
+		text-decoration: none;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.05ch;
+		font-size: 1rem;
+		font-weight: 600;
+		transition: all 0.2s;
+		box-shadow: var(--shadow-std);
+		user-select: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+	}
+
+	.accent {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.brand {
+		background-color: var(--color-brand);
+		color: rgb(30, 30, 30);
+	}
+
+	.bg {
+		background-color: var(--color-bg-light);
+		color: var(--color-title);
+	}
+
+	.btn:hover {
+		filter: brightness(1.5);
+	}
+
+	.btn.active {
+		transform: scale(0.98);
+	}
+</style>
diff --git a/src/lib/components/ui/Textbox.svelte b/src/lib/components/ui/Textbox.svelte
new file mode 100644
index 0000000..3026bec
--- /dev/null
+++ b/src/lib/components/ui/Textbox.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import type { HTLMInputAttributes } from 'svelte/elements';
+
+    interface Props extends HTMLInputAttributes {
+        value?: string;
+        label?: string;
+        placeholder?: string;
+        type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+        error?: string;
+        uppercase?: boolean;
+        [key: string]: any;
+    }
+
+    let {
+        value = $bindable(''),
+        label,
+        placeholder = '',
+        type = 'text',
+        error = '',
+        uppercase = false,
+        ...rest
+    }: Props = $props();
+
+    let isFocussed = $state(false);
+</script>
+
+<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
+    {#if label}
+        <label for="adaptive-input">{label}</label>
+    {/if}
+
+    <input
+        id="adaptive-input"
+        class:all-caps={uppercase}
+        {type}
+        {placeholder}
+        bind:value={value}
+        onfocus={() => isFocussed = true}
+        onblur={() => isFocussed = false}
+        {...rest}
+    />
+
+    {#if error}
+        <span class="error-message" transition:fade>{error}</span>
+    {/if}
+</div>
+
+<style>
+    .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+        font-family: 'URW Gothic', sans-serif;
+    }
+
+    label {
+        font-size: 0.9rem;
+        font-weight: 400;
+        color: var(--color-title)
+    }
+
+    input {
+        min-height: 48px;
+        padding: 0 16px;
+        background-color: var(--color-title);
+        border: 2px solid transparent;
+        border-radius: 20px;
+        color: var(--color-bg-dark);
+        font-size: 1.5rem;
+        transition: all 0.2s ease-in-out;
+        outline: none;
+        text-align: center;
+    }
+
+    .all-caps {
+        text-transform: uppercase;
+    }
+
+    .focussed input {
+        border-color: var(--color-bg-light);
+    }
+
+    .has-error input {
+        border-color: #ff4d4d;
+    }
+
+    .error-message {
+        color: #ff4d4d;
+        font-size: 1rem;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/ui/cards/BaseCard.svelte b/src/lib/components/ui/cards/BaseCard.svelte
new file mode 100644
index 0000000..87a1a68
--- /dev/null
+++ b/src/lib/components/ui/cards/BaseCard.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { IconHelpCircle } from '@tabler/icons-svelte';
+    import { slide } from 'svelte/transition';
+
+    interface Props {
+        children: Snippet;
+        header?: string;
+        helpText?: string;
+    }
+
+    let {
+        children,
+        header = "",
+        helpText,
+    }: Props = $props();
+
+    let showHelp = $state(false);
+</script>
+
+<div class="card">
+    {#if header || helpText}
+        <header class="card-header">
+            <div class="header-content">
+                {header}
+            </div>
+            {#if helpText}
+                <button
+                    type="button"
+                    class="help-toggle"
+                    onclick={() => showHelp = !showHelp}
+                    aria-label="Show Help"
+                >
+                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
+                </button>
+            {/if}
+        </header>
+
+        {#if showHelp && helpText}
+            <div class="help-drawer" transition:slide={{ duration: 400 }}>
+                <p>{helpText}</p>
+            </div>
+        {/if}
+    {/if}
+
+    <div class="card-body">
+        {@render children?.()}
+    </div>
+</div>
+
+<style>
+    .card {
+        background: var(--color-accent);
+        position: relative;
+        border-radius: 20px;
+        overflow: hidden;
+        width: 95%;
+        max-width: 600px;
+        text-align: center;
+        font-family: 'URW Gothic', sans-serif;
+        color: var(--color-title);
+    }
+
+    .header-content { flex: 1;
+    font-size: 1.5rem; font-weight: 600; }
+
+    .help-toggle {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: none;
+        border: none;
+        padding: 4px;
+        cursor: help;
+        opacity: 0.6;
+        z-index: 2;
+        transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .help-toggle:hover {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    .help-drawer {
+        background-color: var(--color-accent);
+        padding: 4px 16px;
+        font-size: 0.95rem;
+        line-height: 1.2;
+        margin: auto;
+        border-bottom: 1px solid rgba(255,255,255,0.05);
+        color: var(--color-title);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/global.css b/src/lib/global.css
index c8718dd..5b59d6c 100644
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -4,78 +4,79 @@
  * Copyright (c) 2014,2015 by (URW)++ Design & Development
  */
 @font-face {
-    font-family: 'URW Gothic';
-    src: url('/type/urwgothic/urwgothic-book-webfont.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-book-webfont.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
 }
 
 /* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
  * Copyright (c) 2014,2015 by (URW)++ Design & Development
  */
 @font-face {
-    font-family: 'URW Gothic';
-    src: url('/type/urwgothic/urwgothic-bookoblique-webfont.woff2') format('woff2');
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-bookoblique-webfont.woff2') format('woff2');
+	font-weight: 400;
+	font-style: italic;
+	font-display: swap;
 }
 
 /* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
  * Copyright (c) 2014,2015 by (URW)++ Design & Development
  */
 @font-face {
-    font-family: 'URW Gothic';
-    src: url('/type/urwgothic/urwgothic-demi-webfont.woff2') format('woff2');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-demi-webfont.woff2') format('woff2');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
 }
 
 /* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
  * Copyright (c) 2014,2015 by (URW)++ Design & Development
  */
 @font-face {
-    font-family: 'URW Gothic';
-    src: url('/type/urwgothic/urwgothic-demioblique-webfont.woff2') format('woff2');
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-demioblique-webfont.woff2') format('woff2');
+	font-weight: 600;
+	font-style: italic;
+	font-display: swap;
 }
 
-	:root {
-		/* Brand Colours */
-		--color-brand: #4fd1d1;
-		--color-accent: #3c6f79;
-		--color-title: #ebebeb;
-		--color-bg-light: #404c55;
-		--color-bg-dark: #2b343c;
-		
-		/* Shadows */
-		--color-shadow: hsla(210, 20%, 5%, 0.35);
-		--shadow-std: 0 4px 12px var(--color-shadow);
-		--shadow-up: 0 -4px 12px var(--color-shadow);
-	}
+:root {
+	/* Brand Colours */
+	--color-brand: #4fd1d1;
+	--color-accent: #3c6f79;
+	--color-title: #ebebeb;
+	--color-bg-light: #404c55;
+	--color-bg-dark: #2b343c;
+
+	/* Shadows */
+	--color-shadow: hsla(210, 20%, 5%, 0.35);
+	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-up: 0 -4px 12px var(--color-shadow);
+	--shadow-right: 4px 0 12px var(--color-shadow);
+}
 
 body {
-    margin: 0;
-    padding: 0;
-    background-color: var(--color-accent);
-    color: white;
-    -webkit-font-smoothing: antialiased;
-    -mos-osx-font-smoothing: grayscale;
-    overflow-x: hidden;
+	margin: 0;
+	padding: 0;
+	background-color: var(--color-accent);
+	color: white;
+	-webkit-font-smoothing: antialiased;
+	-mos-osx-font-smoothing: grayscale;
+	overflow-x: hidden;
 }
 
 a {
-    color: var(--color-brand);
+	color: var(--color-brand);
 }
 
 a:visited {
-    color: var(--color-brand);
+	color: var(--color-brand);
 }
 
 a:hover {
-    color: var(--color-accent);
-}
\ No newline at end of file
+	color: var(--color-accent);
+}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index b9709f4..5a69b2c 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,69 +1,72 @@
 <script lang="ts">
-    import { page } from '$app/state';
-import { error } from 'console';
+	import { page } from '$app/state';
+
+	import stopErr from '$lib/assets/img/stop-error.svg';
+	import Button from '$lib/components/ui/Button.svelte';
 </script>
 
 <div class="error-wrapper">
-    <div class="signal-icon">
-        <div class="red-light"></div>
-    </div>
+	<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
 
-    <h2 class="label">Signal Failure: {page.status}</h2>
+	<h2 class="label">{page.status}</h2>
 
-    <p class="error-message">
-        {page.error?.message ?? "An unexpected derailment occurred."}
-    </p>
+	<p class="error-message">
+		{page.error?.message ?? 'An unexpected derailment occurred.'}
+	</p>
 
-    {#if page.error?.owlCode}
-        <div class="debug-info">
-            <code>Ref: {page.error.owlCode}</code>
-        </div>
-    {/if}
+	{#if page.error?.owlCode}
+		<div class="debug-info">
+			<code>Ref: {page.error.owlCode}</code>
+		</div>
+	{/if}
 
-    <a href="/" class="retry-button">Return to Home</a>
+	<Button href={'/'} color={'accent'}>Return to Home</Button>
 </div>
 
 <style>
-    .error-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: calc(100vh - 140px);
-        padding: 20px;
-        text-align: center;
-        font-family: 'URW Gothic', sans-serif;
-    }
+	.error-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: calc(100vh - 140px);
+		padding: 0;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+	}
 
-    .label {
-        color: #ff4444;
-        letter-spacing: 0.2rem;
-        margin-bottom: 10px;
-    }
+	.err-img {
+		height: 40%;
+		width: auto;
+		max-width: 180px;
+		max-height: 252px;
+	}
 
-    .error-message {
-        font-size: 1.1rem;
-        color: var(--color-title);
-        max-width: 300px;
-        margin-bottom: 30px;
-    }
+	@media (max-height: 600px), (max-width: 270px) {
+		.err-img {
+			display: none;
+		}
+	}
 
-    .debug-info {
-        background: rgba(255,255,255,0.05);
-        padding: 5px 12px;
-        border-radius: 4px;
-        font-size: 0.8rem;
-        opacity: 0.6;
-    }
+	.label {
+		color: #ff4444;
+		letter-spacing: 0.2rem;
+		margin-bottom: 0px;
+	}
 
-    .retry-button {
-        margin-top: 40px;
-        padding: 12px 24px;
-        background: var(--color-brand);
-        color: var(--color-title);
-        text-decoration: none;
-        font-weight: 600;
-        border-radius: 6px;
-        letter-spacing: 0.05rem;
-    }
-</style>
\ No newline at end of file
+	.error-message {
+		font-size: 1.1rem;
+		color: var(--color-title);
+		max-width: 300px;
+        margin-top: 5px;
+		margin-bottom: 30px;
+	}
+
+	.debug-info {
+		background: rgba(255, 255, 255, 0.05);
+		padding: 5px 12px;
+		border-radius: 4px;
+		font-size: 0.8rem;
+		opacity: 0.6;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6f27509..a98f5c2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { slide, fade } from 'svelte/transition';
 
 	import '$lib/global.css';
 
@@ -7,20 +8,50 @@
 	import logoPlain from '$lib/assets/round-logo.svg';
 	import favicon from '$lib/assets/round-logo.svg';
 
-	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte'; 
+	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
 	let { children } = $props();
 
-	const navItems = [
-		{ label: 'Home', path: '/', icon: IconHome},
-		{ label: 'PIS', path:'/pis', icon: IconDialpad},
-		{ label: 'Options', path:'/preferences', icon: IconSettings},
-		{ label: 'About', path: '/about', icon: IconHelp},
-	]
-
-	const activePath = $derived(page.url?.pathname ?? '');	
+	// Navigation State
 
 	const moreIcon = IconDots;
+
+	const navItems = [
+		{ label: 'Home', path: '/', icon: IconHome },
+		{ label: 'PIS', path: '/pis', icon: IconDialpad },
+		{ label: 'Options', path: '/preferences', icon: IconSettings },
+		{ label: 'About', path: '/about', icon: IconHelp }
+	];
+
+	let navWidth = $state(0);
+	let menuOpen = $state(false);
+	const ITEM_WIDTH = 70;
+	const MORE_BUTTON_WIDTH = 70;
+
+	const activePath = $derived(page.url?.pathname ?? '');
+
+	const visibleCount = $derived.by(() => {
+		if (navWidth === 0) return navItems.length;
+		const available = navWidth;
+		const totalItems = navItems.length;
+		const countWithoutMore = Math.floor(available/ ITEM_WIDTH);
+
+		if (countWithoutMore >= totalItems) return totalItems;
+
+		const availableWithMore = navWidth - MORE_BUTTON_WIDTH;
+		const countWithMore = Math.floor(availableWithMore / ITEM_WIDTH);
+
+		if (totalItems - countWithMore === 1) {
+			if (available >= (countWithMore + 1) * ITEM_WIDTH) {
+				return totalItems;
+			}
+		}
+
+		return countWithMore;
+	});
+
+	const visibleItems = $derived(navItems.slice(0, visibleCount));
+	const hiddenItems = $derived(navItems.slice(visibleCount));
 </script>
 
 <svelte:head>
@@ -41,37 +72,76 @@
 </header>
 
 <main>
-{@render children()}
+	{@render children()}
 </main>
 
-<nav>
+<nav bind:clientWidth={navWidth}>
 	<!-- Dynamic Nav Elements Here! -->
-	{#each navItems as item}
-	   {@const isActive = activePath === item.path}
-	   <a
+	{#each visibleItems as item}
+		{@const isActive = activePath === item.path}
+		<a
 			href={item.path}
 			class="nav-item"
 			class:active={isActive}
 			aria-current={isActive ? 'page' : undefined}
-	   >
-	   		<item.icon
-				size={24}
-				stroke={isActive ? 2 : 1.5}
-				class="nav-icon"
-			/>
+			onclick={() => (menuOpen = false)}
+		>
+			<item.icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />
 
 			<span class="label">{item.label}</span>
-	   </a>
+		</a>
 	{/each}
+	{#if hiddenItems.length > 0}
+		<div class="more-menu-wrapper">
+			<button
+				class="nav-item more-btn"
+				onclick={() => (menuOpen = !menuOpen)}
+				aria-expanded={menuOpen}
+			>
+				<IconDots size={24} />
+				<span class="label">More</span>
+			</button>
+		</div>
+		{#if menuOpen}
+			<div
+				class="backdrop"
+				onclick={() => (menuOpen = false)}
+				transition:fade={{ duration: 150 }}
+			></div>
+			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
+				{#each hiddenItems as item}
+					{@const isActive = activePath === item.path}
+					<a
+						href={item.path}
+						class="menu-popover-item"
+						onclick={() => (menuOpen = false)}
+						class:active={isActive}
+						aria-current={isActive ? 'page' : undefined}
+					>
+						<item.icon size={20} />
+						<span>{item.label}</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	{/if}
 </nav>
 
+<div class="viewport-guard">
+	<img src={logoPlain} alt="OwlBoard Logo" width=100 height=100>
+	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
+	<p>
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails. Please expand your view to at least 300px to view the app.
+	</p>
+</div>
+
 <style>
-		header {
+	header {
 		top: 0;
 		height: 80px;
 		box-shadow: var(--shadow-std);
 	}
-    	.logo-link {
+	.logo-link {
 		width: auto;
 		display: block;
 		height: 55px;
@@ -91,7 +161,8 @@
 		padding-bottom: 2px;
 		color: var(--color-title);
 	}
-	header, nav {
+	header,
+	nav {
 		flex-shrink: 0;
 		width: 100%;
 		background-color: var(--color-accent);
@@ -106,13 +177,6 @@
 		gap: 0rem;
 	}
 
-	nav {
-		bottom: 0;
-		height: 60px;
-		box-shadow: var(--shadow-up);
-	}
-
-
 	main {
 		padding-top: 80px;
 		padding-bottom: 60px;
@@ -122,22 +186,42 @@
 		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}
 
-	.nav-item {
+	nav {
+		display: flex;
+		bottom: 0;
+		height: 60px;
+		box-shadow: var(--shadow-up);
+	}
+
+	.nav-item, .more-menu-wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
+		width: 70px;
 		align-items: center;
 		justify-content: center;
 		text-decoration: none;
-		position:  relative;
+		position: relative;
+		cursor: pointer;
 		height: 100%;
+		border: 0;
 		color: var(--color-title);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		background: none;
+		padding: 0;
+		border: none;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
-	.nav-item.active {
+	.nav-item:hover,
+	.menu-popover-item:hover {
+		filter: brightness(1.9);
+		background-color: #ffffff1a;
+	}
+
+	.nav-item.active,
+	.menu-popover-item.active {
 		color: #ffffff;
-		background: rgba(255,255,255,0.05);
+		background: rgba(255, 255, 255, 0.05);
 	}
 
 	.nav-item.active::before {
@@ -151,7 +235,8 @@
 		box-shadow: var(--shadow-std);
 	}
 
-	.nav-item.active .label {
+	.nav-item.active .label,
+	.menu-popover-item.active .label {
 		font-weight: 600;
 	}
 
@@ -162,4 +247,79 @@
 		margin-top: 4px;
 		letter-spacing: 0.05rem;
 	}
+
+	.backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 60px;
+		width: 100vw;
+		height: calc(100dvh - 60px);
+		background: rgba(0, 0, 0, 0.4);
+		backdrop-filter: blur(2px);
+		z-index: 999;
+	}
+
+	.menu-popover {
+		position: absolute;
+		bottom: 100%;
+		right: 10px;
+
+		background-color: var(--color-accent);
+		border-radius: 12px 12px 0 0;
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+		min-width: 140px;
+		z-index: 1000;
+		overflow: hidden;
+	}
+
+	.menu-popover-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		position: relative;
+		min-height: 48px;
+		padding: 12px 16px;
+		text-decoration: none;
+		color: var(--color-title);
+	}
+
+	.menu-popover-item.active::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 4px;
+		height: 60%;
+		background-color: var(--color-brand);
+		border-radius: 0 4px 4px 0;
+		box-shadow: var(--shadow-right);
+	}
+
+	.viewport-guard {
+		display: none;
+	}
+
+	@media (max-width: 299px) {
+		.viewport-guard {
+			display: block;
+			position: fixed;
+			text-align: center;
+			font-family: 'URW Gothic', sans-serif;
+			margin-top: 1rem;
+			font-size: 1.2rem;
+			color: var(--color-title);
+		}
+
+		.viewport-guard p {
+			width: 90%;
+			margin: auto;
+			padding-top: 30px;
+		}
+	
+		header, main, nav {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f0ed6e2..d976e24 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,19 @@
+<script lang="ts">
+	import Button from '$lib/components/ui/Button.svelte';
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+
+	function test() {
+		console.log('Button Clicked');
+	}
+</script>
+
+<br /><br /><br />
+<Button>Default</Button>
+<Button color={'brand'} onclick={test}>Brand</Button>
+<Button color={'accent'}>Accent</Button>
+<Textbox placeholder={"Textbox am I"} uppercase={true} error={""} />
+
+<BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
+
 <h2>OwlBoard</h2>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 0d731b2..aafe7fa 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,75 +1,101 @@
 <script lang="ts">
-    import logo from '$lib/assets/round-logo.svg'
+	import logo from '$lib/assets/round-logo.svg';
 
-    let isSpinning = $state(false);
+	let isSpinning = $state(false);
 
-    function handleLogoTap() {
-        if (isSpinning) return;
-        isSpinning = true;
-        setTimeout(() => isSpinning = false, 800);
-    }
+	function handleLogoTap() {
+		if (isSpinning) return;
+		isSpinning = true;
+		setTimeout(() => (isSpinning = false), 800);
+	}
 </script>
 
 <div class="logo-container">
-    <img class="logo" src={logo} alt="OwlBoard Logo" onclick={handleLogoTap} class:animate={isSpinning} />
+	<img
+		class="logo"
+		src={logo}
+		alt="OwlBoard Logo"
+		onclick={handleLogoTap}
+		class:animate={isSpinning}
+	/>
 </div>
 
 <section class="about">
-    <p class="copy">
-        &copy; 2022-2026 Frederick Boniface
-    </p>
-    <p class="tagline">
-        Created by train crew, for train crew
-    </p>
-    <p class="amble">
-        OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger departure boards.  The aim was to provide fast and easy access to the information we need on a daily basis.
-    </p>
-    <p class="opensource">
-        Some components that combine to form OwlBoard are open-source, see the <a href="https://git.fjla.uk" target="_blank" rel="noopener">Git reposititories</a> for more info.
-    </p>
+	<p class="copy">&copy; 2022-2026 Frederick Boniface</p>
+	<p class="tagline">Created by train crew, for train crew</p>
+	<p class="amble">
+		OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger
+		departure boards. The aim was to provide fast and easy access to the information we need on a
+		daily basis.
+	</p>
+	<p class="amble">
+Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.
+	</p>
+	<p class="opensource">
+		Some components that combine to form OwlBoard are open-source, see the <a
+			href="https://git.fjla.uk"
+			target="_blank"
+			rel="noopener">Git reposititories</a
+		> for more info.
+	</p>
 </section>
 
 <section class="data-sourcing">
-    <p>
-        Data is sourced from multiple providers, including <a href="https://nationalrail.co.uk" target="_blank" rel="noopener noreferrer">National Rail Enquiries</a> and Network Rail along side OwlBoard's own data
-    </p>
+	<p>
+		Data is sourced from multiple providers, including <a
+			href="https://nationalrail.co.uk"
+			target="_blank"
+			rel="noopener noreferrer">National Rail Enquiries</a
+		> and Network Rail along side OwlBoard's own data
+	</p>
 </section>
 
 <style>
-    .logo-container {
-        width: 100%;
-        text-align: center;
-    }
+	.logo-container {
+		width: 100%;
+		text-align: center;
+	}
 
-    @keyframes owl-spin {
-        0% {transform: rotate(0deg);}
-        15% {transform: rotate(-20deg);}
-        100% {transform: rorate(360deg);}
-    }
+	@keyframes owl-spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		15% {
+			transform: rotate(-20deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
-    .logo {
-        padding-top: 25px;
-        margin: auto;
-        height: auto;
-        width: clamp(80px, 20vw, 200px);
-    }
+	.logo {
+		padding-top: 25px;
+		margin: auto;
+		height: auto;
+		width: clamp(80px, 20vw, 200px);
+	}
 
-    .logo.animate {
-        animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-    }
+	.logo.animate {
+		animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+	}
 
-    section {
-        margin: auto;
-        width: 75%;
-        font-family: 'URW Gothic', sans-serif;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-    }
+	section {
+		margin: auto;
+		width: 90%;
+		max-width: 650px;
+		font-family: 'URW Gothic', sans-serif;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
 
-    .tagline {
-        font-weight: 600;
-        font-style: italic;
-    }
-</style>
\ No newline at end of file
+	section:last-child {
+		padding-bottom: 15px;
+	}
+
+	.tagline {
+		font-weight: 600;
+		font-style: italic;
+	}
+</style>
diff --git a/src/routes/about/+page.ts b/src/routes/about/+page.ts
index d6ae02d..c444264 100644
--- a/src/routes/about/+page.ts
+++ b/src/routes/about/+page.ts
@@ -1,5 +1,5 @@
 export const load = () => {
-    return {
-        title: "About",
-    };
-};
\ No newline at end of file
+	return {
+		title: 'About'
+	};
+};