Further styling to staff view grid

Adjust display logic
Minot animation again...
2026-05-24 00:37:00 +01:00 · 2026-05-23 01:18:39 +01:00 · 2026-05-22 00:16:15 +01:00 · 2026-05-22 00:15:58 +01:00 · 2026-05-22 00:07:22 +01:00 · 2026-05-22 00:00:20 +01:00
73 changed files with 6102 additions and 1103 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
-		"@owlboard/owlboard-ts": "^3.0.0-dev.20260325T1023",
 		"@playwright/test": "^1.58.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tabler/icons-svelte-runes": "^3.44.0",
 		"@types/node": "^22",
 		"@vitest/browser-playwright": "^4.0.18",
 		"eslint": "^9.39.2",
@@ -42,6 +42,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@tabler/icons-svelte": "^3.40.0"
+		"@owlboard/api-schema-types": "^3.0.3-alpha19",
+		"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101"
 	}
 }
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -2,7 +2,12 @@
 // for information about these interfaces
 declare global {
 	namespace App {
-		// interface Error {}
+		interface Error {
+			message: string;
+			code?: string;
+			name?: string;
+			msg?: string;
+		}
 		// interface Locals {}
 		// interface PageData {}
 		// interface PageState {}
--- a/src/app.html
+++ b/src/app.html
@@ -3,12 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="manifest" href="/manifest.webmanifest" />
 		<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
 		<meta
 			name="description"
 			content="Live station departures, Live train tracking, PIS Codes & more"
 		/>
+		<!-- PWA Requirements -->
+		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/icons/apple-touch-icon.png" />
 		<meta name="theme-color" content="#4fd1d1" />
 		<link rel="canonical" href="https://owlboard.info" />
 		<meta property="og:type" content="website" />
--- a/src/hooks.client.ts
+++ b/src/hooks.client.ts
@@ -0,0 +1,11 @@
+import type { HandleClientError } from '@sveltejs/kit';
+
+export const handleError: HandleClientError = ({ error }) => {
+	const err = error as any;
+
+	return {
+		message: err?.message || 'An unexpected application error occurred.',
+		code: err?.code || 'CRITICAL',
+		name: err?.name || 'UNHANDLED_EXCEPTION'
+	};
+};
--- a/src/lib/assets/apple-touch-icon.png
+++ b/src/lib/assets/apple-touch-icon.png
--- a/src/lib/assets/img/no-data.svg
+++ b/src/lib/assets/img/no-data.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="#fff" d="M0 0h120v120H0z"/><g fill="#00f"><path d="M60 0h60v60H60zM0 60h60v60H0z"/><path d="M12.72 32.97h1.08l1.22-4.9 1.2 4.9h1.08l2.16-7.4h-1.4l-1.3 5.17-1.25-5.16h-1l-1.26 5.16-1.3-5.16h-1.4zm12.6-5.54H24.1v.74a2 2 0 0 0-1.8-.87c-1.65 0-2.83 1.23-2.83 2.92 0 1.67 1.17 2.88 2.8 2.88a2.2 2.2 0 0 0 1.83-.85v.72h1.22zm-2.89 1.09c.95 0 1.63.7 1.63 1.72 0 .4-.16.86-.4 1.14-.27.33-.7.5-1.2.5-.98 0-1.65-.66-1.65-1.63 0-1.01.67-1.73 1.62-1.73m3.88 4.45h1.33v-3.08c-.03-.82.4-1.28 1.2-1.31V27.3h-.1c-.58 0-.86.16-1.2.67v-.54H26.3zm3.17 0h1.33v-2.61c0-.74.05-1.06.22-1.33q.33-.5.98-.51.53 0 .8.35c.18.24.26.65.26 1.39v2.7h1.33V30c0-1-.1-1.47-.4-1.9q-.56-.79-1.73-.8a2 2 0 0 0-1.56.66v-.53h-1.23zm6 0h1.33v-5.54h-1.33zm0-6.14h1.33v-1.25h-1.33zm2.4 6.14h1.33v-2.61c0-.74.05-1.06.22-1.33q.33-.5.98-.51.53 0 .8.35c.18.24.26.65.26 1.39v2.7h1.33V30c0-1-.1-1.47-.4-1.9q-.56-.79-1.73-.8a2 2 0 0 0-1.56.66v-.53h-1.23zm10.3-5.54v.7q-.62-.83-1.8-.83c-1.58 0-2.74 1.22-2.74 2.86 0 1.7 1.14 2.94 2.72 2.94.78 0 1.3-.25 1.82-.86q-.07 1.78-1.55 1.77c-.62 0-1-.16-1.39-.6h-1.5c.44 1.12 1.48 1.77 2.84 1.77 1 0 1.8-.35 2.31-1.01.4-.51.56-1.2.56-2.25v-4.5zm-1.66 1.09c.95 0 1.6.68 1.6 1.7 0 1-.62 1.66-1.58 1.66-.95 0-1.56-.65-1.56-1.66 0-1.02.61-1.7 1.54-1.7" aria-label="Warning" font-family="URW Gothic" font-size="10" font-weight="600" style="-inkscape-font-specification:&quot;URW Gothic Semi-Bold&quot;"/><g stroke-width="0" aria-label="No Data" font-family="URW Gothic" font-size="10" font-weight="600" style="-inkscape-font-specification:&quot;URW Gothic Oblique&quot;;text-align:center" text-anchor="middle"><path d="M83.98 87.39h1.37v-5.37l3.1 5.37h1.52V80H88.6v5.38L85.54 80h-1.56zm9.95-5.67a2.93 2.93 0 0 0-2.93 2.9c0 1.6 1.32 2.9 2.94 2.9s2.95-1.3 2.95-2.86a2.9 2.9 0 0 0-2.96-2.94m.01 1.22c.9 0 1.61.75 1.61 1.68s-.72 1.68-1.6 1.68c-.9 0-1.6-.75-1.6-1.7 0-.91.71-1.66 1.6-1.66M79.24 99.89h1.72c1.12 0 1.79-.11 2.39-.41 1.14-.56 1.8-1.78 1.8-3.27 0-1.41-.57-2.56-1.6-3.18a5 5 0 0 0-2.62-.53h-1.7zm1.37-1.31v-4.77h.27c.88 0 1.34.08 1.77.3.7.36 1.13 1.15 1.13 2.1 0 .89-.41 1.68-1.07 2.04-.41.22-.98.33-1.8.33zm11.1-4.23h-1.22v.74a2 2 0 0 0-1.81-.87c-1.64 0-2.82 1.23-2.82 2.92 0 1.67 1.17 2.88 2.79 2.88a2.2 2.2 0 0 0 1.84-.85v.72h1.22zm-2.9 1.09c.96 0 1.64.71 1.64 1.72 0 .4-.16.86-.4 1.14-.27.33-.7.5-1.21.5-.97 0-1.64-.66-1.64-1.63 0-1.01.67-1.73 1.62-1.73m4.26 4.45h1.33v-4.33h.8v-1.21h-.8V92.5h-1.33v1.85h-.65v1.21h.65zm8.33-5.54h-1.22v.74a2 2 0 0 0-1.81-.87c-1.64 0-2.82 1.23-2.82 2.92 0 1.67 1.17 2.88 2.79 2.88a2.2 2.2 0 0 0 1.84-.85v.72h1.22zm-2.9 1.09c.96 0 1.64.71 1.64 1.72 0 .4-.16.86-.4 1.14q-.42.5-1.21.5c-.97 0-1.64-.66-1.64-1.63 0-1.01.67-1.73 1.62-1.73" style="-inkscape-font-specification:&quot;URW Gothic Semi-Bold&quot;"/></g></g></svg>
--- a/src/lib/assets/owlboard-logo-square.svg
+++ b/src/lib/assets/owlboard-logo-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 562.1 562.1"><defs><radialGradient xlink:href="#a" id="b" cx="256" cy="256" r="254" fx="256" fy="256" gradientTransform="translate(27 27)" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="#2b343c"/><stop offset="1" stop-color="#404c55"/></linearGradient></defs><path fill="url(#b)" d="M694.3 283a411.3 394 0 0 1-410.7 394 411.3 394 0 0 1-412-392.8 411.3 394 0 0 1 409.5-395.1 411.3 394 0 0 1 413.2 391.4" transform="translate(-2 -2)"/><path fill="#4fd1d1" d="M281 81a200 200 0 0 0-153.4 71.8 120 120 0 0 0 50.5 25.8c9 2.3 8.9 2.3 15.6-.6 50-21.6 124.4-21.6 175.2-.1 13.3 5.6 44.6-6.5 65.9-24.8a200 200 0 0 0-153.8-72m-161.9 82.7a200 200 0 0 0-38 117.3 200 200 0 0 0 200 200 200 200 0 0 0 200-200 200 200 0 0 0-37.8-116.8 96 96 0 0 1-17.7 46.6l-2.8 4 1.3 1.8c73.3 99.2-14.3 222.2-116.7 163.6-2.5-1.4-4.7-2.4-5-2.1s-10.5 19.6-18 34c-3.4 6.5-2.7 6.6-6.3-.3-9.2-17.5-18-34-18.3-34-.1 0-2.3 1-4.7 2.5-101.3 58-190.7-65.7-117.4-162.4q2.3-3 1.8-3.6a102 102 0 0 1-20.4-50.6m86.5 57q-14.6 0-29.8 7.5C108 261.8 143.1 366.4 217.5 352a68 68 0 0 0 43.3-28.4c2.4-3.4 3.3-4.2 3.7-3.7l8.5 14.6c9.4 16.3 8 15 11.4 9 5.1-9 13.7-23.5 14-24 .3-.2 1.9 1.8 3.6 4.3 31 45.5 101.6 35.6 118.3-16.5a66.4 66.4 0 0 0-83.9-83c-23.3 7.7-38.7 24.4-53.8 58.4l-1.3 3-2.7-6c-17-38.5-43.7-59.5-73-59.2m147.2 34.7a32 32 0 0 1 23.7 9.5c22.8 22.8.7 60.8-30.9 53.1a32 32 0 0 1-23.2-37.3 31.5 31.5 0 0 1 30.4-25.3m-145.8 0c16.4-.8 32.7 11 33.9 30.1a32.2 32.2 0 0 1-40.1 32.5 31.5 31.5 0 0 1-15-52.9 32 32 0 0 1 21.2-9.6m12 9.6q-3.3 0-5.8 3c-6.3 7.4 2.5 17.7 11 13a9 9 0 0 0 4.2-7.5c0-5.4-4.8-8.9-9.4-8.5m123.1 0c-6 .5-9.6 6.5-7 12.3 2 4.5 8.3 6.3 12.2 3.6 7.2-4.9 4.7-15.3-4-15.8z"/></svg>
--- a/src/lib/components/ui/Loading.svelte
+++ b/src/lib/components/ui/Loading.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	let { message = 'Loading...' } = $props();
+
+	let messageIndex = $state(0);
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			if (messageIndex === 0) {
+				messageIndex = 1;
+			} else {
+				messageIndex = messageIndex === 1 ? 2 : 1;
+			}
+		}, 1500);
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="loading-state">
+	<div class="track">
+		<div class="shuttle"></div>
+	</div>
+	<div class="message-container">
+		{#if messageIndex === 0}
+			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>{message}</p>
+		{:else if messageIndex === 1}
+			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Slow connection...</p>
+		{:else}
+			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Still trying...</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.loading-state {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 4rem 2rem;
+		width: 75%;
+		margin: auto;
+	}
+
+	.track {
+		width: 160px;
+		height: 3px;
+		background-color: var(--color-title);
+		border-radius: 4px;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.shuttle {
+		position: absolute;
+		width: 50%;
+		height: 100%;
+		border-radius: 4px;
+		background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
+		animation: data-travel 1.6s infinite ease-in-out;
+	}
+
+	.message-container {
+		display: grid;
+		place-items: center;
+		height: 2rem;
+		margin-top: 1rem;
+	}
+
+	p {
+		grid-area: 1 / 1;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.15em;
+		color: var(--color-title);
+	}
+
+	@keyframes data-travel {
+		0% {
+			left: -50%;
+		}
+		100% {
+			left: 100%;
+		}
+	}
+</style>
--- a/src/lib/components/ui/NoResults.svelte
+++ b/src/lib/components/ui/NoResults.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import noResult from '$lib/assets/img/no-data.svg';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+	let { title = 'No results', message = 'Try checking your search term' } = $props();
+</script>
+
+<div class="no-results-state">
+	<img src={noResult} class="image" height="200" width="200" alt="" role="presentation" />
+	<h3>{title}</h3>
+	<p>{message}</p>
+	<div class="btn-container">
+		<Button
+			type="button"
+			onclick={() => (history.length > 1 ? history.back() : (window.location.href = '/'))}
+			color="accent"
+		>
+			Go back
+		</Button>
+	</div>
+</div>
+
+<style>
+	.no-results-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		min-height: 400px;
+		padding: 5rem;
+		text-align: center;
+		box-sizing: border-box;
+		font-family: 'URW-Gothic', sans-serif;
+	}
+
+	.image {
+		margin-bottom: 1.95rem;
+		max-width: 90%;
+		height: auto;
+	}
+
+	h3 {
+		margin: 0 0 0.5rem 0;
+	}
+
+	p {
+		margin: 0;
+		opacity: 0.8;
+	}
+
+	.btn-container {
+		margin-top: 20px;
+	}
+</style>
--- a/src/lib/components/ui/Textbox.svelte
+++ b/src/lib/components/ui/Textbox.svelte
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { HTMLInputAttributes } 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
-		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: 40px;
-		padding: 0 16px;
-		background-color: var(--color-title);
-		border: 2px solid transparent;
-		border-radius: 20px;
-		color: var(--color-bg-dark);
-		font-size: 1.2rem;
-		transition: all 0.2s ease-in-out;
-		outline: none;
-		text-align: center;
-		box-shadow: var(--shadow-std);
-	}
-
-	.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>
--- a/src/lib/components/ui/TimezoneWarning.svelte
+++ b/src/lib/components/ui/TimezoneWarning.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	let isNotLondon = $state(false);
+	let londonZone = $state('Greenwich Mean Time');
+
+	onMount(() => {
+		const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		isNotLondon = userTZ !== 'Europe/London';
+
+		const parts = new Intl.DateTimeFormat('en-GB', {
+			timeZone: 'Europe/London',
+			timeZoneName: 'long'
+		}).formatToParts(new Date());
+
+		londonZone = parts.find((p) => p.type === 'timeZoneName')?.value || 'UK Time';
+	});
+</script>
+
+{#if isNotLondon}
+	<div transition:slide={{ duration: 300 }} class="tzWarn">
+		<p class="tzText">
+			All times are shown in <strong>{londonZone}</strong>
+		</p>
+	</div>
+{/if}
+
+<style>
+	.tzWarn {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		padding: 1rem 0 0 0;
+	}
+
+	.tzText {
+		width: 80%;
+		text-align: center;
+		margin: auto;
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 1.2rem;
+	}
+</style>
--- a/src/lib/components/ui/TiplocConverter.svelte
+++ b/src/lib/components/ui/TiplocConverter.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { LOCATIONS } from '$lib/locations-object.svelte';
+
+	let { code } = $props<{ code: string | null | undefined }>();
+
+	const location = $derived(LOCATIONS.getName(code));
+	const displayName = $derived(location?.n ?? code ?? '');
+</script>
+
+{displayName}
--- a/src/lib/components/ui/TocStyle.svelte
+++ b/src/lib/components/ui/TocStyle.svelte
@@ -3,13 +3,12 @@
 		toc: string;
 	}

-    let {
-        toc
-    }: Props = $props();
+	let { toc }: Props = $props();

 	let code = $derived(toc.toUpperCase());
 </script>

+<!-- SPACE MONO for the font? -->
 <div class="toc-container {code}">
 	{code}
 </div>
@@ -22,32 +21,57 @@
 		justify-content: center;
 		padding: 2px 8px;
 		font-weight: 800;
+		font-size: 1.1rem;
 		background-color: #333;
 		color: #fff;
+		font-family: 'Courier New', Courier, monospace;
 	}

