diff --git a/client/src/App.vue b/client/src/App.vue
index 1399e19..9d4f454 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -9,6 +9,22 @@ function toggleDark() { dark.value = !dark.value }
 </script>
 
 <style lang="scss">
+::-webkit-scrollbar {
+	width: .45rem;
+	height: .45rem;
+}
+::-webkit-scrollbar-thumb {
+	--tw-border-opacity: 1;
+	border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+	background-color: #d7d7d799;
+	border-width: 1px;
+	border-radius: 9999px;
+}
+::-webkit-scrollbar-track {
+	background-color: #0000;
+	border-radius: 9999px;
+}
+
 :root {
   --bg:         #ffffff;
   --surface:    #d0dae1;
diff --git a/client/src/components/HourlyForecast.vue b/client/src/components/HourlyForecast.vue
new file mode 100644
index 0000000..3c36378
--- /dev/null
+++ b/client/src/components/HourlyForecast.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import Loading from '@/components/Loading.vue';
+import {formatDate} from '@ztimson/utils';
+import {onMounted, ref} from 'vue';
+import {api, BASE} from '../services/api';
+
+const hours = ref<any[]>();
+const open = ref(false);
+const filler = [1, 2, 3, 4, 5, 6, 7, 8];
+
+function dir(deg: number) {
+	if(deg > 22.5 && deg <= 67.5) return 'NE';
+	if(deg > 67.5 && deg <= 112.5) return 'E';
+	if(deg > 112.5 && deg <= 157.5) return 'SE';
+	if(deg > 157.5 && deg <= 202.5) return 'S';
+	if(deg > 202.5 && deg <= 247.5) return 'SW';
+	if(deg > 247.5 && deg <= 292.5) return 'W';
+	if(deg > 292.5 && deg <= 337.5) return 'NW';
+	return 'N';
+}
+
+onMounted(async () => {
+	hours.value = await api.hourly();
+});
+</script>
+
+<style scoped lang="scss">
+.card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 14px;
+	cursor: pointer;
+	user-select: none;
+
+	.title     { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
+	.chevron   { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; &.open { transform: rotate(180deg); } }
+	.preview   { display: flex; gap: 6px; align-items: center; }
+	.prev-icon { width: 20px; height: 20px; object-fit: contain; }
+	.prev-temp { font-size: 13px; font-weight: 700; color: var(--text); }
+}
+
+.hour-list {
+	border-top: 1px solid var(--border);
+}
+
+.hour-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 14px;
+	border-bottom: 1px solid var(--border);
+
+	&:last-child { border-bottom: none; }
+
+	.hour-time  { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; width: 52px; flex-shrink: 0; }
+	.hour-icon  { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
+	.hour-label { font-size: 11px; color: var(--text-muted); flex: 1; }
+	.hour-temp  { font-size: 13px; font-weight: 700; color: var(--text); }
+	.hour-meta  { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); }
+}
+
+.filler-row {
+	height: 42px;
+	pos-rel: relative;
+	overflow: hidden;
+	border-bottom: 1px solid var(--border);
+	&:last-child { border-bottom: none; }
+}
+</style>
+
+<template>
+	<div class="card">
+		<div class="card-header" @click="open = !open">
+			<span class="title">24hr Forecast</span>
+			<span class="chevron" :class="{ open }">▼</span>
+		</div>
+
+		<div style="max-height: 50vh; overflow-y: auto">
+			<div v-if="open" class="hour-list">
+				<template v-if="hours?.length">
+					<div v-for="h in hours" class="hour-row">
+						<span class="hour-time">{{ formatDate('h A', h.time) }}</span>
+						<img :src="BASE + h.icon" class="hour-icon" :alt="h.label?.toString() || ''" />
+						<span class="hour-label">{{ h.label }}</span>
+						<div class="hour-meta">
+							<span>🌧️ {{ (h.precipitation as any || 0).toFixed(1) }}mm</span>
+							<span>🍃 {{ ~~h.wind_gusts }}kph {{ dir(h.wind_dir) }}</span>
+						</div>
+						<span class="hour-temp">{{ ~~h.temperature }}°</span>
+					</div>
+				</template>
+				<template v-else>
+					<div v-for="f in filler" class="filler-row p-2">
+						<div class="br-1 pos-rel w-100 overflow-hidden" style="height: 100%">
+							<Loading />
+						</div>
+					</div>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/client/src/components/MapView.vue b/client/src/components/MapView.vue
index 0f46b26..7229560 100644
--- a/client/src/components/MapView.vue
+++ b/client/src/components/MapView.vue
@@ -399,8 +399,8 @@ input[type='range'] {
 	.desktop { display: none; }
 	.mobile  { display: flex; }
 	.radar-timeline { bottom: 10px; }
-	.overlay-toggles { bottom: 70px; }
-	.layers-menu { bottom: 70px; }
+	.overlay-toggles { bottom: 10px; }
+	.layers-menu { bottom: 10px; }
 }
 </style>
 
