diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
new file mode 100644
index 00000000..aa5ff3bb
--- /dev/null
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -0,0 +1,222 @@
+<script lang="ts">
+	import { formatDate } from '$lib/date';
+	import { SquarePen } from '@lucide/svelte';
+	import { getUser } from '$lib/context/user.context';
+	import Button from '../ui/Button.svelte';
+	import Input from '$lib/components/ui/Input.svelte';
+
+	type Event = {
+		id: string;
+		name: string;
+		date: Date;
+		shifts: {
+			id: string;
+			startAt: Date;
+			endAt: Date;
+			members: [''];
+		}[];
+	};
+
+	const { events, outdated } = $props();
+
+	let search = $state('');
+	let activeTab = $state('upcoming');
+	let user = getUser();
+
+	function hasActiveShifts(event: Event) {
+		const now = new Date();
+		return event.shifts.some((shift) => {
+			const startTime = new Date(shift.startAt);
+			const endTime = new Date(shift.endAt);
+			return startTime <= now && now < endTime;
+		});
+	}
+
+	function hasUpcomingShifts(event: Event) {
+		const now = new Date();
+		const hasActive = hasActiveShifts(event);
+		if (hasActive) return false;
+
+		return event.shifts.some((shift) => {
+			const startTime = new Date(shift.startAt);
+			return now < startTime;
+		});
+	}
+
+	function hasActiveOrUpcoming(event: Event) {
+		return hasActiveShifts(event) || hasUpcomingShifts(event);
+	}
+
+	const upcomingEvents = $derived(
+		[...events, ...outdated.filter((event: Event) => hasActiveOrUpcoming(event))].sort((a, b) => {
+			if (hasActiveShifts(a)) return -1;
+			if (hasActiveShifts(b)) return 1;
+			return 0;
+		})
+	);
+
+	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
+
+	const activeEvnts = $derived(activeTab === 'upcoming' ? upcomingEvents : pastEvnts);
+
+	let filteredEvents = $derived(
+		activeEvnts.filter((event: Event) => event.name.toLowerCase().includes(search.toLowerCase()))
+	);
+
+	function countShifts(event: Event) {
+		return event.shifts.length;
+	}
+
+	function getEventStatus(event: Event) {
+		if (hasActiveShifts(event)) {
+			return 'Aktiv';
+		} else if (hasUpcomingShifts(event)) {
+			return 'Kommende';
+		} else {
+			return 'Ferdig';
+		}
+	}
+
+	function getStatusClass(status: string) {
+		switch (status) {
+			case 'Kommende':
+				return 'text-blue-500 font-medium';
+			case 'Aktiv':
+				return 'text-green-500 font-medium';
+			case 'Ferdig':
+				return 'text-gray-500 font-medium';
+			default:
+				return '';
+		}
+	}
+
+	let isMobile = $state(false);
+
+	const handleResize = () => {
+		isMobile = window.innerWidth < 568;
+	};
+
+	$effect(() => {
+		handleResize();
+	});
+</script>
+
+<svelte:window onresize={handleResize} />
+<div class="border-gray overflow-hidden rounded-2xl border-2 bg-background shadow-lg">
+	<div class="flex flex-wrap gap-2 border-b-2 bg-gray-200 p-2">
+		<button
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
+			'upcoming'
+				? 'bg-gray-300 font-semibold'
+				: 'hover:bg-gray-250 hover:text-blue-500'}"
+			onclick={() => (activeTab = 'upcoming')}
+		>
+			Arrangementer
+		</button>
+
+		<button
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
+			'past'
+				? 'bg-gray-300 font-semibold'
+				: 'hover:bg-gray-250 hover:text-blue-500'}"
+			onclick={() => (activeTab = 'past')}
+		>
+			Tidligere arrangementer
+		</button>
+	</div>
+
+	<div class="flex {isMobile ? 'flex-col' : 'flex-row items-center'} gap-2 p-2">
+		{#if $user?.role === 'board'}
+			<a href="arrangementer/ny" class={isMobile ? 'order-first w-full' : 'order-last'}>
+				<Button type="button" intent="primary" class={isMobile ? 'w-full' : ''}>
+					Nytt arrangement
+				</Button>
+			</a>
+		{/if}
+
+		<Input
+			type="search"
+			placeholder="Søk etter arrangementer..."
+			bind:value={search}
+			class="w-full flex-1 border-2
+      {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
+		/>
+	</div>
+
+	{#if filteredEvents.length === 0}
+		<div class="mx-4 my-4 px-8 py-12 text-center font-medium text-gray-500">
+			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
+		</div>
+	{:else}
+		<div class="overflow-x-auto p-2">
+			<table class="w-full table-fixed">
+				{#if isMobile}
+					<colgroup>
+						<col class="w-[60%]" />
+						<col class="w-[40%]" />
+					</colgroup>
+				{:else}
+					<colgroup>
+						<col class="w-[35%]" />
+						<col class="w-[20%]" />
+						<col class="w-[20%]" />
+						<col class="w-[15%]" />
+					</colgroup>
+				{/if}
+				<thead>
+					<tr class="border-b-2 border-gray-200">
+						<th class="p-4 text-left">Arrangement</th>
+						{#if isMobile}
+							<th class="p-4 text-left">Status</th>
+						{:else}
+							<th class="p-4 text-left">Dato</th>
+							<th class="p-4 text-left">Antall vakter</th>
+							<th class="p-4 text-left">Status</th>
+							<th class="p-4 text-left" aria-label="Handlinger"></th>
+						{/if}
+					</tr>
+				</thead>
+				<tbody class="whitespace-nowrap break-words border-b border-gray-100">
+					{#each filteredEvents as event (event.id)}
+						{@const status = getEventStatus(event)}
+						<tr class="relative cursor-pointer hover:bg-gray-50">
+							<td class="overflow-hidden overflow-ellipsis p-4">
+								<a href="arrangementer/{event.id}" class="absolute inset-0 z-0" aria-hidden="true">
+								</a>
+								{event.name}
+							</td>
+							{#if isMobile}
+								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
+									{status}
+								</td>
+							{:else}
+								<td class="overflow-hidden overflow-ellipsis p-4">
+									{formatDate(event.date)}
+								</td>
+								<td class="overflow-hidden overflow-ellipsis p-4">
+									{countShifts(event)}
+								</td>
+								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
+									{status}
+								</td>
+								{#if !isMobile}
+									<td class="p-4">
+										{#if $user?.role === 'board'}
+											<a
+												href="arrangementer/{event.id}/edit"
+												class="relative z-10 inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+												aria-label="Rediger arrangement"
+											>
+												<SquarePen size={18} />
+											</a>
+										{/if}
+									</td>
+								{/if}
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
diff --git a/apps/www/src/lib/date.ts b/apps/www/src/lib/date.ts
index 3c3eda95..11bf2215 100644
--- a/apps/www/src/lib/date.ts
+++ b/apps/www/src/lib/date.ts
@@ -18,3 +18,7 @@ export const time = (date: Dateish) => {
 export const normalDate = (date: Dateish) => {
 	return format(new Date(date), 'dd.MM.yyyy HH:mm');
 };
+
+export const ISOStandard = (date: Dateish) => {
+	return format(new Date(date), "yyyy-MM-dd'T'HH:mm");
+};
diff --git a/apps/www/src/lib/services/event.service.ts b/apps/www/src/lib/services/event.service.ts
index 426ffb03..1bd7eb64 100644
--- a/apps/www/src/lib/services/event.service.ts
+++ b/apps/www/src/lib/services/event.service.ts
@@ -67,7 +67,85 @@ export class EventService {
 		return event;
 	}
 
+	async updateEvent(id: string, eventData: { name: string; date: Date }) {
+		const event = await this.#db
+			.insert(events)
+			.values({
+				id,
+				...eventData
+			})
+			.onConflictDoUpdate({
+				target: events.id,
+				set: eventData
+			})
+			.returning()
+			.then((rows) => rows[0]);
+
+		return event;
+	}
+
+	async updateShift(id: string, shiftData: { eventId: string; startAt: Date; endAt: Date }) {
+		const shift = await this.#db
+			.insert(shifts)
+			.values({
+				id,
+				...shiftData
+			})
+			.onConflictDoUpdate({
+				target: shifts.id,
+				set: shiftData
+			})
+			.returning()
+			.then((rows) => rows[0]);
+		return shift;
+	}
+
+	async findUpcomingEvents() {
+		const event = await this.#db.query.events.findMany({
+			orderBy: (row, { asc }) => [asc(row.date)],
+			with: {
+				shifts: {
+					with: {
+						members: {
+							with: {
+								user: true
+							}
+						}
+					}
+				}
+			},
+			where: (events, { gte }) => gte(events.date, new Date())
+		});
+
+		return event;
+	}
+
+	async findPastEvents() {
+		const event = await this.#db.query.events.findMany({
+			orderBy: (row, { desc }) => [desc(row.date)],
+			with: {
+				shifts: {
+					with: {
+						members: {
+							with: {
+								user: true
+							}
+						}
+					}
+				}
+			},
+			where: (events, { lt }) => lt(events.date, new Date())
+		});
+
+		return event;
+	}
+
 	async delete(id: string) {
 		await this.#db.delete(events).where(eq(events.id, id));
 	}
+
+	async deleteShift(id: string) {
+		await this.#db.delete(userShifts).where(eq(userShifts.shiftId, id));
+		await this.#db.delete(shifts).where(eq(shifts.id, id));
+	}
 }
diff --git a/apps/www/src/routes/portal/admin/+page.svelte b/apps/www/src/routes/portal/admin/+page.svelte
index 5c1ab9ea..93d3984b 100644
--- a/apps/www/src/routes/portal/admin/+page.svelte
+++ b/apps/www/src/routes/portal/admin/+page.svelte
@@ -12,15 +12,19 @@
 	let isModalOpen = $state(false);
 
 	let boardMembers = $derived.by(() =>
-		data.users.filter((user: User) => {
-			return user.role === 'board' && user.name.toLowerCase().includes(search.toLowerCase());
-		})
+		data.users
+			.filter((user: User) => {
+				return user.role === 'board' && user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	let normalMembers = $derived.by(() =>
-		data.users.filter((user: User) => {
-			return user.role === 'normal' && user.name.toLowerCase().includes(search.toLowerCase());
-		})
+		data.users
+			.filter((user: User) => {
+				return user.role === 'normal' && user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	function closeModal() {
diff --git a/apps/www/src/routes/portal/arrangementer/+page.server.ts b/apps/www/src/routes/portal/arrangementer/+page.server.ts
index 4e3773aa..23692af8 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/+page.server.ts
@@ -1,21 +1,10 @@
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
-	const events = await locals.db.query.events.findMany({
-		orderBy: (row, { asc }) => [asc(row.date)],
-		with: {
-			shifts: true
-		},
-		where: (events, { gte }) => gte(events.date, new Date())
-	});
-
-	const outdatedEvents = await locals.db.query.events.findMany({
-		orderBy: (row, { desc }) => [desc(row.date)],
-		with: {
-			shifts: true
-		},
-		where: (events, { lt }) => lt(events.date, new Date())
-	});
+	const [events, outdatedEvents] = await Promise.all([
+		locals.eventService.findUpcomingEvents(),
+		locals.eventService.findPastEvents()
+	]);
 
 	return {
 		events,
diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index 8536884e..8e6ba441 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -1,59 +1,13 @@
 <script lang="ts">
-	import EventPreview from '$lib/components/portal/EventPreview.svelte';
-	import Heading from '$lib/components/ui/Heading.svelte';
-	import { getUser } from '$lib/context/user.context.js';
-	let { data } = $props();
-	let user = getUser();
-	let showOutdatedEvents = $state(false);
+	import EventsTable from '$lib/components/portal/EventTable.svelte';
 
-	function toggleOutdatedEvents() {
-		showOutdatedEvents = !showOutdatedEvents;
-	}
+	const { data } = $props();
 </script>
 
 <svelte:head>
 	<title>Arrangementer</title>
 </svelte:head>
 
-<Heading>Arrangementer</Heading>
-{#if $user?.role == 'board'}
-	<p class="mt-4">
-		<a href="/portal/arrangementer/ny" class="text-blue-500 hover:underline">Nytt arrangement</a>
-	</p>
-{/if}
-
-<ul class="mt-4 flex flex-col gap-4">
-	{#each data.events as event}
-		<li>
-			<EventPreview {event} />
-		</li>
-	{:else}
-		<p>Ingen arrangementer</p>
-	{/each}
-</ul>
-
-<div class="mt-8">
-	<button
-		class="flex items-center rounded-md bg-gray-100 py-6 text-left hover:bg-gray-200 focus:outline-none"
-		onclick={toggleOutdatedEvents}
-		aria-expanded={showOutdatedEvents}
-	>
-		<h3 class="m0 text-lg font-medium">
-			{showOutdatedEvents ? 'Skjul tidligere arrangementer' : 'Vis tidligere arrangementer'}
-		</h3>
-	</button>
+<div class="mx-auto max-w-4xl p-4">
+	<EventsTable events={data.events} outdated={data.outdatedEvents} />
 </div>
-
-{#if showOutdatedEvents}
-	<div class="mt-4">
-		<ul class="mt-4 flex flex-col gap-4">
-			{#each data.outdatedEvents as event}
-				<li>
-					<EventPreview {event} />
-				</li>
-			{:else}
-				<p>Ingen tidligere arrangementer</p>
-			{/each}
-		</ul>
-	</div>
-{/if}
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 6ed2cba1..fd0036ef 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -1,55 +1,155 @@
 <script lang="ts">
-	import Heading from '$lib/components/ui/Heading.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import { subHours } from 'date-fns';
 	import { formatDate, time } from '$lib/date';
 	import { capitalize } from '$lib/utils';
 	import { enhance } from '$app/forms';
 	import { getUser } from '$lib/context/user.context.js';
+	import { X, Plus, Calendar, Clock, Users, ArrowLeft } from '@lucide/svelte';
 
 	let { data } = $props();
-
 	let user = getUser();
+	let activeTab = $state('details');
+	let isPastEvent = $derived(new Date() > new Date(data.event.date));
 </script>
 
 <svelte:head>
 	<title>{data.event.name}</title>
 </svelte:head>
 
-<Heading>{data.event.name}</Heading>
+<section>
+	<a
+		href="/portal/arrangementer/"
+		class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-600"
+	>
+		<ArrowLeft size={16} />
+		Tilbake
+	</a>
+</section>
 
 <section class="mt-8">
-	<Heading level={2}>Vakter</Heading>
+	<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+		<div class="border-b-2 bg-gray-200 px-6 py-4">
+			<div>
+				<h1 class="break-words text-xl font-semibold">{data.event.name}</h1>
+			</div>
+		</div>
+		<div class="border-b px-6 pt-4">
+			<div class="flex gap-2">
+				<button
+					class={`rounded-t-lg px-4 py-2 font-medium transition-colors ${activeTab === 'details' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+					onclick={() => (activeTab = 'details')}
+				>
+					Detaljer
+				</button>
+				<button
+					class={`rounded-t-lg px-4 py-2 font-medium transition-colors ${activeTab === 'shifts' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+					onclick={() => (activeTab = 'shifts')}
+				>
+					Vakter
+				</button>
+			</div>
+		</div>
 
-	<ul class="mt-2 flex flex-col gap-4">
-		{#each data.event.shifts as shift}
-			{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
-			<li class="block rounded-lg border bg-white p-4">
-				<p>{capitalize(formatDate(shift.startAt))}</p>
-				<p>{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
-				<p><b>Ansvarlige</b>: {shift.members.map((member) => member.user.name).join(', ')}</p>
+		<div class="p-6">
+			{#if activeTab === 'details'}
+				<div class="space-y-4">
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
+							<Calendar size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Dato</h3>
+							<p>{formatDate(data.event.date)}</p>
+						</div>
+					</div>
 
-				{#if !isInShift}
-					<form class="mt-4" action="?/join" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-blue-500 hover:underline">Bli med på vakten &rarr;</button>
-					</form>
-				{:else}
-					<form class="mt-4" action="?/leave" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-red-500 hover:underline">Forlat vakten &rarr;</button>
-					</form>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-</section>
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
+							<Clock size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Antall vakter</h3>
+							<p>
+								{data.event.shifts.length}
+								{data.event.shifts.length === 1 ? 'vakt' : 'vakter'}
+							</p>
+						</div>
+					</div>
 
-<section class="mt-8">
-	{#if data.user?.role === 'board'}
-		<Heading level={2}>Farlig</Heading>
-		<form action="?/delete" method="post" use:enhance>
-			<Button intent="danger" class="mt-4">Slett arrangement</Button>
-		</form>
-	{/if}
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
+							<Users size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Ansvarlige</h3>
+							<ul class="text-sm">
+								{#each data.event.shifts as shift, i}
+									<li>
+										<strong>Vakt {i + 1}:</strong>
+										{shift.members.map((member) => member.user.name).join(', ') ||
+											'Ingen ansvarlige'}
+									</li>
+								{/each}
+							</ul>
+						</div>
+					</div>
+				</div>
+			{:else if activeTab === 'shifts'}
+				<div class="space-y-4">
+					{#each data.event.shifts as shift, i}
+						{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
+						<div class="overflow-hidden rounded-lg border">
+							<div class="border-b bg-gray-200 px-4 py-2">
+								<h3 class="font-medium">Vakt {i + 1}</h3>
+							</div>
+							<div class="space-y-2 p-4">
+								<div class="grid grid-cols-2 gap-2">
+									<div>
+										<p class="text-sm text-gray-500">Dato</p>
+										<p class="font-medium">{capitalize(formatDate(shift.startAt))}</p>
+									</div>
+									<div>
+										<p class="text-sm text-gray-500">Tid</p>
+										<p class="font-medium">
+											{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}
+										</p>
+									</div>
+								</div>
+								<div>
+									<p class="text-sm text-gray-500">Ansvarlige</p>
+									<p class="font-medium">
+										{shift.members.map((member) => member.user.name).join(', ') ||
+											'Ingen ansvarlige'}
+									</p>
+								</div>
+								{#if !isPastEvent}
+									{#if !isInShift}
+										<form action="?/join" method="post" use:enhance>
+											<input type="hidden" name="shiftId" value={shift.id} />
+											<button
+												class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
+											>
+												<Plus size={16} />
+												Bli med på vakten
+											</button>
+										</form>
+									{:else}
+										<form action="?/leave" method="post" use:enhance>
+											<input type="hidden" name="shiftId" value={shift.id} />
+											<button
+												class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
+											>
+												<X size={16} />
+												Forlat vakten
+											</button>
+										</form>
+									{/if}
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
 </section>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
new file mode 100644
index 00000000..37178573
--- /dev/null
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -0,0 +1,133 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals, params }) => {
+	const event = await locals.eventService.findFullEventById(params.id);
+	if (!event) {
+		throw error(404, 'Event not found');
+	}
+
+	const users = await locals.userService.findAll().then((users) =>
+		users.map((user) => ({
+			label: user.name,
+			value: user.id
+		}))
+	);
+
+	return {
+		event,
+		users
+	};
+};
+
+export const actions: Actions = {
+	delete: async ({ params, locals }) => {
+		if (locals.user?.role !== 'board') {
+			return fail(401, { message: 'Unauthorized' });
+		}
+
+		await locals.eventService.delete(params.id);
+		throw redirect(303, '/portal/arrangementer');
+	},
+
+	save: async ({ request, params, locals }) => {
+		if (locals.user?.role !== 'board') {
+			return fail(401, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const eventId = params.id;
+
+		await locals.eventService.updateEvent(params.id, {
+			name: String(formData.get('name') || ''),
+			date: new Date(String(formData.get('date') || ''))
+		});
+
+		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
+		for (const shiftId of deletedShiftIds) {
+			await locals.eventService.deleteShift(shiftId);
+		}
+
+		const removedUserShifts = formData.getAll('removedUserShifts').map((kv) => String(kv));
+		for (const userShift of removedUserShifts) {
+			const [shiftId, userId] = userShift.split('|');
+			if (shiftId && userId) {
+				await locals.eventService.deleteUserShift({ shiftId, userId });
+			}
+		}
+
+		const existingEvent = await locals.eventService.findFullEventById(eventId);
+		if (!existingEvent) {
+			return fail(404, { message: 'Event not found' });
+		}
+
+		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
+		const processedShifts = [];
+
+		for (let i = 0; i < shiftsCount; i++) {
+			const shiftId = formData.get(`shift[${i}].id`)?.toString();
+			const startAt = new Date(String(formData.get(`shift[${i}].startAt`)));
+			const endAt = new Date(String(formData.get(`shift[${i}].endAt`)));
+
+			let shift;
+
+			if (shiftId) {
+				shift = await locals.eventService.updateShift(shiftId, {
+					eventId,
+					startAt,
+					endAt
+				});
+			} else {
+				const shifts = await locals.eventService.createShifts([
+					{
+						eventId,
+						startAt,
+						endAt
+					}
+				]);
+				shift = shifts?.[0];
+			}
+
+			if (!shift) {
+				return fail(500, { message: 'Failed to create/update shift' });
+			}
+
+			processedShifts.push({
+				shiftId: shift.id,
+				index: i
+			});
+		}
+
+		for (const { shiftId, index } of processedShifts) {
+			const userCount = parseInt(String(formData.get(`shift[${index}].userCount`) || '0'), 10);
+
+			const existingShift = existingEvent.shifts.find((s) => s.id === shiftId);
+			const existingUserIds = existingShift?.members.map((m) => m.user.id) || [];
+
+			const newUserIds: string[] = [];
+			for (let j = 0; j < userCount; j++) {
+				const userId = formData.get(`shift[${index}].user[${j}].id`)?.toString();
+				if (userId?.trim()) {
+					newUserIds.push(userId);
+				}
+			}
+
+			const usersToAdd = newUserIds.filter((userId) => !existingUserIds.includes(userId));
+			const usersToRemove = existingUserIds.filter((userId) => !newUserIds.includes(userId));
+
+			if (usersToAdd.length > 0) {
+				const userShiftsToCreate = usersToAdd.map((userId) => ({
+					shiftId,
+					userId
+				}));
+				await locals.eventService.createUserShifts(userShiftsToCreate);
+			}
+
+			for (const userId of usersToRemove) {
+				await locals.eventService.deleteUserShift({ shiftId, userId });
+			}
+		}
+
+		return { success: true, message: 'Vakten har blitt oppdatert' };
+	}
+};
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
new file mode 100644
index 00000000..8cc8a388
--- /dev/null
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -0,0 +1,247 @@
+<script lang="ts">
+	import { X, Plus, Save, Trash2 } from '@lucide/svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import FormInput from '$lib/components/ui/form/FormInput.svelte';
+	import Combobox from '$lib/components/ui/Combobox.svelte';
+	import { enhance } from '$app/forms';
+	import { CreateEventState } from '$lib/states/create-event-state.svelte';
+	import { ISOStandard } from '$lib/date';
+	import { beforeNavigate } from '$app/navigation';
+
+	let { data, form } = $props();
+
+	let showDeleteConfirm = $state(false);
+
+	const eventState = new CreateEventState();
+
+	eventState.name = data.event.name;
+	eventState.date = ISOStandard(data.event.date);
+
+	data.event.shifts.forEach((shift) => {
+		eventState.shifts.push({
+			startAt: ISOStandard(shift.startAt),
+			endAt: ISOStandard(shift.endAt),
+			users: shift.members.map((member) => ({
+				id: member.user.id,
+				name: member.user.name
+			}))
+		});
+	});
+
+	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
+	let deletedShiftIds = $state([] as string[]);
+	let removedUserShifts = $state([] as string[]);
+
+	beforeNavigate(({ cancel }) => {
+		if (deletedShiftIds.length > 0 || removedUserShifts.length > 0) {
+			if (!confirm('Du har ulagrede endringer. Er du sikker på at du vil forlate siden?')) {
+				cancel();
+			}
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Rediger arrangement: {eventState.name}</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+	<div class="items-centter flex justify-between border-b-2 bg-gray-200 px-6 py-4">
+		<h2 class="text-lg font-semibold">Arrangement detaljer</h2>
+		<form method="POST" action="?/delete" use:enhance>
+			<Button
+				type="submit"
+				intent="danger"
+				onclick={(e) => {
+					if (!showDeleteConfirm) {
+						e.preventDefault();
+						showDeleteConfirm = true;
+					}
+				}}
+			>
+				<Trash2 class="mr-1 h-4 w-4" />
+				{showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
+			</Button>
+		</form>
+	</div>
+
+	<div class="p-6">
+		{#if form?.message}
+			<div
+				class="mb-4 rounded-md p-4 {form.success
+					? 'bg-green-50 text-green-700'
+					: 'bg-red-50 text-red-700'}"
+			>
+				<p>{form.message}</p>
+			</div>
+		{/if}
+
+		{#if deletedShiftIds.length > 0 || removedUserShifts.length > 0}
+			<div class="mb-4 rounded-md bg-yellow-50 p-4 text-yellow-700">
+				<p class="font-medium">Ulagrede endringer:</p>
+				<ul class="mt-1 text-sm">
+					{#if deletedShiftIds.length > 0}
+						<li>
+							• {deletedShiftIds.length} vakt{deletedShiftIds.length > 1 ? 'er' : ''} vil bli slettet
+						</li>
+					{/if}
+					{#if removedUserShifts.length > 0}
+						<li>
+							• {removedUserShifts.length} bruker{removedUserShifts.length > 1 ? 'e' : ''} vil bli fjernet
+						</li>
+					{/if}
+				</ul>
+			</div>
+		{/if}
+
+		<form method="POST" action="?/save" use:enhance>
+			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
+			{#each deletedShiftIds as id}
+				<input type="hidden" name="deletedShiftIds" value={id} />
+			{/each}
+			{#each removedUserShifts as keyValue}
+				<input type="hidden" name="removedUserShifts" value={keyValue} />
+			{/each}
+
+			<div class="mb-6 rounded-lg border-2 bg-background p-4 shadow-lg">
+				<div class="space-y-4">
+					<FormInput label="Navn" name="name" bind:value={eventState.name} required />
+					<FormInput
+						label="Dato"
+						name="date"
+						bind:value={eventState.date}
+						type="datetime-local"
+						required
+					/>
+				</div>
+			</div>
+
+			<div class="mb-6">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="text-lg font-medium">Vakter</h2>
+					<Button
+						type="button"
+						intent="primary"
+						class="text-sm"
+						onclick={() => eventState.addShift()}
+					>
+						<Plus class="mr-1 h-4 w-4" />
+						Legg til vakt
+					</Button>
+				</div>
+
+				{#each eventState.shifts as shift, i}
+					<div class="mb-4 rounded-lg border-2 bg-background p-4 shadow-lg transition-opacity">
+						<div class="flex items-center justify-between">
+							<h3 class="font-medium">Vakt {i + 1}</h3>
+							<button
+								type="button"
+								class="rounded-full p-1 text-red-400 hover:text-red-600"
+								onclick={() => {
+									if (i < originalShifts.length) {
+										deletedShiftIds.push(originalShifts[i].id);
+									}
+									eventState.deleteShift(i);
+
+									if (i < originalShifts.length) {
+										originalShifts.splice(i, 1);
+									}
+								}}
+							>
+								<X class="h-4 w-4" />
+							</button>
+						</div>
+
+						{#if i < originalShifts.length}
+							<input type="hidden" name={`shift[${i}].id`} value={originalShifts[i].id} />
+						{/if}
+
+						<div class="mt-4 grid gap-4 md:grid-cols-2">
+							<FormInput
+								label="Start"
+								name={`shift[${i}].startAt`}
+								bind:value={shift.startAt}
+								type="datetime-local"
+								required
+							/>
+							<FormInput
+								label="Slutt"
+								name={`shift[${i}].endAt`}
+								bind:value={shift.endAt}
+								type="datetime-local"
+								required
+							/>
+						</div>
+
+						<div class="mt-4 border-t pt-4">
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="font-medium">Ansvarlige</h4>
+								<Button type="button" class="text-sm" onclick={() => eventState.addUserToShift(i)}>
+									<Plus class="mr-1 h-4 w-4" />
+									Legg til
+								</Button>
+							</div>
+
+							<input type="hidden" name={`shift[${i}].userCount`} value={shift.users.length} />
+
+							{#if shift.users.length === 0}
+								<p class="py-2 text-sm italic text-gray-500">Ingen ansvarlige</p>
+							{:else}
+								<div class="space-y-2">
+									{#each shift.users as user, j}
+										<div class="flex items-center gap-2">
+											<Combobox
+												name={`shift[${i}].user[${j}].name`}
+												class="flex-1"
+												bind:value={user.name}
+												options={data.users}
+												disabledOptions={eventState.shifts[i].users
+													.filter((u) => u.id && u.id !== user.id)
+													.map((u) => u.id)}
+												onchange={(option) => {
+													if (option?.value) {
+														user.id = option.value;
+														user.name = option.label || '';
+													}
+												}}
+												placeholder="Velg en bruker"
+											/>
+											<input type="hidden" name={`shift[${i}].user[${j}].id`} value={user.id} />
+											<button
+												type="button"
+												class="flex h-10 w-10 items-center justify-center rounded-lg border hover:text-red-500"
+												onclick={() => {
+													if (i < originalShifts.length && user.id) {
+														removedUserShifts = [
+															...removedUserShifts,
+															`${originalShifts[i].id}|${user.id}`
+														];
+													}
+													eventState.deleteUserFromShift(i, user.id);
+												}}
+											>
+												<X class="h-4 w-4" />
+											</button>
+										</div>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			<div class="flex justify-end gap-4 border-t pt-6">
+				<div class="flex gap-2">
+					<a href="/portal/arrangementer/">
+						<Button type="button" intent="warning">Avbryt</Button>
+					</a>
+					<Button type="submit" intent="primary" disabled={!eventState.isValid()}>
+						<Save class="mr-1 h-4 w-4" />
+						Lagre endringer
+					</Button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 51cbb19d..fe128b46 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { EventHandler } from 'svelte/elements';
-	import { X } from '@lucide/svelte';
-	import Heading from '$lib/components/ui/Heading.svelte';
+	import { X, Plus, Save, Clock } from '@lucide/svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Combobox from '$lib/components/ui/Combobox.svelte';
@@ -54,101 +53,164 @@
 	<title>Nytt arrangement</title>
 </svelte:head>
 
-<Heading class="mb-4">Nytt arrangement</Heading>
-
-{#if error}
-	<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
-		<p>{error}</p>
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+	<div class="border-b-2 bg-gray-200 px-6 py-4">
+		<h2 class="text-lg font-medium">Nytt arrangement</h2>
 	</div>
-{/if}
+	<div class="p-6">
+		{#if error}
+			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
+				<p>{error}</p>
+			</div>
+		{/if}
 
-{#if successMessage}
-	<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
-		<p>{successMessage}</p>
-	</div>
-{/if}
-
-<form onsubmit={handleSubmit} class="space-y-2">
-	<FormInput
-		label="Navn"
-		description="Navnet på arrangementet"
-		placeholder="Fest med Foobar"
-		bind:value={createEventState.name}
-		required
-	/>
-	<FormInput
-		label="Dato"
-		description="Start datoen på arrangementet"
-		bind:value={createEventState.date}
-		type="datetime-local"
-		required
-	/>
-	{#each createEventState.shifts as shift, i}
-		{@const shiftLength = differenceInHours(shift.endAt, shift.startAt)}
-		<div class="relative flex flex-col space-y-2 rounded-lg border border-border p-4">
-			<button
-				type="button"
-				class="absolute right-4 top-4 text-red-400 transition-colors hover:text-red-600"
-				onclick={() => createEventState.deleteShift(i)}
-			>
-				<X class="h-4 w-4" />
-			</button>
-			<h2 class="text-lg font-semibold">Vakt {i + 1}</h2>
-			<FormInput
-				label="Start"
-				description="Start tidspunkt for vakten"
-				bind:value={shift.startAt}
-				type="datetime-local"
-				required
-			/>
-			<FormInput
-				label="Slutt"
-				description="Slutt tidspunkt for vakten"
-				bind:value={shift.endAt}
-				type="datetime-local"
-				required
-			/>
-			{#if shiftLength >= 4}
-				<span class="text-sm font-medium text-orange-500">NB: Vakten er lengre enn 4 timer!</span>
-			{/if}
-			<span class="mt-8 text-sm font-medium">Ansvarlige</span>
-			<div class="text-xs text-gray-500">
-				Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet opprettes.
+		{#if successMessage}
+			<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
+				<p>{successMessage}</p>
 			</div>
-			{#each createEventState.shifts[i].users as user, j (user)}
-				<div class="flex items-center gap-2">
-					<Combobox
-						name="user"
-						class="flex-1"
-						bind:value={createEventState.shifts[i].users[j].name}
-						disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
-						onchange={(option) => {
-							const id = option?.value;
-							if (id) {
-								createEventState.shifts[i].users[j].id = id;
-							}
-						}}
-						options={data.users}
-						placeholder="Velg en bruker"
+		{/if}
+
+		<form onsubmit={handleSubmit} class="space-y-6">
+			<div class="rounded-lg border-2 bg-background p-4 shadow-lg">
+				<div class="space-y-4">
+					<FormInput
+						label="Navn"
+						description="Navn på arrangement"
+						placeholder="Fest med Foobar"
+						bind:value={createEventState.name}
+						required
+					/>
+					<FormInput
+						label="Dato"
+						description="Start datoen på arrangementet"
+						bind:value={createEventState.date}
+						type="datetime-local"
+						required
 					/>
-					<button
-						type="button"
-						class="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-white transition-colors hover:text-red-500"
-						onclick={() => createEventState.deleteUserFromShift(i, user.id)}
-					>
-						<X class="size-4" />
-					</button>
 				</div>
-			{:else}
-				<p class="text-sm text-gray-600">Ingen ansvarlige. Husk å legge til.</p>
-			{/each}
-			<Button type="button" onclick={() => createEventState.addUserToShift(i)}
-				>Legg til bruker</Button
-			>
-		</div>
-	{/each}
-	<Button type="button" onclick={() => createEventState.addShift()}>Legg til vakt</Button>
-	<Button type="submit" disabled={isSubmitting}>
-		{isSubmitting ? 'Lagrer...' : 'Lagre'}
-	</Button>
-</form>
+			</div>
+
+			<div>
+				<h2 class="mb-4 text-lg font-medium">Vakter</h2>
+				{#each createEventState.shifts as shift, i}
+					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
+					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
+					{@const shiftLength = differenceInHours(endDate, startDate)}
+					<div
+						class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4 shadow-lg"
+					>
+						<div class="flex items-center justify-between">
+							<h3 class="font-medium">Vakt {i + 1}</h3>
+							<button
+								type="button"
+								class="rounded-full p-1 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600"
+								onclick={() => createEventState.deleteShift(i)}
+							>
+								<X class="h-4 w-4" />
+							</button>
+						</div>
+
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<FormInput
+								label="Start"
+								description="Start tidspunkt for vakten"
+								bind:value={shift.startAt}
+								type="datetime-local"
+								required
+							/>
+							<FormInput
+								label="Slutt"
+								description="Slutt tidspunkt for vakten"
+								bind:value={shift.endAt}
+								type="datetime-local"
+								required
+							/>
+						</div>
+
+						{#if shiftLength >= 4}
+							<div class="flex items-center gap-2 rounded bg-orange-50 p-2 text-sm text-orange-700">
+								<Clock size={16} />
+								<span>NB: Vakten er lengre enn 4 timer!</span>
+							</div>
+						{/if}
+
+						<div class="mt-2 border-t border-gray-100 pt-4">
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="font-medium">Ansvarlige</h4>
+								<Button
+									type="button"
+									onclick={() => createEventState.addUserToShift(i)}
+									class="h-auto px-3 py-1 text-sm"
+								>
+									<Plus size={14} class="mr-1" />
+									Legg til
+								</Button>
+							</div>
+							<p class="mb-3 text-xs text-gray-500">
+								Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet
+								oppdateres.
+							</p>
+
+							<div class="space-y-2">
+								{#each createEventState.shifts[i].users as user, j (user)}
+									<div class="flex items-center gap-2">
+										<Combobox
+											name="user"
+											class="flex-1"
+											bind:value={createEventState.shifts[i].users[j].name}
+											disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
+											onchange={(option) => {
+												const id = option?.value;
+												if (id) {
+													createEventState.shifts[i].users[j].id = id;
+												}
+											}}
+											options={data.users}
+											placeholder="Velg en bruker"
+										/>
+										<button
+											type="button"
+											class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white transition-colors hover:text-red-500"
+											onclick={() => createEventState.deleteUserFromShift(i, user.id)}
+										>
+											<X class="size-4" />
+										</button>
+									</div>
+								{:else}
+									<p class="text-sm text-gray-500 italic py-2">
+										Ingen ansvarlige. Husk å legge til.
+									</p>
+								{/each}
+							</div>
+						</div>
+					</div>
+				{/each}
+
+				<Button
+					type="button"
+					intent="primary"
+					class="mb-6 w-full justify-center"
+					onclick={() => createEventState.addShift()}
+				>
+					<Plus size={16} class="mr-1" />
+					Legg til ny vakt
+				</Button>
+			</div>
+
+			<div class="flex justify-end gap-4 border-t pt-6">
+				<a href="/portal/arrangementer/">
+					<Button type="button" intent="warning">Avbryt</Button>
+				</a>
+				<Button
+					type="submit"
+					intent="primary"
+					disabled={isSubmitting}
+					class="flex items-center gap-2"
+				>
+					<Save size={16} />
+					{isSubmitting ? 'Lagrer...' : 'Lagre endringer'}
+				</Button>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/apps/www/src/routes/portal/brukere/+page.svelte b/apps/www/src/routes/portal/brukere/+page.svelte
index af75a7a5..8771fb08 100644
--- a/apps/www/src/routes/portal/brukere/+page.svelte
+++ b/apps/www/src/routes/portal/brukere/+page.svelte
@@ -13,9 +13,11 @@
 	let search = $state('');
 
 	let filteredUsers = $derived.by(() =>
-		data.users.filter((user) => {
-			return user.name.toLowerCase().includes(search.toLowerCase());
-		})
+		data.users
+			.filter((user) => {
+				return user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 </script>