diff --git a/src/lib/components/ui/station-board/StaffServicesGrid.svelte b/src/lib/components/ui/station-board/StaffServicesGrid.svelte
index e4800d9..8ba346f 100644
--- a/src/lib/components/ui/station-board/StaffServicesGrid.svelte
+++ b/src/lib/components/ui/station-board/StaffServicesGrid.svelte
@@ -81,7 +81,7 @@
 						>
 							{#if isRightTime(service.sta, service.ata || service.eta)}
 								RT
-							{:else if service.sta && service.c} CAN {:else}
+							{:else if service.sta && service.c} CANC {:else}
 								{realArrival}
 							{/if}
 						</div>
@@ -116,15 +116,19 @@
 	.departure-board {
 		width: 100%;
 		max-width: 100%;
-		margin: 5px auto;
+		height: 100%;
+		max-height: 100%;
+		margin: 0 auto;
 		box-sizing: border-box;
-		overflow: hidden;
+		overscroll-behavior-y: contain;
+		overflow-y: auto;
 	}
 
 	.header.container {
 		position: sticky;
+		padding-top: 7px;
 		top: 0;
-		z-index: 2;
+		z-index: 10;
 		background: var(--color-bg-dark);
 	}
 
@@ -172,23 +176,29 @@
 		padding-bottom: 7px;
 	}
 
-	.cell > div {
-		display: block;
-		width: 100%;
-	}
-
-	/* Row Logic */
-	.service.cancelled {
+	/* Cancellation Logic */
+	.service.cancelled,
+	.service.cancelled .cell.orig,
+	.service.cancelled .cell.dest {
 		color: rgb(255, 131, 131);
 	}
+	.service.cancelled .cell.plt,
+	.service.cancelled .cell.act {
+		text-decoration: line-through;
+		opacity: 0.25;
+	}
+	.service.cancelled .cell.sch {
+		text-decoration: line-through;
+	}
 
-	/* Special Row Styles */
+	/* Meta Row Styles */
 	.operator.row,
 	.delay-reason.row,
 	.cancel-reason.row {
 		grid-template-columns: 1fr;
 		text-align: left;
 		font-size: 0.88rem;
+		font-stretch: 80%;
 	}
 
 	.cancel-reason.row {
@@ -232,7 +242,7 @@
 	}
 
 	.operator.row {
-		/* font-family: 'URW Gothic', sans-serif; */
+		font-stretch: 110%;
 		padding: 0;
 		color: rgb(187, 187, 255);
 	}
@@ -320,16 +330,9 @@
 		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;
diff --git a/src/lib/components/ui/station-board/StaffServicesTable.svelte b/src/lib/components/ui/station-board/StaffServicesTable.svelte
deleted file mode 100644
index 4fe80e9..0000000
--- a/src/lib/components/ui/station-board/StaffServicesTable.svelte
+++ /dev/null
@@ -1,425 +0,0 @@
-<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>
diff --git a/src/lib/components/ui/station-board/StationAlertCard.svelte b/src/lib/components/ui/station-board/StationAlertCard.svelte
index 4d9e964..fd65c7b 100644
--- a/src/lib/components/ui/station-board/StationAlertCard.svelte
+++ b/src/lib/components/ui/station-board/StationAlertCard.svelte
@@ -45,7 +45,7 @@
 		border-radius: 8px;
 		background: transparent;
 		position: relative;
-		z-index: 10;
+		z-index: 12;
 		margin-bottom: 0;
 		width: 95%;
 		max-width: 750px;
diff --git a/src/routes/board/+page.svelte b/src/routes/board/+page.svelte
index 31651a2..d32b3c4 100644
--- a/src/routes/board/+page.svelte
+++ b/src/routes/board/+page.svelte
@@ -5,7 +5,6 @@
 	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();
@@ -109,10 +108,6 @@
 			});
 		}
 	});
-
-	// Wake Lock API Handling
-	// Load Data Invalidation Handling
-	// Refresh countdown logic
 </script>
 
 <section class="board-wrapper">
@@ -145,6 +140,7 @@
 		align-items: center;
 		width: 100%;
 		margin: 0 auto;
+		padding: 0;
 		overflow: hidden;
 		gap: 0;
 	}
@@ -152,6 +148,10 @@
 	.no-service {
 		display: block;
 		margin: auto;
+		text-align: center;
+		font-weight: 600;
+		letter-spacing: 0.15ch;
+		font-size: 1.4rem;
 		max-width: 75%;
 		font-family: 'URW Gothic', sans-serif;
 	}
@@ -230,10 +230,6 @@
 		font-size: 1rem;
 	}
 
-	.live-indicator {
-		margin: 0.25rem auto;
-	}
-
 	.service-list-wrapper {
 		flex: 1;
 		overflow-y: auto;