diff --git a/client/src/services/api.ts b/client/src/services/api.ts
index 181a83a..fdd934f 100644
--- a/client/src/services/api.ts
+++ b/client/src/services/api.ts
@@ -15,7 +15,11 @@ async function get<T>(path: string, params: Record<string, string> = {}): Promis
 export const api = {
   position: (fields?: string) => get<{latitude: number, longitude: number, altitude: number}>('/api/position', fields ? { fields } : {}),
   current:  (fields?: string)                                     => get<DataRow>('/api/current', fields ? { fields } : {}),
-  hourly:   (start?: string, end?: string, fields?: string)      => get<DataRow[]>('/api/hourly', { ...(start ? { start } : {}), ...(end ? { end } : {}), ...(fields ? { fields } : {}) }),
+  hourly:   (start?: Date, end?: Date, fields?: string)      => get<DataRow[]>('/api/hourly', {
+    ...(start ? { start: start.toISOString().slice(0, 10) } : {}),
+    ...(end ? { end: end.toISOString().slice(0, 10) } : {}),
+    ...(fields ? { fields } : {})
+  }),
   daily:    (start?: Date, end?: Date, fields?: string)      => get<DataRow[]>('/api/daily',  {
     ...(start ? { start: start.toISOString().slice(0, 10) } : {}),
     ...(end ? { end: end.toISOString().slice(0, 10) } : {}),
diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 2f63877..a662345 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -1,4 +1,5 @@
 `<script setup lang="ts">
+import HourlyForecast from '@/components/HourlyForecast.vue';
 import {formatDate} from '@ztimson/utils';
 import {onMounted, onUnmounted, ref} from 'vue';
 import MapView from '../components/MapView.vue';
@@ -158,6 +159,7 @@ onUnmounted(() => {
 				</div>
 			</div>
 			<CurrentWeather />
+			<HourlyForecast />
 			<ForecastStrip />
 		</div>
 
diff --git a/server/src/forecast.mjs b/server/src/forecast.mjs
index 703f62a..7ce032b 100644
--- a/server/src/forecast.mjs
+++ b/server/src/forecast.mjs
@@ -152,7 +152,7 @@ export async function get24HourForecast(currentSensors) {
 		const wind_speed  = forecastWind(seedWind, pressureTrend);
 
 		const celestial = getCelestialCurrent(coords.latitude, coords.longitude, time);
-		const snapshot = {
+		let snapshot = {
 			time,
 			temperature,
 			humidity,
@@ -167,7 +167,9 @@ export async function get24HourForecast(currentSensors) {
 			...celestial
 		};
 
-		return Object.assign(snapshot, getWeatherCondition(snapshot));
+		Object.assign(snapshot, getWeatherCondition(snapshot));
+		snapshot.icon = `/icons/${snapshot.icon}.png`;
+		return snapshot;
 	});
 
 	// Second pass — apply solar heating now that we have sun_elevation per slot
@@ -213,7 +215,7 @@ function summarise(slots) {
 		time:             slots[0].time,
 		label:            dominant.label,
 		code:             dominant.code,
-		icon:             `/icons/${dominant.icon}.png`,
+		icon:             dominant.icon,
 		temperature:      Math.max(...temps),
 		temperature_max:  Math.max(...temps),
 		temperature_min:  Math.min(...temps),
diff --git a/server/src/server.mjs b/server/src/server.mjs
index adec2c9..3306d9b 100644
--- a/server/src/server.mjs
+++ b/server/src/server.mjs
@@ -36,6 +36,17 @@ function filterArr(arr, fields) {
 	return arr.map(row => filterFields(row, fields));
 }
 
+// ── Errors ────────────────────────────────────────────────────────────────────
+
+app.use((req, res, next) => {
+	res.status(404).json({ error: `Not found: ${req.method} ${req.path}` })
+})
+
+app.use((err, req, res, next) => {
+	console.error(`[ERROR] ${req.method} ${req.path}\n${err.stack}`)
+	res.status(500).json({ error: err.message, stack: err.stack })
+})
+
 // ── Current ───────────────────────────────────────────────────────────────────
 
 app.get('/api/current', async (req, res) => {