diff --git a/assets/global.css b/assets/global.css
index f7a3fca..4512628 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -53,7 +53,7 @@ a {
 	}
 }
 
-button, input, textarea {
+button, input, textarea, select {
 	font-family: inherit;
 	font-size: inherit;
 }
@@ -71,7 +71,7 @@ label>* {
 	margin-inline-start: 0.5rem;
 }
 
-:is(p, form, fieldset, pre) + :is(p, form, fieldset, pre) {
+:is(p, form, fieldset, pre, ul) + :is(p, form, fieldset, pre, ul) {
 	margin-block-start: 0.5rem;
 }
 
diff --git a/components/ScheduleTable.vue b/components/ScheduleTable.vue
new file mode 100644
index 0000000..989fc58
--- /dev/null
+++ b/components/ScheduleTable.vue
@@ -0,0 +1,676 @@
+<template>
+	<div>
+		<Timetable :schedule="schedulePreview" />
+		<table>
+			<thead>
+				<tr>
+					<th>start</th>
+					<th>end</th>
+					<th>duration</th>
+					<th>event</th>
+					<th>s</th>
+					<th>location</th>
+					<th v-if="edit"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-if="edit">
+					<tr
+						v-for="es in eventSlots"
+						:key='es.slot?.id ?? es.start.toMillis()'
+						:class='{
+							removed: es.type === "slot" && removed.has(es.id),
+							gap: es.type === "gap",
+						}'
+					>
+						<template v-if="es.type === 'gap'">
+							<td colspan="2">
+								{{ gapFormat(es) }}
+								gap
+							</td>
+							<td>
+								<input
+									type="time"
+									v-model="newEventDuration"
+								>
+							</td>
+							<td>
+									<input
+										type="text"
+										v-model="newEventName"
+									>
+							</td>
+							<td></td>
+							<td>
+								<select
+									v-model="newEventLocation"
+								>
+									<option
+										v-for="location in schedule.locations"
+										:key="location.id"
+										:value="location.id"
+										:selected="location.id === newEventLocation"
+									>{{ location.name }}</option>
+								</select>
+							</td>
+							<td>
+								Add at
+								<button
+									type="button"
+									@click="newEventSlot({ start: es.start })"
+								>Start</button>
+								<button
+									type="button"
+									@click="newEventSlot({ end: es.end })"
+								>End</button>
+							</td>
+						</template>
+						<template v-else-if='edit'>
+							<td>
+								<input
+									type="datetime-local"
+									:value="es.start.toFormat('yyyy-LL-dd\'T\'HH:mm')"
+									@blur="editEventSlot(es, { start: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="time"
+									:value="es.end.toFormat('HH:mm')"
+									@input="editEventSlot(es, { end: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="time"
+									:value='dropDay(es.end.diff(es.start)).toFormat("hh:mm")'
+									@input="editEventSlot(es, { duration: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="text"
+									:value="es.name"
+									@input="editEventSlot(es, { name: ($event as any).target.value })"
+								>
+							</td>
+							<td>{{ status(es) }}</td>
+							<td>
+								<select
+									:value="es.location"
+									@change="editEventSlot(es, { location: ($event as any).target.value })"
+								>
+									<option
+										v-for="location in schedule.locations"
+										:key="location.id"
+										:value="location.id"
+										:selected="location.id === es.location"
+									>{{ location.name }}</option>
+								</select>
+							</td>
+							<td>
+								<button
+									:disabled="removed.has(es.id)"
+									type="button"
+									@click="delEventSlot(es)"
+								>Remove</button>
+								<button
+									v-if="changes.some(c => c.data.id === es.id)"
+									type="button"
+									@click="revertEventSlot(es.id)"
+								>Revert</button>
+							</td>
+						</template>
+					</tr>
+					<tr>
+						<td>
+							<input
+								type="datetime-local"
+								v-model="newEventStart"
+							>
+						</td>
+						<td>
+							<input
+								type="time"
+								v-model="newEventEnd"
+							>
+						</td>
+						<td>
+							<input
+								type="time"
+								v-model="newEventDuration"
+							>
+						</td>
+						<td>
+								<input
+									type="text"
+									v-model="newEventName"
+								>
+						</td>
+						<td colspan="2">
+							<button
+								type="button"
+								@click="newEventSlot()"
+							>Add Event</button>
+						</td>
+					</tr>
+				</template>
+				<template v-else>
+					<tr
+						v-for="es in eventSlots"
+						:key='es.slot?.id ?? es.start.toMillis()'
+						:class='{
+							gap: es.type === "gap",
+						}'
+					>
+						<template v-if="es.type === 'gap'">
+							<td colspan="2">
+								{{ gapFormat(es) }}
+								gap
+							</td>
+						</template>
+						<template v-else>
+							<td>{{ es.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
+							<td>{{ es.end.toFormat("HH:mm") }}</td>
+							<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
+							<td>{{ es.name }}</td>
+							<td>{{ status(es) }}</td>
+							<td>{{ es.location }}</td>
+						</template>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+		<p v-if="changes.length">
+			Changes are not save yet.
+			<button
+				type="button"
+				@click="saveEventSlots"
+			>Save Changes</button>
+		</p>
+		<details>
+			<summary>Debug</summary>
+			<b>EventSlot changes</b>
+			<ol>
+				<li v-for="change in changes">
+					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, "  ") }}</code></pre>
+				</li>
+			</ol>
+			<b>ScheduleEvent changes</b>
+			<ol>
+				<li v-for="change in scheduleChanges">
+					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, "  ") }}</code></pre>
+				</li>
+			</ol>
+		</details>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { DateTime, Duration } from 'luxon';
+import type { ChangeRecord, Schedule, ScheduleEvent, ScheduleLocation, TimeSlot } from '~/shared/types/schedule';
+import { applyChangeArray } from '~/shared/utils/changes';
+import { enumerate, pairs } from '~/shared/utils/functions';
+
+const props = defineProps<{
+	edit?: boolean,
+	location?: string,
+}>();
+
+interface EventSlot {
+	type: "slot",
+	id: string,
+	event?: ScheduleEvent,
+	slot?: TimeSlot,
+	origLocation: string,
+	name: string,
+	location: string,
+	start: DateTime,
+	end: DateTime,
+}
+
+interface Gap {
+	type: "gap",
+	id?: undefined,
+	event?: undefined,
+	slot?: undefined,
+	name?: undefined,
+	location?: string,
+	start: DateTime,
+	end: DateTime,
+}
+
+function toId(name: string) {
+	return name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+}
+
+function status(eventSlot: EventSlot) {
+	if (
+		!eventSlot.event
+		|| eventSlot.event.name !== eventSlot.name
+	) {
+		const event = schedule.value.events.find(event => event.name === eventSlot.name);
+		return event ? "L" : "N";
+	}
+	return eventSlot.event.slots.length === 1 ? "" : eventSlot.event.slots.length;
+}
+
+// Filter out set records where a del record exists for the same id.
+function filterSetOps<T extends { op: "set" | "del", data: { id: string }}>(changes: T[]) {
+	const deleteIds = new Set(changes.filter(c => c.op === "del").map(c => c.data.id));
+	return changes.filter(c => c.op !== "set" || !deleteIds.has(c.data.id));
+}
+
+function findEvent(
+	eventSlot: EventSlot,
+	changes: ChangeRecord<ScheduleEvent>[],
+	schedule: Schedule,
+) {
+	let setEvent = changes.find(
+		c => c.op === "set" && c.data.name === eventSlot.name
+	)?.data as ScheduleEvent | undefined;
+	if (!setEvent && eventSlot.event && eventSlot.event.name === eventSlot.name) {
+		setEvent = eventSlot.event;
+	}
+	if (!setEvent) {
+		setEvent = schedule.events.find(e => e.name === eventSlot.name);
+	}
+	let delEvent;
+	if (eventSlot.event) {
+		delEvent = changes.find(
+			c => c.op === "set" && c.data.name === eventSlot.event!.name
+		)?.data as ScheduleEvent | undefined;
+		if (!delEvent) {
+			delEvent = schedule.events.find(e => e.name === eventSlot.event!.name);
+		}
+	}
+	return { setEvent, delEvent };
+}
+
+function removeSlotLocation(event: ScheduleEvent, oldSlot: TimeSlot, location: string) {
+	// If location is an exact match remove the whole slot
+	if (oldSlot.locations.length === 1 && oldSlot.locations[0] === location) {
+		return {
+			...event,
+			slots: event.slots.filter(s => s.id !== oldSlot.id),
+		};
+	}
+	// Otherwise filter out location
+	return {
+		...event,
+		slots: event.slots.map(
+			s => s.id !== oldSlot.id ? s : {
+				...s,
+				locations: s.locations.filter(l => l !== location)
+			}
+		),
+	};
+}
+
+function mergeSlot(event: ScheduleEvent, eventSlot: EventSlot): ScheduleEvent {
+	const oldSlot = event.slots.find(s => s.id === eventSlot.id);
+	const nextId = Math.max(-1, ...event.slots.map(s => {
+		const id = /-(\d+)$/.exec(s.id)?.[1];
+		return id ? parseInt(id) : 0;
+	})) + 1;
+	const start = eventSlot.start.toUTC().toISO({ suppressSeconds: true })!;
+	const end = eventSlot.end.toUTC().toISO({ suppressSeconds: true })!;
+
+	// Edit slot in-place if possible
+	if (
+		oldSlot
+		&& oldSlot.id === eventSlot.id
+		&& (
+			oldSlot.locations.length <= 1
+			|| oldSlot.start === start && oldSlot.end === end
+		)
+	) {
+		return {
+			...event,
+			slots: event.slots.map(s => {
+				if (s.id !== oldSlot.id)
+					return s;
+				const locations = new Set(s.locations);
+				locations.delete(eventSlot.origLocation)
+				locations.add(eventSlot.location);
+				return {
+					...s,
+					locations: [...locations],
+					start,
+					end,
+				};
+			}),
+		};
+	}
+
+	// Else remove old slot if it exist and insert a new one
+	if (oldSlot) {
+		event = removeSlotLocation(event, oldSlot, eventSlot.origLocation);
+	}
+
+	return {
+		...event,
+		slots: [...event.slots, {
+			id: oldSlot ? oldSlot.id : `${event.id}-${nextId}`,
+			locations: [eventSlot.location],
+			start,
+			end,
+		}],
+	};
+}
+
+const scheduleChanges = computed(() => {
+	let eventChanges: ChangeRecord<ScheduleEvent>[] = [];
+	for (const change of filterSetOps(changes.value)) {
+		if (change.op === "set") {
+			let { setEvent, delEvent } = findEvent(change.data, eventChanges, schedule.value);
+			if (delEvent && delEvent !== setEvent) {
+				eventChanges = removeSlot(eventChanges, delEvent, change.data);
+			}
+			if (!setEvent) {
+				setEvent = {
+					id: toId(change.data.name),
+					name: change.data.name,
+					crew: true,
+					slots: [],
+				};
+			}
+
+			eventChanges = replaceChange({
+				op: "set",
+				data: mergeSlot(setEvent, change.data),
+			}, eventChanges);
+
+		} else if (change.op === "del") {
+			let { delEvent } = findEvent(change.data, eventChanges, schedule.value);
+			if (delEvent) {
+				eventChanges = removeSlot(eventChanges, delEvent, change.data);
+			}
+		}
+	}
+	return eventChanges;
+});
+
+const schedulePreview = computed(() => {
+	const events = [...schedule.value.events]
+	applyChangeArray(scheduleChanges.value, events);
+	return {
+		...schedule.value,
+		events,
+	};
+});
+
+function removeSlot(eventChanges: ChangeRecord<ScheduleEvent>[], event: ScheduleEvent, eventSlot: EventSlot) {
+	let oldSlot = event.slots.find(s => s.id === eventSlot.id);
+	if (oldSlot) {
+		eventChanges = replaceChange({
+			op: "set",
+			data: removeSlotLocation(event, oldSlot, eventSlot.origLocation),
+		}, eventChanges);
+	}
+	return eventChanges;
+}
+
+const { data: session } = await useAccountSession();
+const schedule = await useSchedule();
+const runtimeConfig = useRuntimeConfig();
+const timezone = computed(
+	() => session.value?.account?.timezone ?? runtimeConfig.public.defaultTimezone
+);
+
+type EventSlotChange = { op: "set" | "del", data: EventSlot } ;
+
+const changes = ref<EventSlotChange[]>([]);
+const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
+
+function replaceChange<T extends { op: "set" | "del", data: { id: string  }}>(
+	change: T,
+	changes: T[],
+) {
+	const index = changes.findIndex(item => (
+		item.op === change.op && item.data.id === change.data.id
+	));
+	const copy = [...changes];
+	if (index !== -1)
+		copy.splice(index, 1, change);
+	else
+		copy.push(change);
+	return copy;
+}
+function revertChange<T extends { op: "set" | "del", data: { id: string }}>(id: string, changes: T[]) {
+	return changes.filter(change => change.data.id !== id);
+}
+
+const oneDayMs = 24 * 60 * 60 * 1000;
+function dropDay(diff: Duration) {
+	if (diff.toMillis() >= oneDayMs) {
+		return diff.minus({ days: 1 });
+	}
+	return diff;
+}
+
+const newEventStart = ref("");
+const newEventDuration = ref("01:00");
+const newEventEnd = computed({
+	get: () => (
+		DateTime.fromISO(newEventStart.value, { zone: timezone.value })
+			.plus(Duration.fromISOTime(newEventDuration.value))
+			.toFormat("HH:mm")
+	),
+	set: (value: string) => {
+		const start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
+		const end = endFromTime(start, value);
+		newEventDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
+	},
+});
+const newEventLocation = ref(props.location);
+watch(() => props.location, () => {
+	newEventLocation.value = props.location;
+});
+
+function endFromTime(start: DateTime, time: string) {
+	let end = start.startOf("day").plus(Duration.fromISOTime(time));
+	if (end.toMillis() <= start.toMillis()) {
+		end = end.plus({ days: 1 });
+	}
+	return end;
+}
+function durationFromTime(time: string) {
+	let duration = Duration.fromISOTime(time);
+	if (duration.toMillis() === 0) {
+		duration = Duration.fromMillis(oneDayMs);
+	}
+	return duration;
+}
+const newEventName = ref("");
+function editEventSlot(
+	eventSlot: EventSlot,
+	edits: {
+		start?: string,
+		end?: string,
+		duration?: string,
+		name?: string,
+		location?: string,
+	}
+) {
+	if (edits.start) {
+		const start = DateTime.fromISO(edits.start, { zone: timezone.value });
+		eventSlot = {
+			...eventSlot,
+			start,
+			end: start.plus(eventSlot.end.diff(eventSlot.start)),
+		};
+	}
+	if (edits.end !== undefined) {
+
+		eventSlot = {
+			...eventSlot,
+			end: endFromTime(eventSlot.start, edits.end),
+		};
+	}
+	if (edits.duration !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			end: eventSlot.start.plus(durationFromTime(edits.duration)),
+		};
+	}
+	if (edits.name !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			name: edits.name,
+		};
+	}
+	if (edits.location !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			location: edits.location,
+		};
+	}
+	const change = { op: "set" as const, data: eventSlot };
+	changes.value = replaceChange(change, changes.value);
+}
+function delEventSlot(eventSlot: EventSlot) {
+	const change = { op: "del" as const, data: eventSlot };
+	changes.value = replaceChange(change, changes.value);
+}
+function revertEventSlot(id: string) {
+	changes.value = revertChange(id, changes.value);
+}
+function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
+	const name = newEventName.value;
+	const location = newEventLocation.value;
+	if (!location) {
+		alert("Invalid location");
+		return;
+	}
+	let start;
+	let end;
+	const duration = durationFromTime(newEventDuration.value);
+	if (!duration.isValid) {
+		alert("Invalid duration");
+		return;
+	}
+	if (options.start) {
+		start = options.start;
+		end = options.start.plus(duration);
+	} else if (options.end) {
+		end = options.end;
+		start = options.end.minus(duration);
+	} else {
+		start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
+		end = endFromTime(start, newEventEnd.value);
+	}
+	if (!start.isValid || !end.isValid) {
+		alert("Invalid start and/or end time");
+		return;
+	}
+	const change: ChangeRecord<EventSlot> = {
+		op: "set" as const,
+		data: {
+			type: "slot",
+			id: `$new-${Date.now()}`,
+			name,
+			origLocation: location,
+			location,
+			start,
+			end,
+		},
+	};
+	newEventName.value = "";
+	changes.value = replaceChange(change, changes.value);
+}
+async function saveEventSlots() {
+	try {
+		await $fetch("/api/schedule", {
+			method: "PATCH",
+			body: { events: scheduleChanges.value },
+		});
+		changes.value = [];
+	} catch (err: any) {
+		console.error(err);
+		alert(err?.data?.message ?? err.message);
+	}
+}
+
+const oneHourMs = 60 * 60 * 1000;
+function gapFormat(gap: Gap) {
+	let diff = gap.end.diff(gap.start);
+	if (diff.toMillis() % oneHourMs !== 0)
+		diff = diff.shiftTo("hours", "minutes");
+	else
+		diff = diff.shiftTo("hours");
+	return diff.toHuman({ listStyle: "short", unitDisplay: "short" });
+}
+
+const eventSlots = computed(() => {
+	const data: (EventSlot | Gap)[] = [];
+	for (const event of schedule.value.events) {
+		for (const slot of event.slots) {
+			for (const location of slot.locations) {
+				if (props.location !== undefined && location !== props.location)
+					continue;
+				data.push({
+					type: "slot",
+					id: slot.id,
+					event,
+					slot,
+					name: event.name,
+					location,
+					origLocation: location,
+					start: DateTime.fromISO(slot.start, { zone: timezone.value }),
+					end: DateTime.fromISO(slot.end, { zone: timezone.value }),
+				});
+			}
+		}
+	}
+	applyChangeArray(changes.value.filter(change => change.op === "set"), data as EventSlot[]);
+	data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
+
+	// Insert gaps
+	let maxEnd = 0;
+	const gaps: [number, Gap][] = []
+	for (const [index, [first, second]] of enumerate(pairs(data))) {
+		maxEnd = Math.max(maxEnd, first.end.toMillis());
+		if (maxEnd < second.start.toMillis()) {
+			gaps.push([index, {
+				type: "gap",
+				location: props.location,
+				start: DateTime.fromMillis(maxEnd),
+				end: second.start,
+			}]);
+		}
+	}
+	gaps.reverse();
+	for (const [index, gap] of gaps) {
+		data.splice(index + 1, 0, gap);
+	}
+	return data;
+});
+</script>
+
+<style scoped>
+label {
+	display: inline;
+	padding-inline-end: 0.75em;
+}
+table {
+	margin-block-start: 1rem;
+	border-spacing: 0;
+}
+table th {
+	text-align: left;
+	border-bottom: 1px solid var(--foreground);
+}
+table :is(th, td) + :is(th, td) {
+	padding-inline-start: 0.4em;
+}
+.gap {
+	height: 1.8em;
+}
+.removed {
+	background-color: color-mix(in oklab, var(--background), rgb(255, 0, 0) 40%);
+}
+.removed :is(td, input) {
+	text-decoration: line-through;
+}
+</style>
diff --git a/pages/edit.vue b/pages/edit.vue
index 9d15202..5310043 100644
--- a/pages/edit.vue
+++ b/pages/edit.vue
@@ -3,15 +3,58 @@
 		<h1>Edit</h1>
 		<h2>Locations</h2>
 		<LocationsTable :edit="isAdmin" />
+		<h2>Schedule</h2>
+		<label>
+			Location Filter:
+			<select
+				v-model="locationFilter"
+			>
+				<option
+					:value="undefined"
+					:selected="locationFilter === undefined"
+				>&lt;All locations&gt;</option>
+				<option
+					v-for="location in schedule.locations"
+					:key="location.id"
+					:value="location.id"
+					:selected="locationFilter === location.id"
+				>{{ location.name }}</option>
+			</select>
+		</label>
+		<ScheduleTable :edit="true" :location="locationFilter" />
 	</main>
 </template>
 
 <script lang="ts" setup>
+import type { LocationQueryValue } from 'vue-router';
+
 definePageMeta({
 	middleware: ["authenticated"],
 	allowedAccountTypes: ["crew", "admin"],
 });
 
+const schedule = await useSchedule();
+
+function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
+	if (item === null)
+		return "";
+	if (item instanceof Array)
+		return queryToString(item[0])
+	return item;
+}
+
+const route = useRoute();
+const locationFilter = computed({
+	get: () => queryToString(route.query.location),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			location: value,
+		},
+	}),
+});
+
 const { data: session } = await useAccountSession();
 const isAdmin = computed(() => session.value?.account.type === "admin")
 </script>