diff --git a/components/EventCard.vue b/components/EventCard.vue
index 97c8c2b..03b6120 100644
--- a/components/EventCard.vue
+++ b/components/EventCard.vue
@@ -18,7 +18,7 @@
 		<h4>Timeslots</h4>
 		<ul>
 			<li v-for="slot in event.slots" :key="slot.id">
-				{{ slot.start }} - {{ slot.end }}
+				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
 				<button
 					v-if="session && event.slots.length > 1"
 					class="interested"
@@ -37,14 +37,21 @@
 </template>
 
 <script lang="ts" setup>
+import { DateTime } from 'luxon';
 import type { ScheduleEvent } from '~/shared/types/schedule';
 
 defineProps<{
 	event: ScheduleEvent
 }>()
 
-const { data: session, refresh: refreshSession } = useAccountSession();
+const runtimeConfig = useRuntimeConfig();
+const { data: session, refresh: refreshSession } = await useAccountSession();
 const interestedIds = computed(() => new Set(session.value?.account.interestedIds ?? []));
+const timezone = computed(() => session.value?.account.timezone ?? runtimeConfig.public.defaultTimezone);
+
+function formatTime(time: string) {
+	return DateTime.fromISO(time, { zone: timezone.value }).toFormat("yyyy-LL-dd HH:mm");
+}
 
 async function toggle(id: string, slotIds?: string[]) {
 	let newIds = [...session.value!.account.interestedIds ?? []];
diff --git a/components/Timetable.vue b/components/Timetable.vue
index bb30b90..9b1af0b 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -2,27 +2,37 @@
 	<figure class="timetable">
 		<details>
 			<summary>Debug</summary>
-			<p><b>Junctions</b></p>
-			<div v-for="j in junctions" :key="j.ts">
-				{{ j.ts }}: {{ j.edges.map(e => `${e.type} ${e.slot.id}`).join(", ") }}
-			</div>
-			<p><b>Stretches</b></p>
-			<ol>
-				<li v-for="st in stretches" :key="st.start">
-					<p>Stretch from {{ st.start }} to {{ st.end }}.</p>
-					<p>Spans:</p>
-					<ul>
-						<li v-for="s in st.spans" :key="s.start.ts">
-							{{ s.start.ts }} - {{ s.end.ts }}:
-							<ul>
-								<li v-for="[id, slots] in s.locations" :key="id">
-									{{ id }}: {{ [...slots].map(s => s.id).join(", ") }}
-								</li>
-							</ul>
-						</li>
-					</ul>
-				</li>
-			</ol>
+			<details>
+				<summary><b>Junctions</b></summary>
+				<div v-for="j in junctions" :key="j.ts">
+					{{ j.ts }}: {{ j.edges.map(e => `${e.type} ${e.slot.id}`).join(", ") }}
+				</div>
+			</details>
+			<details>
+				<summary><b>Stretches</b></summary>
+				<ol>
+					<li v-for="st in stretches" :key="st.start">
+						<p>Stretch from {{ st.start }} to {{ st.end }}.</p>
+						<p>Spans:</p>
+						<ul>
+							<li v-for="s in st.spans" :key="s.start.ts">
+								{{ s.start.ts }} - {{ s.end.ts }}:
+								<ul>
+									<li v-for="[id, slots] in s.locations" :key="id">
+										{{ id }}: {{ [...slots].map(s => s.id).join(", ") }}
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+				</ol>
+			</details>
+			<p>
+				<label>
+					Timezone:
+					<input type="text" v-model="timezone">
+				</label>
+			</p>
 		</details>
 		<table>
 			<colgroup>
@@ -63,6 +73,7 @@
 </template>
 
 <script setup lang="ts">
+import { DateTime } from "luxon";
 import type { ScheduleEvent, ScheduleLocation, TimeSlot } from "~/shared/types/schedule";
 
 const oneDayMs = 24 * 60 * 60 * 1000;
@@ -204,27 +215,10 @@ function* spansFromJunctions(
 }
 
 function createStretch(spans: Span[]): Stretch {
-	let start = spans[0].start.ts - oneHourMs;
-	let end = spans[spans.length - 1].end.ts + oneHourMs;
-	// Extend stretch to nearest whole hours
-	start = Math.floor(start / oneHourMs) * oneHourMs;
-	end = Math.ceil(end / oneHourMs) * oneHourMs;
 	return {
-		spans: [
-			{
-				start: { ts: start, edges: [] },
-				end: spans[0].start,
-				locations: new Map(),
-			},
-			...spans,
-			{
-				start: spans[spans.length - 1].end,
-				end: { ts: end, edges: [] },
-				locations: new Map(),
-			},
-		],
-		start,
-		end,
+		spans,
+		start: spans[0].start.ts,
+		end: spans[spans.length - 1].end.ts,
 	}
 }
 
@@ -247,41 +241,76 @@ function* stretchesFromSpans(spans: Iterable<Span>, minSeparation: number): Gene
 }
 
 /** Cuts up a span by whole hours that crosses it */