-    .GW { /* Great Western Railway */
+	.AW {
+		/* Transport for Wales */
+		background: red;
+		color: white;
+	}
+
+	.LM {
+		/* West Midlands Trains */
+		background: rgb(176, 115, 1);
+		color: white;
+	}
+
+	.GW {
+		/* Great Western Railway */
 		background: #004225;
-        color: #E2E2E2;
+		color: #e2e2e2;
 	}

-    .GR { /* LNER */
-        background-color: #C00000;
-        color: #FFFFFF;
+	.GR {
+		/* LNER */
+		background-color: #c00000;
+		color: #ffffff;
 	}

-    .VT { /* Avanti West Coast */
+	.VT {
+		/* Avanti West Coast */
 		background-color: #004354;
-        color: #FFFFFF;
+		color: #ffffff;
 	}

-    .SW { /* South Western Railway */
-        background-color: #2A3389;
-        color: #FFFFFF;
+	.GN {
+		/* Great Northern */
+		background-color: fuchsia;
+		color: rgb(229, 229, 229);
 	}

-    .XC { /* CrossCountry */
+	.SW {
+		/* South Western Railway */
+		background-color: #2a3389;
+		color: #ffffff;
+	}
+
+	.XC {
+		/* CrossCountry */
 		background-color: #660000;
-        color: #E4D5B1;
+		color: #e4d5b1;
 	}
 </style>
--- a/src/lib/components/ui/TrainService.svelte
+++ b/src/lib/components/ui/TrainService.svelte
@@ -0,0 +1,570 @@
+<script lang="ts">
+	import type { ApiPisObject, ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
+	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { formatUkTime, calculateDelay } from '$lib/utils/time';
+	import TocStyle from '$lib/components/ui/TocStyle.svelte';
+	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
+	import { IconChevronDownFilled } from '@tabler/icons-svelte-runes';
+	import { estClass } from '$lib/utils/time';
+	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
+	let isExpanded = $state(false);
+	let loadingDetails = $state(false);
+	let loadingDetailsError = $state(false);
+	let loadingDetailsErrorMsg = $state('');
+	let details = $state(null);
+
+	const toggleExpand = async (rid: string) => {
+		if (isExpanded) {
+			isExpanded = false;
+			return;
+		}
+
+		loadingDetails = true;
+		try {
+			const result = await OwlClient.trains.getByRid(service.r);
+			details = result.data;
+			isExpanded = true;
+		} catch (e) {
+			console.error('Failed to load train details');
+			loadingDetailsError = true;
+			loadingDetailsErrorMsg = e.message;
+		} finally {
+			loadingDetails = false;
+		}
+	};
+
+	let OriginDepartureSummary = $derived(formatUkTime(service.od));
+
+	async function loadDetails(rid: string) {
+		if (details) return;
+		loadingDetails = true;
+
+		const result = await OwlClient.trains.getByRid(service.r);
+		details = result.data;
+		loadingDetails = false;
+	}
+
+	const activityMap: Record<string, string> = {
+		'-D': 'Vehicles detatched',
+		'-T': 'Vehicles attached & detached',
+		'-U': 'Vehicles attached',
+		AE: 'Assist locomotive attached',
+		C: 'Traincrew change only',
+		D: 'Set down only',
+		E: 'Stops for examination',
+		K: 'Passenger count point',
+		KC: 'Ticket collection point',
+		KE: 'Ticket examination point',
+		KF: 'First class ticket examination point',
+		KS: 'Selective ticket examination point',
+		L: 'Locomotive changed',
+		N: 'Unadvertised stop',
+		OP: 'Operational stop only',
+		OR: 'Locomotive attached on rear',
+		R: 'Request stop only',
+		RM: 'Train changes direction',
+		RR: 'Locomotive run round',
+		S: 'Staff only stop',
+		TW: 'Stops for token/staff/tablet only',
+		U: 'Pick up only',
+		W: 'Watering coaches',
+		X: 'Passes another train'
+	};
+
+	const activityRegex = new RegExp(
+		Object.keys(activityMap)
+			.sort((a, b) => b.length - a.length) // Longest codes first
+			.map((key) => key.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')) // Escape special chars
+			.join('|'),
+		'g'
+	);
+
+	const getRelevantActivities = (act: string) => {
+		if (!act) return [];
+
+		// Find all matches in the string
+		const matches = act.match(activityRegex) || [];
+
+		// Map to labels and remove duplicates
+		return [...new Set(matches)].map((code) => activityMap[code]);
+	};
+</script>
+
+<div class="train-service" class:isExpanded>
+	<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
+		{#if loadingDetails}
+			<div class="loading-state"><div class="loading-spinner"></div></div>
+		{/if}
+		<div class="operator-summary">
+			<TocStyle toc={service.o} />
+		</div>
+		<div class="main-text-summary">
+			<div class="time-summary">
+				{OriginDepartureSummary}
+			</div>
+			<div class="location-summary" class:can-all={service.ct}>
+				{service.ot}
+			</div>
+			<div class="location-summary to-summary" class:can-all={service.ct}>to</div>
+			<div class="location-summary" class:can-all={service.ct}>
+				{service.dt}
+			</div>
+			<div class="arrow" class:expanded={isExpanded}>
+				<IconChevronDownFilled color={'var(--color-title)'} size={25} />
+			</div>
+		</div>
+	</button>
+	{#if isExpanded && details}
+		<div class="box-ext" transition:slide={{ duration: 800, easing: quintOut }}>
+			<!-- Here goes the data formatting! -->
+			<div class="detail-head">
+				<!-- Cancellation Section -->
+				{#if service.ct}
+					<span class="cancel-reason"> Cancelled throughout </span>
+				{/if}
+				{#if details.header.cr}
+					<span class="cancel-reason">
+						{details.header.cr}
+						{#if details.header.cl}
+							{details.header.cn ? ' near ' : ' at '}
+							<TiplocConverter code={details.header.cl} />
+						{/if}
+					</span>
+				{/if}
+
+				<!-- Delay Section -->
+				{#if details.header.dr}
+					<span class="delay-reason">
+						{details.header.dr}
+						{#if details.header.dl}
+							{details.header.dn ? ' near ' : ' at '}
+							{details.header.dl}
+						{/if}
+					</span>
+				{/if}
+				{#if details.pis}
+					<div class="pis-detail">
+						<span class="pis-code">PIS: {details.pis.code}</span>
+						{#if details.pis.skip?.skip > 0}
+							<span class="pis-skip">
+								(skip {details.pis.skip.position === 'head' ? 'first' : 'last'}
+								{details.pis.skip.skip}
+								{details.pis.skip.skip === 1 ? 'stop' : 'stops'}
+								)
+							</span>
+						{/if}
+					</div>
+				{/if}
+			</div>
+			<div class="color-key">
+				<p class="tpl-stop">Times in yellow are estimates</p>
+			</div>
+			<div class="schedule-table-container">
+				<table class="schedule-table">
+					<thead>
+						<tr>
+							<th colspan="2"></th>
+							<th colspan="2">Arr</th>
+							<th colspan="2">Dep</th>
+						</tr>
+						<tr>
+							<th>Location</th>
+							<th>Plat</th>
+							<th>Sch</th>
+							<th>Act</th>
+							<th>Sch</th>
+							<th>Act</th>
+							<th></th>
+						</tr>
+					</thead>
+					{#each details.locations as loc}
+						<tbody class="location-group">
+							<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
+								<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>
+									{loc.t}
+								</td>
+								<td class="plat-cell cell-divider-right" class:plat-change={loc.pc}>{loc.p}</td>
+								{#if loc.r == 'PASS'}
+									<td class="time-cell cell-divider-right" colspan="2">Pass</td>
+									<td class="time-cell">{formatUkTime(loc.wtp)}</td>
+									<td class="time-cell {estClass(loc.atp, loc.etp)}"
+										>{formatUkTime(loc.atp || loc.etp || '--')}</td
+									>
+								{:else}
+									<td class="time-cell">{formatUkTime(loc.pta || loc.wta || '--')}</td>
+									<td class="time-cell cell-divider-right {estClass(loc.ata, loc.eta)}"
+										>{formatUkTime(loc.ata || loc.eta || '--')}</td
+									>
+									<td class="time-cell">{formatUkTime(loc.ptd || loc.wtd || '--')}</td>
+									<td class="time-cell cell-divider-right {estClass(loc.atd, loc.etd)}"
+										>{formatUkTime(loc.atd || loc.etd || '--')}</td
+									>
+								{/if}
+								{#if loc}
+									{@const delay = calculateDelay(loc)}
+									<td class="delay-{delay.type}">{delay.val}</td>
+								{/if}
+							</tr>
+							{#if loc.act && getRelevantActivities(loc.act).length > 0}
+								<tr class="activity-row">
+									<td colspan="7">
+										<div class="activity-container">
+											{#each getRelevantActivities(loc.act) as note}
+												<span class="activity-tag">{note}</span>
+											{/each}
+										</div>
+									</td>
+								</tr>
+							{/if}
+						</tbody>{/each}
+				</table>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* 
+		Main container
+	*/
+	.train-service {
+		background-color: var(--color-accent);
+		width: 100%;
+		max-width: 460px;
+		border-radius: 12px;
+		box-shadow: var(--shadow-std);
+		overflow: visible;
+		font-family: 'URW Gothic', sans-serif;
+		transition: 0.2s all;
+		filter: brightness(1.1);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.train-service:active {
+		filter: brightness(1.2);
+	}
+
+	.train-service:active .arrow {
+		filter: brightness(0.2);
+	}
+
+	@media (hover: hover) {
+		.train-service:not(.isExpanded):hover {
+			filter: brightness(1.2);
+		}
+
+		.summary:hover .arrow {
+			filter: brightness(0.2);
+		}
+	}
+
+	/* 
+		Summary Header
+	*/
+	.summary {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0 1rem;
+		min-height: 48px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		text-align: left;
+		gap: 0.5rem;
+	}
+
+	.operator-summary {
+		flex-shrink: 0;
+	}
+
+	.main-text-summary {
+		display: flex;
+		flex-grow: 1;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.time-summary {
+		font-size: 0.75rem;
+		font-weight: 700;
+		color: var(--color-brand);
+	}
+
+	.location-summary {
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 0.75rem;
+		letter-spacing: 0.02em;
+		color: var(--color-title);
+	}
+
+	.to-summary {
+		font-size: 0.8rem;
+		font-style: oblique;
+		text-transform: lowercase;
+	}
+
+	.arrow {
+		padding: 0;
+		margin: 0 0 0 auto;
+		height: 25px;
+		transition: all 0.3s;
+	}
+
+	.expanded {
+		transform: rotateX(180deg);
+	}
+
+	.can-all {
+		color: red;
+	}
+
+	/*
+		PIS Data
+	*/
+	.pis-detail {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 0.2rem;
+		padding: 8px 0;
+		width: 100%;
+	}
+	.pis-code {
+		font-weight: 600;
+		font-size: 1.1rem;
+		letter-spacing: 0.05em;
+	}
+
+	.pis-skip {
+		font-size: 0.85rem;
+		opacity: 0.75;
+		font-style: oblique;
+	}
+
+	/*
+		Box Extention
+	*/
+	.box-ext {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.detail-head {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+		text-align: center;
+		width: 100%;
+	}
+
+	.cancel-reason,
+	.delay-reason {
+		display: block;
+		padding: 4px 8px;
+		width: 95%;
+		font-size: 1rem;
+		font-weight: 500;
+		animation: cancel-pulse 2s ease-in-out infinite;
+	}
+
+	.cancel-reason {
+		color: var(--cancel-red);
+	}
+
+	.delay-reason {
+		color: rgb(255, 119, 0);
+	}
+
+	/*
+		Schedule Table
+	*/
+
+	.color-key,
+	.color-key p {
+		text-align: center;
+		width: 100%;
+		padding: 0 0 0.2rem 0;
+		margin: 0;
+	}
+
+	.schedule-table-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		padding-bottom: 0.1rem;
+	}
+
+	.schedule-table {
+		width: 95%;
+		border-collapse: collapse;
+		font-family: 'URW Gothic', 'Inter', sans-serif;
+		font-variant-numeric: tabular-nums;
+		font-size: 0.8rem;
+		letter-spacing: -0.02ch;
+		transition: all 0.5s;
+		font-weight: 500;
+	}
+
+	.location-group:nth-of-type(even) {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
+	.cell-divider-right {
+		border-right: 1px solid rgba(255, 255, 255, 0.1);
+	}
+
+	th,
+	td {
+		text-align: center;
+		padding: 6px 4px;
+	}
+
+	.activity-row td {
+		padding: 0 0 10px 0;
+		text-align: left;
+		font-size: 0.75rem;
+		letter-spacing: 0.01em;
+	}
+
+	.activity-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		padding: 0 12px;
+	}
+
+	.activity-tag {
+		background: rgba(255, 255, 255, 0.1);
+		border: 1px solid rgba(255, 255, 255, 0.05);
+		padding: 2px 6px;
+		border-radius: 4px;
+	}
+
+	.tpl-cell {
+		color: var(--color-title);
+		text-align: left;
+	}
+
+	.tpl-stop {
+		color: var(--location-yellow);
+	}
+
+	.plat-change {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+
+	.pass-loc td {
+		color: var(--color-title);
+		font-style: oblique;
+		opacity: 0.5;
+	}
+
+	.can-loc {
+		text-decoration: line-through;
+	}
+
+	.est {
+		color: var(--location-yellow);
+		font-style: oblique;
+	}
+
+	td.delay-late {
+		color: var(--delay-orange);
+		font-weight: 600;
+		animation: pulse 2s ease-out infinite;
+	}
+
+	td.delay-early {
+		color: var(--early-blue);
+		font-weight: 600;
+		animation: pulse 2s ease-out infinite;
+	}
+
+	/* 
+		Loading State
+	*/
+	.loading-state {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(5px);
+		width: 100%;
+		height: 100%;
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 1rem;
+		color: var(--color-title);
+	}
+
+	.loading-spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid rgba(0, 0, 0, 0.1);
+		border-top-color: #fff;
+		border-radius: 50%;
+		animation: load-spin 0.8s linear infinite;
+		z-index: 3;
+	}
+
+	/*
+		Responsivity
+	*/
+	@media (min-width: 330px) {
+		.time-summary,
+		.location-summary {
+			font-size: 0.9rem;
+		}
+		.activity-row td {
+			font-size: 0.8rem;
+		}
+	}
+
+	@media (min-width: 340px) {
+		.schedule-table {
+			font-size: 0.9rem;
+		}
+	}
+
+	@media (min-width: 360px) {
+		.time-summary {
+			font-size: 1.1rem;
+		}
+		.location-summary {
+			font-size: 1rem;
+		}
+		.schedule-table {
+			font-size: 0.99rem;
+		}
+		.activity-row td {
+			font-size: 0.9rem;
+		}
+	}
+
+	@media (min-width: 420px) {
+		.schedule-table {
+			font-size: 1.1rem;
+		}
+	}
+
+	/*
+		KEYFRAMES
+	*/
+	@keyframes load-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>
--- a/src/lib/components/ui/cards/BaseCard.svelte
+++ b/src/lib/components/ui/cards/BaseCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte-runes';
 	import { slide } from 'svelte/transition';

 	interface Props {
@@ -52,7 +52,7 @@
 	.card {
 		background: var(--color-accent);
 		position: relative;
-		border-radius: 20px;
+		border-radius: 12px;
 		overflow: visible;
 		width: 95%;
 		max-width: 600px;
--- a/src/lib/components/ui/cards/HeadcodeSearchCard.svelte
+++ b/src/lib/components/ui/cards/HeadcodeSearchCard.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
+
+	let headcode = $state('');
+
+	function handleSearch(headcode: string) {
+		if (!headcode.trim()) return;
+
+		const searchParams = new URLSearchParams();
+		searchParams.append('h', headcode.trim().toUpperCase());
+
+		goto(`/trains?${searchParams.toString()}`);
+	}
+</script>
+
+<BaseCard header={'Search Train & PIS'}>
+	<div class="card-content">
+		<Textbox
+			placeholder="Enter Headcode"
+			bind:value={headcode}
+			maxLength={4}
+			onsubmit={handleSearch}
+		/>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 0.5rem 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+</style>
--- a/src/lib/components/ui/cards/LocationBoardCard.svelte
+++ b/src/lib/components/ui/cards/LocationBoardCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+	import LocationSearchBox from '$lib/components/ui/form-elements/LocationSearchBox.svelte';

 	let locationValue = $state('');

--- a/src/lib/components/ui/cards/NearbyStationsCard.svelte
+++ b/src/lib/components/ui/cards/NearbyStationsCard.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+
+	import { prefs } from '$lib/preferences.svelte';
+
+	import { fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	import { nearestStationsState } from '$lib/geohash.svelte';
+
+	const flipDuration = 300;
+</script>
+
+<BaseCard header={'Nearby Stations'}>
+	<div class="card-content">
+		{#if !prefs.current.NearToMe}
+			<Button onclick={() => prefs.toggleNearToMe(true)}>Enable Location</Button>
+		{:else if nearestStationsState.error && nearestStationsState.list.length === 0}
+			<p class="msg">{nearestStationsState.error}</p>
+		{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}
+			<p class="msg">Locating stations...</p>
+		{:else}
+			<div class="stations-flex">
+				{#each nearestStationsState.list as station (station.c)}
+					<div
+						class="btn-container"
+						animate:flip={{ duration: flipDuration }}
+						in:fade|global={{ duration: 200 }}
+					>
+						<Button href={`/board?loc=${station.c}`}
+							><span class="stn-name">{station.n}</span></Button
+						>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		width: 90%;
+		min-height: 98px;
+		margin: auto;
+		padding: 10px 0 0 0;
+	}
+
+	.stations-flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.1rem 0.5rem;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.btn-container {
+		display: block;
+		width: fit-content;
+		will-change: transform;
+	}
+
+	.msg {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: var(--color-title);
+	}
+
+	.stn-name {
+		text-transform: capitalize;
+	}
+</style>
--- a/src/lib/components/ui/cards/QuickLinksCard.svelte
+++ b/src/lib/components/ui/cards/QuickLinksCard.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+
+	import { fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	import { quickLinks } from '$lib/quick-links.svelte';
+
+	const flipDuration = 300;
+</script>
+
+<BaseCard header={'Quick Links'}>
+	<div class="card-content">
+		{#if quickLinks.list.length === 0}
+			<p class="msg">Your most viewed stations will appear here</p>
+		{:else}
+			<div class="stations-flex">
+				{#each quickLinks.list as station (station.id)}
+					<div
+						class="btn-container"
+						animate:flip={{ duration: flipDuration }}
+						in:fade|global={{ duration: 200 }}
+					>
+						<Button href={`/board?loc=${station.id}`}
+							><span class="stn-name">{station.id}</span></Button
+						>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		width: 90%;
+		min-height: 98px;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+	.stations-flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.1rem 0.5rem;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.btn-container {
+		display: block;
+		width: fit-content;
+		will-change: transform;
+	}
+
+	.msg {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: var(--color-title);
+	}
+
+	.stn-name {
+		text-transform: capitalize;
+	}
+</style>
--- a/src/lib/components/ui/cards/pis/PisCode.svelte
+++ b/src/lib/components/ui/cards/pis/PisCode.svelte
@@ -1,28 +1,24 @@
 <script lang="ts">
-import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-import Textbox from '$lib/components/ui/Textbox.svelte';
-import Button from '$lib/components/ui/Button.svelte';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';

-let { onsearch }: { onsearch: (c: string) => void } = $props();
-
-let codeValue = $state('');
-
-function resetValues(): void {
-    codeValue = '';
-}
+	let { onsearch }: { onsearch: (c: string) => void } = $props();
 </script>

 <BaseCard header={'Find by Code'}>
 	<div class="card-content">
 		<div class="textbox-container">
 			<div class="textbox-item-wrapper">
-                <Textbox placeholder={"Code"} uppercase={true} type={'number'} max={9999} bind:value={codeValue} />
+				<Textbox
+					placeholder={'Code'}
+					uppercase={true}
+					type={'text'}
+					onsubmit={onsearch}
+					maxLength={4}
+					inputmode={'numeric'}
+				/>
 			</div>
 		</div>
-        <div class="button-wrapper">
-            <Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
-            <Button onclick={resetValues}>Reset</Button>
-        </div>
 	</div>
 </BaseCard>

@@ -42,7 +38,7 @@ function resetValues(): void {
 	}

 	.textbox-item-wrapper {
-        width: 30%;
+		width: 60%;
 	}

 	.button-wrapper {
--- a/src/lib/components/ui/cards/pis/PisStartEndCard.svelte
+++ b/src/lib/components/ui/cards/pis/PisStartEndCard.svelte
@@ -1,35 +1,40 @@
 <script lang="ts">
-import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-import Textbox from '$lib/components/ui/Textbox.svelte';
-import Button from '$lib/components/ui/Button.svelte';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';

-let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
+	let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();

+	let startValue = $state('');
+	let endValue = $state('');

-let startValue = $state('');
-let endValue = $state('');
-
-function resetValues(): void {
+	function resetValues(): void {
 		startValue = '';
 		endValue = '';
-}
+	}
 </script>

 <BaseCard header={'Find by Start/End CRS'}>
-	<div class="card-content">
+	<form
+		class="card-content"
+		onsubmit={(e) => {
+			e.preventDefault();
+			onsearch(startValue, endValue);
+		}}
+	>
 		<div class="textbox-container">
 			<div class="textbox-item-wrapper">
-                <Textbox placeholder={"Start"} uppercase={true} maxLength={3} bind:value={startValue} />
+				<Textbox placeholder={'Start'} uppercase={true} maxLength={3} bind:value={startValue} />
 			</div>
 			<div class="textbox-item-wrapper">
-                <Textbox placeholder={"End"} uppercase={true} maxLength={3} bind:value={endValue} />
+				<Textbox placeholder={'End'} uppercase={true} maxLength={3} bind:value={endValue} />
 			</div>
 		</div>
 		<div class="button-wrapper">
-            <Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
+			<Button type={'submit'}>Search</Button>
 			<Button onclick={resetValues}>Reset</Button>
 		</div>
-	</div>
+	</form>
 </BaseCard>

 <style>
@@ -44,11 +49,11 @@ function resetValues(): void {
 		display: flex;
 		width: 100%;
 		justify-content: center;
-        gap: 4rem;
+		gap: 1.1rem;
 	}

 	.textbox-item-wrapper {
-        width: 30%;
+		width: 50%;
 	}

 	.button-wrapper {
--- a/src/lib/components/ui/form-elements/Button.svelte
+++ b/src/lib/components/ui/form-elements/Button.svelte
@@ -19,47 +19,60 @@
 {#if isLink}
 	<a
 		{href}
-		class="btn {color}"
+		class="hitbox-wrapper"
 		target={isExternal ? '_blank' : undefined}
 		rel={isExternal ? 'noopener noreferrer' : undefined}
 		{...rest}
-	>
+		><span class="btn {color}">
 			{@render children?.()}
+		</span>
 	</a>
 {:else}
-	<button class="btn {color}" {onclick} {...rest}>
-		{@render children?.()}
+	<button class="hitbox-wrapper" {onclick} {...rest}>
+		<span class="btn {color}">{@render children?.()}</span>
 	</button>
 {/if}

 <style>
-	.btn {
+	.hitbox-wrapper {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0.4rem 1.2rem;
-		width: fit-content;
-		min-width: 90px;
 		min-height: 48px;
+		min-width: 48px;
+		appearance: none;
+		background: transparent;
 		border: none;
-		border-radius: 20px;
+		padding: 0 4px;
 		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;
+	}
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+		flex-shrink: 0;
+		padding: 0 1.2rem;
+		min-width: 40px;
+		height: 36px;
+		border-radius: 20px;
+		border: none;
+		box-shadow: var(--shadow-small);
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 0.93rem;
+		font-weight: 400;
+		letter-spacing: 0.05ch;
+		transition:
+			all 0.1s ease,
+			box-shadow 0.2s;
 	}

 	.accent {
 		background-color: var(--color-accent);
 		color: var(--color-title);
+		font-weight: 600;
 	}

 	.brand {
@@ -72,11 +85,11 @@
 		color: var(--color-title);
 	}

-	.btn:hover {
+	.hitbox-wrapper:hover .btn {
 		filter: brightness(1.5);
 	}

-	.btn.active {
+	.hitbox-wrapper:active .btn {
 		transform: scale(0.98);
 	}
 </style>
--- a/src/lib/components/ui/form-elements/LocationSearchBox.svelte
+++ b/src/lib/components/ui/form-elements/LocationSearchBox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { goto } from '$app/navigation';
@@ -27,16 +27,27 @@
 		return LOCATIONS.data
 			.filter((r) => tokens.every((t) => r.s.includes(t)))
 			.sort((a, b) => {
-
 				// Priority One - Exact CRS Match
 				const aExactCrs = a.c?.toLowerCase() === lowerQuery;
 				const bExactCrs = b.c?.toLowerCase() === lowerQuery;
 				if (aExactCrs && !bExactCrs) return -1;
 				if (!aExactCrs && bExactCrs) return 1;

-				// Priority Two - 'Stations' with CRS
+				// Priority Two - Exact Name Match
+				const aNameLow = a.n.toLowerCase();
+				const bNameLow = b.n.toLowerCase();
+				const aExactName = aNameLow === lowerQuery;
+				const bExactName = bNameLow === lowerQuery;
+				if (aExactName !== bExactName) return aExactName ? -1 : 1;
+
+				// Priority Three - Name starts with Query
+				const aStarts = aNameLow.startsWith(lowerQuery);
+				const bStarts = bNameLow.startsWith(lowerQuery);
+				if (aStarts !== bStarts) return aStarts ? -1 : 1;
+
+				// Priority Four - 'Stations' with CRS
 				if (!!a.c && !b.c) return -1;
-				if (!a.c & !! b.c) return 1;
+				if (!a.c && !!b.c) return 1;

 				// Alphabetical Sort
 				return a.n.localeCompare(b.n);
--- a/src/lib/components/ui/form-elements/Textbox.svelte
+++ b/src/lib/components/ui/form-elements/Textbox.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	import { IconChevronRightFilled } from '@tabler/icons-svelte-runes';
+
+	interface Props extends HTMLInputAttributes {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+		error?: string;
+		uppercase?: boolean;
+		onsubmit?: (val: string) => void | Promise<void>;
+		[key: string]: any;
+	}
+
+	let {
+		value = $bindable(''),
+		label,
+		placeholder = '',
+		type = 'text',
+		error = '',
+		uppercase = false,
+		onsubmit,
+		...rest
+	}: Props = $props();
+
+	let isFocussed = $state(false);
+
+	const handleSubmit = (e: Event) => {
+		e.preventDefault();
+		if (onsubmit && value) {
+			onsubmit(value);
+		}
+	};
+</script>
+
+<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
+	{#if label}
+		<label for="adaptive-input">{label}</label>
+	{/if}
+
+	<form onsubmit={handleSubmit} class="input-container">
+		<input
+			id="adaptive-input"
+			class:all-caps={uppercase}
+			{type}
+			{placeholder}
+			bind:value
+			onfocus={() => (isFocussed = true)}
+			onblur={() => (isFocussed = false)}
+			{...rest}
+		/>
+
+		{#if onsubmit}
+			<button
+				type="submit"
+				class="submit-icon"
+				transition:fade
+				disabled={!value}
+				aria-label="Submit"
+			>
+				<IconChevronRightFilled />
+			</button>
+		{/if}
+	</form>
+
+	{#if error}
+		<span class="error-message" transition:fade>{error}</span>
+	{/if}
+</div>
+
+<style>
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+		width: 100%;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
+	.input-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		background-color: var(--color-title);
+		border-radius: 5000px;
+		transition: all 0.2s;
+		overflow: hidden;
+	}
+
+	label {
+		font-size: 0.9rem;
+		font-weight: 400;
+		color: var(--color-title);
+	}
+
+	input[type='number']::-webkit-outer-spin-button,
+	input[type='number']::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+		appearance: textfield;
+	}
+
+	input {
+		width: 100%;
+		background: transparent;
+		min-height: 40px;
+		height: 100%;
+		line-height: normal;
+		padding: 0 48px;
+		border: none;
+		color: var(--color-bg-dark);
+		font-size: 1.2rem;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+		text-align: center;
+	}
+
+	.submit-icon {
+		position: absolute;
+		background: transparent;
+		right: 0;
+		border: none;
+		color: var(--color-bg-dark);
+		cursor: pointer;
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.75;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
+
+	.submit-icon:hover:not(:disabled) {
+		opacity: 1;
+		transform: translateX(2px);
+	}
+
+	.submit-icon:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.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>
--- a/src/lib/components/ui/form-elements/Toggle.svelte
+++ b/src/lib/components/ui/form-elements/Toggle.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	interface Props {
+		checked: boolean;
+		id: string;
+		label: string;
+		disabled?: boolean;
+		onchange?: (checked: boolean) => void;
+	}
+
+	let { checked = $bindable(false), id, label, disabled = false, onchange }: Props = $props();
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		checked = target.checked;
+		onchange?.(checked);
+	}
+</script>
+
+<div class="toggle-wrapper" class:is-disabled={disabled}>
+	<!-- 1. Interactive Switch Mechanism (Sits Left) -->
+	<div class="toggle-control">
+		<input type="checkbox" {id} {disabled} {checked} onchange={handleInput} class="toggle-input" />
+		<label for={id} class="toggle-track">
+			<span class="toggle-thumb"></span>
+		</label>
+	</div>
+
+	<!-- 2. Visible Text Label (Sits Right) -->
+	<label for={id} class="toggle-label-text">
+		{label}
+	</label>
+</div>
+
+<style>
+	.toggle-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 1.75rem;
+		width: 100%;
+	}
+
+	.toggle-control {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.toggle-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+
+	.toggle-track {
+		position: relative;
+		display: inline-block;
+		width: 3.75rem;
+		height: 2rem;
+		background-color: rgb(93, 45, 45);
+		border-radius: 1rem;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+	}
+
+	.toggle-thumb {
+		position: absolute;
+		top: 0.25rem;
+		left: 0.25rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: var(--color-accent);
+		border-radius: 50%;
+		transition: transform 0.2s ease;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+		filter: brightness(1.45);
+	}
+
+	.toggle-input:checked + .toggle-track {
+		background-color: rgb(11, 70, 11);
+	}
+
+	.toggle-input:checked + .toggle-track .toggle-thumb {
+		transform: translateX(1.75rem);
+	}
+
+	.toggle-input:focus-visible + .toggle-track {
+		outline: 2px solid #3b82f6;
+		outline-offset: 2px;
+	}
+
+	.toggle-label-text {
+		font-weight: 600;
+		cursor: pointer;
+		user-select: none;
+		color: var(--color-title);
+	}
+
+	.is-disabled {
+		opacity: 0.5;
+	}
+
+	.is-disabled .toggle-track,
+	.is-disabled .toggle-label-text {
+		cursor: not-allowed;
+	}
+</style>
--- a/src/lib/components/ui/station-board/StaffServicesGrid.svelte
+++ b/src/lib/components/ui/station-board/StaffServicesGrid.svelte
@@ -0,0 +1,386 @@
+<script lang="ts">
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { formatUkTime, estClass, delayClassFromTimePair, isRightTime } from '$lib/utils/time';
+	import { fade, slide, fly } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
+
+	const getRowKey = (s: ApiStationsBoard.BoardService) =>
+		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
+</script>
+
+<section class="departure-board">
+	<div class="header container">
+		<div class="header row">
+			<div class="upper-header-blank"></div>
+			<div class="upper-header-text">Arr</div>
+			<div class="upper-header-text">Dep</div>
+		</div>
+		<div class="header row">
+			<div class="cell">ID</div>
+			<div class="cell">Orig</div>
+			<div class="cell">Dest</div>
+			<div class="cell">Plt</div>
+			<div class="cell">Sch</div>
+			<div class="cell">Act</div>
+			<div class="cell">Sch</div>
+			<div class="cell">Act</div>
+		</div>
+	</div>
+	<div class="services">
+		{#each services as service (getRowKey(service))}
+			{@const realArrival = formatUkTime(service.ata || service.eta)}
+			{@const realDeparture = formatUkTime(service.atd || service.etd)}
+			{@const realPass = formatUkTime(service.atp || service.etp)}
+			<div
+				class="service-block"
+				animate:flip={{ duration: 400 }}
+				transition:slide={{ duration: 300 }}
+			>
+				<div
+					class="service row"
+					class:passing={service.wtp}
+					class:nonPax={!service.ip}
+					class:cancelled={service.c}
+				>
+					<div class="cell id">{service.h}</div>
+					<div class="cell orig">
+						{#key service.og.t}
+							<div transition:fade={{ duration: 300 }}>
+								{service.og.t}
+							</div>
+						{/key}
+					</div>
+					<div class="cell dest">
+						{#key service.dt.t}<div transition:fade={{ duration: 300 }}>{service.dt.t}</div>{/key}
+					</div>
+					<div class="cell plt" class:platsup={service.ps} class:platchange={service.pc}>
+						{#key service.p}<div transition:fade={{ duration: 300 }}>{service.p || '-'}</div>{/key}
+					</div>
+					{#if service.wtp}
+						<div class="cell pass">PASS</div>
+						<div class="cell sch">
+							{formatUkTime(service.wtp)}
+						</div>
+						<div
+							class="cell act {estClass(service.atp, service.etp)} {delayClassFromTimePair(service.wtp, service.atp || service.etp)}"
+						>
+						{#if isRightTime(service.wtp, service.atp || service.etp)}
+							RT
+						{:else if service.c}
+						CANC
+						{:else}
+							{realPass}
+							{/if}
+						</div>
+					{:else}
+						<div class="cell sch">{formatUkTime(service.sta)}</div>
+						<div
+							class="cell act {estClass(service.ata, service.eta)} {delayClassFromTimePair(service.sta, service.ata || service.eta)}"
+						>
+							{#if isRightTime(service.sta, service.ata || service.eta)}
+								RT
+							{:else if service.sta && service.c} CANC {:else}
+								{realArrival}
+							{/if}
+						</div>
+						<div class="cell sch">{formatUkTime(service.std)}</div>
+						<div class="cell act {estClass(service.atd, service.etd)} {delayClassFromTimePair(service.std, service.atd || service.etd)}">
+							{#if isRightTime(service.std, service.atd || service.etd)}
+								RT
+							{:else if service.std && service.c} CANC {:else}
+								{realDeparture}
+							{/if}
+						</div>
+					{/if}
+				</div>
+				<div class="operator row">{service.o}</div>
+				{#if service?.cr?.r}
+					{#if service.c}
+						<div class="cancel-reason row" transition:slide={{ duration: 300 }}>{service.cr.r}</div>
+					{:else}
+						<div class="cancel-reason row" transition:slide={{ duration: 300 }}>
+							Part of this service has been cancelled
+						</div>
+					{/if}
+				{:else if service?.dr?.r}
+					<div class="delay-reason row" transition:slide={{ duration: 300 }}>{service.dr.r}</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.departure-board {
+		width: 100%;
+		max-width: 100%;
+		height: 100%;
+		max-height: 100%;
+		margin: 0 auto;
+		box-sizing: border-box;
+		overscroll-behavior-y: contain;
+		overflow-y: auto;
+	}
+
+	.header.container {
+		position: sticky;
+		padding-top: 7px;
+		top: 0;
+		z-index: 10;
+		background: var(--color-bg-dark);
+	}
+
+	.row.header {
+		font-weight: 875;
+	}
+	.row.header:last-child {
+		padding-bottom: 1rem;
+	}
+
+	.upper-header-blank {
+		grid-column: span 4;
+	}
+	.upper-header-text {
+		grid-column: span 2;
+		text-align: center;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 10% 17% 17% 9% 12% 12% 12% 11%;
+		align-items: center;
+		text-align: center;
+		gap: 0;
+		box-sizing: border-box;
+		font-family: 'Inconsolata Variable', monospace;
+		font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
+		font-variant-ligatures: additional-ligatures;
+	}
+
+	.service.row.passing {
+		font-style: italic;
+		opacity: 0.25;
+		font-weight: 200;
+	}
+
+	.service.row.nonPax {
+		opacity: 0.25;
+		font-weight: 200;
+	}
+
+	.service-block {
+		width: 100%;
+		max-width: 100%;
+		padding-bottom: 7px;
+	}
+
+	/* Cancellation Logic */
+	.service.cancelled,
+	.service.cancelled .cell.orig,
+	.service.cancelled .cell.dest {
+		color: rgb(255, 131, 131);
+	}
+	.service.cancelled .cell.plt,
+	.service.cancelled .cell.act {
+		text-decoration: line-through;
+		opacity: 0.25;
+	}
+	.service.cancelled .cell.sch {
+		text-decoration: line-through;
+	}
+
+	/* Meta Row Styles */
+	.operator.row,
+	.delay-reason.row,
+	.cancel-reason.row {
+		grid-template-columns: 1fr;
+		text-align: left;
+		font-size: 0.88rem;
+		font-stretch: 80%;
+	}
+
+	.cancel-reason.row {
+		color: rgb(255, 131, 131);
+		font-weight: 400;
+		letter-spacing: -0.1ch;
+	}
+
+	.delay-reason.row {
+		color: var(--delay-orange);
+		font-weight: 400;
+		letter-spacing: -0.1ch;
+	}
+	@media (min-width: 375px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.08rem;
+		}
+	}
+	@media (min-width: 420px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.12rem;
+		}
+	}
+	@media (min-width: 550px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.18rem;
+		}
+	}
+	@media (min-width: 620px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.2rem;
+		}
+	}
+
+	.operator.row {
+		font-stretch: 110%;
+		padding: 0;
+		color: rgb(187, 187, 255);
+	}
+
+	/* Column Specifics */
+	.cell.id {
+		text-align: left;
+		font-weight: 400;
+		font-stretch: 85%;
+		filter: brightness(0.75);
+	}
+	@media (min-width: 400px) {
+		.cell.id {
+			font-stretch: 90%;
+		}
+	}
+	.cell.orig,
+	.cell.dest {
+		font-stretch: 80%;
+		font-weight: 400;
+	}
+	.cell.orig {
+		text-align: left;
+		color: var(--location-yellow);
+	}
+	.cell.dest {
+		text-align: right;
+		color: var(--location-yellow);
+	}
+	@media (min-width: 350px) {
+		.cell.orig,
+		.cell.dest {
+			font-stretch: 85%;
+		}
+		@media (min-width: 400px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 90%;
+			}
+		}
+		@media (min-width: 490px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 95%;
+			}
+		}
+		@media (min-width: 520px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 100%;
+			}
+			.cell.orig {
+				text-align: right;
+				padding-right: 7px;
+			}
+			.cell.dest {
+				text-align: left;
+				padding-left: 7px;
+			}
+		}
+		@media (min-width: 600px) {
+			.cell.orig,
+			.cell.dest {
+				letter-spacing: 0.05ch;
+			}
+		}
+	}
+	.cell.plt {
+		text-align: center;
+		font-weight: 410;
+		font-stretch: 100%;
+	}
+	@media (min-width: 525px) {
+		.cell.plt {
+			font-stretch: 110%;
+		}
+	}
+	.cell.plt.platsup {
+		font-weight: 150;
+	}
+	.cell.plt.platchange {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+	.pass-cell {
+		text-align: center;
+		font-stretch: 100%;
+	}
+	.cell.pass {
+		grid-column: span 2;
+	}
+	.cell.sch,
+	.cell.act {
+		text-align: center;
+		font-stretch: 72%;
+	}
+	.cell.act.delay-late {
+		color: var(--delay-orange);
+	}
+	.cell.act.delay-early {
+		color: var(--early-blue);
+	}
+	@media (min-width: 350px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 77%;
+		}
+	}
+	@media (min-width: 400px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 82%;
+		}
+	}
+	@media (min-width: 525px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 90%;
+		}
+	}
+	@media (min-width: 600px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 100%;
+		}
+	}
+	.cell.act.est {
+		font-style: italic;
+		font-weight: 300;
+		opacity: 0.5;
+	}
+
+	/* Time Types */
+	.cell.act.estimate {
+		font-style: italic;
+		opacity: 0.75;
+		font-weight: 350;
+	}
+	.cell.act.actual {
+		font-weight: 600;
+	}
+</style>
--- a/src/lib/components/ui/station-board/StationAlertCard.svelte
+++ b/src/lib/components/ui/station-board/StationAlertCard.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte-runes';
+
+	let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
+	let isOpen = $state(false);
+</script>
+
+{#if messages.length > 0}
+	<aside class="alert-card">
+		<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
+			<span class="warning-icon">
+				<IconAlertOctagonFilled />
+			</span>
+			<span class="summary">
+				{messages.length}
+				{messages.length === 1 ? 'active alert' : 'active alerts'}
+			</span>
+			<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
+		</button>
+
+		{#if isOpen}
+			<div transition:slide={{ duration: 450 }} class="content">
+				{#each messages as msg}
+					<div class="message-item">
+						<p class="message-text">
+							{msg.t}
+							{#if msg.l && msg.lt}
+								<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
+									{msg.lt}
+								</a>
+							{/if}
+						</p>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</aside>
+{/if}
+
+<style>
+	.alert-card {
+		margin: 0;
+		border-radius: 8px;
+		background: transparent;
+		position: relative;
+		z-index: 12;
+		margin-bottom: 0;
+		width: 95%;
+		max-width: 750px;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.alert-card:active {
+		filter: brightness(1.2);
+	}
+
+	.trigger {
+		width: 100%;
+		display: flex;
+		border-radius: 8px;
+		align-items: center;
+		padding: 0.1rem 1.05rem;
+		background: var(--alert-orange);
+		color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		position: relative;
+		z-index: 2;
+		height: 40px;
+		transition: all 0.65s 0.2s;
+	}
+
+	.trigger.active {
+		border-radius: 8px 8px 0 0;
+		transition: all 0.01s 0s;
+	}
+
+	.warning-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-right: 1rem;
+		padding: 0;
+	}
+
+	.summary {
+		flex: 1;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.05em;
+		font-weight: 600;
+		font-size: 1rem;
+	}
+
+	.chevron {
+		transition: transform 0.5s ease;
+		display: inline-flex;
+		justify-content: center;
+	}
+
+	.chevron.rotated {
+		transform: rotateX(180deg);
+	}
+
+	.content {
+		padding: 1rem;
+		position: absolute;
+		top: 40px;
+		border-radius: 0 0 8px 8px;
+		left: 0;
+		right: 0;
+		background: var(--alert-orange);
+		filter: brightness(1.2);
+		color: var(--color-title);
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 1rem;
+		font-weight: 600;
+		line-height: 1.2;
+		z-index: 1;
+	}
+
+	.message-item {
+		margin: 10px;
+		padding-bottom: 0.75rem;
+	}
+
+	.message-item p {
+		margin: 0;
+	}
+
+	.message-item a {
+		color: #f2ff00;
+	}
+
+	.message-item:last-child {
+		padding-bottom: 0;
+	}
+</style>
--- a/src/lib/geohash.svelte.ts
+++ b/src/lib/geohash.svelte.ts
@@ -0,0 +1,124 @@
+import { OwlClient, ValidationError, ApiError } from './owlClient';
+import type { ApiStationsNearestStations } from '@owlboard/owlboard-ts';
+import { prefs } from './preferences.svelte';
+
+class NearestStationsState {
+	list = $state<ApiStationsNearestStations.StationsNearestStations[]>([]);
+	currentHash = $state('');
+	loading = $state(false);
+	error = $state<string | null>(null);
+
+	private watcherId: number | null = null;
+
+	private initGeoConfig: PositionOptions = {
+		enableHighAccuracy: false,
+		timeout: 500,
+		maximumAge: Infinity
+	};
+
+	private geoConfig: PositionOptions = {
+		enableHighAccuracy: false,
+		timeout: 20000,
+		maximumAge: 30000
+	};
+
+	constructor() {
+		if (typeof window === 'undefined' || !('geolocation' in navigator)) return;
+
+		$effect.root(() => {
+			$effect(() => {
+				if (prefs.current.NearToMe) {
+					this.startTracking();
+				} else {
+					this.stopTracking();
+				}
+			});
+		});
+	}
+
+	private startTracking() {
+		if (this.watcherId !== null) return; // Already tracking
+		this.loading = true;
+		this.jumpstart();
+		this.initWatcher();
+	}
+
+	private stopTracking() {
+		if (this.watcherId !== null) {
+			navigator.geolocation.clearWatch(this.watcherId);
+			this.watcherId = null;
+		}
+		this.list = [];
+		this.currentHash = '';
+		this.loading = false;
+		this.error = null;
+	}
+
+	private jumpstart() {
+		navigator.geolocation.getCurrentPosition(
+			(pos) => this.handleUpdate(pos.coords.latitude, pos.coords.longitude),
+			(err) => this.handleError(err),
+			this.initGeoConfig
+		);
+	}
+
+	private initWatcher() {
+		this.watcherId = navigator.geolocation.watchPosition(
+			(pos) => this.handleUpdate(pos.coords.latitude, pos.coords.longitude),
+			(err) => this.handleError(err),
+			this.geoConfig
+		);
+	}
+
+	private async handleUpdate(lat: number, lon: number) {
+		const newHash = OwlClient.stationData.generateGeohash(lat, lon);
+		if (newHash !== this.currentHash) {
+			this.loading = true;
+
+			try {
+				const result = await OwlClient.stationData.getNearestStations(newHash);
+				this.list = result.data;
+				this.error = null;
+				this.currentHash = newHash;
+			} catch (e) {
+				this.handleApiError(e);
+			} finally {
+				this.loading = false;
+			}
+		}
+	}
+
+	private handleError(err: GeolocationPositionError) {
+		if (err.code === 1) {
+			this.error = 'Location access denied by device';
+		} else {
+			this.error = 'Waiting for GPS signal...';
+		}
+	}
+
+	private handleApiError(e: unknown) {
+		if (e instanceof ValidationError) {
+			this.error = `Request Error: ${e.reason} (Field: ${e.field})`;
+		} else if (e instanceof ApiError) {
+			switch (e.status) {
+				case 404:
+					this.error = 'No stations found nearby';
+					break;
+				case 429:
+					this.error = 'Too many requests, will retry';
+					break;
+				case 500:
+					this.error = 'Server Error, will retry';
+					break;
+				default:
+					this.error = `Service error: ${e.code}`;
+			}
+		} else {
+			this.error = 'Connection lost, waiting for signal';
+		}
+
+		console.error('OwlBoard API Error:', e);
+	}
+}
+
+export const nearestStationsState = new NearestStationsState();
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -44,7 +44,110 @@
 	font-display: swap;
 }

+/* 100: Thin */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2');
+	font-weight: 100;
+	font-style: italic;
+	font-display: swap;
+}
+
+/* 200: ExtraLight */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* 300: Light */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* 400: Regular / Italic */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
+	font-weight: 400;
+	font-style: italic;
+	font-display: swap;
+}
+
+/* 500: Medium */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* 600: SemiBold */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* 700: Bold */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* 800: ExtraBold */
+@font-face {
+	font-family: 'JetBrains Mono';
+	src: url('/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* Inconsolata Variable */
+@font-face {
+	font-family: 'Inconsolata Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 200 900;
+	font-stretch: 50% 200%;
+	src: url(/type/inconsolata/latin-wdth-normal.woff2) format('woff2-variations');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 :root {
+	/* Fixed Heights */
+	--header-height: 80px;
+	--nav-height: 60px;
+
 	/* Brand Colours */
 	--color-brand: #4fd1d1;
 	--color-accent: #3c6f79;
@@ -55,8 +158,39 @@
 	/* Shadows */
 	--color-shadow: hsla(210, 20%, 5%, 0.35);
 	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-small: 0 4px 6px var(--color-shadow);
 	--shadow-up: 0 -4px 12px var(--color-shadow);
 	--shadow-right: 4px 0 12px var(--color-shadow);
+
+	/* Functional Colours */
+	--location-yellow: #edff22;
+	--delay-orange: #ff914d;
+	--alert-orange: #f87728;
+	--cancel-red: #c60000;
+	--early-blue: #5ec1ff;
+}
+
+/* Pulse Animations */
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes fast-pulse {
+	0%,
+	50%,
+	100% {
+		opacity: 1;
+	}
+	25%,
+	75% {
+		opacity: 0.25;
+	}
 }

 body {
--- a/src/lib/locations-object.svelte.ts
+++ b/src/lib/locations-object.svelte.ts
@@ -1,5 +1,5 @@
-import { OwlClient } from "./owlClient";
-import type { ApiLocationFilter } from '@owlboard/owlboard-ts'
+import { OwlClient } from './owlClient';
+import type { ApiLocationFilter } from '@owlboard/owlboard-ts';

 class LocationStore {
 	data = $state<ApiLocationFilter.LocationFilterObject[]>([]);
@@ -9,7 +9,7 @@ class LocationStore {
 		if (this.loaded) return;

 		try {
-			const fetch = await OwlClient.locationFilter.getLocationFilterData()
+			const fetch = await OwlClient.locationFilter.getLocationFilterData();
 			this.data = fetch.data;
 			this.loaded = true;
 		} catch (err) {
@@ -28,6 +28,20 @@ class LocationStore {
 			return loc.t === query || loc.c === query;
 		});
 	}
+
+	getName(code: string | number | null | undefined): ApiLocationFilter.LocationFilterObject | null {
+		try {
+			if (!code) return null;
+
+			const query = String(code).toUpperCase().trim();
+
+			const match = this.data.find((loc) => loc.t === query || loc.c === query);
+			return match ?? null;
+		} catch (e) {
+			console.error('Error finding location object: ', e);
+			return null;
+		}
+	}
 }

 export const LOCATIONS = new LocationStore();
--- a/src/lib/owlClient.ts
+++ b/src/lib/owlClient.ts
@@ -1,5 +1,6 @@
-import { OwlBoardClient, ValidationError, ApiError } from "@owlboard/owlboard-ts";
-import { browser, dev } from "$app/environment";
+import { OwlBoardClient, ValidationError, ApiError } from '@owlboard/owlboard-ts';
+import { browser, dev } from '$app/environment';
+import { error } from '@sveltejs/kit';

 // Import the runes containing the API Key config Here...

@@ -11,11 +12,55 @@ const getBaseUrl = () => {
 	if (dev) return 'https://test.owlboard.info';

 	return window.location.origin;
-}
+};

 export const OwlClient = new OwlBoardClient(
-    getBaseUrl(),
+	getBaseUrl()
 	// API Key Here when ready!!!
-)
+);
+
+export function ThrowApiError(e: unknown): never {
+	// Handle Request failure
+	if (e instanceof TypeError && e.message === 'Failed to fetch') {
+		throw error(503, {
+			message: 'Unable to connect to the OwlBoard server',
+			name: 'NETWORK_ERROR',
+			code: 'NETWORK_UNREACHABLE'
+		});
+	}
+
+	// Map ApiError 'code' values
+	if (e instanceof ApiError) {
+		console.error(JSON.stringify(e), e.code, 'ERRCODE');
+		let status = 500;
+		if (e.code === 'AUTH') {
+			status = 401;
+		} else if (e.code === 'NOT_FOUND') {
+			status = 404;
+		} else if (e.code === 'RATE_LIMIT') {
+			status = 421;
+		} else if (e.code === 'NETWORK_DISCONNECTED') {
+			status = 503;
+		} else if (e.code === 'VALIDATION') {
+			status = 400;
+		}
+
+		throw error(status, {
+			message: e.message || 'An operational error has occurred',
+			name: e.name || 'API_ERROR',
+			code: e.code || 'UNKNOWN_API_ERROR'
+		});
+	}
+
+	// Fallback for other error kind
+	const genericMessage = e instanceof Error ? e.message : 'An unexpected error occurred.';
+	console.log(e);
+	throw error(500, {
+		message: genericMessage,
+		name: 'CRITICAL_ERROR',
+		code: 'INTERNAL_ERROR',
+		msg: 'UNHANDLED_EXCEPTION'
+	});
+}

 export { ValidationError, ApiError };
--- a/src/lib/preferences.svelte.ts
+++ b/src/lib/preferences.svelte.ts
@@ -0,0 +1,67 @@
+import { browser } from '$app/environment';
+
+export interface Preferences {
+	NearToMe: boolean;
+	ShowPassingTrains: boolean;
+	BoardWakeLock: boolean;
+	AutoRefresh: boolean;
+}
+
+const STORAGE_KEY = 'ob_pref';
+
+const DEFAULT_PREFS: Preferences = {
+	NearToMe: false,
+	ShowPassingTrains: true,
+	BoardWakeLock: true,
+	AutoRefresh: true
+};
+
+function loadPrefs(): Preferences {
+	if (!browser) return DEFAULT_PREFS;
+	const stored = localStorage.getItem(STORAGE_KEY);
+	if (!stored) return DEFAULT_PREFS;
+
+	try {
+		const parsed = JSON.parse(stored);
+		const cleaned = {} as Preferences;
+
+		for (const key of Object.keys(DEFAULT_PREFS) as Array<keyof Preferences>) {
+			cleaned[key] = key in parsed ? parsed[key] : DEFAULT_PREFS[key];
+		}
+		return cleaned;
+	} catch {
+		return DEFAULT_PREFS;
+	}
+}
+
+class PreferencesStore {
+	current = $state<Preferences>(loadPrefs());
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				if (browser) {
+					localStorage.setItem(STORAGE_KEY, JSON.stringify(this.current));
+				}
+			});
+		});
+	}
+
+	toggleNearToMe(enabled: boolean) {
+		this.current.NearToMe = enabled;
+	}
+
+	toggleShowPassingTrains(enabled: boolean) {
+		this.current.ShowPassingTrains = enabled;
+	}
+
+	toggleBoardWakeLock(enabled: boolean) {
+		this.current.BoardWakeLock = enabled;
+	}
+
+	toggleAutoRefresh(enabled: boolean) {
+		this.current.AutoRefresh = enabled;
+	}
+}
+
+export const prefs = new PreferencesStore();
--- a/src/lib/quick-links.svelte.ts
+++ b/src/lib/quick-links.svelte.ts
@@ -0,0 +1,73 @@
+export interface QuickLink {
+	id: string;
+	score: number;
+	lastAccessed: number;
+}
+
+const RETURNED_LENGTH: number = 6;
+const MAX_SCORE: number = 50;
+const MAX_ENTRIES: number = RETURNED_LENGTH * 4;
+
+class QuickLinksService {
+	#links = $state<QuickLink[]>([]);
+
+	constructor() {
+		if (typeof window !== 'undefined') {
+			const saved = localStorage.getItem('ql');
+			if (saved) {
+				try {
+					this.#links = JSON.parse(saved);
+				} catch {
+					this.#links = [];
+				}
+			}
+		}
+	}
+
+	get list(): QuickLink[] {
+		return this.#links.slice(0, RETURNED_LENGTH);
+	}
+
+	recordVisit(id: string) {
+		if (id == '') return;
+		const existing = this.#links.find((l) => l.id === id);
+
+		if (existing) {
+			existing.score += 1;
+			existing.lastAccessed = Date.now();
+		} else {
+			this.#links.push({
+				id: id,
+				score: 1,
+				lastAccessed: Date.now()
+			});
+		}
+
+		// Score decay - if MAX_SCORE reached, divide all by two
+		if (this.#links.some((l) => l.score > MAX_SCORE)) {
+			this.#links.forEach((l) => {
+				l.score = Math.max(1, Math.floor(l.score / 2));
+			});
+		}
+
+		// Sort & Prune
+		const sorted = [...this.#links].sort(
+			(a, b) => b.score - a.score || b.lastAccessed - a.lastAccessed
+		);
+
+		this.#links = sorted.slice(0, MAX_ENTRIES);
+
+		if (typeof window !== 'undefined') {
+			localStorage.setItem('ql', JSON.stringify(this.#links));
+		}
+	}
+
+	reset() {
+		this.#links = [];
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem('ql');
+		}
+	}
+}
+
+export const quickLinks = new QuickLinksService();
--- a/src/lib/utils/time.ts
+++ b/src/lib/utils/time.ts
@@ -0,0 +1,154 @@
+import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
+
+export const estClass = (act: any, est: any) => (act ? 'actual' : 'estimate');
+
+/**
+ * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
+ * Ensures Europe/London timezone irrespective of browser timezone.
+ */
+export function formatUkTime(
+	dateStr: string | Date | undefined,
+	includeSeconds: boolean = false
+): string {
+	if (!dateStr) return '-';
+	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
+
+	if (isNaN(date.getTime())) return '-';
+
+	return date.toLocaleTimeString('en-GB', {
+		hour: '2-digit',
+		minute: '2-digit',
+		...(includeSeconds && { second: '2-digit' }),
+		hour12: false,
+		timeZone: 'Europe/London'
+	});
+}
+
+/**
+ * Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string.
+ * Ensures Europe/London timezone irrespective of browser timezone.
+ */
+export function formatUkDateTime(
+	dateStr: string | Date | undefined,
+	includeSeconds: boolean = false
+): string {
+	if (!dateStr) return '--/--/-- --:--:--';
+
+	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
+
+	if (isNaN(date.getTime())) return '--/--/-- --:--:--';
+
+	return date
+		.toLocaleString('en-GB', {
+			day: '2-digit',
+			month: '2-digit',
+			year: '2-digit',
+			hour: '2-digit',
+			minute: '2-digit',
+			...(includeSeconds && { second: '2-digit' }),
+			hour12: false,
+			timeZone: 'Europe/London'
+		})
+		.replace(',', '');
+}
+
+/**
+ * Specific type that can handle the TrainDetails.ServiceLocation and the ApiStationsBoard.BoardService types for delay calculation
+ */
+interface DelayInput {
+	// Board types
+	sta?: string | null;
+	std?: string | null;
+	eta?: string | null;
+	etd?: string | null;
+	ata?: string | null;
+	atd?: string | null;
+
+	// Journey types
+	pta?: string | null;
+	ptd?: string | null;
+	wta?: string | null;
+	wtd?: string | null;
+	atp?: string | null;
+	wtp?: string | null;
+	etp?: string | null;
+}
+
+/**
+ * Calculates a 'delay' value, in the formats:
+ * RT, 1E, 7L, etc.
+ * @param 'Schedule Location' or 'Board Service' object
+ * @returns Delay string for departure boards
+ */
+export function calculateDelay(loc: DelayInput): {
+	val: string;
+	type: string;
+} {
+	const pairs = [
+		// Departure check (Board: atd/etd vs std | Journey: atd vs ptd/wtd)
+		{ actual: loc.atd || loc.etd, sched: loc.std || loc.ptd || loc.wtd },
+		// Arrival check (Board: ata/eta vs sta | Journey: ata vs pta/wta)
+		{ actual: loc.ata || loc.eta, sched: loc.sta || loc.pta || loc.wta },
+		// Passing check
+		{ actual: loc.atp || loc.etp, sched: loc.wtp }
+	];
+
+	const match = pairs.find((p) => p.actual && p.sched);
+
+	if (!match || !match.actual || !match.sched) return { val: '', type: 'none' };
+
+	const diffMinutes = Math.round((Date.parse(match.actual) - Date.parse(match.sched)) / 60000);
+
+	if (diffMinutes === 0) return { val: 'RT', type: 'ontime' };
+
+	const absDiff = Math.abs(diffMinutes);
+	if (diffMinutes > 0) {
+		return { val: `${absDiff}L`, type: 'late' };
+	} else {
+		return { val: `${absDiff}E`, type: 'early' };
+	}
+}
+
+/**
+ * Accepts a pair of times (string or Date) and outputs a delay class 'delay-early', 'delay-late' or 'delay-rt'
+ * @param sched Scheduled Time (string, Date)
+ * @param act Actual Time (string, Date)
+ */
+export function delayClassFromTimePair(sched: any, act: any): string {
+	if (!sched || !act) return '';
+
+	const s = new Date(sched).getTime();
+	const a = new Date(act).getTime();
+
+	if (isNaN(s) || isNaN(a)) return '';
+
+	const diff = a - s;
+	const oneMinute = 60000;
+
+	// on-time if within one minute
+	if (Math.abs(diff) < oneMinute) {
+		return 'delay-rt';
+	}
+
+	return diff > 0 ? 'delay-late' : 'delay-early';
+}
+
+/**
+ * Accepts a pair of times (string or Date) and returns true if service considered 'on-time'
+ * @param sched Scheduled Time (string, Date)
+ * @param act Actual Time (string, Date)
+ */
+export function isRightTime(
+	sched: string | Date | undefined,
+	act: string | Date | undefined
+): boolean {
+	console.log(`Checking [sched: ${sched}, act: ${act}]`);
+	if (!sched || !act) return false;
+
+	const s = new Date(sched).getTime();
+	const a = new Date(act).getTime();
+
+	if (isNaN(s) || isNaN(a)) return false;
+
+	return Math.abs(a - s) < 60000;
+}
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,25 +2,60 @@
 	import { page } from '$app/state';

 	import stopErr from '$lib/assets/img/stop-error.svg';
-	import Button from '$lib/components/ui/Button.svelte';
+	import noResult from '$lib/assets/img/no-data.svg';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+	import { IconAntennaBarsOff } from '@tabler/icons-svelte-runes';
 </script>

-<div class="error-wrapper">
-	<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+<!-- Will need to check error type, using the upstream code combined with response code -->

+<!-- {#if page.error}
+	{JSON.stringify(page.error)}
+	STATUS: {page.status}
+{/if} -->
+
+<div class="error-wrapper">
+	{#if page.error?.code}
+		{#if page.error.code === 'NOT_FOUND'}
+			<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
+		{:else if page.error.code === 'RATE_LIMIT'}
+			<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+		{:else if page.error.code === 'VALIDATION'}
+			<img class="err-img" src={noResult} alt="" role="presentation" width="150" height="210" />
+		{:else if page.error.code === 'AUTH'}
+			<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+		{:else if page.error.code === 'SERVER'}
+			<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+		{:else if page.error.code === 'NETWORK_DISCONNECTED'}
+			<div class="err-img gentle-flash">
+				<IconAntennaBarsOff size={120} />
+			</div>
+		{:else}
+			<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+		{/if}
+	{:else}
+		<!-- STOP Error image -->
+		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+	{/if}
 	<h2 class="label">{page.status}</h2>

 	<p class="error-message">
 		{page.error?.message ?? 'An unexpected derailment occurred.'}
 	</p>

-	{#if page.error?.owlCode}
+	{#if page.error?.code}
 		<div class="debug-info">
-			<code>Ref: {page.error.owlCode}</code>
+			<code>Ref: {page.error.code}</code>
 		</div>
 	{/if}

+	{#if page.error?.code === 'NETWORK_DISCONNECTED'}
+		<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
+	{:else if page.error?.code === 'NOT_FOUND'}
+		<Button onclick={() => history.back()} color={'accent'}>Go Back</Button>
+	{:else}
 		<Button href={'/'} color={'accent'}>Return to Home</Button>
+	{/if}
 </div>

 <style>
@@ -48,6 +83,19 @@
 		}
 	}

+	@keyframes gentle-flash {
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.25;
+		}
+	}
+
+	.gentle-flash {
+		animation: gentle-flash ease-in-out 2s infinite;
+	}
+
 	.label {
 		color: #ff4444;
 		letter-spacing: 0.2rem;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,18 +2,41 @@
 	import { page } from '$app/state';
 	import { slide, fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
-
+	import { browser } from '$app/environment';
+	import { navigating } from '$app/state';
 	import { LOCATIONS } from '$lib/locations-object.svelte';

+	import Loading from '$lib/components/ui/Loading.svelte';
+	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
+
 	import '$lib/global.css';

 	import logoText from '$lib/assets/round-logo-text.svg';
 	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,
+		IconSpy
+	} from '@tabler/icons-svelte-runes';

-	onMount(() => LOCATIONS.init());
+	onMount(async () => {
+		LOCATIONS.init();
+		if (browser && 'serviceWorker' in navigator) {
+			try {
+				const registration = await navigator.serviceWorker.register('/service-worker.js', {
+					type: 'module'
+				});
+				console.info('OwlBoard Service Worker registered', registration.scope);
+			} catch (error) {
+				console.error('Service Worker installation failed: ', error);
+			}
+		}
+	});

 	let { children } = $props();

@@ -25,13 +48,14 @@
 		{ label: 'Home', path: '/', icon: IconHome },
 		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
 		{ label: 'Options', path: '/preferences/', icon: IconSettings },
-		{ label: 'About', path: '/about/', icon: IconHelp }
+		{ label: 'About', path: '/about/', icon: IconHelp },
+		{ label: 'Privacy Policy', path: '/privacy/', icon: IconSpy }
 	];

 	let navWidth = $state(0);
 	let menuOpen = $state(false);
-	const ITEM_WIDTH = 70;
-	const MORE_BUTTON_WIDTH = 70;
+	const ITEM_WIDTH = 110;
+	const MORE_BUTTON_WIDTH = 110;

 	const activePath = $derived(page.url?.pathname ?? '');

@@ -77,13 +101,20 @@
 </header>

 <main>
+	<TimezoneWarning />
+
+	{#if navigating && navigating.to}
+		<Loading />
+	{:else}
 		{@render children()}
+	{/if}
 </main>

 <nav bind:clientWidth={navWidth}>
 	<!-- Dynamic Nav Elements Here! -->
 	{#each visibleItems as item}
 		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+		{@const Icon = item.icon}
 		<a
 			href={item.path}
 			class="nav-item"
@@ -91,7 +122,7 @@
 			aria-current={isActive ? 'page' : undefined}
 			onclick={() => (menuOpen = false)}
 		>
-			<item.icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />
+			<Icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />

 			<span class="label">{item.label}</span>
 		</a>
@@ -116,6 +147,7 @@
 			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
 				{#each hiddenItems as item}
 					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+					{@const Icon = item.icon}
 					<a
 						href={item.path}
 						class="menu-popover-item"
@@ -123,7 +155,7 @@
 						class:active={isActive}
 						aria-current={isActive ? 'page' : undefined}
 					>
-						<item.icon size={20} />
+						<Icon size={20} />
 						<span>{item.label}</span>
 					</a>
 				{/each}
@@ -137,14 +169,14 @@
 	<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.
+		Please expand your view to at least 320px to view the app.
 	</p>
 </div>

 <style>
 	header {
 		top: 0;
-		height: 80px;
+		height: var(--header-height);
 		box-shadow: var(--shadow-std);
 	}
 	.logo-link {
@@ -191,13 +223,12 @@
 		min-height: 100dvh;
 		box-sizing: border-box;
 		background-color: var(--color-bg-dark);
-		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}

 	nav {
 		display: flex;
 		bottom: 0;
-		height: 60px;
+		height: var(--nav-height);
 		box-shadow: var(--shadow-up);
 	}

@@ -310,7 +341,7 @@
 		display: none;
 	}

-	@media (max-width: 299px) {
+	@media (max-width: 319px) {
 		.viewport-guard {
 			display: block;
 			position: fixed;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
 	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
+	import HeadcodeSearchCard from '$lib/components/ui/cards/HeadcodeSearchCard.svelte';
+	import NearbyStationsCard from '$lib/components/ui/cards/NearbyStationsCard.svelte';
+	import QuickLinksCard from '$lib/components/ui/cards/QuickLinksCard.svelte';
 </script>

 <div class="card-container">
 	<LocationBoardCard />
+	<HeadcodeSearchCard />
+	<NearbyStationsCard />
+	<QuickLinksCard />
 </div>

 <style>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -11,13 +11,15 @@
 </script>

 <div class="logo-container">
-	<img
-		class="logo"
-		src={logo}
-		alt="OwlBoard Logo"
+	<button
+		type="button"
+		class="logo-btn"
 		onclick={handleLogoTap}
 		class:animate={isSpinning}
-	/>
+		aria-label="Spin the OwlBoard logo"
+	>
+		<img class="logo-img" src={logo} alt="OwlBoard Logo" />
+	</button>
 </div>

 <section class="about">
@@ -30,9 +32,9 @@
 	</p>
 	<p class="amble">
 		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
-		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the
-		app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with
-		many of the sculptures still in the area.
+		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links
+		to Bath, where the app has been built and is run, relating to 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
@@ -59,6 +61,17 @@
 		text-align: center;
 	}

+	.logo-btn {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		display: inline-block;
+		padding-top: 25px;
+		margin: auto;
+		width: clamp(80px, 20vw, 200px);
+	}
+
 	@keyframes owl-spin {
 		0% {
 			transform: rotate(0deg);
@@ -71,14 +84,13 @@
 		}
 	}

-	.logo {
-		padding-top: 25px;
-		margin: auto;
+	.logo-img {
+		width: 100%;
 		height: auto;
-		width: clamp(80px, 20vw, 200px);
+		display: block;
 	}

-	.logo.animate {
+	.logo-btn.animate {
 		animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 	}

--- a/src/routes/board/+page.svelte
+++ b/src/routes/board/+page.svelte
@@ -1,13 +1,241 @@
-<section>Live board are not yet implemented on the server</section>
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import { quickLinks } from '$lib/quick-links.svelte';
+	import { invalidateAll } from '$app/navigation';
+	import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
+
+	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
+	import StaffServicesGrid from '$lib/components/ui/station-board/StaffServicesGrid.svelte';
+
+	let { data } = $props();
+	let now = $state(new Date());
+	let dataAgeInSeconds = $derived(
+		Math.floor((now.getTime() - new Date(data.boardData.producedAt).getTime()) / 1000)
+	);
+	let live = $derived(dataAgeInSeconds < 45);
+
+	// Handle auto-refreshing & Wake-lock
+	$effect(() => {
+		let intervalId: number | undefined;
+		let wakeLock: WakeLockSentinel | null = null;
+
+		const requestWakeLock = async () => {
+			if ('wakeLock' in navigator && !wakeLock) {
+				try {
+					wakeLock = await navigator.wakeLock.request('screen');
+					console.log('Wake lock obtained');
+				} catch (error) {
+					console.warn('Wake lock request rejected: ', error);
+				}
+			}
+		};
+
+		const releaseWakeLock = async () => {
+			if (wakeLock) {
+				try {
+					await wakeLock.release();
+					console.log('Wake lock released');
+				} catch (error) {
+					console.error('Wake lock release failed: ', error);
+				}
+				wakeLock = null;
+			}
+		};
+
+		const startPolling = async () => {
+			await requestWakeLock();
+			if (intervalId) return;
+			intervalId = window.setInterval(async () => {
+				try {
+					console.log('Invalidating data');
+					await invalidateAll();
+				} catch (error) {
+					console.error('Background data fetch failed: ', error);
+				}
+			}, 20000);
+			console.log('Polling started');
+		};
+
+		const stopPolling = async () => {
+			if (intervalId) {
+				window.clearInterval(intervalId);
+				intervalId = undefined;
+				console.log('Polling ended');
+			}
+			await releaseWakeLock();
+		};
+
+		const handleVisibilityChange = async () => {
+			if (document.hidden) {
+				stopPolling();
+			} else {
+				startPolling();
+				await invalidateAll();
+			}
+		};
+
+		if (!document.hidden) {
+			startPolling();
+		}
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			stopPolling();
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	});
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			now = new Date();
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+
+	const currentBoardId = $derived(
+		data.BoardLocation ? (data.BoardLocation.c ?? data.BoardLocation.t) : null
+	);
+
+	// Update 'QuickLinks' when currentBoardId changes
+	$effect(() => {
+		if (currentBoardId) {
+			// Keep the execution and logs inside untrack to isolate dependencies completely
+			untrack(() => {
+				quickLinks.recordVisit(currentBoardId);
+				console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
+			});
+		}
+	});
+</script>
+
+<section class="board-wrapper">
+	<div class="time-data">
+		<div class="loadedlive">
+			<div class="liveflash {live ? 'isLive' : 'notLive'}"></div>
+			<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
+		</div>
+		<span class="time-now">{formatUkTime(now, true)}</span>
+	</div>
+	{#if data.boardData.data.m?.length}
+		<StationAlertCard messages={data.boardData.data.m} />
+	{/if}
+	{#if data.boardData.data.s?.length}
+		<div class="service-list-wrapper">
+			<StaffServicesGrid services={data.boardData.data.s} />
+		</div>
+	{:else}
+		<div class="no-service">
+		No services at this location in the next three hours
+		</div>
+	{/if}
+</section>

 <style>
-	section {
-		font-family: 'URW Gothic', sans-serif;
-		text-align: center;
-		font-size: 2rem;
-		width: 90%;
+	.board-wrapper {
+		display: flex;
+		height: calc(100dvh - var(--nav-height) - var(--header-height));
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		margin: 0 auto;
+		padding: 0;
+		overflow: hidden;
+		gap: 0;
+	}
+
+	.no-service {
+		display: block;
 		margin: auto;
-		padding-top: 25px;
-		max-width: 500px;
+		text-align: center;
+		font-weight: 600;
+		letter-spacing: 0.15ch;
+		font-size: 1.4rem;
+		max-width: 75%;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
+	.time-data {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 90%;
+		max-width: 700px;
+		margin: 10px auto;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
+	.loadedlive {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.liveflash {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+	}
+
+	div.notLive {
+		background-color: #ef4444;
+		animation:
+			led-blink 1s steps(1, start) infinite,
+			led-halo-expand 1s steps(1, start) infinite;
+	}
+
+	div.isLive {
+		background-color: #10b981;
+		animation: led-pulse 2.5s infinite ease-in-out;
+	}
+
+	@keyframes led-blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.2;
+			filter: saturate(0.2);
+		}
+	}
+	@keyframes led-pulse {
+		0%,
+		100% {
+			opacity: 1;
+			filter: saturate(1);
+			box-shadow: 0 0 6px 1px rgba(16, 185, 129, 0.4);
+		}
+		50% {
+			opacity: 0.2;
+			filter: saturate(0.2);
+			box-shadow: 0 0 2px 0px rgba(16, 185, 129, 0.1);
+		}
+	}
+
+	.time-loaded,
+	.time-now {
+		font-variant-numeric: tabular-nums;
+	}
+
+	.time-loaded {
+		font-size: 0.9rem;
+	}
+
+	.time-now {
+		font-weight: 600;
+		font-size: 1rem;
+	}
+
+	.service-list-wrapper {
+		flex: 1;
+		overflow-y: auto;
+		height: calc(100dvh - 60px);
+		width: 97%;
+		max-width: 700px;
+		margin-bottom: 5px;
 	}
 </style>
--- a/src/routes/board/+page.ts
+++ b/src/routes/board/+page.ts
@@ -1,37 +1,40 @@
 import { LOCATIONS } from '$lib/locations-object.svelte';
+import { ApiError, OwlClient, ValidationError } from '$lib/owlClient';
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';

-export const load: PageLoad = async ({ url }) => {
+export const load: PageLoad = async ({ url, fetch }) => {
 	const locId = url.searchParams.get('loc');

 	if (!LOCATIONS.loaded) {
 		await LOCATIONS.init();
 	}
-
-	let title: string = '';
-
 	if (!locId) {
 		error(400, {
 			message: 'Location not provided',
-			owlCode: 'NO_LOCATION_IN_PATH'
+			code: 'VALIDATION'
 		});
 	}

-	if (locId) {
-		const location = LOCATIONS.find(locId);
+	const BoardLocation = LOCATIONS.find(locId);

-		if (location) {
-			title = location.n || location.t;
-		} else {
+	if (!BoardLocation) {
 		error(404, {
 			message: `Location (${locId.toUpperCase()}) not found`,
-				owlCode: 'INVALID_LOCATION_CODE'
+			code: 'VALIDATION'
 		});
 	}
-	}
+	const title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
+
+	try {
+		const boardData = await OwlClient.board.getByLocation(locId, fetch);
+
 		return {
 			title,
-		location
+			BoardLocation,
+			boardData
 		};
+	} catch (e: unknown) {
+		throw e;
+	}
 };
--- a/src/routes/pis/+page.svelte
+++ b/src/routes/pis/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
+	import HeadcodeSearchCard from '$lib/components/ui/cards/HeadcodeSearchCard.svelte';
 	import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
 	import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
-    import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 	import type { ApiPisObject } from '@owlboard/owlboard-ts';
 	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';

 	let results = $state<ApiPisObject.PisObjects[]>([]);
 	let resultsLoaded = $state<boolean>(false);
-    let errorState = $state<{status: number, message: string} | null>(null);
+	let errorState = $state<{ status: number; message: string } | null>(null);

 	async function handleStartEndSearch(start: string, end: string): Promise<void> {
 		console.log(`PIS Search: ${start}-${end}`);
@@ -17,14 +18,17 @@
 		try {
 			const response = await OwlClient.pis.getByStartEndCrs(start, end);
 			results = response.data || [];
-        } catch (e) {
+		} catch (e: unknown) {
 			if (e instanceof ValidationError) {
 				errorState = { status: 400, message: e.message };
 			} else if (e instanceof ApiError) {
-                console.log(e)
+				console.log(e);
 				errorState = { status: 20, message: e.message };
 			} else {
-                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+				errorState = {
+					status: 0,
+					message: `Unknown Error: ${e instanceof Error ? e.message : String(e)}`
+				};
 			}
 		} finally {
 			resultsLoaded = true;
@@ -36,15 +40,18 @@
 		errorState = null;
 		try {
 			const response = await OwlClient.pis.getByCode(code);
-            results = response.data || []
+			results = response.data || [];
 		} catch (e) {
 			if (e instanceof ValidationError) {
 				errorState = { status: 400, message: e.message };
 			} else if (e instanceof ApiError) {
-                console.log(e)
+				console.log(e);
 				errorState = { status: 20, message: e.message };
 			} else {
-                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+				errorState = {
+					status: 0,
+					message: `Unknown Error: ${e instanceof Error ? e.message : String(e)}`
+				};
 			}
 		} finally {
 			resultsLoaded = true;
@@ -60,6 +67,7 @@

 {#if !resultsLoaded}
 	<div class="card-container">
+		<HeadcodeSearchCard />
 		<PisStartEndCard onsearch={handleStartEndSearch} />
 		<PisCode onsearch={handleCodeSearch} />
 	</div>
@@ -68,31 +76,35 @@
 		{#if errorState}
 			<span class="errCode">Error: {errorState.status}</span>
 			<span class="errMsg">{errorState.message}</span>
-        {:else}
-            {#if results.length}
-                <h2 class="result-title">{results.length} Result{#if results.length > 1}s{/if} found</h2>
+		{:else if results.length}
+			<h2 class="result-title">
+				{results.length} Result{#if results.length > 1}s{/if} found
+			</h2>
 			<table class="result-table">
 				<thead>
 					<tr>
 						<th style="width:16%">TOC</th>
 						<th style="width:14%">Code</th>
 						<th style="width:70%">Locations</th>
-                    </tr></thead>
+					</tr></thead
+				>
 				{#each results as result}
-                        <tbody><tr>
-                            <td><TocStyle toc={result.toc || ""} /></td>
+					<tbody
+						><tr>
+							<td><TocStyle toc={result.toc || ''} /></td>
 							<td>{result.code}</td>
 							<td class="locations-row">{result.crsStops?.join(' ') || ''}</td>
-                        </tr></tbody>
+						</tr></tbody
+					>
 				{/each}
 			</table>
 		{:else}
 			<p class="no-results">No matching results</p>
 		{/if}
-        {/if}
 		<div class="reset-button-container">
 			<Button onclick={clearResults}>Reset</Button>
-</div>    </div>
+		</div>
+	</div>
 {/if}

 <style>
@@ -141,7 +153,7 @@
 	}

 	.locations-row {
-        font-family:'Courier New', Courier, monospace;
+		font-family: 'Courier New', Courier, monospace;
 		text-align: left;
 		padding-left: 20px;
 	}
--- a/src/routes/preferences/+page.svelte
+++ b/src/routes/preferences/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+	import Toggle from '$lib/components/ui/form-elements/Toggle.svelte';
+	import { quickLinks } from '$lib/quick-links.svelte';
+	import { prefs } from '$lib/preferences.svelte';
+</script>
+
+<section class="page-body">
+	<BaseCard header={'Display Settings'}>
+		<section class="card-content">
+			<Button onclick={() => quickLinks.reset()}>Reset QuickLinks</Button>
+			<div class="toggle-container">
+				<Toggle
+					label={'Show stations near to you'}
+					id={'toggle-nearby-stations'}
+					checked={prefs.current.NearToMe}
+					onchange={(checked) => prefs.toggleNearToMe(checked)}
+				/>
+				<Toggle
+					label={'Show passsing trains on boards'}
+					id={'toggle-passing-trains'}
+					checked={prefs.current.ShowPassingTrains}
+					onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
+				/>
+				<Toggle
+					label={'Keep screen awake on live pages'}
+					id={'toggle-board-wake-lock'}
+					checked={prefs.current.BoardWakeLock}
+					onchange={(checked) => prefs.toggleBoardWakeLock(checked)}
+				/>
+				<Toggle
+					label={'Auto-refresh data'}
+					id={'toggle-auto-refresh'}
+					checked={prefs.current.AutoRefresh}
+					onchange={(checked) => prefs.toggleAutoRefresh(checked)}
+				/>
+			</div>
+		</section>
+	</BaseCard>
+</section>
+
+<style>
+	.page-body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem 0 1rem 0;
+	}
+
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		padding: 5px 0 5px 0;
+	}
+
+	.toggle-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+</style>
--- a/src/routes/preferences/+page.ts
+++ b/src/routes/preferences/+page.ts
@@ -0,0 +1,5 @@
+export const load = () => {
+	return {
+		title: 'Preferences'
+	};
+};
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+</script>
+
+<section class="policy-block-container">
+	<p class="policy-meta"><em>Last updated: May 2026</em></p>
+
+	<p class="policy-intro">
+		The OwlBoard project is built to help you track trains, not track you. Here is exactly what data
+		is used, how it is used, and why.
+	</p>
+
+	<hr class="policy-divider" />
+
+	<section class="policy-section">
+		<h3 class="section-heading">1. The Data Processed (And What Is Discarded)</h3>
+
+		<ul class="policy-list">
+			<li class="list-item">
+				<strong class="highlight-text">Email Addresses:</strong> During sign-up, an email address is
+				requested solely to send a verification code. This needs to happen, as some data is
+				restricted to rail staff only due to licensing restrictions.
+				<strong
+					>The moment the verification code is sent, the email address is permanently deleted from
+					the system.</strong
+				> It is not stored, it is not logged, and it cannot be looked up later.
+			</li>
+			<li class="list-item">
+				<strong class="highlight-text">Platform Identity:</strong> Instead of an email, an account
+				is identified by two things:
+				<ol class="policy-nested-list">
+					<li>
+						A unique alphanumeric <strong class="code-text">"key"</strong> generated randomly for the
+						device upon verification.
+					</li>
+					<li>The <strong class="code-text">domain portion</strong> of the registration email.</li>
+				</ol>
+				<blockquote class="policy-example">
+					<strong>Example:</strong> If signing up as <code>user@owlboard.info</code>, the email is
+					wiped, and the account identifier becomes <code>[Your-Secret-Key] @ owlboard.info</code>.
+					This allows OwlBoard to manage access without knowing who you are.
+				</blockquote>
+			</li>
+			<li class="list-item">
+				<strong class="highlight-text">Fuzzy Location Data:</strong> If the "Near to Me" toggle is
+				enabled, exact GPS coordinates are calculated, but never leave your device. Your device
+				compresses the position into a
+				<strong class="highlight-text">"fuzzy location block"</strong> (a geohash) roughly 1.2km by 0.6km
+				in size before contacting the server to request nearby stations. OwlBoard only processes that
+				neighborhood block—never an exact location.
+			</li>
+			<li class="list-item">
+				<strong class="highlight-text">Server Logs &amp; IP Addresses:</strong> Like any web application,
+				self-hosted security tools and the Web Application Firewall (WAF) temporarily process network
+				IP addresses. This is strictly for system health, infrastructure monitoring, and blocking malicious
+				or automated attacks.
+			</li>
+		</ul>
+	</section>
+
+	<hr class="policy-divider" />
+
+	<section class="policy-section">
+		<h3 class="section-heading">2. What Is Considered "Personal Data"?</h3>
+
+		<p class="policy-text">
+			Under the GDPR, "Personal Data" is anything that can directly or indirectly pinpoint a living
+			individual.
+		</p>
+		<p class="policy-text">
+			Because email addresses are discarded instantly and location hardware telemetry is fuzzed
+			directly on the device, <strong
+				>station boards, preferences, and account keys are completely pseudonymized.</strong
+			> However, because network IP addresses are technically classified as personal data under European
+			law, transient security logs are treated with the highest level of guardrail protection.
+		</p>
+	</section>
+
+	<hr class="policy-divider" />
+
+	<section class="policy-section">
+		<h3 class="section-heading">
+			3. Subject Access Requests (SAR) &amp; The Right to be Forgotten
+		</h3>
+
+		<p class="policy-text">
+			Absolute sovereignty over your digital footprint should be standard, without jumping through
+			bureaucratic hoops. There is no need to send an email to exercise GDPR rights:
+		</p>
+
+		<ul class="policy-list">
+			<li class="list-item">
+				<strong class="highlight-text">Instant SAR (Right of Access):</strong> The
+				<strong>Account</strong> dashboard contains a dedicated section displaying every single line of
+				data which can be identified with the account key block. It can be viewed or copied instantly.
+			</li>
+			<li class="list-item">
+				<strong class="highlight-text">The Right to be Forgotten (Instant Erasure):</strong> A
+				prominent <strong>"Delete Account"</strong> button is available on that same page. Clicking this
+				instantly wipes the account key. You will be able to re-register at any time, and all of your
+				preferences remain only on your device.
+			</li>
+		</ul>
+		<p class="policy-text">
+			While the pseudonymized settings left behind are not technically personal data once
+			disconnected from an identity, the OwlBoard project operates on a simple philosophy. When the
+			delete button is pressed, the data is erased.
+		</p>
+	</section>
+
+	<hr class="policy-divider" />
+
+	<section class="policy-section">
+		<h3 class="section-heading">4. No Third-Party Conglomerates</h3>
+
+		<p class="policy-text">
+			All data is hosted transparently on isolated, self-hosted server infrastructure in Somerset.
+			OwlBoard does not use third-party analytics trackers, tracking cookies, or advertising
+			networks.
+		</p>
+	</section>
+</section>
+
+<style>
+	.policy-block-container {
+		margin: 1rem auto;
+		width: 90%;
+		max-width: 650px;
+		font-family: 'URW Gothic', sans-serif;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	.policy-block-container:last-child {
+		padding-bottom: 15px;
+	}
+
+	.policy-meta {
+		font-size: 0.875rem;
+		color: var(--color-text-muted, #64748b);
+		margin-bottom: 2rem;
+	}
+
+	.policy-intro {
+		font-size: 1.125rem;
+		line-height: 1.6;
+		margin-bottom: 2rem;
+	}
+
+	.policy-divider {
+		border: 0;
+		height: 1px;
+		background: var(--color-border, #e2e8f0);
+		margin: 2rem 0;
+	}
+
+	/* --- Section Blocks --- */
+	.policy-section {
+		margin-bottom: 2.5rem;
+	}
+
+	.section-heading {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-top: 0;
+		margin-bottom: 1.25rem;
+	}
+
+	.policy-text {
+		line-height: 1.6;
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+
+	/* --- Lists & Typography Elements --- */
+	.policy-list {
+		list-style-type: disc;
+		padding-left: 1.5rem;
+		margin: 0 0 1.5rem 0;
+	}
+
+	.list-item {
+		line-height: 1.6;
+		margin-bottom: 1.25rem;
+	}
+
+	.list-item:last-child {
+		margin-bottom: 0;
+	}
+
+	.policy-nested-list {
+		list-style-type: decimal;
+		padding-left: 1.5rem;
+		margin: 0.5rem 0;
+	}
+
+	.policy-nested-list li {
+		margin-bottom: 0.5rem;
+	}
+
+	.policy-example {
+		background-color: var(--color-bg-light);
+		border-left: 4px solid var(--color-accent);
+		margin: 1rem 0;
+		padding: 1rem;
+		font-style: normal;
+		font-size: 0.95rem;
+		line-height: 1.5;
+		border-radius: 0 4px 4px 0;
+	}
+
+	.code-text,
+	.policy-example code {
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: 0.875rem;
+		background-color: var(--color-accent);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+	}
+</style>
--- a/src/routes/privacy/+page.ts
+++ b/src/routes/privacy/+page.ts
@@ -0,0 +1,5 @@
+export const load = () => {
+	return {
+		title: 'Privacy'
+	};
+};
--- a/src/routes/trains/+page.svelte
+++ b/src/routes/trains/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import NoResults from '$lib/components/ui/NoResults.svelte';
+	import TrainService from '$lib/components/ui/TrainService.svelte';
+	let { data } = $props();
+</script>
+
+<h6 style="text-align:center;width=100%;margin:auto;padding-top:1rem;font-size:1rem;">
+	DateSelector
+</h6>
+{#if data.results.length === 0}
+	<NoResults message={'No trains found on this date with this headcode.'} />
+{:else}
+	<div class="result-boxes">
+		{#each data.results as service (service.r)}
+			<TrainService {service} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.result-boxes {
+		width: 95%;
+		margin: auto;
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 1rem;
+	}
+</style>
--- a/src/routes/trains/+page.ts
+++ b/src/routes/trains/+page.ts
@@ -0,0 +1,29 @@
+import { OwlClient, ApiError, ValidationError, ThrowApiError } from '$lib/owlClient';
+import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ fetch, url }) => {
+	const headcode = url.searchParams.get('h');
+	let dateParam = url.searchParams.get('d');
+	const toc = url.searchParams.get('t') || '';
+
+	const date: string | Date = dateParam === '' || dateParam === null ? new Date() : dateParam;
+
+	// Validation removed, handled by the API Client Lib
+
+	// Declared outside of the try so that it can be used in both the try and catch blocks
+	let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[];
+
+	try {
+		const response = await OwlClient.trains.getByHeadcode(headcode || '', date, toc, fetch);
+
+		let title = !!headcode ? headcode.toUpperCase() : 'Error';
+		results = response.data;
+		return {
+			title: title,
+			results: results
+		};
+	} catch (e: unknown) {
+		ThrowApiError(e);
+	}
+};
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -0,0 +1,121 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference lib="webworker" />
+
+import type { ApiEnvelope } from '@owlboard/api-schema-types';
+import { build, files, version } from '$service-worker';
+
+const sw = self as unknown as ServiceWorkerGlobalScope;
+const CACHE_NAME = `owlboard-cache-${version}`;
+const ASSETS = [
+	...build,
+	...files.filter((file) => !file.endsWith('manifest.json') && !file.startsWith('/icons/')),
+	'/'
+];
+
+sw.addEventListener('install', (event) => {
+	sw.skipWaiting();
+	event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
+});
+
+sw.addEventListener('activate', (event) => {
+	event.waitUntil(
+		Promise.all([
+			caches.keys().then((keys) => {
+				return Promise.all(
+					keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
+				);
+			}),
+			sw.clients.claim()
+		])
+	);
+});
+
+sw.addEventListener('fetch', (event) => {
+	const { request } = event;
+	if (request.method !== 'GET') return;
+
+	const url = new URL(request.url);
+
+	// Uncached static assets
+	if (url.pathname.endsWith('manifest.json') || url.pathname.includes('/icons/')) {
+		event.respondWith(fetch(request));
+		return;
+	}
+
+	// Static Assets (Cache-First)
+	if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) {
+		event.respondWith(caches.match(request).then((res) => res || fetch(request)));
+		return;
+	}
+
+	// Cachable API Responses - stale-while-revalidate
+	if (url.pathname === '/api/v3/locationFilter/data') {
+		event.respondWith(
+			caches.open('ob-dynamic-cache').then(async (cache) => {
+				const cachedResponse = await cache.match(request);
+
+				// Ensure fallback response exists
+				const makeOfflineFallback = () => {
+					const errorObject: ApiEnvelope.Envelope = {
+						e: {
+							code: 'NETWORK_DISCONNECTED',
+							msg: 'Cannot connect to the OwlBoard server'
+						},
+						t: Math.floor(Date.now() / 1000)
+					};
+					return new Response(JSON.stringify(errorObject), {
+						status: 503,
+						headers: { 'Content-Type': 'application/json' }
+					});
+				};
+
+				const networkFetch = fetch(request)
+					.then((networkResponse) => {
+						if (networkResponse.ok) {
+							cache.put(request, networkResponse.clone());
+						}
+						return networkResponse;
+					})
+					.catch(() => {
+						// If offline & cache empty, return fallback
+						return makeOfflineFallback();
+					});
+
+				// If cachedResponse is undefined, networkFetch safely resolves to a Response
+				return cachedResponse || networkFetch;
+			})
+		);
+		return;
+	}
+
+	// Offline API Fallback (Network-First)
+	if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
+		event.respondWith(
+			fetch(request).catch(() => {
+				const errorObject: ApiEnvelope.Envelope = {
+					e: {
+						code: 'NETWORK_DISCONNECTED',
+						msg: 'Cannot connect to the OwlBoard server'
+					},
+					t: Math.floor(Date.now() / 1000)
+				};
+				return new Response(JSON.stringify(errorObject), {
+					status: 503,
+					headers: { 'Content-Type': 'application/json' }
+				});
+			})
+		);
+		return;
+	}
+
+	// Nav fallback - return fallback page, if offline and page requested
+	if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
+		event.respondWith(
+			fetch(request).catch(() => {
+				// Serve svelte fallback page
+				return caches.match('/') as Promise<Response>;
+			})
+		);
+		return;
+	}
+});
--- a/static/api/tiplocs
+++ b/static/api/tiplocs
@@ -1,106 +0,0 @@
-[
-  {"n":"Manchester Piccadilly","t":"MANPICD","c":"MAN","s":"manchester piccadilly man manpicd"},
-  {"n":"Manchester Victoria","t":"MCV","c":"MCV","s":"manchester victoria mcv"},
-  {"n":"Manchester Oxford Road","t":"MCOR","c":"MCO","s":"manchester oxford road mco mcor"},
-  {"n":"Manchester Airport","t":"MANAPTL","c":"MIA","s":"manchester airport mia manaptl"},
-  {"n":"London Euston","t":"EUSTON","c":"EUS","s":"london euston eus euston"},
-  {"n":"London Kings Cross","t":"KGX","c":"KGX","s":"london kings cross kgx kingscross"},
-  {"n":"London St Pancras International","t":"STPANCR","c":"STP","s":"london st pancras international stp stpancr"},
-  {"n":"London Paddington","t":"PADTON","c":"PAD","s":"london paddington pad padton"},
-  {"n":"London Victoria","t":"VIC","c":"VIC","s":"london victoria vic"},
-  {"n":"London Liverpool Street","t":"LIVST","c":"LST","s":"london liverpool street lst livst"},
-  {"n":"London Bridge","t":"LONGBR","c":"LBG","s":"london bridge lbg longbr"},
-  {"n":"Birmingham New Street","t":"BHMNEWST","c":"BHM","s":"birmingham new street bhm bhmnewst bham"},
-  {"n":"Birmingham Moor Street","t":"BHMMRS","c":"BMO","s":"birmingham moor street bmo bhmmrs"},
-  {"n":"Birmingham Snow Hill","t":"BHMSH","c":"BSW","s":"birmingham snow hill bsw bhmsh"},
-  {"n":"Leeds","t":"LEEDS","c":"LDS","s":"leeds lds"},
-  {"n":"York","t":"YORK","c":"YRK","s":"york yrk"},
-  {"n":"Liverpool Lime Street","t":"LIVLST","c":"LIV","s":"liverpool lime street liv livlst"},
-  {"n":"Liverpool Central","t":"LIVCEN","c":"LVC","s":"liverpool central lvc livcen"},
-  {"n":"Sheffield","t":"SHEFFLD","c":"SHF","s":"sheffield shf sheffld"},
-  {"n":"Nottingham","t":"NOTTM","c":"NOT","s":"nottingham not nottm"},
-  {"n":"Derby","t":"DERBY","c":"DBY","s":"derby dby"},
-  {"n":"Leicester","t":"LEICEST","c":"LEI","s":"leicester lei leicest"},
-  {"n":"Bristol Temple Meads","t":"BRSTLTM","c":"BRI","s":"bristol temple meads bri brstltm"},
-  {"n":"Cardiff Central","t":"CDFCEN","c":"CDF","s":"cardiff central cdf cdfcen"},
-  {"n":"Newcastle","t":"NEWCAST","c":"NCL","s":"newcastle ncl newcast"},
-  {"n":"Edinburgh Waverley","t":"EDINBUR","c":"EDB","s":"edinburgh waverley edb edinbur"},
-  {"n":"Glasgow Central","t":"GLASCEN","c":"GLC","s":"glasgow central glc glascen"},
-  {"n":"Glasgow Queen Street","t":"GLAQS","c":"GLQ","s":"glasgow queen street glq glaqs"},
-  {"n":"Reading","t":"READING","c":"RDG","s":"reading rdg"},
-  {"n":"Oxford","t":"OXFORD","c":"OXF","s":"oxford oxf"},
-  {"n":"Cambridge","t":"CAMBRDG","c":"CBG","s":"cambridge cbg cambrdg"},
-  {"n":"Peterborough","t":"PBOUGH","c":"PBO","s":"peterborough pbo pbough"},
-  {"n":"Doncaster","t":"DONCAST","c":"DON","s":"doncaster don doncast"},
-  {"n":"Crewe","t":"CREWE","c":"CRE","s":"crewe cre"},
-  {"n":"Preston","t":"PRESTON","c":"PRE","s":"preston pre"},
-  {"n":"Blackpool North","t":"BPLNOR","c":"BPN","s":"blackpool north bpn bplnor"},
-  {"n":"Bolton","t":"BOLTON","c":"BON","s":"bolton bon"},
-  {"n":"Huddersfield","t":"HUDDSFD","c":"HUD","s":"huddersfield hud huddsfd"},
-  {"n":"Stockport","t":"STOCKPT","c":"SPT","s":"stockport spt stockpt"},
-  {"n":"Wigan North Western","t":"WIGNW","c":"WGN","s":"wigan north western wgn wignw"},
-    {"n":"Bath Spa","t":"BATHSPA","c":"BTH","s":"bath spa bth bathspa"},
- {"n":"Exeter St Davids","t":"EXD","c":"EXD","s":"exeter st davids exd"},
-  {"n":"Plymouth","t":"PLYMTH","c":"PLY","s":"plymouth ply plymth"},
-  {"n":"Truro","t":"TRURO","c":"TRU","s":"truro tru"},
-  {"n":"Aberdeen","t":"ABERDN","c":"ABD","s":"aberdeen abd aberdn"},
-  {"n":"Inverness","t":"INVNESS","c":"INV","s":"inverness inv invness"},
-  {"n":"Perth","t":"PERTH","c":"PTH","s":"perth pth"},
-  {"n":"Dundee","t":"DUNDEE","c":"DEE","s":"dundee dee"},
-  {"n":"Stirling","t":"STIRLNG","c":"STG","s":"stirling stg stirlng"},
-  {"n":"Falkirk Grahamston","t":"FLKGRA","c":"FKG","s":"falkirk grahamston fkg flkgra"},
-  {"n":"Motherwell","t":"MOTHRWL","c":"MTH","s":"motherwell mth mothrwl"},
-  {"n":"Paisley Gilmour Street","t":"PAISGL","c":"PYG","s":"paisley gilmour street pyg paisgl"},
-  {"n":"Greenock Central","t":"GRNOCK","c":"GKC","s":"greenock central gkc grnock"},
-  {"n":"Ayr","t":"AYR","c":"AYR","s":"ayr"},
-  {"n":"Carlisle","t":"CARLISL","c":"CAR","s":"carlisle car carlisl"},
-  {"n":"Penrith North Lakes","t":"PNRITH","c":"PNR","s":"penrith north lakes pnr pnrith"},
-  {"n":"Kendal","t":"KENDAL","c":"KEN","s":"kendal ken"},
-  {"n":"Windermere","t":"WNDRMRE","c":"WDM","s":"windermere wdm wndrme"},
-  {"n":"Lancaster","t":"LANCAST","c":"LAN","s":"lancaster lan lancast"},
-  {"n":"Chester","t":"CHESTER","c":"CTR","s":"chester ctr"},
-  {"n":"Warrington Bank Quay","t":"WRRGBQ","c":"WBQ","s":"warrington bank quay wbq wrrgbq"},
-  {"n":"Warrington Central","t":"WRRGCN","c":"WAC","s":"warrington central wac wrrgcn"},
-  {"n":"Runcorn","t":"RUNCORN","c":"RUN","s":"runcorn run"},
-  {"n":"Widnes","t":"WIDNES","c":"WID","s":"widnes wid"},
-  {"n":"Southport","t":"STHPORT","c":"SOP","s":"southport sop sthport"},
-  {"n":"Ormskirk","t":"ORMSKRK","c":"OMS","s":"ormskirk oms ormskrk"},
-  {"n":"Blackburn","t":"BLKBRN","c":"BBN","s":"blackburn bbn blkbrn"},
-  {"n":"Burnley Manchester Road","t":"BURNMR","c":"BYM","s":"burnley manchester road bym burnmr"},
-  {"n":"Rochdale","t":"ROCHDAL","c":"RCD","s":"rochdale rcd rochdal"},
-  {"n":"Oldham Mumps","t":"OLDMUM","c":"OMM","s":"oldham mumps omm oldmum"},
-  {"n":"Ashton-under-Lyne","t":"ASHTON","c":"AHN","s":"ashton under lyne ahn ashton"},
-  {"n":"Stalybridge","t":"STALYBG","c":"SYB","s":"stalybridge syb stalybg"},
-  {"n":"Macclesfield","t":"MACCLFD","c":"MAC","s":"macclesfield mac macclfd"},
-  {"n":"Congleton","t":"CONGLTN","c":"CNG","s":"congleton cng conglt"},
-  {"n":"Stoke-on-Trent","t":"STOKETR","c":"SOT","s":"stoke on trent sot stoketr"},
-  {"n":"Stafford","t":"STAFFRD","c":"STA","s":"stafford sta staffrd"},
-  {"n":"Tamworth","t":"TAMWTH","c":"TAM","s":"tamworth tam tamwth"},
-  {"n":"Nuneaton","t":"NUNEATN","c":"NUN","s":"nuneaton nun nuneatn"},
-  {"n":"Coventry","t":"COVNTRY","c":"COV","s":"coventry cov covntry"},
-  {"n":"Rugby","t":"RUGBY","c":"RUG","s":"rugby rug"},
-  {"n":"Milton Keynes Central","t":"MKCEN","c":"MKC","s":"milton keynes central mkc mkcen"},
-  {"n":"Birmingham Washwood Heath Junction","t":"BWHJCT","c":"","s":"birmingham washwood heath junction bwhjct"},
-  {"n":"Manchester Trafford Park Yard","t":"MTRYD","c":"","s":"manchester trafford park yard mtryd"},
-  {"n":"London Willesden Junction","t":"WLSDJCT","c":"","s":"london willesden junction wlsdjct"},
-  {"n":"Leeds Neville Hill Depot","t":"NVHLDP","c":"","s":"leeds neville hill depot nvhldp"},
-  {"n":"York Holgate Junction","t":"YHGJCT","c":"","s":"york holgate junction yhgjct"},
-  {"n":"Crewe Basford Hall Junction","t":"CBHJCT","c":"","s":"crewe basford hall junction cbhjct"},
-  {"n":"Doncaster Decoy Sidings","t":"DCDSID","c":"","s":"doncaster decoy sidings dcdsid"},
-  {"n":"Liverpool Edge Hill Yard","t":"LEHYD","c":"","s":"liverpool edge hill yard lehyd"},
-  {"n":"Bristol East Junction","t":"BREJCT","c":"","s":"bristol east junction brejct"},
-  {"n":"Glasgow Polmadie Depot","t":"GLPDEP","c":"","s":"glasgow polmadie depot glpdep"},
-  {"n":"Newcastle Manors Junction","t":"NCMJCT","c":"","s":"newcastle manors junction ncmjct"},
-  {"n":"Edinburgh Haymarket Sidings","t":"EHSID","c":"","s":"edinburgh haymarket sidings ehsid"},
-  {"n":"Reading South Junction","t":"RDSJCT","c":"","s":"reading south junction rdsjct"},
-  {"n":"Oxford Rewley Road Depot","t":"OXRDEP","c":"","s":"oxford rewley road depot oxrdep"},
-  {"n":"Cambridge Coldham Lane Junction","t":"CCLJCT","c":"","s":"cambridge coldham lane junction ccljct"},
-  {"n":"Watford North Junction","t":"WFNJCT","c":"","s":"watford north junction wfnjct"},
-  {"n":"Luton Airport Sidings","t":"LUTSID","c":"","s":"luton airport sidings lutsid"},
-  {"n":"Stevenage Hitchin Junction","t":"STHJC","c":"","s":"stevenage hitchin junction sthjc"},
-  {"n":"Chelmsford New Hall Junction","t":"CHNJCT","c":"","s":"chelmsford new hall junction chnjct"},
-  {"n":"","t":"BPWY532","c":"","s":"bpwy532"},
-  {"n":"Ipswich Derby Road Depot","t":"IPDRDP","c":"","s":"ipswich derby road depot ipdrdp"},
-  {"n":"Rhoose Cardiff International Airport","c":"RIA","t":"RHOOSE","s":"rhoose cardiff international airport ria"},
-  {"n":"Southampton Airport Parkway","c":"SOA","t":"SOTAPT","s":"southampton airport parkway soa sotapt"}
-]
--- a/static/icons/apple-touch-icon.png
+++ b/static/icons/apple-touch-icon.png
--- a/static/icons/icon-192.png
+++ b/static/icons/icon-192.png
--- a/static/icons/icon-512.png
+++ b/static/icons/icon-512.png
--- a/static/icons/maskable-512.png
+++ b/static/icons/maskable-512.png
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -0,0 +1,62 @@
+{
+    "name": "OwlBoard",
+    "short_name": "OwlBoard",
+    "description": "Real-time UK rail data and operational tools for staff and enthusiasts.",
+    "id": "/",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "display_override": [
+        "window-controls-overlay",
+        "standalone",
+        "minimal-ui"
+    ],
+    "background_color": "#404c55",
+    "theme_color": "#4fd1d1",
+    "orientation": "portrait",
+    "categories": [
+        "transportation",
+        "utilities"
+    ],
+    "dir": "ltr",
+    "lang": "en-GB",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "/icons/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/icons/maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "shortcuts": [
+        {
+            "name": "Find PIS",
+            "short_name": "PIS",
+            "description": "Find PIS Codes fast",
+            "url": "/pis",
+            "icons": [
+                {
+                    "src": "/icons/icon-192.png",
+                    "sizes": "192x192"
+                }
+            ]
+        }
+    ],
+    "handle_links": "preferred",
+    "launch_handler": {
+        "client_mode": "focus-existing"
+    }
+}
--- a/static/type/inconsolata/latin-wdth-normal.woff2
+++ b/static/type/inconsolata/latin-wdth-normal.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Bold.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Bold.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-BoldItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-BoldItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-ExtraBoldItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-ExtraBoldItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-ExtraLightItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-ExtraLightItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Italic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Italic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Light.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Light.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-LightItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-LightItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Medium.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Medium.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-MediumItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-MediumItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Regular.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Regular.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-Thin.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-Thin.woff2
--- a/static/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2
+++ b/static/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2
Author	SHA1	Message	Date
Fred Boniface	893fc727e7	Further styling to staff view grid	2026-05-24 00:37:00 +01:00
Fred Boniface	0a9fb02b9f	Adjust display logic	2026-05-23 01:18:39 +01:00
Fred Boniface	6a99ffc806	Minot animation again...	2026-05-22 00:16:15 +01:00
Fred Boniface	9ea8bef99c	Minor animation adjustments - still not as desired!	2026-05-22 00:15:58 +01:00
Fred Boniface	9088de9277	Minor adjustments to improve transitions... not currently working on time changes	2026-05-22 00:07:22 +01:00
Fred Boniface	0877d98bef	Adjust header sizing and padding	2026-05-22 00:00:20 +01:00
Fred Boniface	0eb2f4349c	Initial grid staff view layout	2026-05-21 23:56:59 +01:00
Fred Boniface	d10ca44023	Display cancellation reason ELSE delay reason... there is no need to display both if the train is cancelled!	2026-05-21 22:11:53 +01:00
Fred Boniface	22aee0b915	Improve live indications (Smaller, but maybe marginally less user friendly?) Shorten poll interval for boards due to backend optimizations. ensure data is reloaded when tab/page becomes visible.	2026-05-21 20:06:33 +01:00
Fred Boniface	f30a2745d4	Add initial staff grid view	2026-05-18 20:44:05 +01:00
Fred Boniface	9e0f53b7fe	Adjust live flasher animated saturation	2026-05-18 20:36:47 +01:00
Fred Boniface	03495764e0	Adjust live indicator location	2026-05-18 20:30:22 +01:00
Fred Boniface	9657a77c41	Adjust poll frequency	2026-05-18 20:20:41 +01:00
Fred Boniface	437b0b8cf1	Add live indicator to board page	2026-05-18 20:20:01 +01:00
Fred Boniface	40e926bf11	Features: - Add preferences for WakeLock and AutoRefresh - Add WakeLock and AutoRefresh to Board - Attempt adding transitions to Board elements UI: - Add '3D' styling to preference toggles	2026-05-18 11:25:18 +01:00
Fred Boniface	631d324cba	Add preferences and privacy policy	2026-05-16 21:06:29 +01:00
Fred Boniface	07579310b2	Improve +error.svelte handling	2026-05-16 19:19:31 +01:00
Fred Boniface	b51845528f	'Genericise' errors ready for +error.svelte upgrade to handle known errors	2026-05-16 18:19:47 +01:00
Fred Boniface	808b576df1	Improve error handling	2026-05-16 15:10:49 +01:00
Fred Boniface	6ed262ce59	Bugfix: - Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience. - Adjust error handling in load functions, plain error thrown for handling in the error handler. - Fix the warning regarding a click handler attached to an <img> on the About page - Re-organise component directory - Remove unused font declarations from global.css Features: - Add service-worker caching of FilterData API response to allow for filtering to work fully offline -	2026-05-15 21:19:12 +01:00
Fred Boniface	6faa620bdb	Adjust styling of 'estimated times'	2026-05-15 18:58:45 +01:00
Fred Boniface	1105a9f7c5	Add extra message to +error.svelte to handle, and clarify 'OFFLINE' error.	2026-05-14 19:43:22 +01:00
Fred Boniface	25b64edabd	Add features: - manifest.json with PNG icon set. - reset option against QuickLinks storage - 'Preferences' store, ready for preferences page - including location boolean... Important! - Minor service-worker improvements for better offline fallbacks	2026-05-14 19:39:05 +01:00
Fred Boniface	bc56e66178	Add initlal service-worker with basic offline handling. Manifest is not yet present.	2026-05-13 20:47:01 +01:00
Fred Boniface	0ef9e5b56f	Adjust dynamic styles on the departure board component	2026-05-12 20:35:12 +01:00
Fred Boniface	b88f4f3b35	Dynamically adjust font size based on vw value	2026-05-12 19:06:25 +01:00
Fred Boniface	a2e6f3b99a	Switch departure board to use Inconsolata monospaced font (varying widths, weights, etc.)	2026-05-11 20:28:22 +01:00
Fred Boniface	7edccf294b	Update table display on board page, in preparation for offering different 'table' styles.	2026-05-11 12:04:40 +01:00
Fred Boniface	13d22d7b73	Add initial departure board table 'skeleton', very basic at present	2026-05-10 20:57:50 +01:00
Fred Boniface	59e8a77d3d	Change 'Fetched' to 'Updated' on the Board page fetch time	2026-05-10 00:27:45 +01:00
Fred Boniface	1f1e215c0c	Fix layout shifts with the temporary <pre> element on the board page	2026-05-10 00:26:21 +01:00
Fred Boniface	909e36ebc2	Add parsing for StationAlerts, and fetch function for Boards.	2026-05-10 00:15:53 +01:00
Fred Boniface	f3d633e719	Fix PIS Display	2026-05-05 20:41:27 +01:00
Fred Boniface	05a04ec922	Add PIS Data formatting to TrainService expander	2026-05-05 19:24:31 +01:00
Fred Boniface	3b91fad590	Implement 'internal submit button' to the 'Textbox' component. Remove separate submit to the Headcode search card. Adjust the hover and active styles of the 'TrainService' expandable cards.	2026-05-05 15:55:51 +01:00
Fred Boniface	6a857c2d64	Extend data in the schedule box	2026-05-04 21:49:59 +01:00
Fred Boniface	1c4c7ccabc	Add JetBrains Mono font and adjust styling of the schedule.	2026-05-04 20:14:00 +01:00
Fred Boniface	9ca3662ada	Adjust button minimum sizing to improve presentation of quick-links, while ensuring adequate touch target. Number of displayed quicklinks reduced from 9 to six, for improved presentation.	2026-05-03 20:59:03 +01:00
Fred Boniface	c524fe3c2e	Reorganise colouring of schedule times, add 'delay' column (E, RT, D). Including reusable function to assist.	2026-05-03 20:58:22 +01:00
Fred Boniface	5486795711	Tidy up train service component, add loading state, convert tiploc to name... etc.	2026-05-03 11:45:07 +01:00
Fred Boniface	24960707e2	Add train details to train endpoint. Formatting and styling incomplete	2026-05-03 09:03:45 +01:00
Fred Boniface	91cb119b7d	Add trainservice details (currently raw JSON)	2026-05-03 01:16:30 +01:00
Fred Boniface	26e40c5bf6	Add loading state (initial) Add rollover actions on train service Add some additional toc styles	2026-04-30 01:26:29 +01:00
Fred Boniface	a746a1eac2	Add train service boxes... not yet expanding!	2026-04-28 20:28:29 +01:00
Fred Boniface	68af07b9bd	Adjust error page & the error handling of the trains load function. Intead of throwing error on no-results, an empty array is passed to the page. A 'no-results' component will roughly echo the error pages not-found.	2026-04-28 18:13:05 +01:00
Fred Boniface	16d929fad1	Prepare changes to error code handling	2026-04-28 17:45:59 +01:00
Fred Boniface	5bbffcecb8	Add 'no-results' image to make the error page less 'abrupt' for a simple no-results.	2026-04-28 17:24:04 +01:00
Fred Boniface	5ead4f8296	Add no-date image for error page	2026-04-28 14:16:19 +01:00
Fred Boniface	abb8663766	Add train headcode search	2026-04-27 23:57:04 +01:00
Fred Boniface	3225b60140	Update API Client version & run `npm audit fix`	2026-04-27 22:33:53 +01:00
Fred Boniface	f7b1b7fe0d	Update geohash (location services) logic to improve time to first hit	2026-04-21 20:13:53 +01:00
Fred Boniface	8c0d385772	Add QuickLinks based on 'frecency' pattern	2026-04-21 19:54:00 +01:00
Fred Boniface	a07315cec2	Fix search priority: 1. Match to exact CRS 2. Match to exact Name 3. Match to 'Name startsWith' 4. Match any with valid CRS 5. Match alphabetically	2026-04-20 23:23:50 +01:00
Fred Boniface	f3393f3c07	Add timezone warning to top of +layout.svelte conditionally displayed when the users device is not in the Europe/London timezone	2026-04-05 00:22:36 +01:00
Fred Boniface	b649af1925	Adjust button styling to improve appearance of text	2026-03-31 20:01:20 +01:00
Fred Boniface	aa1a989139	Remove fade-out	2026-03-31 00:11:09 +01:00
Fred Boniface	304b523127	Update button style, to improve looks while adding a large enough touch-target	2026-03-31 00:05:17 +01:00
Fred Boniface	777519ff5d	Add NearestStations Card & Location monitor	2026-03-30 23:34:12 +01:00
Fred Boniface	4a969e626c	Ensure dependencies are listed properly	2026-03-25 10:54:21 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="#fff" d="M0 0h120v120H0z"/><g fill="#00f"><path d="M60 0h60v60H60zM0 60h60v60H0z"/><path d="M12.72 32.97h1.08l1.22-4.9 1.2 4.9h1.08l2.16-7.4h-1.4l-1.3 5.17-1.25-5.16h-1l-1.26 5.16-1.3-5.16h-1.4zm12.6-5.54H24.1v.74a2 2 0 0 0-1.8-.87c-1.65 0-2.83 1.23-2.83 2.92 0 1.67 1.17 2.88 2.8 2.88a2.2 2.2 0 0 0 1.83-.85v.72h1.22zm-2.89 1.09c.95 0 1.63.7 1.63 1.72 0 .4-.16.86-.4 1.14-.27.33-.7.5-1.2.5-.98 0-1.65-.66-1.65-1.63 0-1.01.67-1.73 1.62-1.73m3.88 4.45h1.33v-3.08c-.03-.82.4-1.28 1.2-1.31V27.3h-.1c-.58 0-.86.16-1.2.67v-.54H26.3zm3.17 0h1.33v-2.61c0-.74.05-1.06.22-1.33q.33-.5.98-.51.53 0 .8.35c.18.24.26.65.26 1.39v2.7h1.33V30c0-1-.1-1.47-.4-1.9q-.56-.79-1.73-.8a2 2 0 0 0-1.56.66v-.53h-1.23zm6 0h1.33v-5.54h-1.33zm0-6.14h1.33v-1.25h-1.33zm2.4 6.14h1.33v-2.61c0-.74.05-1.06.22-1.33q.33-.5.98-.51.53 0 .8.35c.18.24.26.65.26 1.39v2.7h1.33V30c0-1-.1-1.47-.4-1.9q-.56-.79-1.73-.8a2 2 0 0 0-1.56.66v-.53h-1.23zm10.3-5.54v.7q-.62-.83-1.8-.83c-1.58 0-2.74 1.22-2.74 2.86 0 1.7 1.14 2.94 2.72 2.94.78 0 1.3-.25 1.82-.86q-.07 1.78-1.55 1.77c-.62 0-1-.16-1.39-.6h-1.5c.44 1.12 1.48 1.77 2.84 1.77 1 0 1.8-.35 2.31-1.01.4-.51.56-1.2.56-2.25v-4.5zm-1.66 1.09c.95 0 1.6.68 1.6 1.7 0 1-.62 1.66-1.58 1.66-.95 0-1.56-.65-1.56-1.66 0-1.02.61-1.7 1.54-1.7" aria-label="Warning" font-family="URW Gothic" font-size="10" font-weight="600" style="-inkscape-font-specification:"URW Gothic Semi-Bold""/><g stroke-width="0" aria-label="No Data" font-family="URW Gothic" font-size="10" font-weight="600" style="-inkscape-font-specification:"URW Gothic Oblique";text-align:center" text-anchor="middle"><path d="M83.98 87.39h1.37v-5.37l3.1 5.37h1.52V80H88.6v5.38L85.54 80h-1.56zm9.95-5.67a2.93 2.93 0 0 0-2.93 2.9c0 1.6 1.32 2.9 2.94 2.9s2.95-1.3 2.95-2.86a2.9 2.9 0 0 0-2.96-2.94m.01 1.22c.9 0 1.61.75 1.61 1.68s-.72 1.68-1.6 1.68c-.9 0-1.6-.75-1.6-1.7 0-.91.71-1.66 1.6-1.66M79.24 99.89h1.72c1.12 0 1.79-.11 2.39-.41 1.14-.56 1.8-1.78 1.8-3.27 0-1.41-.57-2.56-1.6-3.18a5 5 0 0 0-2.62-.53h-1.7zm1.37-1.31v-4.77h.27c.88 0 1.34.08 1.77.3.7.36 1.13 1.15 1.13 2.1 0 .89-.41 1.68-1.07 2.04-.41.22-.98.33-1.8.33zm11.1-4.23h-1.22v.74a2 2 0 0 0-1.81-.87c-1.64 0-2.82 1.23-2.82 2.92 0 1.67 1.17 2.88 2.79 2.88a2.2 2.2 0 0 0 1.84-.85v.72h1.22zm-2.9 1.09c.96 0 1.64.71 1.64 1.72 0 .4-.16.86-.4 1.14-.27.33-.7.5-1.21.5-.97 0-1.64-.66-1.64-1.63 0-1.01.67-1.73 1.62-1.73m4.26 4.45h1.33v-4.33h.8v-1.21h-.8V92.5h-1.33v1.85h-.65v1.21h.65zm8.33-5.54h-1.22v.74a2 2 0 0 0-1.81-.87c-1.64 0-2.82 1.23-2.82 2.92 0 1.67 1.17 2.88 2.79 2.88a2.2 2.2 0 0 0 1.84-.85v.72h1.22zm-2.9 1.09c.96 0 1.64.71 1.64 1.72 0 .4-.16.86-.4 1.14q-.42.5-1.21.5c-.97 0-1.64-.66-1.64-1.63 0-1.01.67-1.73 1.62-1.73" style="-inkscape-font-specification:"URW Gothic Semi-Bold""/></g></g></svg>