Adjust display logic

Minot animation again...
Minor animation adjustments - still not as desired!
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 · 2026-05-21 23:56:59 +01:00
65 changed files with 3659 additions and 993 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"@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",
@@ -41,7 +42,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@owlboard/owlboard-ts": "^3.0.0-dev.20260503t0947",
-		"@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
@@ -4,7 +4,9 @@ declare global {
 	namespace App {
 		interface Error {
 			message: string;
-			owlCode?: string;
+			code?: string;
+			name?: string;
+			msg?: string;
 		}
 		// interface Locals {}
 		// interface PageData {}
--- 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/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
@@ -1,12 +1,36 @@
 <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>
-	<p>{message}</p>
+	<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>
@@ -38,11 +62,18 @@
 		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);
-		animation: pulse 2s infinite ease-in-out;
 	}

 	@keyframes data-travel {
@@ -53,14 +84,4 @@
 			left: 100%;
 		}
 	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.4;
-		}
-	}
 </style>
--- a/src/lib/components/ui/NoResults.svelte
+++ b/src/lib/components/ui/NoResults.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import noResult from '$lib/assets/img/no-data.svg';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 	let { title = 'No results', message = 'Try checking your search term' } = $props();
 </script>

--- 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/TrainService.svelte
+++ b/src/lib/components/ui/TrainService.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-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 } from '$lib/utils/time';
+	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);
@@ -25,7 +27,7 @@
 			details = result.data;
 			isExpanded = true;
 		} catch (e) {
-			console.Error('Failed to load train details');
+			console.error('Failed to load train details');
 			loadingDetailsError = true;
 			loadingDetailsErrorMsg = e.message;
 		} finally {
@@ -44,10 +46,53 @@
 		loadingDetails = false;
 	}

-	const estClass = (act, est) => (!act && est ? 'est' : 'act');
+	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">
+<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>
@@ -66,8 +111,9 @@
 			<div class="location-summary" class:can-all={service.ct}>
 				{service.dt}
 			</div>