-function* cutSpansByHours(span: Span): Generator<Span> {
-	const startHour = span.start.ts / oneHourMs;
-	const endHour = span.end.ts / oneHourMs;
+function* cutSpansByHours(span: Span, timezone: string): Generator<Span> {
+	const startHour = DateTime.fromMillis(span.start.ts, { zone: timezone })
+		.startOf("hour")
+	;
+	const end = span.end.ts;
+
 	let currentStart = startHour;
-	let currentEnd = Math.min(Math.floor(startHour + 1), endHour);
-	if (currentEnd === endHour) {
+	let currentEnd = startHour.plus({ hours: 1 });
+	if (!startHour.isValid || currentEnd.toMillis() >= end) {
 		yield span;
 		return;
 	}
 
 	yield {
 		start: span.start,
-		end: { ts: currentEnd * oneHourMs, edges: [] },
+		end: { ts: currentEnd.toMillis(), edges: [] },
 		locations: span.locations,
 	}
 
-	currentStart = currentEnd;
-	while (++currentEnd < endHour) {
+	while (true) {
+		currentStart = currentEnd;
+		currentEnd = currentEnd.plus({ hours: 1 });
+		if (currentEnd.toMillis() >= end) {
+			break;
+		}
 		yield {
-			start: { ts: currentStart * oneHourMs, edges: [] },
-			end: { ts: currentEnd * oneHourMs, edges: [] },
+			start: { ts: currentStart.toMillis(), edges: [] },
+			end: { ts: currentEnd.toMillis(), edges: [] },
 			locations: span.locations,
 		}
-		currentStart += 1;
 	}
 
 	yield {
-		start: { ts: currentStart * oneHourMs, edges: [] },
+		start: { ts: currentStart.toMillis(), edges: [] },
 		end: span.end,
 		locations: span.locations,
 	}
 }
 
+function padStretch(stretch: Stretch, timezone: string): Stretch {
+	// Pad by one hour and extend it to the nearest whole hour.
+	let start = DateTime.fromMillis(stretch.start, { zone: timezone })
+		.minus(oneHourMs)
+		.startOf("hour")
+	;
+	let end = DateTime.fromMillis(stretch.end, { zone: timezone })
+		.plus(2 * oneHourMs - 1)
+		.startOf("hour")
+	;
+	return {
+		spans: [
+			{
+				start: { ts: start.toMillis(), edges: [] },
+				end: stretch.spans[0].start,
+				locations: new Map(),
+			},
+			...stretch.spans,
+			{
+				start: stretch.spans[stretch.spans.length - 1].end,
+				end: { ts: end.toMillis(), edges: [] },
+				locations: new Map(),
+			},
+		],
+		start: start.toMillis(),
+		end: end.toMillis(),
+	}
+}
+
 function tableElementsFromStretches(
-	stretches: Iterable<Stretch>, locations: ScheduleLocation[]
+	stretches: Iterable<Stretch>, locations: ScheduleLocation[], timezone: string,
 ) {
 	type Col = { minutes?: number };
 	type DayHead = { span: number, content?: string }
@@ -315,18 +344,20 @@ function tableElementsFromStretches(
 	}
 
 	let first = true;
-	for (const stretch of stretches) {
+	for (let stretch of stretches) {
+		stretch = padStretch(stretch, timezone);
+		const startDate = DateTime.fromMillis(stretch.start, { zone: timezone });
 		if (first) {
 			first = false;
 			startColumnGroup();
-			startDay(isoStringFromTs(stretch.start).slice(0, 10));
-			startHour(isoStringFromTs(stretch.start).slice(11, 16));
+			startDay(startDate.toFormat("yyyy-LL-dd"));
+			startHour(startDate.toFormat("HH:mm"));
 			for(const location of locations) {
 				startLocation(location.id);
 			}
 		} else {
 			startColumnGroup("break");
-			const dayName = isoStringFromTs(stretch.start).slice(0, 10)
+			const dayName = startDate.toFormat("yyyy-LL-dd");
 			const lastDayHeader = dayHeaders[dayHeaders.length - 1]
 			const sameDay = dayName === lastDayHeader.content && lastDayHeader.span;
 			if (!sameDay)
@@ -340,14 +371,14 @@ function tableElementsFromStretches(
 			startColumnGroup();
 			if (!sameDay)
 				startDay(dayName);
-			startHour(isoStringFromTs(stretch.start).slice(11, 16));
+			startHour(startDate.toFormat("HH:mm"));
 			for(const location of locations) {
 				startLocation(location.id);
 			}
 		}
 
 		for (const span of stretch.spans) {
-			for (const cutSpan of cutSpansByHours(span)) {
+			for (const cutSpan of cutSpansByHours(span, timezone)) {
 				const end = cutSpan.end.ts;
 				const durationMs = end - cutSpan.start.ts;
 
@@ -361,11 +392,18 @@ function tableElementsFromStretches(
 				}
 
 				pushColumn(durationMs / oneMinMs);
-				if (end % oneDayMs === 0) {
-					startDay(isoStringFromTs(cutSpan.end.ts).slice(0, 10));
+				const endDate = DateTime.fromMillis(end, { zone: timezone });
+				if (end === endDate.startOf("day").toMillis()) {
+					startDay(
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone })
+							.toFormat("yyyy-LL-dd")
+					);
 				}
-				if (end % oneHourMs === 0) {
-					startHour(isoStringFromTs(cutSpan.end.ts).slice(11, 16));
+				if (end === endDate.startOf("hour").toMillis()) {
+					startHour(
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone })
+							.toFormat("HH:mm")
+					);
 				}
 			}
 		}
@@ -384,7 +422,16 @@ const junctions = computed(() => junctionsFromEdges(edgesFromEvents(schedule.val
 const stretches = computed(() => [
 	...stretchesFromSpans(spansFromJunctions(junctions.value, schedule.value.locations), oneHourMs * 5)
 ])
-const elements = computed(() => tableElementsFromStretches(stretches.value, schedule.value.locations));
+
+const runtimeConfig = useRuntimeConfig();
+const { data: session } = await useAccountSession();
+const debugTimezone = ref<undefined | string>();
+const timezone = computed({
+	get: () => debugTimezone.value ?? session.value?.account.timezone ?? runtimeConfig.public.defaultTimezone,
+	set: (value: string) => { debugTimezone.value = value },
+});
+
+const elements = computed(() => tableElementsFromStretches(stretches.value, schedule.value.locations, timezone.value));
 const columnGroups = computed(() => elements.value.columnGroups);
 const dayHeaders = computed(() => elements.value.dayHeaders);
 const hourHeaders = computed(() => elements.value.hourHeaders);