-			<!-- Add arrow icon to signify drop-down -->
-			<!-- ADD LOADING STATE -->
+			<div class="arrow" class:expanded={isExpanded}>
+				<IconChevronDownFilled color={'var(--color-title)'} size={25} />
+			</div>
 		</div>
 	</button>
 	{#if isExpanded && details}
@@ -84,7 +130,6 @@
 						{#if details.header.cl}
 							{details.header.cn ? ' near ' : ' at '}
 							<TiplocConverter code={details.header.cl} />
-							<!-- CONSIDER WRAPPING IN A COMPONENT THAT CONVERTS TO THE LOCATION NAME RATHER THAN TIPLOC -->
 						{/if}
 					</span>
 				{/if}
@@ -99,9 +144,22 @@
 						{/if}
 					</span>
 				{/if}
-				<div class="pis-detail">
-					<!-- PIS Data Here -->
-				</div>
+				{#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">
@@ -118,32 +176,49 @@
 							<th>Act</th>
 							<th>Sch</th>
 							<th>Act</th>
+							<th></th>
 						</tr>
 					</thead>
-					<tbody>
-						{#each details.locations as loc}
+					{#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">{loc.t}</td>
-								<td class="plat-cell">{loc.p}</td>
+								<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" colspan="2">Pass</td>
+									<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 {estClass(loc.ata, loc.eta)}"
+									<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 {estClass(loc.atd, loc.etd)}"
+									<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>
-						{/each}
-					</tbody>
+							{#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>
@@ -151,27 +226,49 @@
 </div>

 <style>
+	/* 
+		Main container
+	*/
 	.train-service {
 		background-color: var(--color-accent);
 		width: 100%;
-		border-radius: 4px;
+		max-width: 460px;
+		border-radius: 12px;
 		box-shadow: var(--shadow-std);
-		overflow: hidden;
+		overflow: visible;
 		font-family: 'URW Gothic', sans-serif;
 		transition: 0.2s all;
 		filter: brightness(1.1);
+		-webkit-tap-highlight-color: transparent;
 	}

-	.summary:hover {
-		filter: invert();
+	.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.75rem;
+		padding: 0 1rem;
 		min-height: 48px;
 		border: none;
 		background: transparent;
@@ -180,6 +277,221 @@
 		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;
@@ -207,135 +519,52 @@
 		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);
 		}
 	}
-
-	.operator-summary {
-		flex-shrink: 0;
-	}
-
-	.main-text-summary {
-		display: flex;
-		flex-grow: 1;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.time-summary {
-		font-size: 1.1rem;
-		font-weight: 700;
-		color: var(--color-brand);
-	}
-
-	.location-summary {
-		text-transform: uppercase;
-		font-weight: 500;
-		font-size: 1.1rem;
-		letter-spacing: 0.02em;
-		color: var(--color-title);
-	}
-
-	.to-summary {
-		font-size: 0.8rem;
-		font-style: oblique;
-		text-transform: lowercase;
-	}
-
-	.can-all {
-		color: red;
-	}
-
-	.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%;
-	}
-
-	.cancel-reason {
-		color: rgb(255, 0, 0);
-		font-weight: 500;
-		animation: cancel-pulse 2s ease-in-out infinite;
-	}
-
-	.delay-reason {
-		color: rgb(255, 119, 0);
-		font-weight: 500;
-		animation: cancel-pulse 2s ease-in-out infinite;
-	}
-
-	@keyframes cancel-pulse {
-		0% {
-			opacity: 1;
-			text-shadow: 0 0 0px rgb(255, 0, 0);
-		}
-		50% {
-			opacity: 0.8;
-			text-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
-		}
-		100% {
-			opacity: 1;
-			text-shadow: 0 0 0px rgb(255, 0, 0);
-		}
-	}
-
-	.schedule-table-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-	}
-
-	.schedule-table {
-		width: 95%;
-		max-width: 375px;
-		padding-bottom: 1rem;
-	}
-
-	th,
-	td {
-		text-align: center;
-	}
-
-	.tpl-cell {
-		color: yellow;
-	}
-
-	.pass-loc {
-		color: var(--color-title);
-		opacity: 0.75;
-	}
-
-	.can-loc {
-		text-decoration: line-through;
-	}
-
-	.est {
-		font-style: oblique;
-		opacity: 0.5;
-	}
-
-	.act {
-		color: yellow;
-	}
 </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
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	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 Textbox from '$lib/components/ui/form-elements/Textbox.svelte';

 	let headcode = $state('');

-	function handleSearch(e: SubmitEvent) {
-		e.preventDefault();
+	function handleSearch(headcode: string) {
 		if (!headcode.trim()) return;

 		const searchParams = new URLSearchParams();
@@ -18,10 +16,14 @@
 </script>

 <BaseCard header={'Search Train & PIS'}>
-	<form onsubmit={handleSearch} class="card-content">
-		<Textbox placeholder="Enter Headcode" bind:value={headcode} maxLength={4} />
-		<Button type="submit" disabled={!headcode}>Search</Button>
-	</form>
+	<div class="card-content">
+		<Textbox
+			placeholder="Enter Headcode"
+			bind:value={headcode}
+			maxLength={4}
+			onsubmit={handleSearch}
+		/>
+	</div>
 </BaseCard>

 <style>
@@ -29,7 +31,7 @@
 		text-align: center;
 		width: 90%;
 		margin: auto;
-		padding: 10px 0 0 0;
+		padding: 10px 0 0.5rem 0;
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
--- 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
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Button from '$lib/components/ui/Button.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';
@@ -12,7 +14,9 @@

 <BaseCard header={'Nearby Stations'}>
 	<div class="card-content">
-		{#if nearestStationsState.error && nearestStationsState.list.length === 0}
+		{#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>
--- a/src/lib/components/ui/cards/QuickLinksCard.svelte
+++ b/src/lib/components/ui/cards/QuickLinksCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';

 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
--- a/src/lib/components/ui/cards/pis/PisCode.svelte
+++ b/src/lib/components/ui/cards/pis/PisCode.svelte
@@ -1,15 +1,8 @@
 <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 Textbox from '$lib/components/ui/form-elements/Textbox.svelte';

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

 <BaseCard header={'Find by Code'}>
@@ -19,16 +12,13 @@
 				<Textbox
 					placeholder={'Code'}
 					uppercase={true}
-					type={'number'}
-					max={9999}
-					bind:value={codeValue}
+					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>

@@ -48,7 +38,7 @@
 	}

 	.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,7 +1,7 @@
 <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 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();

@@ -15,7 +15,13 @@
 </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} />
@@ -25,10 +31,10 @@
 			</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>
@@ -43,11 +49,11 @@
 		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
@@ -39,7 +39,7 @@
 		align-items: center;
 		justify-content: center;
 		min-height: 48px;
-		min-width: 98px;
+		min-width: 48px;
 		appearance: none;
 		background: transparent;
 		border: none;
@@ -55,7 +55,7 @@
 		width: fit-content;
 		flex-shrink: 0;
 		padding: 0 1.2rem;
-		min-width: 90px;
+		min-width: 40px;
 		height: 36px;
 		border-radius: 20px;
 		border: none;
--- 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';
--- 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,383 @@
+<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} CAN {: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%;
+		margin: 5px auto;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.header.container {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		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;
+	}
+
+	.cell > div {
+		display: block;
+		width: 100%;
+	}
+
+	/* Row Logic */
+	.service.cancelled {
+		color: rgb(255, 131, 131);
+	}
+
+	/* Special Row Styles */
+	.operator.row,
+	.delay-reason.row,
+	.cancel-reason.row {
+		grid-template-columns: 1fr;
+		text-align: left;
+		font-size: 0.88rem;
+	}
+
+	.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-family: 'URW Gothic', sans-serif; */
+		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%;
+	}
+	/* Colour orig and dest values when cancelled */
+	.service-row.serviceCancelled .orig-cell,
+	.service-row.serviceCancelled .dest-cell {
+		color: rgb(255, 131, 131);
+	}
+
+	.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/StaffServicesTable.svelte
+++ b/src/lib/components/ui/station-board/StaffServicesTable.svelte
@@ -0,0 +1,425 @@
+<script lang="ts">
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
+	import { fade } from 'svelte/transition';
+
+	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
+
+	const getRowKey = (s: ApiStationsBoard.BoardService) =>
+		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
+</script>
+
+<table class="departure-board">
+	<colgroup>
+		<col style="width:10%;" />
+		<!-- ID (Headcode) -->
+		<col style="width:17%;" />
+		<!-- ORIG (Origin) -->
+		<col style="width:17%;" />
+		<!-- DEST (Destination) -->
+		<col style="width:9%;" />
+		<!-- PLT (Platform) -->
+		<col style="width: 12%;" />
+		<!-- STA -->
+		<col style="width: 12%;" />
+		<!-- ETA/ATA -->
+		<col style="width: 12%;" />
+		<!-- STD -->
+		<col style="width: 11%;" />
+		<!-- ETD/ATD -->
+	</colgroup>
+	<thead>
+		<tr>
+			<th colspan="4" aria-hidden="true"></th>
+			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
+			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
+		</tr>
+		<tr>
+			<th scope="col"><abbr title="Headcode">ID</abbr></th>
+			<th scope="col"><abbr title="Origin">Orig</abbr></th>
+			<th scope="col"><abbr title="Destination">Dest</abbr></th>
+			<th scope="col"><abbr title="Platform">Plt</abbr></th>
+			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
+			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
+			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
+			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
+		</tr>
+	</thead>
+
+	{#each services as service (getRowKey(service))}
+		<tbody>
+			<tr
+				in:fade={{ duration: 150, delay: 150 }}
+				out:fade={{ duration: 150 }}
+				class="service-row"
+				class:serviceCancelled={service.c}
+				class:servicePass={service.wtp}
+				class:serviceNonPassenger={!service.ip}
+			>
+				<td class="id-cell">{service.h}</td>
+				<td class="orig-cell"
+					><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td
+				>
+				<td class="dest-cell"
+					><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></td
+				>
+				<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}
+					>{service.p || '-'}</td
+				>
+
+				<!-- Handle different display for a passing train -->
+				{#if service.wtp}
+					<td class="pass-cell" colspan="2">Pass</td>
+					<td class="time-cell">{formatUkTime(service.wtp)}</td>
+					<!-- If cancelled, show '-', otherwise check for RT or show time -->
+					<td
+						class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
+							service.wtp,
+							service.atp || service.etp
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.atp || service.etp)}
+						</span>
+					</td>
+				{:else}
+					<td class="time-cell">{formatUkTime(service.sta)}</td>
+
+					<!-- Arrival Actual/Expected -->
+					<td
+						class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
+							service.sta,
+							service.ata || service.eta
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.ata || service.eta)}
+						</span>
+					</td>
+
+					<td class="time-cell">{formatUkTime(service.std)}</td>
+
+					<!-- Departure Actual/Expected -->
+					<td
+						class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
+							service.std,
+							service.atd || service.etd
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.atd || service.etd)}
+						</span>
+					</td>
+				{/if}
+			</tr>
+
+			{#if service.o}
+				<tr
+					class="toc-coach-row"
+					in:fade={{ duration: 150, delay: 150 }}
+					out:fade={{ duration: 150 }}
+				>
+					<td colspan="8">
+						{service.o}
+					</td>
+				</tr>
+			{/if}
+			{#if service.c && service.cr?.r}
+				<tr class="cancel-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
+					<td colspan="8">
+						{service.cr.r}
+						{#if service.cr.l}
+							{service.cr.n ? 'near' : 'at'}
+							{service.cr.l}
+						{/if}
+					</td>
+				</tr>
+			{/if}
+			{#if service.dr?.r}
+				<tr class="delay-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
+					<td colspan="9">
+						{service.dr.r}
+						{#if service.dr.l}
+							{service.dr.n ? 'near' : 'at'}
+							{service.dr.l}
+						{/if}
+					</td>
+				</tr>
+			{/if}
+		</tbody>
+	{/each}
+</table>
+
+<style>
+	.departure-board {
+		width: 100%;
+		margin: 5px auto;
+		border-collapse: collapse;
+		table-layout: fixed;
+	}
+
+	.departure-board td {
+		font-family: 'Inconsolata Variable', monospace;
+		font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
+		font-variant-ligatures: additional-ligatures;
+		overflow: hidden;
+	}
+
+	thead,
+	.cancel-row td,
+	.delay-row td {
+		letter-spacing: -0.15ch;
+	}
+
+	thead {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		background: var(--color-bg-dark);
+	}
+
+	abbr {
+		text-decoration: none;
+		border-bottom: none;
+		cursor: help;
+	}
+
+	tbody tr:first-child td {
+		border-top: 5px solid transparent;
+	}
+
+	/* Row Logic */
+	.serviceCancelled {
+		color: rgb(255, 131, 131);
+	}
+
+	.servicePass td {
+		opacity: 0.75;
+		font-weight: 200;
+	}
+
+	.serviceNonPassenger td {
+		opacity: 0.5;
+		font-weight: 290;
+		font-style: italic;
+	}
+
+	/* Special Row Styles */
+	.cancel-row td,
+	.delay-row td {
+		font-size: 0.88rem;
+		text-align: left;
+	}
+
+	.cancel-row td[colspan],
+	.delay-row td[colspan] {
+		padding-left: 0ch;
+	}
+
+	.cancel-row td {
+		color: rgb(255, 131, 131);
+		font-weight: 400;
+	}
+
+	.delay-row td {
+		color: var(--delay-orange);
+		font-style: italic;
+	}
+	@media (min-width: 375px) {
+		.cancel-row td,
+		.delay-row td {
+			font-size: 1.08rem;
+		}
+	}
+	@media (min-width: 420px) {
+		.cancel-row td,
+		.delay-row td {
+			font-size: 1.12rem;
+		}
+	}
+	@media (min-width: 550px) {
+		.cancel-row td,
+		.delay-row td {
+			font-size: 1.18rem;
+		}
+	}
+	@media (min-width: 620px) {
+		.cancel-row td,
+		.delay-row td {
+			font-size: 1.2rem;
+		}
+	}
+
+	.toc-coach-row td {
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 0.7rem;
+		padding: 0;
+		color: rgb(187, 187, 255);
+	}
+	@media (min-width: 400px) {
+		.toc-coach-row td {
+			font-size: 0.8rem;
+		}
+	}
+	@media (min-width: 550px) {
+		.toc-coach-row td {
+			font-size: 0.85rem;
+		}
+	}
+
+	/* Column Specifics */
+	.id-cell {
+		text-align: left;
+		font-weight: 400;
+		font-stretch: 85%;
+		filter: brightness(0.75);
+	}
+	@media (min-width: 400px) {
+		.id-cell {
+			font-stretch: 90%;
+		}
+	}
+	.orig-cell,
+	.dest-cell {
+		font-stretch: 80%;
+		font-weight: 400;
+	}
+	.orig-cell {
+		text-align: left;
+		color: var(--location-yellow);
+	}
+	.dest-cell {
+		text-align: right;
+		color: var(--location-yellow);
+	}
+	@media (min-width: 350px) {
+		.orig-cell,
+		.dest-cell {
+			font-stretch: 85%;
+		}
+		@media (min-width: 400px) {
+			.orig-cell,
+			.dest-cell {
+				font-stretch: 90%;
+			}
+		}
+		@media (min-width: 490px) {
+			.orig-cell,
+			.dest-cell {
+				font-stretch: 95%;
+			}
+		}
+		@media (min-width: 520px) {
+			.orig-cell,
+			.dest-cell {
+				font-stretch: 100%;
+			}
+			.orig-cell {
+				text-align: right;
+				padding-right: 7px;
+			}
+			.dest-cell {
+				text-align: left;
+				padding-left: 7px;
+			}
+		}
+		@media (min-width: 600px) {
+			.orig-cell,
+			.dest-cell {
+				letter-spacing: 0.05ch;
+			}
+		}
+	}
+	.plt-cell {
+		text-align: center;
+		font-weight: 410;
+		font-stretch: 100%;
+	}
+	@media (min-width: 525px) {
+		.plt-cell {
+			font-stretch: 110%;
+		}
+	}
+	.plt-cell.platSup {
+		font-weight: 200;
+		opacity: 0.3;
+	}
+	.plt-cell.platChange {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+	.service-row.serviceCancelled .plt-cell {
+		text-decoration: line-through;
+	}
+	.pass-cell {
+		text-align: center;
+		font-stretch: 100%;
+	}
+	/* Colour orig and dest values when cancelled */
+	.service-row.serviceCancelled .orig-cell,
+	.service-row.serviceCancelled .dest-cell {
+		color: rgb(255, 131, 131);
+	}
+
+	.time-cell {
+		text-align: center;
+		font-stretch: 72%;
+	}
+	@media (min-width: 350px) {
+		.time-cell {
+			font-stretch: 77%;
+		}
+	}
+	@media (min-width: 400px) {
+		.time-cell {
+			font-stretch: 82%;
+		}
+	}
+	@media (min-width: 525px) {
+		.time-cell {
+			font-stretch: 90%;
+		}
+	}
+	@media (min-width: 600px) {
+		.time-cell {
+			font-stretch: 100%;
+		}
+	}
+
+	/* RT Logic */
+	.time-cell.delay-rt span {
+		display: none;
+	}
+	.time-cell.delay-rt::after {
+		content: 'RT';
+	}
+
+	.time-cell.delay-early {
+		color: var(--early-blue);
+	}
+
+	.time-cell.delay-late {
+		color: var(--delay-orange);
+	}
+
+	/* Time Types */
+	.est {
+		font-style: italic;
+		opacity: 0.75;
+		font-weight: 350;
+	}
+	.act {
+		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: 10;
+		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
@@ -1,12 +1,15 @@
 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(true);
+	loading = $state(false);
 	error = $state<string | null>(null);

+	private watcherId: number | null = null;
+
 	private initGeoConfig: PositionOptions = {
 		enableHighAccuracy: false,
 		timeout: 500,
@@ -20,10 +23,35 @@ class NearestStationsState {
 	};

 	constructor() {
-		if (typeof window !== 'undefined' && 'geolocation' in navigator) {
-			this.jumpstart();
-			this.initWatcher();
+		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() {
@@ -35,7 +63,7 @@ class NearestStationsState {
 	}

 	private initWatcher() {
-		navigator.geolocation.watchPosition(
+		this.watcherId = navigator.geolocation.watchPosition(
 			(pos) => this.handleUpdate(pos.coords.latitude, pos.coords.longitude),
 			(err) => this.handleError(err),
 			this.geoConfig
--- 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;
@@ -58,6 +161,36 @@
 	--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/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 { error } from '@sveltejs/kit';

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

@@ -18,4 +19,48 @@ export const OwlClient = new OwlBoardClient(
 	// 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
@@ -4,7 +4,7 @@ export interface QuickLink {
 	lastAccessed: number;
 }

-const RETURNED_LENGTH: number = 9;
+const RETURNED_LENGTH: number = 6;
 const MAX_SCORE: number = 50;
 const MAX_ENTRIES: number = RETURNED_LENGTH * 4;

@@ -15,7 +15,11 @@ class QuickLinksService {
 		if (typeof window !== 'undefined') {
 			const saved = localStorage.getItem('ql');
 			if (saved) {
-				this.#links = JSON.parse(saved);
+				try {
+					this.#links = JSON.parse(saved);
+				} catch {
+					this.#links = [];
+				}
 			}
 		}
 	}
@@ -53,7 +57,16 @@ class QuickLinksService {

 		this.#links = sorted.slice(0, MAX_ENTRIES);

-		localStorage.setItem('ql', JSON.stringify(this.#links));
+		if (typeof window !== 'undefined') {
+			localStorage.setItem('ql', JSON.stringify(this.#links));
+		}
+	}
+
+	reset() {
+		this.#links = [];
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem('ql');
+		}
 	}
 }

--- a/src/lib/utils/time.ts
+++ b/src/lib/utils/time.ts
@@ -1,17 +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.
+ * 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): string {
-	if (!dateStr) return '--:--';
+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 '--:--';
+	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
@@ -3,13 +3,36 @@

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

+<!-- 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.status == 404}
-		<!-- Warning no data image -->
-		<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
+	{#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" />
@@ -20,13 +43,19 @@
 		{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}

-	<Button href={'/'} color={'accent'}>Return to Home</Button>
+	{#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>
@@ -54,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,9 +2,9 @@
 	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 { nearestStationsState } from '$lib/geohash.svelte';

 	import Loading from '$lib/components/ui/Loading.svelte';
 	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
@@ -15,9 +15,28 @@
 	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();

@@ -29,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 ?? '');

@@ -94,6 +114,7 @@
 	<!-- 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"
@@ -101,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>
@@ -126,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"
@@ -133,7 +155,7 @@
 						class:active={isActive}
 						aria-current={isActive ? 'page' : undefined}
 					>
-						<item.icon size={20} />
+						<Icon size={20} />
 						<span>{item.label}</span>
 					</a>
 				{/each}
@@ -147,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 {
@@ -201,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);
 	}

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

-	@media (max-width: 299px) {
+	@media (max-width: 319px) {
 		.viewport-guard {
 			display: block;
 			position: fixed;
--- 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">
@@ -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,34 +1,245 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
+	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 StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
+	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);

-	// Update 'QuickLinks'
+	// Handle auto-refreshing & Wake-lock
 	$effect(() => {
-		if (data.BoardLocation) {
-			const id = data.BoardLocation?.c ?? data.BoardLocation?.t;
-			if (id) {
-				// Untrack, as we do not need to handle changes to quickLinks - this is WRITE_ONLY
-				untrack(() => {
-					quickLinks.recordVisit(id);
-					console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
-				});
+		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)}`);
+			});
 		}
 	});
+
+	// Wake Lock API Handling
+	// Load Data Invalidation Handling
+	// Refresh countdown logic
 </script>

-<section>Live board are not yet implemented on the server</section>
+<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;
+		overflow: hidden;
+		gap: 0;
+	}
+
+	.no-service {
+		display: block;
 		margin: auto;
-		padding-top: 25px;
-		max-width: 500px;
+		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;
+	}
+
+	.live-indicator {
+		margin: 0.25rem auto;
+	}
+
+	.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,39 +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'
 		});
 	}

-	let BoardLocation;
+	const BoardLocation = LOCATIONS.find(locId);

-	if (locId) {
-		BoardLocation = LOCATIONS.find(locId);
-
-		if (BoardLocation) {
-			title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
-		} else {
-			error(404, {
-				message: `Location (${locId.toUpperCase()}) not found`,
-				owlCode: 'INVALID_LOCATION_CODE'
-			});
-		}
+	if (!BoardLocation) {
+		error(404, {
+			message: `Location (${locId.toUpperCase()}) not found`,
+			code: 'VALIDATION'
+		});
+	}
+	const title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
+
+	try {
+		const boardData = await OwlClient.board.getByLocation(locId, fetch);
+
+		return {
+			title,
+			BoardLocation,
+			boardData
+		};
+	} catch (e: unknown) {
+		throw e;
 	}
-	return {
-		title,
-		BoardLocation
-	};
 };
--- a/src/routes/pis/+page.svelte
+++ b/src/routes/pis/+page.svelte
@@ -2,7 +2,7 @@
 	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';
@@ -18,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);
 				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;
@@ -45,7 +48,10 @@
 				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;
--- 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.ts
+++ b/src/routes/trains/+page.ts
@@ -1,62 +1,29 @@
-import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+import { OwlClient, ApiError, ValidationError, ThrowApiError } from '$lib/owlClient';
 import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
 import type { PageLoad } from './$types';
-import { error } from '@sveltejs/kit';

-export const load: PageLoad = async ({ url }) => {
+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;

-	if (!headcode) {
-		throw error(400, {
-			message: 'Headcode not provided',
-			owlCode: 'INVALID_DATA'
-		});
-	}
+	// 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);
+		const response = await OwlClient.trains.getByHeadcode(headcode || '', date, toc, fetch);

+		let title = !!headcode ? headcode.toUpperCase() : 'Error';
 		results = response.data;
 		return {
-			title: headcode.toUpperCase(),
+			title: title,
 			results: results
 		};
 	} catch (e: unknown) {
-		if (e instanceof ValidationError) {
-			throw error(400, {
-				message: e.message,
-				owlCode: 'VALIDATION_ERROR'
-			});
-		} else if (e instanceof ApiError) {
-			// Check if NO_RESULTS error, and return empty array if that is the case
-			if (e.code === 'NOT_FOUND') {
-				return {
-					title: headcode.toUpperCase(),
-					results: []
-				};
-			} else {
-				throw error(e.status, {
-					message: e.message,
-					owlCode: 'API_ERROR'
-				});
-			}
-		} else if (e instanceof Error) {
-			throw error(500, {
-				message: e.message,
-				owlCode: 'GEN_ERROR'
-			});
-		} else {
-			throw error(500, {
-				message: 'Unexpected error',
-				owlCode: 'UNKNOWN_ERR'
-			});
-		}
+		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/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	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
				`@@ -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>