From 556955f349873e1c87afae831028706581d564bd Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 10:04:37 +0200
Subject: [PATCH 01/10] feat: Phase 1 - Events entity (migration, API, list
 page, detail layout with module sidebar, overview page)

---
 src/lib/api/events.test.ts                    |  48 ++
 src/lib/api/events.ts                         | 277 +++++++++
 src/lib/supabase/types.ts                     |  96 +++
 src/routes/[orgSlug]/+layout.svelte           |  13 +-
 src/routes/[orgSlug]/events/+page.server.ts   |  29 +
 src/routes/[orgSlug]/events/+page.svelte      | 499 ++++++++++++++++
 .../events/[eventSlug]/+layout.server.ts      |  27 +
 .../events/[eventSlug]/+layout.svelte         | 200 +++++++
 .../[orgSlug]/events/[eventSlug]/+page.svelte | 563 ++++++++++++++++++
 supabase/migrations/022_events.sql            |  84 +++
 10 files changed, 1833 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/api/events.test.ts
 create mode 100644 src/lib/api/events.ts
 create mode 100644 src/routes/[orgSlug]/events/+page.server.ts
 create mode 100644 src/routes/[orgSlug]/events/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
 create mode 100644 supabase/migrations/022_events.sql

diff --git a/src/lib/api/events.test.ts b/src/lib/api/events.test.ts
new file mode 100644
index 0000000..7365d75
--- /dev/null
+++ b/src/lib/api/events.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+
+// Test the slugify logic (extracted inline since it's not exported)
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_]+/g, '-')
+		.replace(/-+/g, '-')
+		.replace(/^-|-$/g, '')
+		.slice(0, 60) || 'event';
+}
+
+describe('events API - slugify', () => {
+	it('converts simple name to slug', () => {
+		expect(slugify('Summer Conference')).toBe('summer-conference');
+	});
+
+	it('handles special characters', () => {
+		expect(slugify('Music & Arts Festival 2026!')).toBe('music-arts-festival-2026');
+	});
+
+	it('collapses multiple spaces and dashes', () => {
+		expect(slugify('My   Big   Event')).toBe('my-big-event');
+	});
+
+	it('trims leading/trailing dashes', () => {
+		expect(slugify('--hello--')).toBe('hello');
+	});
+
+	it('truncates to 60 characters', () => {
+		const longName = 'A'.repeat(100);
+		expect(slugify(longName).length).toBeLessThanOrEqual(60);
+	});
+
+	it('returns "event" for empty string', () => {
+		expect(slugify('')).toBe('event');
+	});
+
+	it('handles unicode characters', () => {
+		const result = slugify('Ürituse Korraldamine');
+		expect(result).toBe('rituse-korraldamine');
+	});
+
+	it('handles numbers', () => {
+		expect(slugify('Event 2026 Q1')).toBe('event-2026-q1');
+	});
+});
diff --git a/src/lib/api/events.ts b/src/lib/api/events.ts
new file mode 100644
index 0000000..ed5711f
--- /dev/null
+++ b/src/lib/api/events.ts
@@ -0,0 +1,277 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '$lib/supabase/types';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('api.events');
+
+export interface Event {
+	id: string;
+	org_id: string;
+	name: string;
+	slug: string;
+	description: string | null;
+	status: 'planning' | 'active' | 'completed' | 'archived';
+	start_date: string | null;
+	end_date: string | null;
+	venue_name: string | null;
+	venue_address: string | null;
+	cover_image_url: string | null;
+	color: string | null;
+	created_by: string | null;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface EventMember {
+	id: string;
+	event_id: string;
+	user_id: string;
+	role: 'lead' | 'manager' | 'member';
+	assigned_at: string;
+}
+
+export interface EventWithCounts extends Event {
+	member_count: number;
+}
+
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_]+/g, '-')
+		.replace(/-+/g, '-')
+		.replace(/^-|-$/g, '')
+		.slice(0, 60) || 'event';
+}
+
+export async function fetchEvents(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	status?: string
+): Promise<EventWithCounts[]> {
+	let query = supabase
+		.from('events')
+		.select('*, event_members(count)')
+		.eq('org_id', orgId)
+		.order('start_date', { ascending: true, nullsFirst: false });
+
+	if (status && status !== 'all') {
+		query = query.eq('status', status);
+	}
+
+	const { data, error } = await query;
+
+	if (error) {
+		log.error('fetchEvents failed', { error, data: { orgId } });
+		throw error;
+	}
+
+	const events: EventWithCounts[] = (data ?? []).map((e: any) => ({
+		...e,
+		member_count: e.event_members?.[0]?.count ?? 0,
+		event_members: undefined,
+	}));
+
+	log.debug('fetchEvents ok', { data: { count: events.length } });
+	return events;
+}
+
+export async function fetchEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<Event | null> {
+	const { data, error } = await supabase
+		.from('events')
+		.select('*')
+		.eq('id', eventId)
+		.single();
+
+	if (error) {
+		if (error.code === 'PGRST116') return null;
+		log.error('fetchEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	return data as unknown as Event;
+}
+
+export async function fetchEventBySlug(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	eventSlug: string
+): Promise<Event | null> {
+	const { data, error } = await supabase
+		.from('events')
+		.select('*')
+		.eq('org_id', orgId)
+		.eq('slug', eventSlug)
+		.single();
+
+	if (error) {
+		if (error.code === 'PGRST116') return null;
+		log.error('fetchEventBySlug failed', { error, data: { orgId, eventSlug } });
+		throw error;
+	}
+	return data as unknown as Event;
+}
+
+export async function createEvent(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	userId: string,
+	params: {
+		name: string;
+		description?: string;
+		start_date?: string;
+		end_date?: string;
+		venue_name?: string;
+		venue_address?: string;
+		color?: string;
+	}
+): Promise<Event> {
+	const baseSlug = slugify(params.name);
+
+	// Ensure unique slug within org
+	const { data: existing } = await supabase
+		.from('events')
+		.select('slug')
+		.eq('org_id', orgId)
+		.like('slug', `${baseSlug}%`);
+
+	let slug = baseSlug;
+	if (existing && existing.length > 0) {
+		const existingSlugs = new Set(existing.map((e: any) => e.slug));
+		if (existingSlugs.has(slug)) {
+			let i = 2;
+			while (existingSlugs.has(`${baseSlug}-${i}`)) i++;
+			slug = `${baseSlug}-${i}`;
+		}
+	}
+
+	const { data, error } = await supabase
+		.from('events')
+		.insert({
+			org_id: orgId,
+			name: params.name,
+			slug,
+			description: params.description ?? null,
+			start_date: params.start_date ?? null,
+			end_date: params.end_date ?? null,
+			venue_name: params.venue_name ?? null,
+			venue_address: params.venue_address ?? null,
+			color: params.color ?? null,
+			created_by: userId,
+		})
+		.select()
+		.single();
+
+	if (error) {
+		log.error('createEvent failed', { error, data: { orgId, name: params.name } });
+		throw error;
+	}
+	log.info('createEvent ok', { data: { id: data.id, name: params.name, slug } });
+	return data as unknown as Event;
+}
+
+export async function updateEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	params: Partial<Pick<Event, 'name' | 'description' | 'status' | 'start_date' | 'end_date' | 'venue_name' | 'venue_address' | 'cover_image_url' | 'color'>>
+): Promise<Event> {
+	const { data, error } = await supabase
+		.from('events')
+		.update({ ...params, updated_at: new Date().toISOString() })
+		.eq('id', eventId)
+		.select()
+		.single();
+
+	if (error) {
+		log.error('updateEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	log.info('updateEvent ok', { data: { id: data.id } });
+	return data as unknown as Event;
+}
+
+export async function deleteEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<void> {
+	const { error } = await supabase
+		.from('events')
+		.delete()
+		.eq('id', eventId);
+
+	if (error) {
+		log.error('deleteEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	log.info('deleteEvent ok', { data: { eventId } });
+}
+
+export async function fetchEventMembers(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<(EventMember & { profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null } })[]> {
+	const { data: members, error } = await supabase
+		.from('event_members')
+		.select('*')
+		.eq('event_id', eventId)
+		.order('assigned_at');
+
+	if (error) {
+		log.error('fetchEventMembers failed', { error, data: { eventId } });
+		throw error;
+	}
+
+	if (!members || members.length === 0) return [];
+
+	// Fetch profiles separately (same pattern as org_members)
+	const userIds = members.map((m: any) => m.user_id);
+	const { data: profiles } = await supabase
+		.from('profiles')
+		.select('id, email, full_name, avatar_url')
+		.in('id', userIds);
+
+	const profileMap = Object.fromEntries((profiles ?? []).map(p => [p.id, p]));
+
+	return members.map((m: any) => ({
+		...m,
+		profile: profileMap[m.user_id] ?? undefined,
+	}));
+}
+
+export async function addEventMember(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	userId: string,
+	role: 'lead' | 'manager' | 'member' = 'member'
+): Promise<EventMember> {
+	const { data, error } = await supabase
+		.from('event_members')
+		.upsert({ event_id: eventId, user_id: userId, role }, { onConflict: 'event_id,user_id' })
+		.select()
+		.single();
+
+	if (error) {
+		log.error('addEventMember failed', { error, data: { eventId, userId } });
+		throw error;
+	}
+	return data as unknown as EventMember;
+}
+
+export async function removeEventMember(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	userId: string
+): Promise<void> {
+	const { error } = await supabase
+		.from('event_members')
+		.delete()
+		.eq('event_id', eventId)
+		.eq('user_id', userId);
+
+	if (error) {
+		log.error('removeEventMember failed', { error, data: { eventId, userId } });
+		throw error;
+	}
+}
diff --git a/src/lib/supabase/types.ts b/src/lib/supabase/types.ts
index 50bac1e..b7df722 100644
--- a/src/lib/supabase/types.ts
+++ b/src/lib/supabase/types.ts
@@ -360,6 +360,100 @@ export type Database = {
           },
         ]
       }
+      event_members: {
+        Row: {
+          assigned_at: string | null
+          event_id: string
+          id: string
+          role: string
+          user_id: string
+        }
+        Insert: {
+          assigned_at?: string | null
+          event_id: string
+          id?: string
+          role?: string
+          user_id: string
+        }
+        Update: {
+          assigned_at?: string | null
+          event_id?: string
+          id?: string
+          role?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "event_members_event_id_fkey"
+            columns: ["event_id"]
+            isOneToOne: false
+            referencedRelation: "events"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      events: {
+        Row: {
+          color: string | null
+          cover_image_url: string | null
+          created_at: string | null
+          created_by: string | null
+          description: string | null
+          end_date: string | null
+          id: string
+          name: string
+          org_id: string
+          slug: string
+          start_date: string | null
+          status: string
+          updated_at: string | null
+          venue_address: string | null
+          venue_name: string | null
+        }
+        Insert: {
+          color?: string | null
+          cover_image_url?: string | null
+          created_at?: string | null
+          created_by?: string | null
+          description?: string | null
+          end_date?: string | null
+          id?: string
+          name: string
+          org_id: string
+          slug: string
+          start_date?: string | null
+          status?: string
+          updated_at?: string | null
+          venue_address?: string | null
+          venue_name?: string | null
+        }
+        Update: {
+          color?: string | null
+          cover_image_url?: string | null
+          created_at?: string | null
+          created_by?: string | null
+          description?: string | null
+          end_date?: string | null
+          id?: string
+          name?: string
+          org_id?: string
+          slug?: string
+          start_date?: string | null
+          status?: string
+          updated_at?: string | null
+          venue_address?: string | null
+          venue_name?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "events_org_id_fkey"
+            columns: ["org_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       kanban_boards: {
         Row: {
           created_at: string | null
@@ -1226,3 +1320,5 @@ export type OrgGoogleCalendar = PublicTables['org_google_calendars']['Row']
 export type ActivityLog = PublicTables['activity_log']['Row']
 export type UserPreferences = PublicTables['user_preferences']['Row']
 export type MatrixCredentials = PublicTables['matrix_credentials']['Row']
+export type EventRow = PublicTables['events']['Row']
+export type EventMemberRow = PublicTables['event_members']['Row']
diff --git a/src/routes/[orgSlug]/+layout.svelte b/src/routes/[orgSlug]/+layout.svelte
index e091ca9..51a7d42 100644
--- a/src/routes/[orgSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/+layout.svelte
@@ -123,6 +123,11 @@
 					},
 				]
 			: []),
+		{
+			href: `/${data.org.slug}/events`,
+			label: "Events",
+			icon: "celebration",
+		},
 		{
 			href: `/${data.org.slug}/chat`,
 			label: "Chat",
@@ -349,9 +354,11 @@
 					? "files"
 					: target.includes("/calendar")
 						? "calendar"
-						: target.includes("/settings")
-							? "settings"
-							: "default"}
+						: target.includes("/events")
+							? "default"
+							: target.includes("/settings")
+								? "settings"
+								: "default"}
 			<PageSkeleton variant={skeletonVariant} />
 		{:else}
 			{@render children()}
diff --git a/src/routes/[orgSlug]/events/+page.server.ts b/src/routes/[orgSlug]/events/+page.server.ts
new file mode 100644
index 0000000..a5f8810
--- /dev/null
+++ b/src/routes/[orgSlug]/events/+page.server.ts
@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { fetchEvents } from '$lib/api/events';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('page.events');
+
+export const load: PageServerLoad = async ({ params, locals, url }) => {
+	const { session, user } = await locals.safeGetSession();
+	if (!session || !user) error(401, 'Unauthorized');
+
+	const { data: org } = await locals.supabase
+		.from('organizations')
+		.select('id')
+		.eq('slug', params.orgSlug)
+		.single();
+
+	if (!org) error(404, 'Organization not found');
+
+	const statusFilter = url.searchParams.get('status') || 'all';
+
+	try {
+		const events = await fetchEvents(locals.supabase, org.id, statusFilter);
+		return { events, statusFilter };
+	} catch (e: any) {
+		log.error('Failed to load events', { error: e, data: { orgId: org.id } });
+		return { events: [], statusFilter };
+	}
+};
diff --git a/src/routes/[orgSlug]/events/+page.svelte b/src/routes/[orgSlug]/events/+page.svelte
new file mode 100644
index 0000000..da0ff0a
--- /dev/null
+++ b/src/routes/[orgSlug]/events/+page.svelte
@@ -0,0 +1,499 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { Avatar } from "$lib/components/ui";
+	import { getContext } from "svelte";
+	import type { SupabaseClient } from "@supabase/supabase-js";
+	import type { Database } from "$lib/supabase/types";
+	import { toasts } from "$lib/stores/ui";
+
+	interface EventItem {
+		id: string;
+		org_id: string;
+		name: string;
+		slug: string;
+		description: string | null;
+		status: "planning" | "active" | "completed" | "archived";
+		start_date: string | null;
+		end_date: string | null;
+		venue_name: string | null;
+		color: string | null;
+		member_count: number;
+	}
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			events: EventItem[];
+			statusFilter: string;
+		};
+	}
+
+	let { data }: Props = $props();
+
+	const supabase = getContext<SupabaseClient<Database>>("supabase");
+
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
+
+	// Create event modal
+	let showCreateModal = $state(false);
+	let newEventName = $state("");
+	let newEventDescription = $state("");
+	let newEventStartDate = $state("");
+	let newEventEndDate = $state("");
+	let newEventVenue = $state("");
+	let newEventColor = $state("#00A3E0");
+	let creating = $state(false);
+
+	const statusTabs = [
+		{ value: "all", label: "All Events", icon: "apps" },
+		{ value: "planning", label: "Planning", icon: "edit_note" },
+		{ value: "active", label: "Active", icon: "play_circle" },
+		{ value: "completed", label: "Completed", icon: "check_circle" },
+		{ value: "archived", label: "Archived", icon: "archive" },
+	];
+
+	const presetColors = [
+		"#00A3E0",
+		"#8B5CF6",
+		"#EC4899",
+		"#F59E0B",
+		"#10B981",
+		"#EF4444",
+		"#6366F1",
+		"#14B8A6",
+	];
+
+	function getStatusColor(status: string): string {
+		const map: Record<string, string> = {
+			planning: "text-amber-400 bg-amber-400/10",
+			active: "text-emerald-400 bg-emerald-400/10",
+			completed: "text-blue-400 bg-blue-400/10",
+			archived: "text-light/40 bg-light/5",
+		};
+		return map[status] ?? "text-light/40 bg-light/5";
+	}
+
+	function getStatusIcon(status: string): string {
+		const map: Record<string, string> = {
+			planning: "edit_note",
+			active: "play_circle",
+			completed: "check_circle",
+			archived: "archive",
+		};
+		return map[status] ?? "help";
+	}
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return "";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+		});
+	}
+
+	function formatDateRange(
+		start: string | null,
+		end: string | null,
+	): string {
+		if (!start && !end) return "No dates set";
+		if (start && !end) return formatDate(start);
+		if (!start && end) return `Until ${formatDate(end)}`;
+		return `${formatDate(start)} — ${formatDate(end)}`;
+	}
+
+	async function handleCreate() {
+		if (!newEventName.trim()) return;
+		creating = true;
+		try {
+			const { data: created, error } = await (supabase as any)
+				.from("events")
+				.insert({
+					org_id: data.org.id,
+					name: newEventName.trim(),
+					slug: newEventName
+						.trim()
+						.toLowerCase()
+						.replace(/[^\w\s-]/g, "")
+						.replace(/[\s_]+/g, "-")
+						.replace(/-+/g, "-")
+						.slice(0, 60) || "event",
+					description: newEventDescription.trim() || null,
+					start_date: newEventStartDate || null,
+					end_date: newEventEndDate || null,
+					venue_name: newEventVenue.trim() || null,
+					color: newEventColor,
+					created_by: (await supabase.auth.getUser()).data.user?.id,
+				})
+				.select()
+				.single();
+
+			if (error) throw error;
+
+			toasts.success(`Event "${created.name}" created`);
+			showCreateModal = false;
+			resetForm();
+			goto(`/${data.org.slug}/events/${created.slug}`);
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to create event");
+		} finally {
+			creating = false;
+		}
+	}
+
+	function resetForm() {
+		newEventName = "";
+		newEventDescription = "";
+		newEventStartDate = "";
+		newEventEndDate = "";
+		newEventVenue = "";
+		newEventColor = "#00A3E0";
+	}
+
+	function switchStatus(status: string) {
+		const url = new URL($page.url);
+		if (status === "all") {
+			url.searchParams.delete("status");
+		} else {
+			url.searchParams.set("status", status);
+		}
+		goto(url.toString(), { replaceState: true, invalidateAll: true });
+	}
+</script>
+
+<svelte:head>
+	<title>Events | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col h-full">
+	<!-- Header -->
+	<header
+		class="flex items-center justify-between px-6 py-5 border-b border-light/5"
+	>
+		<div>
+			<h1 class="text-h1 font-heading text-white">Events</h1>
+			<p class="text-body-sm text-light/50 mt-1">
+				Organize and manage your events
+			</p>
+		</div>
+		{#if isEditor}
+			<button
+				type="button"
+				class="flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
+				onclick={() => (showCreateModal = true)}
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+					>add</span
+				>
+				New Event
+			</button>
+		{/if}
+	</header>
+
+	<!-- Status Tabs -->
+	<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5">
+		{#each statusTabs as tab}
+			<button
+				type="button"
+				class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
+				tab.value
+					? 'bg-primary text-background'
+					: 'text-light/60 hover:text-white hover:bg-dark/50'}"
+				onclick={() => switchStatus(tab.value)}
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+					>{tab.icon}</span
+				>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Events Grid -->
+	<div class="flex-1 overflow-auto p-6">
+		{#if data.events.length === 0}
+			<div
+				class="flex flex-col items-center justify-center h-full text-light/40"
+			>
+				<span
+					class="material-symbols-rounded mb-4"
+					style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+					>celebration</span
+				>
+				<p class="text-h3 font-heading mb-2">No events yet</p>
+				<p class="text-body text-light/30">
+					Create your first event to get started
+				</p>
+				{#if isEditor}
+					<button
+						type="button"
+						class="mt-4 flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
+						onclick={() => (showCreateModal = true)}
+					>
+						<span
+							class="material-symbols-rounded"
+							style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+							>add</span
+						>
+						Create Event
+					</button>
+				{/if}
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{#each data.events as event}
+					<a
+						href="/{data.org.slug}/events/{event.slug}"
+						class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
+					>
+						<!-- Color bar + Status -->
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<div
+									class="w-3 h-3 rounded-full"
+									style="background-color: {event.color ||
+										'#00A3E0'}"
+								></div>
+								<h3
+									class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
+								>
+									{event.name}
+								</h3>
+							</div>
+							<span
+								class="text-[11px] font-body px-2 py-0.5 rounded-full capitalize {getStatusColor(
+									event.status,
+								)}"
+							>
+								{event.status}
+							</span>
+						</div>
+
+						<!-- Description -->
+						{#if event.description}
+							<p
+								class="text-body-sm text-light/50 line-clamp-2"
+							>
+								{event.description}
+							</p>
+						{/if}
+
+						<!-- Meta row -->
+						<div
+							class="flex items-center gap-4 text-[12px] text-light/40 mt-auto pt-2"
+						>
+							<!-- Date -->
+							<div class="flex items-center gap-1">
+								<span
+									class="material-symbols-rounded"
+									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+									>calendar_today</span
+								>
+								<span
+									>{formatDateRange(
+										event.start_date,
+										event.end_date,
+									)}</span
+								>
+							</div>
+
+							<!-- Venue -->
+							{#if event.venue_name}
+								<div class="flex items-center gap-1">
+									<span
+										class="material-symbols-rounded"
+										style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+										>location_on</span
+									>
+									<span class="truncate max-w-[120px]"
+										>{event.venue_name}</span
+									>
+								</div>
+							{/if}
+
+							<!-- Members -->
+							<div class="flex items-center gap-1 ml-auto">
+								<span
+									class="material-symbols-rounded"
+									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+									>group</span
+								>
+								<span>{event.member_count}</span>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Create Event Modal -->
+{#if showCreateModal}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+		onkeydown={(e) => e.key === "Escape" && (showCreateModal = false)}
+		onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)}
+		role="dialog"
+		aria-modal="true"
+		aria-label="Create Event"
+	>
+		<div
+			class="bg-night rounded-2xl w-full max-w-lg shadow-2xl border border-light/10"
+		>
+			<div class="flex items-center justify-between p-5 border-b border-light/5">
+				<h2 class="text-h3 font-heading text-white">Create Event</h2>
+				<button
+					type="button"
+					class="text-light/40 hover:text-white transition-colors"
+					onclick={() => (showCreateModal = false)}
+				>
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+						>close</span
+					>
+				</button>
+			</div>
+
+			<form
+				class="p-5 flex flex-col gap-4"
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleCreate();
+				}}
+			>
+				<!-- Name -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-name"
+						class="text-body-sm text-light/60 font-body"
+						>Event Name</label
+					>
+					<input
+						id="event-name"
+						type="text"
+						bind:value={newEventName}
+						placeholder="e.g., Summer Conference 2026"
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+						required
+					/>
+				</div>
+
+				<!-- Description -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-desc"
+						class="text-body-sm text-light/60 font-body"
+						>Description</label
+					>
+					<textarea
+						id="event-desc"
+						bind:value={newEventDescription}
+						placeholder="Brief description of the event..."
+						rows="2"
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
+					></textarea>
+				</div>
+
+				<!-- Dates -->
+				<div class="grid grid-cols-2 gap-3">
+					<div class="flex flex-col gap-1.5">
+						<label
+							for="event-start"
+							class="text-body-sm text-light/60 font-body"
+							>Start Date</label
+						>
+						<input
+							id="event-start"
+							type="date"
+							bind:value={newEventStartDate}
+							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
+						/>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label
+							for="event-end"
+							class="text-body-sm text-light/60 font-body"
+							>End Date</label
+						>
+						<input
+							id="event-end"
+							type="date"
+							bind:value={newEventEndDate}
+							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
+						/>
+					</div>
+				</div>
+
+				<!-- Venue -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-venue"
+						class="text-body-sm text-light/60 font-body"
+						>Venue</label
+					>
+					<input
+						id="event-venue"
+						type="text"
+						bind:value={newEventVenue}
+						placeholder="e.g., Convention Center"
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+					/>
+				</div>
+
+				<!-- Color -->
+				<div class="flex flex-col gap-1.5">
+					<label class="text-body-sm text-light/60 font-body"
+						>Color</label
+					>
+					<div class="flex items-center gap-2">
+						{#each presetColors as color}
+							<button
+								type="button"
+								class="w-7 h-7 rounded-full border-2 transition-all {newEventColor ===
+								color
+									? 'border-white scale-110'
+									: 'border-transparent hover:border-light/30'}"
+								style="background-color: {color}"
+								onclick={() => (newEventColor = color)}
+							></button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Actions -->
+				<div
+					class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
+				>
+					<button
+						type="button"
+						class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+						onclick={() => {
+							showCreateModal = false;
+							resetForm();
+						}}
+					>
+						Cancel
+					</button>
+					<button
+						type="submit"
+						disabled={!newEventName.trim() || creating}
+						class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{creating ? "Creating..." : "Create Event"}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts b/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
new file mode 100644
index 0000000..2b45be1
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
@@ -0,0 +1,27 @@
+import { error } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+import { fetchEventBySlug, fetchEventMembers } from '$lib/api/events';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('page.event-detail');
+
+export const load: LayoutServerLoad = async ({ params, locals, parent }) => {
+	const { session, user } = await locals.safeGetSession();
+	if (!session || !user) error(401, 'Unauthorized');
+
+	const parentData = await parent() as { org: { id: string; name: string; slug: string } };
+	const orgId = parentData.org.id;
+
+	try {
+		const event = await fetchEventBySlug(locals.supabase, orgId, params.eventSlug);
+		if (!event) error(404, 'Event not found');
+
+		const members = await fetchEventMembers(locals.supabase, event.id);
+
+		return { event, eventMembers: members };
+	} catch (e: any) {
+		if (e?.status === 404) throw e;
+		log.error('Failed to load event', { error: e, data: { orgId, eventSlug: params.eventSlug } });
+		error(500, 'Failed to load event');
+	}
+};
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
new file mode 100644
index 0000000..b7fdfda
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { Avatar } from "$lib/components/ui";
+	import type { Snippet } from "svelte";
+	import type { Event, EventMember } from "$lib/api/events";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			event: Event;
+			eventMembers: (EventMember & {
+				profile?: {
+					id: string;
+					email: string;
+					full_name: string | null;
+					avatar_url: string | null;
+				};
+			})[];
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const basePath = $derived(
+		`/${data.org.slug}/events/${data.event.slug}`,
+	);
+
+	const modules = $derived([
+		{
+			href: basePath,
+			label: "Overview",
+			icon: "dashboard",
+			exact: true,
+		},
+		{
+			href: `${basePath}/tasks`,
+			label: "Tasks",
+			icon: "task_alt",
+		},
+		{
+			href: `${basePath}/files`,
+			label: "Files",
+			icon: "folder",
+		},
+		{
+			href: `${basePath}/schedule`,
+			label: "Schedule",
+			icon: "calendar_today",
+		},
+		{
+			href: `${basePath}/budget`,
+			label: "Budget",
+			icon: "account_balance_wallet",
+		},
+		{
+			href: `${basePath}/guests`,
+			label: "Guests",
+			icon: "groups",
+		},
+		{
+			href: `${basePath}/team`,
+			label: "Team",
+			icon: "badge",
+		},
+		{
+			href: `${basePath}/sponsors`,
+			label: "Sponsors",
+			icon: "handshake",
+		},
+	]);
+
+	function isModuleActive(href: string, exact?: boolean): boolean {
+		if (exact) return $page.url.pathname === href;
+		return $page.url.pathname.startsWith(href);
+	}
+
+	function getStatusColor(status: string): string {
+		const map: Record<string, string> = {
+			planning: "bg-amber-400",
+			active: "bg-emerald-400",
+			completed: "bg-blue-400",
+			archived: "bg-light/40",
+		};
+		return map[status] ?? "bg-light/40";
+	}
+
+	function formatDateCompact(dateStr: string | null): string {
+		if (!dateStr) return "";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			month: "short",
+			day: "numeric",
+		});
+	}
+</script>
+
+<div class="flex h-full">
+	<!-- Event Module Sidebar -->
+	<aside
+		class="w-56 shrink-0 bg-dark/30 border-r border-light/5 flex flex-col overflow-hidden"
+	>
+		<!-- Event Header -->
+		<div class="p-4 border-b border-light/5">
+			<div class="flex items-center gap-2 mb-2">
+				<div
+					class="w-2.5 h-2.5 rounded-full shrink-0 {getStatusColor(
+						data.event.status,
+					)}"
+				></div>
+				<h2
+					class="text-body font-heading text-white truncate"
+					title={data.event.name}
+				>
+					{data.event.name}
+				</h2>
+			</div>
+			{#if data.event.start_date}
+				<p class="text-[11px] text-light/40 flex items-center gap-1">
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 12px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 12;"
+						>calendar_today</span
+					>
+					{formatDateCompact(data.event.start_date)}{data.event
+						.end_date
+						? ` — ${formatDateCompact(data.event.end_date)}`
+						: ""}
+				</p>
+			{/if}
+		</div>
+
+		<!-- Module Navigation -->
+		<nav class="flex-1 flex flex-col gap-0.5 p-2 overflow-auto">
+			{#each modules as mod}
+				<a
+					href={mod.href}
+					class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-body-sm font-body transition-colors {isModuleActive(
+						mod.href,
+						mod.exact,
+					)
+						? 'bg-primary text-background'
+						: 'text-light/60 hover:text-white hover:bg-dark/50'}"
+				>
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+						>{mod.icon}</span
+					>
+					{mod.label}
+				</a>
+			{/each}
+		</nav>
+
+		<!-- Event Team Preview -->
+		<div class="p-3 border-t border-light/5">
+			<p class="text-[11px] text-light/40 mb-2 px-1">
+				Team ({data.eventMembers.length})
+			</p>
+			<div class="flex flex-wrap gap-1 px-1">
+				{#each data.eventMembers.slice(0, 8) as member}
+					<div title={member.profile?.full_name || member.profile?.email || "Member"}>
+						<Avatar
+							name={member.profile?.full_name ||
+								member.profile?.email ||
+								"?"}
+							src={member.profile?.avatar_url}
+							size="xs"
+						/>
+					</div>
+				{/each}
+				{#if data.eventMembers.length > 8}
+					<div
+						class="w-6 h-6 rounded-full bg-dark flex items-center justify-center text-[10px] text-light/50"
+					>
+						+{data.eventMembers.length - 8}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Back link -->
+		<a
+			href="/{data.org.slug}/events"
+			class="flex items-center gap-2 px-4 py-3 border-t border-light/5 text-body-sm text-light/40 hover:text-white transition-colors"
+		>
+			<span
+				class="material-symbols-rounded"
+				style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+				>arrow_back</span
+			>
+			All Events
+		</a>
+	</aside>
+
+	<!-- Module Content -->
+	<div class="flex-1 overflow-auto">
+		{@render children()}
+	</div>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
new file mode 100644
index 0000000..0e3aff2
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
@@ -0,0 +1,563 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { Avatar } from "$lib/components/ui";
+	import { getContext } from "svelte";
+	import type { SupabaseClient } from "@supabase/supabase-js";
+	import type { Database } from "$lib/supabase/types";
+	import { toasts } from "$lib/stores/ui";
+	import type { Event, EventMember } from "$lib/api/events";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			event: Event;
+			eventMembers: (EventMember & {
+				profile?: {
+					id: string;
+					email: string;
+					full_name: string | null;
+					avatar_url: string | null;
+				};
+			})[];
+		};
+	}
+
+	let { data }: Props = $props();
+
+	const supabase = getContext<SupabaseClient<Database>>("supabase");
+
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
+
+	// Edit mode
+	let editing = $state(false);
+	let editName = $state(data.event.name);
+	let editDescription = $state(data.event.description ?? "");
+	let editStatus = $state(data.event.status);
+	let editStartDate = $state(data.event.start_date ?? "");
+	let editEndDate = $state(data.event.end_date ?? "");
+	let editVenueName = $state(data.event.venue_name ?? "");
+	let editVenueAddress = $state(data.event.venue_address ?? "");
+	let saving = $state(false);
+
+	// Delete confirmation
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	const basePath = $derived(
+		`/${data.org.slug}/events/${data.event.slug}`,
+	);
+
+	const statusOptions = [
+		{ value: "planning", label: "Planning", icon: "edit_note", color: "text-amber-400" },
+		{ value: "active", label: "Active", icon: "play_circle", color: "text-emerald-400" },
+		{ value: "completed", label: "Completed", icon: "check_circle", color: "text-blue-400" },
+		{ value: "archived", label: "Archived", icon: "archive", color: "text-light/40" },
+	];
+
+	const moduleCards = $derived([
+		{
+			href: `${basePath}/tasks`,
+			label: "Tasks",
+			icon: "task_alt",
+			description: "Manage tasks, milestones, and progress",
+			color: "text-emerald-400",
+			bg: "bg-emerald-400/10",
+		},
+		{
+			href: `${basePath}/files`,
+			label: "Files",
+			icon: "folder",
+			description: "Documents, contracts, and media",
+			color: "text-blue-400",
+			bg: "bg-blue-400/10",
+		},
+		{
+			href: `${basePath}/schedule`,
+			label: "Schedule",
+			icon: "calendar_today",
+			description: "Event timeline and program",
+			color: "text-purple-400",
+			bg: "bg-purple-400/10",
+		},
+		{
+			href: `${basePath}/budget`,
+			label: "Budget",
+			icon: "account_balance_wallet",
+			description: "Income, expenses, and tracking",
+			color: "text-amber-400",
+			bg: "bg-amber-400/10",
+		},
+		{
+			href: `${basePath}/guests`,
+			label: "Guests",
+			icon: "groups",
+			description: "Guest list and registration",
+			color: "text-pink-400",
+			bg: "bg-pink-400/10",
+		},
+		{
+			href: `${basePath}/team`,
+			label: "Team",
+			icon: "badge",
+			description: "Team members and shift scheduling",
+			color: "text-teal-400",
+			bg: "bg-teal-400/10",
+		},
+		{
+			href: `${basePath}/sponsors`,
+			label: "Sponsors",
+			icon: "handshake",
+			description: "Sponsors, partners, and deliverables",
+			color: "text-orange-400",
+			bg: "bg-orange-400/10",
+		},
+	]);
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return "Not set";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			weekday: "short",
+			month: "long",
+			day: "numeric",
+			year: "numeric",
+		});
+	}
+
+	function daysUntilEvent(): string {
+		if (!data.event.start_date) return "";
+		const now = new Date();
+		const start = new Date(data.event.start_date);
+		const diff = Math.ceil(
+			(start.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+		);
+		if (diff < 0) return `${Math.abs(diff)} days ago`;
+		if (diff === 0) return "Today!";
+		if (diff === 1) return "Tomorrow";
+		return `In ${diff} days`;
+	}
+
+	async function handleSave() {
+		saving = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("events")
+				.update({
+					name: editName.trim(),
+					description: editDescription.trim() || null,
+					status: editStatus,
+					start_date: editStartDate || null,
+					end_date: editEndDate || null,
+					venue_name: editVenueName.trim() || null,
+					venue_address: editVenueAddress.trim() || null,
+					updated_at: new Date().toISOString(),
+				})
+				.eq("id", data.event.id);
+
+			if (error) throw error;
+
+			toasts.success("Event updated");
+			editing = false;
+			// Refresh the page data
+			goto(`/${data.org.slug}/events/${data.event.slug}`, {
+				invalidateAll: true,
+			});
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to update event");
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleDelete() {
+		deleting = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("events")
+				.delete()
+				.eq("id", data.event.id);
+
+			if (error) throw error;
+
+			toasts.success("Event deleted");
+			goto(`/${data.org.slug}/events`);
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to delete event");
+		} finally {
+			deleting = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col h-full overflow-auto">
+	<!-- Event Header -->
+	<header class="px-6 py-5 border-b border-light/5">
+		<div class="flex items-start justify-between">
+			<div class="flex-1">
+				{#if editing}
+					<input
+						type="text"
+						bind:value={editName}
+						class="text-h1 font-heading text-white bg-transparent border-b border-primary focus:outline-none w-full"
+					/>
+				{:else}
+					<div class="flex items-center gap-3">
+						<div
+							class="w-4 h-4 rounded-full shrink-0"
+							style="background-color: {data.event.color ||
+								'#00A3E0'}"
+						></div>
+						<h1 class="text-h1 font-heading text-white">
+							{data.event.name}
+						</h1>
+					</div>
+				{/if}
+
+				<div
+					class="flex items-center gap-4 mt-2 text-body-sm text-light/50"
+				>
+					{#if editing}
+						<select
+							bind:value={editStatus}
+							class="bg-dark border border-light/10 rounded-lg px-2 py-1 text-body-sm text-white focus:outline-none"
+						>
+							{#each statusOptions as opt}
+								<option value={opt.value}>{opt.label}</option>
+							{/each}
+						</select>
+					{:else}
+						<span
+							class="capitalize flex items-center gap-1 {statusOptions.find(
+								(s) => s.value === data.event.status,
+							)?.color ?? 'text-light/40'}"
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>{statusOptions.find(
+									(s) => s.value === data.event.status,
+								)?.icon ?? "help"}</span
+							>
+							{data.event.status}
+						</span>
+					{/if}
+
+					{#if data.event.start_date && !editing}
+						<span class="flex items-center gap-1">
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>calendar_today</span
+							>
+							{formatDate(data.event.start_date)}
+						</span>
+						{@const countdown = daysUntilEvent()}
+						{#if countdown}
+							<span class="text-primary font-bold"
+								>{countdown}</span
+							>
+						{/if}
+					{/if}
+
+					{#if data.event.venue_name && !editing}
+						<span class="flex items-center gap-1">
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>location_on</span
+							>
+							{data.event.venue_name}
+						</span>
+					{/if}
+				</div>
+			</div>
+
+			{#if isEditor}
+				<div class="flex items-center gap-2">
+					{#if editing}
+						<button
+							type="button"
+							class="px-3 py-1.5 text-body-sm text-light/60 hover:text-white transition-colors"
+							onclick={() => (editing = false)}
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							class="px-3 py-1.5 bg-primary text-background rounded-lg text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50"
+							disabled={saving}
+							onclick={handleSave}
+						>
+							{saving ? "Saving..." : "Save"}
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="p-2 text-light/40 hover:text-white transition-colors rounded-lg hover:bg-dark/50"
+							title="Edit event"
+							onclick={() => (editing = true)}
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								>edit</span
+							>
+						</button>
+						<button
+							type="button"
+							class="p-2 text-light/40 hover:text-error transition-colors rounded-lg hover:bg-error/10"
+							title="Delete event"
+							onclick={() => (showDeleteConfirm = true)}
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								>delete</span
+							>
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</header>
+
+	<!-- Edit fields (when editing) -->
+	{#if editing}
+		<div class="px-6 py-4 border-b border-light/5 flex flex-col gap-3">
+			<textarea
+				bind:value={editDescription}
+				placeholder="Event description..."
+				rows="2"
+				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none w-full"
+			></textarea>
+			<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+				<input
+					type="date"
+					bind:value={editStartDate}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					placeholder="Start date"
+				/>
+				<input
+					type="date"
+					bind:value={editEndDate}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					placeholder="End date"
+				/>
+				<input
+					type="text"
+					bind:value={editVenueName}
+					placeholder="Venue name"
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+				/>
+				<input
+					type="text"
+					bind:value={editVenueAddress}
+					placeholder="Venue address"
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+				/>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Overview Content -->
+	<div class="flex-1 p-6 overflow-auto">
+		<!-- Description -->
+		{#if data.event.description && !editing}
+			<p class="text-body text-light/60 mb-6 max-w-2xl">
+				{data.event.description}
+			</p>
+		{/if}
+
+		<!-- Module Cards Grid -->
+		<h2 class="text-h3 font-heading text-white mb-4">Modules</h2>
+		<div
+			class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"
+		>
+			{#each moduleCards as mod}
+				<a
+					href={mod.href}
+					class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-xl p-4 flex flex-col gap-2 transition-all"
+				>
+					<div
+						class="w-10 h-10 rounded-xl {mod.bg} flex items-center justify-center"
+					>
+						<span
+							class="material-symbols-rounded {mod.color}"
+							style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+							>{mod.icon}</span
+						>
+					</div>
+					<h3
+						class="text-body font-heading text-white group-hover:text-primary transition-colors"
+					>
+						{mod.label}
+					</h3>
+					<p class="text-[12px] text-light/40">{mod.description}</p>
+				</a>
+			{/each}
+		</div>
+
+		<!-- Event Details Section -->
+		<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
+			<!-- Info Card -->
+			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
+				<h3 class="text-body font-heading text-white mb-3">
+					Event Details
+				</h3>
+				<div class="flex flex-col gap-2.5">
+					<div class="flex items-center gap-3">
+						<span
+							class="material-symbols-rounded text-light/30"
+							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+							>calendar_today</span
+						>
+						<div>
+							<p class="text-[11px] text-light/40">
+								Start Date
+							</p>
+							<p class="text-body-sm text-white">
+								{formatDate(data.event.start_date)}
+							</p>
+						</div>
+					</div>
+					<div class="flex items-center gap-3">
+						<span
+							class="material-symbols-rounded text-light/30"
+							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+							>event</span
+						>
+						<div>
+							<p class="text-[11px] text-light/40">End Date</p>
+							<p class="text-body-sm text-white">
+								{formatDate(data.event.end_date)}
+							</p>
+						</div>
+					</div>
+					{#if data.event.venue_name}
+						<div class="flex items-center gap-3">
+							<span
+								class="material-symbols-rounded text-light/30"
+								style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+								>location_on</span
+							>
+							<div>
+								<p class="text-[11px] text-light/40">Venue</p>
+								<p class="text-body-sm text-white">
+									{data.event.venue_name}
+								</p>
+								{#if data.event.venue_address}
+									<p class="text-[11px] text-light/40">
+										{data.event.venue_address}
+									</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Team Card -->
+			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
+				<div class="flex items-center justify-between mb-3">
+					<h3 class="text-body font-heading text-white">
+						Team ({data.eventMembers.length})
+					</h3>
+					<a
+						href="{basePath}/team"
+						class="text-[12px] text-primary hover:underline"
+						>Manage</a
+					>
+				</div>
+				<div class="flex flex-col gap-2">
+					{#each data.eventMembers.slice(0, 6) as member}
+						<div class="flex items-center gap-2.5">
+							<Avatar
+								name={member.profile?.full_name ||
+									member.profile?.email ||
+									"?"}
+								src={member.profile?.avatar_url}
+								size="sm"
+							/>
+							<div class="flex-1 min-w-0">
+								<p
+									class="text-body-sm text-white truncate"
+								>
+									{member.profile?.full_name ||
+										member.profile?.email ||
+										"Unknown"}
+								</p>
+								<p
+									class="text-[11px] text-light/40 capitalize"
+								>
+									{member.role}
+								</p>
+							</div>
+						</div>
+					{/each}
+					{#if data.eventMembers.length > 6}
+						<a
+							href="{basePath}/team"
+							class="text-body-sm text-primary hover:underline text-center pt-1"
+						>
+							+{data.eventMembers.length - 6} more
+						</a>
+					{/if}
+					{#if data.eventMembers.length === 0}
+						<p class="text-body-sm text-light/30 text-center py-4">
+							No team members assigned yet
+						</p>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- Delete Confirmation -->
+{#if showDeleteConfirm}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+		onkeydown={(e) => e.key === "Escape" && (showDeleteConfirm = false)}
+		onclick={(e) =>
+			e.target === e.currentTarget && (showDeleteConfirm = false)}
+		role="dialog"
+		aria-modal="true"
+		aria-label="Delete Event"
+	>
+		<div
+			class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6"
+		>
+			<h2 class="text-h3 font-heading text-white mb-2">Delete Event?</h2>
+			<p class="text-body-sm text-light/50 mb-6">
+				This will permanently delete <strong class="text-white"
+					>{data.event.name}</strong
+				>
+				and all its data. This action cannot be undone.
+			</p>
+			<div class="flex items-center justify-end gap-3">
+				<button
+					type="button"
+					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+					onclick={() => (showDeleteConfirm = false)}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					class="px-4 py-2 bg-error text-white rounded-xl text-body-sm hover:bg-error/80 transition-colors disabled:opacity-50"
+					disabled={deleting}
+					onclick={handleDelete}
+				>
+					{deleting ? "Deleting..." : "Delete Event"}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/supabase/migrations/022_events.sql b/supabase/migrations/022_events.sql
new file mode 100644
index 0000000..44813e8
--- /dev/null
+++ b/supabase/migrations/022_events.sql
@@ -0,0 +1,84 @@
+-- Events: the core project entity within an organization
+-- Each event represents a project (conference, festival, meetup, etc.)
+
+CREATE TABLE events (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  org_id UUID NOT NULL REFERENCES organizations(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  slug TEXT NOT NULL,
+  description TEXT,
+  status TEXT NOT NULL DEFAULT 'planning' CHECK (status IN ('planning', 'active', 'completed', 'archived')),
+  start_date DATE,
+  end_date DATE,
+  venue_name TEXT,
+  venue_address TEXT,
+  cover_image_url TEXT,
+  color TEXT,
+  created_by UUID REFERENCES auth.users(id),
+  created_at TIMESTAMPTZ DEFAULT now(),
+  updated_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(org_id, slug)
+);
+
+-- Event members: subset of org members assigned to an event
+CREATE TABLE event_members (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('lead', 'manager', 'member')),
+  assigned_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(event_id, user_id)
+);
+
+-- Indexes
+CREATE INDEX idx_events_org ON events(org_id);
+CREATE INDEX idx_events_status ON events(org_id, status);
+CREATE INDEX idx_events_dates ON events(start_date, end_date);
+CREATE INDEX idx_event_members_event ON event_members(event_id);
+CREATE INDEX idx_event_members_user ON event_members(user_id);
+
+-- RLS
+ALTER TABLE events ENABLE ROW LEVEL SECURITY;
+ALTER TABLE event_members ENABLE ROW LEVEL SECURITY;
+
+-- Events: org members can view, editors+ can manage
+CREATE POLICY "Org members can view events" ON events FOR SELECT
+  USING (EXISTS (SELECT 1 FROM org_members WHERE org_id = events.org_id AND user_id = auth.uid()));
+
+CREATE POLICY "Editors can manage events" ON events FOR ALL
+  USING (EXISTS (SELECT 1 FROM org_members WHERE org_id = events.org_id AND user_id = auth.uid() AND role IN ('owner', 'admin', 'editor')));
+
+-- Event members: org members can view, editors+ can manage
+CREATE POLICY "Org members can view event members" ON event_members FOR SELECT
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_members.event_id AND om.user_id = auth.uid()
+  ));
+
+CREATE POLICY "Editors can manage event members" ON event_members FOR ALL
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_members.event_id AND om.user_id = auth.uid() AND om.role IN ('owner', 'admin', 'editor')
+  ));
+
+-- Enable realtime
+ALTER PUBLICATION supabase_realtime ADD TABLE events;
+
+-- Auto-add creator as event lead
+CREATE OR REPLACE FUNCTION public.handle_new_event()
+RETURNS TRIGGER AS $$
+BEGIN
+  IF NEW.created_by IS NOT NULL THEN
+    INSERT INTO public.event_members (event_id, user_id, role)
+    VALUES (NEW.id, NEW.created_by, 'lead')
+    ON CONFLICT (event_id, user_id) DO NOTHING;
+  END IF;
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+CREATE TRIGGER on_event_created
+  AFTER INSERT ON events
+  FOR EACH ROW EXECUTE FUNCTION public.handle_new_event();

From 36496e8cdb8a4a952b6114a1db2d18e1077426fc Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 10:09:00 +0200
Subject: [PATCH 02/10] fix: event detail SSR children guard,
 state_referenced_locally warnings, a11y warnings

---
 src/routes/[orgSlug]/events/+page.svelte      |  4 +++
 .../events/[eventSlug]/+layout.svelte         |  4 ++-
 .../[orgSlug]/events/[eventSlug]/+page.svelte | 28 ++++++++++++++-----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/routes/[orgSlug]/events/+page.svelte b/src/routes/[orgSlug]/events/+page.svelte
index da0ff0a..e1d0e80 100644
--- a/src/routes/[orgSlug]/events/+page.svelte
+++ b/src/routes/[orgSlug]/events/+page.svelte
@@ -339,6 +339,7 @@
 <!-- Create Event Modal -->
 {#if showCreateModal}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
 	<div
 		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
 		onkeydown={(e) => e.key === "Escape" && (showCreateModal = false)}
@@ -356,6 +357,7 @@
 					type="button"
 					class="text-light/40 hover:text-white transition-colors"
 					onclick={() => (showCreateModal = false)}
+					aria-label="Close"
 				>
 					<span
 						class="material-symbols-rounded"
@@ -453,6 +455,7 @@
 
 				<!-- Color -->
 				<div class="flex flex-col gap-1.5">
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label class="text-body-sm text-light/60 font-body"
 						>Color</label
 					>
@@ -466,6 +469,7 @@
 									: 'border-transparent hover:border-light/30'}"
 								style="background-color: {color}"
 								onclick={() => (newEventColor = color)}
+								aria-label="Select color {color}"
 							></button>
 						{/each}
 					</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
index b7fdfda..006bbde 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
@@ -195,6 +195,8 @@
 
 	<!-- Module Content -->
 	<div class="flex-1 overflow-auto">
-		{@render children()}
+		{#if children}
+			{@render children()}
+		{/if}
 	</div>
 </div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
index 0e3aff2..619c30a 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
@@ -33,15 +33,28 @@
 
 	// Edit mode
 	let editing = $state(false);
-	let editName = $state(data.event.name);
-	let editDescription = $state(data.event.description ?? "");
-	let editStatus = $state(data.event.status);
-	let editStartDate = $state(data.event.start_date ?? "");
-	let editEndDate = $state(data.event.end_date ?? "");
-	let editVenueName = $state(data.event.venue_name ?? "");
-	let editVenueAddress = $state(data.event.venue_address ?? "");
+	let editName = $state("");
+	let editDescription = $state("");
+	let editStatus = $state<string>("planning");
+	let editStartDate = $state("");
+	let editEndDate = $state("");
+	let editVenueName = $state("");
+	let editVenueAddress = $state("");
 	let saving = $state(false);
 
+	// Sync edit fields when data changes or edit mode opens
+	$effect(() => {
+		if (editing) {
+			editName = data.event.name;
+			editDescription = data.event.description ?? "";
+			editStatus = data.event.status;
+			editStartDate = data.event.start_date ?? "";
+			editEndDate = data.event.end_date ?? "";
+			editVenueName = data.event.venue_name ?? "";
+			editVenueAddress = data.event.venue_address ?? "";
+		}
+	});
+
 	// Delete confirmation
 	let showDeleteConfirm = $state(false);
 	let deleting = $state(false);
@@ -522,6 +535,7 @@
 <!-- Delete Confirmation -->
 {#if showDeleteConfirm}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
 	<div
 		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
 		onkeydown={(e) => e.key === "Escape" && (showDeleteConfirm = false)}

From fe6ec6e0afc9e48fddc7308290f8a42c34127226 Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 10:16:13 +0200
Subject: [PATCH 03/10] i18n: add Paraglide messages for all events pages (EN +
 ET)

---
 messages/en.json                              | 71 +++++++++++++-
 messages/et.json                              | 71 +++++++++++++-
 src/routes/[orgSlug]/+layout.svelte           |  2 +-
 src/routes/[orgSlug]/events/+page.svelte      | 63 ++++++------
 .../events/[eventSlug]/+layout.svelte         | 21 ++--
 .../[orgSlug]/events/[eventSlug]/+page.svelte | 98 +++++++++----------
 6 files changed, 232 insertions(+), 94 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index bdd2a21..2f9bed3 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -251,5 +251,74 @@
 	"entity_kanban_column": "column",
 	"entity_member": "member",
 	"entity_role": "role",
-	"entity_invite": "invite"
+	"entity_invite": "invite",
+	"entity_event": "event",
+	"nav_events": "Events",
+	"events_title": "Events",
+	"events_subtitle": "Organize and manage your events",
+	"events_new": "New Event",
+	"events_create": "Create Event",
+	"events_empty_title": "No events yet",
+	"events_empty_desc": "Create your first event to get started",
+	"events_no_dates": "No dates set",
+	"events_tab_all": "All Events",
+	"events_tab_planning": "Planning",
+	"events_tab_active": "Active",
+	"events_tab_completed": "Completed",
+	"events_tab_archived": "Archived",
+	"events_status_planning": "Planning",
+	"events_status_active": "Active",
+	"events_status_completed": "Completed",
+	"events_status_archived": "Archived",
+	"events_form_name": "Event Name",
+	"events_form_name_placeholder": "e.g., Summer Conference 2026",
+	"events_form_description": "Description",
+	"events_form_description_placeholder": "Brief description of the event...",
+	"events_form_start_date": "Start Date",
+	"events_form_end_date": "End Date",
+	"events_form_venue": "Venue",
+	"events_form_venue_placeholder": "e.g., Convention Center",
+	"events_form_venue_address_placeholder": "Venue address",
+	"events_form_color": "Color",
+	"events_form_select_color": "Select color {color}",
+	"events_creating": "Creating...",
+	"events_saving": "Saving...",
+	"events_deleting": "Deleting...",
+	"events_updated": "Event updated",
+	"events_created": "Event \"{name}\" created",
+	"events_deleted": "Event deleted",
+	"events_delete_title": "Delete Event?",
+	"events_delete_desc": "This will permanently delete {name} and all its data. This action cannot be undone.",
+	"events_delete_confirm": "Delete Event",
+	"events_days_ago": "{count} days ago",
+	"events_today": "Today!",
+	"events_tomorrow": "Tomorrow",
+	"events_in_days": "In {count} days",
+	"events_overview": "Overview",
+	"events_modules": "Modules",
+	"events_details": "Event Details",
+	"events_start_date": "Start Date",
+	"events_end_date": "End Date",
+	"events_venue": "Venue",
+	"events_not_set": "Not set",
+	"events_all_events": "All Events",
+	"events_team": "Team",
+	"events_team_count": "Team ({count})",
+	"events_team_manage": "Manage",
+	"events_team_empty": "No team members assigned yet",
+	"events_more_members": "+{count} more",
+	"events_mod_tasks": "Tasks",
+	"events_mod_tasks_desc": "Manage tasks, milestones, and progress",
+	"events_mod_files": "Files",
+	"events_mod_files_desc": "Documents, contracts, and media",
+	"events_mod_schedule": "Schedule",
+	"events_mod_schedule_desc": "Event timeline and program",
+	"events_mod_budget": "Budget",
+	"events_mod_budget_desc": "Income, expenses, and tracking",
+	"events_mod_guests": "Guests",
+	"events_mod_guests_desc": "Guest list and registration",
+	"events_mod_team": "Team",
+	"events_mod_team_desc": "Team members and shift scheduling",
+	"events_mod_sponsors": "Sponsors",
+	"events_mod_sponsors_desc": "Sponsors, partners, and deliverables"
 }
\ No newline at end of file
diff --git a/messages/et.json b/messages/et.json
index deba226..b3be0d3 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -251,5 +251,74 @@
 	"entity_kanban_column": "veeru",
 	"entity_member": "liikme",
 	"entity_role": "rolli",
-	"entity_invite": "kutse"
+	"entity_invite": "kutse",
+	"entity_event": "ürituse",
+	"nav_events": "Üritused",
+	"events_title": "Üritused",
+	"events_subtitle": "Korralda ja halda oma üritusi",
+	"events_new": "Uus üritus",
+	"events_create": "Loo üritus",
+	"events_empty_title": "Üritusi pole veel",
+	"events_empty_desc": "Loo oma esimene üritus alustamiseks",
+	"events_no_dates": "Kuupäevad määramata",
+	"events_tab_all": "Kõik üritused",
+	"events_tab_planning": "Planeerimisel",
+	"events_tab_active": "Aktiivne",
+	"events_tab_completed": "Lõpetatud",
+	"events_tab_archived": "Arhiveeritud",
+	"events_status_planning": "Planeerimisel",
+	"events_status_active": "Aktiivne",
+	"events_status_completed": "Lõpetatud",
+	"events_status_archived": "Arhiveeritud",
+	"events_form_name": "Ürituse nimi",
+	"events_form_name_placeholder": "nt Suvekonverents 2026",
+	"events_form_description": "Kirjeldus",
+	"events_form_description_placeholder": "Ürituse lühikirjeldus...",
+	"events_form_start_date": "Alguskuupäev",
+	"events_form_end_date": "Lõppkuupäev",
+	"events_form_venue": "Toimumiskoht",
+	"events_form_venue_placeholder": "nt Konverentsikeskus",
+	"events_form_venue_address_placeholder": "Toimumiskoha aadress",
+	"events_form_color": "Värv",
+	"events_form_select_color": "Vali värv {color}",
+	"events_creating": "Loomine...",
+	"events_saving": "Salvestamine...",
+	"events_deleting": "Kustutamine...",
+	"events_updated": "Üritus uuendatud",
+	"events_created": "Üritus \"{name}\" loodud",
+	"events_deleted": "Üritus kustutatud",
+	"events_delete_title": "Kustuta üritus?",
+	"events_delete_desc": "See kustutab jäädavalt ürituse {name} ja kõik selle andmed. Seda toimingut ei saa tagasi võtta.",
+	"events_delete_confirm": "Kustuta üritus",
+	"events_days_ago": "{count} päeva tagasi",
+	"events_today": "Täna!",
+	"events_tomorrow": "Homme",
+	"events_in_days": "{count} päeva pärast",
+	"events_overview": "Ülevaade",
+	"events_modules": "Moodulid",
+	"events_details": "Ürituse andmed",
+	"events_start_date": "Alguskuupäev",
+	"events_end_date": "Lõppkuupäev",
+	"events_venue": "Toimumiskoht",
+	"events_not_set": "Määramata",
+	"events_all_events": "Kõik üritused",
+	"events_team": "Meeskond",
+	"events_team_count": "Meeskond ({count})",
+	"events_team_manage": "Halda",
+	"events_team_empty": "Meeskonnaliikmeid pole veel määratud",
+	"events_more_members": "+{count} veel",
+	"events_mod_tasks": "Ülesanded",
+	"events_mod_tasks_desc": "Halda ülesandeid, verstaposte ja edenemist",
+	"events_mod_files": "Failid",
+	"events_mod_files_desc": "Dokumendid, lepingud ja meedia",
+	"events_mod_schedule": "Ajakava",
+	"events_mod_schedule_desc": "Ürituse ajakava ja programm",
+	"events_mod_budget": "Eelarve",
+	"events_mod_budget_desc": "Tulud, kulud ja jälgimine",
+	"events_mod_guests": "Külalised",
+	"events_mod_guests_desc": "Külaliste nimekiri ja registreerimine",
+	"events_mod_team": "Meeskond",
+	"events_mod_team_desc": "Meeskonnaliikmed ja vahetuste planeerimine",
+	"events_mod_sponsors": "Sponsorid",
+	"events_mod_sponsors_desc": "Sponsorid, partnerid ja kohustused"
 }
\ No newline at end of file
diff --git a/src/routes/[orgSlug]/+layout.svelte b/src/routes/[orgSlug]/+layout.svelte
index 51a7d42..9cffd9e 100644
--- a/src/routes/[orgSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/+layout.svelte
@@ -125,7 +125,7 @@
 			: []),
 		{
 			href: `/${data.org.slug}/events`,
-			label: "Events",
+			label: m.nav_events(),
 			icon: "celebration",
 		},
 		{
diff --git a/src/routes/[orgSlug]/events/+page.svelte b/src/routes/[orgSlug]/events/+page.svelte
index e1d0e80..16bd286 100644
--- a/src/routes/[orgSlug]/events/+page.svelte
+++ b/src/routes/[orgSlug]/events/+page.svelte
@@ -6,6 +6,7 @@
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
 	import { toasts } from "$lib/stores/ui";
+	import * as m from "$lib/paraglide/messages";
 
 	interface EventItem {
 		id: string;
@@ -48,13 +49,13 @@
 	let newEventColor = $state("#00A3E0");
 	let creating = $state(false);
 
-	const statusTabs = [
-		{ value: "all", label: "All Events", icon: "apps" },
-		{ value: "planning", label: "Planning", icon: "edit_note" },
-		{ value: "active", label: "Active", icon: "play_circle" },
-		{ value: "completed", label: "Completed", icon: "check_circle" },
-		{ value: "archived", label: "Archived", icon: "archive" },
-	];
+	const statusTabs = $derived([
+		{ value: "all", label: m.events_tab_all(), icon: "apps" },
+		{ value: "planning", label: m.events_tab_planning(), icon: "edit_note" },
+		{ value: "active", label: m.events_tab_active(), icon: "play_circle" },
+		{ value: "completed", label: m.events_tab_completed(), icon: "check_circle" },
+		{ value: "archived", label: m.events_tab_archived(), icon: "archive" },
+	]);
 
 	const presetColors = [
 		"#00A3E0",
@@ -100,7 +101,7 @@
 		start: string | null,
 		end: string | null,
 	): string {
-		if (!start && !end) return "No dates set";
+		if (!start && !end) return m.events_no_dates();
 		if (start && !end) return formatDate(start);
 		if (!start && end) return `Until ${formatDate(end)}`;
 		return `${formatDate(start)} — ${formatDate(end)}`;
@@ -134,7 +135,7 @@
 
 			if (error) throw error;
 
-			toasts.success(`Event "${created.name}" created`);
+			toasts.success(m.events_created({ name: created.name }));
 			showCreateModal = false;
 			resetForm();
 			goto(`/${data.org.slug}/events/${created.slug}`);
@@ -166,7 +167,7 @@
 </script>
 
 <svelte:head>
-	<title>Events | {data.org.name}</title>
+	<title>{m.events_title()} | {data.org.name}</title>
 </svelte:head>
 
 <div class="flex flex-col h-full">
@@ -175,9 +176,9 @@
 		class="flex items-center justify-between px-6 py-5 border-b border-light/5"
 	>
 		<div>
-			<h1 class="text-h1 font-heading text-white">Events</h1>
+			<h1 class="text-h1 font-heading text-white">{m.events_title()}</h1>
 			<p class="text-body-sm text-light/50 mt-1">
-				Organize and manage your events
+				{m.events_subtitle()}
 			</p>
 		</div>
 		{#if isEditor}
@@ -191,7 +192,7 @@
 					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
 					>add</span
 				>
-				New Event
+				{m.events_new()}
 			</button>
 		{/if}
 	</header>
@@ -228,9 +229,9 @@
 					style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
 					>celebration</span
 				>
-				<p class="text-h3 font-heading mb-2">No events yet</p>
+				<p class="text-h3 font-heading mb-2">{m.events_empty_title()}</p>
 				<p class="text-body text-light/30">
-					Create your first event to get started
+					{m.events_empty_desc()}
 				</p>
 				{#if isEditor}
 					<button
@@ -243,7 +244,7 @@
 							style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
 							>add</span
 						>
-						Create Event
+						{m.events_create()}
 					</button>
 				{/if}
 			</div>
@@ -346,18 +347,18 @@
 		onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)}
 		role="dialog"
 		aria-modal="true"
-		aria-label="Create Event"
+		aria-label={m.events_create()}
 	>
 		<div
 			class="bg-night rounded-2xl w-full max-w-lg shadow-2xl border border-light/10"
 		>
 			<div class="flex items-center justify-between p-5 border-b border-light/5">
-				<h2 class="text-h3 font-heading text-white">Create Event</h2>
+				<h2 class="text-h3 font-heading text-white">{m.events_create()}</h2>
 				<button
 					type="button"
 					class="text-light/40 hover:text-white transition-colors"
 					onclick={() => (showCreateModal = false)}
-					aria-label="Close"
+					aria-label={m.btn_close()}
 				>
 					<span
 						class="material-symbols-rounded"
@@ -379,13 +380,13 @@
 					<label
 						for="event-name"
 						class="text-body-sm text-light/60 font-body"
-						>Event Name</label
+						>{m.events_form_name()}</label
 					>
 					<input
 						id="event-name"
 						type="text"
 						bind:value={newEventName}
-						placeholder="e.g., Summer Conference 2026"
+						placeholder={m.events_form_name_placeholder()}
 						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
 						required
 					/>
@@ -396,12 +397,12 @@
 					<label
 						for="event-desc"
 						class="text-body-sm text-light/60 font-body"
-						>Description</label
+						>{m.events_form_description()}</label
 					>
 					<textarea
 						id="event-desc"
 						bind:value={newEventDescription}
-						placeholder="Brief description of the event..."
+						placeholder={m.events_form_description_placeholder()}
 						rows="2"
 						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
 					></textarea>
@@ -413,7 +414,7 @@
 						<label
 							for="event-start"
 							class="text-body-sm text-light/60 font-body"
-							>Start Date</label
+							>{m.events_form_start_date()}</label
 						>
 						<input
 							id="event-start"
@@ -426,7 +427,7 @@
 						<label
 							for="event-end"
 							class="text-body-sm text-light/60 font-body"
-							>End Date</label
+							>{m.events_form_end_date()}</label
 						>
 						<input
 							id="event-end"
@@ -442,13 +443,13 @@
 					<label
 						for="event-venue"
 						class="text-body-sm text-light/60 font-body"
-						>Venue</label
+						>{m.events_form_venue()}</label
 					>
 					<input
 						id="event-venue"
 						type="text"
 						bind:value={newEventVenue}
-						placeholder="e.g., Convention Center"
+						placeholder={m.events_form_venue_placeholder()}
 						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
 					/>
 				</div>
@@ -457,7 +458,7 @@
 				<div class="flex flex-col gap-1.5">
 					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label class="text-body-sm text-light/60 font-body"
-						>Color</label
+						>{m.events_form_color()}</label
 					>
 					<div class="flex items-center gap-2">
 						{#each presetColors as color}
@@ -469,7 +470,7 @@
 									: 'border-transparent hover:border-light/30'}"
 								style="background-color: {color}"
 								onclick={() => (newEventColor = color)}
-								aria-label="Select color {color}"
+								aria-label={m.events_form_select_color({ color })}
 							></button>
 						{/each}
 					</div>
@@ -487,14 +488,14 @@
 							resetForm();
 						}}
 					>
-						Cancel
+						{m.btn_cancel()}
 					</button>
 					<button
 						type="submit"
 						disabled={!newEventName.trim() || creating}
 						class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 					>
-						{creating ? "Creating..." : "Create Event"}
+						{creating ? m.events_creating() : m.events_create()}
 					</button>
 				</div>
 			</form>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
index 006bbde..702a6bb 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
@@ -3,6 +3,7 @@
 	import { Avatar } from "$lib/components/ui";
 	import type { Snippet } from "svelte";
 	import type { Event, EventMember } from "$lib/api/events";
+	import * as m from "$lib/paraglide/messages";
 
 	interface Props {
 		data: {
@@ -30,43 +31,43 @@
 	const modules = $derived([
 		{
 			href: basePath,
-			label: "Overview",
+			label: m.events_overview(),
 			icon: "dashboard",
 			exact: true,
 		},
 		{
 			href: `${basePath}/tasks`,
-			label: "Tasks",
+			label: m.events_mod_tasks(),
 			icon: "task_alt",
 		},
 		{
 			href: `${basePath}/files`,
-			label: "Files",
+			label: m.events_mod_files(),
 			icon: "folder",
 		},
 		{
 			href: `${basePath}/schedule`,
-			label: "Schedule",
+			label: m.events_mod_schedule(),
 			icon: "calendar_today",
 		},
 		{
 			href: `${basePath}/budget`,
-			label: "Budget",
+			label: m.events_mod_budget(),
 			icon: "account_balance_wallet",
 		},
 		{
 			href: `${basePath}/guests`,
-			label: "Guests",
+			label: m.events_mod_guests(),
 			icon: "groups",
 		},
 		{
 			href: `${basePath}/team`,
-			label: "Team",
+			label: m.events_mod_team(),
 			icon: "badge",
 		},
 		{
 			href: `${basePath}/sponsors`,
-			label: "Sponsors",
+			label: m.events_mod_sponsors(),
 			icon: "handshake",
 		},
 	]);
@@ -155,7 +156,7 @@
 		<!-- Event Team Preview -->
 		<div class="p-3 border-t border-light/5">
 			<p class="text-[11px] text-light/40 mb-2 px-1">
-				Team ({data.eventMembers.length})
+				{m.events_team_count({ count: String(data.eventMembers.length) })}
 			</p>
 			<div class="flex flex-wrap gap-1 px-1">
 				{#each data.eventMembers.slice(0, 8) as member}
@@ -189,7 +190,7 @@
 				style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
 				>arrow_back</span
 			>
-			All Events
+			{m.events_all_events()}
 		</a>
 	</aside>
 
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
index 619c30a..a2832a3 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
@@ -6,6 +6,7 @@
 	import type { Database } from "$lib/supabase/types";
 	import { toasts } from "$lib/stores/ui";
 	import type { Event, EventMember } from "$lib/api/events";
+	import * as m from "$lib/paraglide/messages";
 
 	interface Props {
 		data: {
@@ -63,74 +64,74 @@
 		`/${data.org.slug}/events/${data.event.slug}`,
 	);
 
-	const statusOptions = [
-		{ value: "planning", label: "Planning", icon: "edit_note", color: "text-amber-400" },
-		{ value: "active", label: "Active", icon: "play_circle", color: "text-emerald-400" },
-		{ value: "completed", label: "Completed", icon: "check_circle", color: "text-blue-400" },
-		{ value: "archived", label: "Archived", icon: "archive", color: "text-light/40" },
-	];
+	const statusOptions = $derived([
+		{ value: "planning", label: m.events_status_planning(), icon: "edit_note", color: "text-amber-400" },
+		{ value: "active", label: m.events_status_active(), icon: "play_circle", color: "text-emerald-400" },
+		{ value: "completed", label: m.events_status_completed(), icon: "check_circle", color: "text-blue-400" },
+		{ value: "archived", label: m.events_status_archived(), icon: "archive", color: "text-light/40" },
+	]);
 
 	const moduleCards = $derived([
 		{
 			href: `${basePath}/tasks`,
-			label: "Tasks",
+			label: m.events_mod_tasks(),
 			icon: "task_alt",
-			description: "Manage tasks, milestones, and progress",
+			description: m.events_mod_tasks_desc(),
 			color: "text-emerald-400",
 			bg: "bg-emerald-400/10",
 		},
 		{
 			href: `${basePath}/files`,
-			label: "Files",
+			label: m.events_mod_files(),
 			icon: "folder",
-			description: "Documents, contracts, and media",
+			description: m.events_mod_files_desc(),
 			color: "text-blue-400",
 			bg: "bg-blue-400/10",
 		},
 		{
 			href: `${basePath}/schedule`,
-			label: "Schedule",
+			label: m.events_mod_schedule(),
 			icon: "calendar_today",
-			description: "Event timeline and program",
+			description: m.events_mod_schedule_desc(),
 			color: "text-purple-400",
 			bg: "bg-purple-400/10",
 		},
 		{
 			href: `${basePath}/budget`,
-			label: "Budget",
+			label: m.events_mod_budget(),
 			icon: "account_balance_wallet",
-			description: "Income, expenses, and tracking",
+			description: m.events_mod_budget_desc(),
 			color: "text-amber-400",
 			bg: "bg-amber-400/10",
 		},
 		{
 			href: `${basePath}/guests`,
-			label: "Guests",
+			label: m.events_mod_guests(),
 			icon: "groups",
-			description: "Guest list and registration",
+			description: m.events_mod_guests_desc(),
 			color: "text-pink-400",
 			bg: "bg-pink-400/10",
 		},
 		{
 			href: `${basePath}/team`,
-			label: "Team",
+			label: m.events_mod_team(),
 			icon: "badge",
-			description: "Team members and shift scheduling",
+			description: m.events_mod_team_desc(),
 			color: "text-teal-400",
 			bg: "bg-teal-400/10",
 		},
 		{
 			href: `${basePath}/sponsors`,
-			label: "Sponsors",
+			label: m.events_mod_sponsors(),
 			icon: "handshake",
-			description: "Sponsors, partners, and deliverables",
+			description: m.events_mod_sponsors_desc(),
 			color: "text-orange-400",
 			bg: "bg-orange-400/10",
 		},
 	]);
 
 	function formatDate(dateStr: string | null): string {
-		if (!dateStr) return "Not set";
+		if (!dateStr) return m.events_not_set();
 		return new Date(dateStr).toLocaleDateString(undefined, {
 			weekday: "short",
 			month: "long",
@@ -146,10 +147,10 @@
 		const diff = Math.ceil(
 			(start.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
 		);
-		if (diff < 0) return `${Math.abs(diff)} days ago`;
-		if (diff === 0) return "Today!";
-		if (diff === 1) return "Tomorrow";
-		return `In ${diff} days`;
+		if (diff < 0) return m.events_days_ago({ count: String(Math.abs(diff)) });
+		if (diff === 0) return m.events_today();
+		if (diff === 1) return m.events_tomorrow();
+		return m.events_in_days({ count: String(diff) });
 	}
 
 	async function handleSave() {
@@ -171,7 +172,7 @@
 
 			if (error) throw error;
 
-			toasts.success("Event updated");
+			toasts.success(m.events_updated());
 			editing = false;
 			// Refresh the page data
 			goto(`/${data.org.slug}/events/${data.event.slug}`, {
@@ -194,7 +195,7 @@
 
 			if (error) throw error;
 
-			toasts.success("Event deleted");
+			toasts.success(m.events_deleted());
 			goto(`/${data.org.slug}/events`);
 		} catch (e: any) {
 			toasts.error(e.message || "Failed to delete event");
@@ -299,7 +300,7 @@
 							class="px-3 py-1.5 text-body-sm text-light/60 hover:text-white transition-colors"
 							onclick={() => (editing = false)}
 						>
-							Cancel
+							{m.btn_cancel()}
 						</button>
 						<button
 							type="button"
@@ -307,13 +308,13 @@
 							disabled={saving}
 							onclick={handleSave}
 						>
-							{saving ? "Saving..." : "Save"}
+							{saving ? m.events_saving() : m.btn_save()}
 						</button>
 					{:else}
 						<button
 							type="button"
 							class="p-2 text-light/40 hover:text-white transition-colors rounded-lg hover:bg-dark/50"
-							title="Edit event"
+							title={m.btn_edit()}
 							onclick={() => (editing = true)}
 						>
 							<span
@@ -325,7 +326,7 @@
 						<button
 							type="button"
 							class="p-2 text-light/40 hover:text-error transition-colors rounded-lg hover:bg-error/10"
-							title="Delete event"
+							title={m.btn_delete()}
 							onclick={() => (showDeleteConfirm = true)}
 						>
 							<span
@@ -365,13 +366,13 @@
 				<input
 					type="text"
 					bind:value={editVenueName}
-					placeholder="Venue name"
+					placeholder={m.events_form_venue_placeholder()}
 					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
 				/>
 				<input
 					type="text"
 					bind:value={editVenueAddress}
-					placeholder="Venue address"
+					placeholder={m.events_form_venue_address_placeholder()}
 					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
 				/>
 			</div>
@@ -388,7 +389,7 @@
 		{/if}
 
 		<!-- Module Cards Grid -->
-		<h2 class="text-h3 font-heading text-white mb-4">Modules</h2>
+		<h2 class="text-h3 font-heading text-white mb-4">{m.events_modules()}</h2>
 		<div
 			class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"
 		>
@@ -421,7 +422,7 @@
 			<!-- Info Card -->
 			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
 				<h3 class="text-body font-heading text-white mb-3">
-					Event Details
+					{m.events_details()}
 				</h3>
 				<div class="flex flex-col gap-2.5">
 					<div class="flex items-center gap-3">
@@ -432,7 +433,7 @@
 						>
 						<div>
 							<p class="text-[11px] text-light/40">
-								Start Date
+								{m.events_start_date()}
 							</p>
 							<p class="text-body-sm text-white">
 								{formatDate(data.event.start_date)}
@@ -446,7 +447,7 @@
 							>event</span
 						>
 						<div>
-							<p class="text-[11px] text-light/40">End Date</p>
+							<p class="text-[11px] text-light/40">{m.events_end_date()}</p>
 							<p class="text-body-sm text-white">
 								{formatDate(data.event.end_date)}
 							</p>
@@ -460,7 +461,7 @@
 								>location_on</span
 							>
 							<div>
-								<p class="text-[11px] text-light/40">Venue</p>
+								<p class="text-[11px] text-light/40">{m.events_venue()}</p>
 								<p class="text-body-sm text-white">
 									{data.event.venue_name}
 								</p>
@@ -479,12 +480,12 @@
 			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
 				<div class="flex items-center justify-between mb-3">
 					<h3 class="text-body font-heading text-white">
-						Team ({data.eventMembers.length})
+						{m.events_team_count({ count: String(data.eventMembers.length) })}
 					</h3>
 					<a
 						href="{basePath}/team"
 						class="text-[12px] text-primary hover:underline"
-						>Manage</a
+						>{m.events_team_manage()}</a
 					>
 				</div>
 				<div class="flex flex-col gap-2">
@@ -518,12 +519,12 @@
 							href="{basePath}/team"
 							class="text-body-sm text-primary hover:underline text-center pt-1"
 						>
-							+{data.eventMembers.length - 6} more
+							{m.events_more_members({ count: String(data.eventMembers.length - 6) })}
 						</a>
 					{/if}
 					{#if data.eventMembers.length === 0}
 						<p class="text-body-sm text-light/30 text-center py-4">
-							No team members assigned yet
+							{m.events_team_empty()}
 						</p>
 					{/if}
 				</div>
@@ -543,17 +544,14 @@
 			e.target === e.currentTarget && (showDeleteConfirm = false)}
 		role="dialog"
 		aria-modal="true"
-		aria-label="Delete Event"
+		aria-label={m.events_delete_title()}
 	>
 		<div
 			class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6"
 		>
-			<h2 class="text-h3 font-heading text-white mb-2">Delete Event?</h2>
+			<h2 class="text-h3 font-heading text-white mb-2">{m.events_delete_title()}</h2>
 			<p class="text-body-sm text-light/50 mb-6">
-				This will permanently delete <strong class="text-white"
-					>{data.event.name}</strong
-				>
-				and all its data. This action cannot be undone.
+				{m.events_delete_desc({ name: data.event.name })}
 			</p>
 			<div class="flex items-center justify-end gap-3">
 				<button
@@ -561,7 +559,7 @@
 					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
 					onclick={() => (showDeleteConfirm = false)}
 				>
-					Cancel
+					{m.btn_cancel()}
 				</button>
 				<button
 					type="button"
@@ -569,7 +567,7 @@
 					disabled={deleting}
 					onclick={handleDelete}
 				>
-					{deleting ? "Deleting..." : "Delete Event"}
+					{deleting ? m.events_deleting() : m.events_delete_confirm()}
 				</button>
 			</div>
 		</div>

From 2913912cb856e1f5e200eedf03ae6af778a84aee Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 10:44:53 +0200
Subject: [PATCH 04/10] feat: UI overhaul - component library + route layouts
 with instant headers

- Created 11 reusable UI components: PageHeader, SectionCard, StatCard, StatusBadge, TabBar, MemberList, ActivityFeed, EventCard, ContentSkeleton, QuickLinkGrid, ModuleCard
- Created route-specific +layout.svelte for documents, calendar, kanban, events, settings, account
- Each layout renders PageHeader instantly from parent data, shows ContentSkeleton during navigation
- Removed full-page PageSkeleton from parent layout
- Refactored all pages to use new components instead of inline markup
- Overview page: uses StatCard, SectionCard, EventCard, ActivityFeed, MemberList, QuickLinkGrid
- Events list: uses EventCard, Button components
- Event detail: uses ModuleCard, SectionCard
- Settings/Account/Calendar/Kanban: headers in layouts, toolbars in pages
- Added i18n keys for overview page (EN + ET)
- 0 errors, 112 tests pass
---
 messages/en.json                              |   8 +-
 messages/et.json                              |   8 +-
 src/lib/components/ui/ActivityFeed.svelte     | 132 ++++++
 src/lib/components/ui/ContentSkeleton.svelte  | 109 +++++
 src/lib/components/ui/EventCard.svelte        | 116 +++++
 src/lib/components/ui/MemberList.svelte       |  71 +++
 src/lib/components/ui/ModuleCard.svelte       |  40 ++
 src/lib/components/ui/PageHeader.svelte       |  46 ++
 src/lib/components/ui/QuickLinkGrid.svelte    |  30 ++
 src/lib/components/ui/SectionCard.svelte      |  41 ++
 src/lib/components/ui/StatCard.svelte         |  58 +++
 src/lib/components/ui/StatusBadge.svelte      |  30 ++
 src/lib/components/ui/TabBar.svelte           |  37 ++
 src/lib/components/ui/index.ts                |  11 +
 src/routes/[orgSlug]/+layout.server.ts        |  19 +-
 src/routes/[orgSlug]/+layout.svelte           |  24 +-
 src/routes/[orgSlug]/+page.svelte             | 440 +++++++-----------
 src/routes/[orgSlug]/account/+layout.svelte   |  36 ++
 src/routes/[orgSlug]/account/+page.svelte     |  12 +-
 src/routes/[orgSlug]/calendar/+layout.svelte  |  31 ++
 src/routes/[orgSlug]/calendar/+page.svelte    |  16 +-
 src/routes/[orgSlug]/documents/+layout.svelte |  31 ++
 src/routes/[orgSlug]/documents/+page.svelte   |   2 +-
 src/routes/[orgSlug]/events/+layout.svelte    |  49 ++
 src/routes/[orgSlug]/events/+page.svelte      | 217 ++-------
 .../[orgSlug]/events/[eventSlug]/+page.svelte |  64 +--
 src/routes/[orgSlug]/kanban/+layout.svelte    |  31 ++
 src/routes/[orgSlug]/kanban/+page.svelte      |  58 +--
 src/routes/[orgSlug]/settings/+layout.svelte  |  35 ++
 src/routes/[orgSlug]/settings/+page.svelte    |  42 +-
 30 files changed, 1240 insertions(+), 604 deletions(-)
 create mode 100644 src/lib/components/ui/ActivityFeed.svelte
 create mode 100644 src/lib/components/ui/ContentSkeleton.svelte
 create mode 100644 src/lib/components/ui/EventCard.svelte
 create mode 100644 src/lib/components/ui/MemberList.svelte
 create mode 100644 src/lib/components/ui/ModuleCard.svelte
 create mode 100644 src/lib/components/ui/PageHeader.svelte
 create mode 100644 src/lib/components/ui/QuickLinkGrid.svelte
 create mode 100644 src/lib/components/ui/SectionCard.svelte
 create mode 100644 src/lib/components/ui/StatCard.svelte
 create mode 100644 src/lib/components/ui/StatusBadge.svelte
 create mode 100644 src/lib/components/ui/TabBar.svelte
 create mode 100644 src/routes/[orgSlug]/account/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/calendar/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/documents/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/events/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/kanban/+layout.svelte
 create mode 100644 src/routes/[orgSlug]/settings/+layout.svelte

diff --git a/messages/en.json b/messages/en.json
index 2f9bed3..23d83fd 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -320,5 +320,11 @@
 	"events_mod_team": "Team",
 	"events_mod_team_desc": "Team members and shift scheduling",
 	"events_mod_sponsors": "Sponsors",
-	"events_mod_sponsors_desc": "Sponsors, partners, and deliverables"
+	"events_mod_sponsors_desc": "Sponsors, partners, and deliverables",
+	"overview_subtitle": "Welcome back. Here's what's happening.",
+	"overview_stat_events": "Events",
+	"overview_upcoming_events": "Upcoming Events",
+	"overview_upcoming_empty": "No upcoming events. Create one to get started.",
+	"overview_view_all_events": "View all events",
+	"overview_more_members": "+{count} more"
 }
\ No newline at end of file
diff --git a/messages/et.json b/messages/et.json
index b3be0d3..228d7cc 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -320,5 +320,11 @@
 	"events_mod_team": "Meeskond",
 	"events_mod_team_desc": "Meeskonnaliikmed ja vahetuste planeerimine",
 	"events_mod_sponsors": "Sponsorid",
-	"events_mod_sponsors_desc": "Sponsorid, partnerid ja kohustused"
+	"events_mod_sponsors_desc": "Sponsorid, partnerid ja kohustused",
+	"overview_subtitle": "Tere tagasi. Siin on ülevaade toimuvast.",
+	"overview_stat_events": "Üritused",
+	"overview_upcoming_events": "Tulevased üritused",
+	"overview_upcoming_empty": "Tulevasi üritusi pole. Loo üks alustamiseks.",
+	"overview_view_all_events": "Vaata kõiki üritusi",
+	"overview_more_members": "+{count} veel"
 }
\ No newline at end of file
diff --git a/src/lib/components/ui/ActivityFeed.svelte b/src/lib/components/ui/ActivityFeed.svelte
new file mode 100644
index 0000000..1f2db1d
--- /dev/null
+++ b/src/lib/components/ui/ActivityFeed.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface ActivityEntry {
+		id: string;
+		action: string;
+		entity_type: string;
+		entity_id: string | null;
+		entity_name: string | null;
+		created_at: string | null;
+		profiles: {
+			full_name: string | null;
+			email: string | null;
+		} | null;
+	}
+
+	interface Props {
+		entries: ActivityEntry[];
+		emptyLabel?: string;
+	}
+
+	let { entries, emptyLabel }: Props = $props();
+
+	function getEntityTypeLabel(entityType: string): string {
+		const map: Record<string, () => string> = {
+			document: m.entity_document,
+			folder: m.entity_folder,
+			kanban_board: m.entity_kanban_board,
+			kanban_card: m.entity_kanban_card,
+			kanban_column: m.entity_kanban_column,
+			member: m.entity_member,
+			role: m.entity_role,
+			invite: m.entity_invite,
+			event: m.entity_event,
+		};
+		return (map[entityType] ?? (() => entityType))();
+	}
+
+	function getActivityIcon(action: string): string {
+		const map: Record<string, string> = {
+			create: "add_circle",
+			update: "edit",
+			delete: "delete",
+			move: "drive_file_move",
+			rename: "edit_note",
+		};
+		return map[action] ?? "info";
+	}
+
+	function getActivityColor(action: string): string {
+		const map: Record<string, string> = {
+			create: "text-emerald-400",
+			update: "text-blue-400",
+			delete: "text-red-400",
+			move: "text-amber-400",
+			rename: "text-purple-400",
+		};
+		return map[action] ?? "text-light/50";
+	}
+
+	function formatTimeAgo(dateStr: string | null): string {
+		if (!dateStr) return "";
+		const now = Date.now();
+		const then = new Date(dateStr).getTime();
+		const diffMs = now - then;
+		const diffMin = Math.floor(diffMs / 60000);
+		if (diffMin < 1) return m.activity_just_now();
+		if (diffMin < 60)
+			return m.activity_minutes_ago({ count: String(diffMin) });
+		const diffHr = Math.floor(diffMin / 60);
+		if (diffHr < 24) return m.activity_hours_ago({ count: String(diffHr) });
+		const diffDay = Math.floor(diffHr / 24);
+		return m.activity_days_ago({ count: String(diffDay) });
+	}
+
+	function getDescription(entry: ActivityEntry): string {
+		const userName =
+			entry.profiles?.full_name || entry.profiles?.email || "Someone";
+		const entityType = getEntityTypeLabel(entry.entity_type);
+		const name = entry.entity_name ?? "—";
+
+		const map: Record<string, () => string> = {
+			create: () =>
+				m.activity_created({ user: userName, entityType, name }),
+			update: () =>
+				m.activity_updated({ user: userName, entityType, name }),
+			delete: () =>
+				m.activity_deleted({ user: userName, entityType, name }),
+			move: () => m.activity_moved({ user: userName, entityType, name }),
+			rename: () =>
+				m.activity_renamed({ user: userName, entityType, name }),
+		};
+		return (map[entry.action] ?? map["update"]!)();
+	}
+</script>
+
+{#if entries.length === 0}
+	<div
+		class="flex flex-col items-center justify-center text-light/40 py-8"
+	>
+		<span
+			class="material-symbols-rounded mb-2"
+			style="font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;"
+			>history</span
+		>
+		<p class="text-body-sm">{emptyLabel ?? m.activity_empty()}</p>
+	</div>
+{:else}
+	<div class="flex flex-col gap-0.5">
+		{#each entries as entry}
+			<div
+				class="flex items-start gap-3 px-3 py-2 rounded-xl hover:bg-dark/50 transition-colors"
+			>
+				<span
+					class="material-symbols-rounded {getActivityColor(
+						entry.action,
+					)} mt-0.5 shrink-0"
+					style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+					>{getActivityIcon(entry.action)}</span
+				>
+				<div class="flex-1 min-w-0">
+					<p class="text-body-sm text-light/70 leading-relaxed">
+						{getDescription(entry)}
+					</p>
+				</div>
+				<span class="text-[11px] text-light/30 shrink-0 mt-0.5"
+					>{formatTimeAgo(entry.created_at)}</span
+				>
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/src/lib/components/ui/ContentSkeleton.svelte b/src/lib/components/ui/ContentSkeleton.svelte
new file mode 100644
index 0000000..e6e59da
--- /dev/null
+++ b/src/lib/components/ui/ContentSkeleton.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import Skeleton from "./Skeleton.svelte";
+
+	interface Props {
+		variant?: "default" | "kanban" | "files" | "calendar" | "settings" | "list" | "detail";
+	}
+
+	let { variant = "default" }: Props = $props();
+</script>
+
+<div class="flex-1 p-6 animate-in">
+	{#if variant === "kanban"}
+		<div class="flex gap-3 h-full overflow-hidden">
+			{#each Array(3) as _}
+				<div class="flex-shrink-0 w-[256px] bg-dark/20 rounded-xl p-4 flex flex-col gap-3">
+					<div class="flex items-center gap-2">
+						<Skeleton variant="text" width="120px" height="1.25rem" />
+						<Skeleton variant="rectangular" width="24px" height="20px" class="rounded-lg" />
+					</div>
+					{#each Array(3) as __}
+						<Skeleton variant="card" height="72px" class="rounded-xl" />
+					{/each}
+				</div>
+			{/each}
+		</div>
+	{:else if variant === "files"}
+		<div class="flex items-center gap-2 mb-4">
+			<Skeleton variant="text" width="300px" height="2.5rem" class="rounded-xl" />
+			<div class="flex-1"></div>
+			<Skeleton variant="circular" width="36px" height="36px" />
+			<Skeleton variant="circular" width="36px" height="36px" />
+		</div>
+		<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+			{#each Array(12) as _}
+				<Skeleton variant="card" height="100px" class="rounded-xl" />
+			{/each}
+		</div>
+	{:else if variant === "calendar"}
+		<div class="flex items-center gap-2 mb-4">
+			<Skeleton variant="circular" width="32px" height="32px" />
+			<Skeleton variant="text" width="200px" height="1.5rem" />
+			<Skeleton variant="circular" width="32px" height="32px" />
+			<div class="flex-1"></div>
+			<Skeleton variant="rectangular" width="200px" height="32px" class="rounded-xl" />
+		</div>
+		<div class="grid grid-cols-7 gap-1">
+			{#each Array(7) as _}
+				<Skeleton variant="text" width="100%" height="2rem" />
+			{/each}
+			{#each Array(35) as _}
+				<Skeleton variant="rectangular" width="100%" height="72px" class="rounded-none" />
+			{/each}
+		</div>
+	{:else if variant === "settings"}
+		<div class="flex flex-col gap-4">
+			<Skeleton variant="text" width="160px" height="1.5rem" />
+			<Skeleton variant="text" lines={3} />
+			<Skeleton variant="rectangular" width="100%" height="48px" class="rounded-xl" />
+			<Skeleton variant="rectangular" width="100%" height="48px" class="rounded-xl" />
+		</div>
+	{:else if variant === "list"}
+		<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+			{#each Array(4) as _}
+				<Skeleton variant="card" height="72px" class="rounded-xl" />
+			{/each}
+		</div>
+		<div class="flex flex-col gap-2">
+			{#each Array(5) as _}
+				<Skeleton variant="rectangular" height="64px" class="rounded-xl" />
+			{/each}
+		</div>
+	{:else if variant === "detail"}
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+			<div class="lg:col-span-2 flex flex-col gap-4">
+				<Skeleton variant="card" height="200px" class="rounded-xl" />
+				<Skeleton variant="card" height="300px" class="rounded-xl" />
+			</div>
+			<div class="flex flex-col gap-4">
+				<Skeleton variant="card" height="180px" class="rounded-xl" />
+				<Skeleton variant="card" height="120px" class="rounded-xl" />
+			</div>
+		</div>
+	{:else}
+		<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+			{#each Array(4) as _}
+				<Skeleton variant="card" height="72px" class="rounded-xl" />
+			{/each}
+		</div>
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+			<div class="lg:col-span-2">
+				<Skeleton variant="card" height="300px" class="rounded-xl" />
+			</div>
+			<div class="flex flex-col gap-4">
+				<Skeleton variant="card" height="140px" class="rounded-xl" />
+				<Skeleton variant="card" height="200px" class="rounded-xl" />
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.animate-in {
+		animation: fadeIn 0.2s ease-out;
+	}
+	@keyframes fadeIn {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+</style>
diff --git a/src/lib/components/ui/EventCard.svelte b/src/lib/components/ui/EventCard.svelte
new file mode 100644
index 0000000..4285283
--- /dev/null
+++ b/src/lib/components/ui/EventCard.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import StatusBadge from "./StatusBadge.svelte";
+
+	interface Props {
+		name: string;
+		slug: string;
+		status: string;
+		startDate: string | null;
+		endDate: string | null;
+		color: string | null;
+		venueName: string | null;
+		href: string;
+		compact?: boolean;
+	}
+
+	let {
+		name,
+		slug,
+		status,
+		startDate,
+		endDate,
+		color,
+		venueName,
+		href,
+		compact = false,
+	}: Props = $props();
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return "";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			month: "short",
+			day: "numeric",
+		});
+	}
+</script>
+
+{#if compact}
+	<!-- Compact variant: single row for lists/sidebars -->
+	<a
+		{href}
+		class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-dark/50 transition-colors group"
+	>
+		<div
+			class="w-2.5 h-2.5 rounded-full shrink-0"
+			style="background-color: {color || '#00A3E0'}"
+		></div>
+		<div class="flex-1 min-w-0">
+			<p
+				class="text-body-sm text-white group-hover:text-primary transition-colors truncate"
+			>
+				{name}
+			</p>
+			<div class="flex items-center gap-2 mt-0.5">
+				{#if startDate}
+					<span class="text-[11px] text-light/40"
+						>{formatDate(startDate)}{endDate
+							? ` — ${formatDate(endDate)}`
+							: ""}</span
+					>
+				{/if}
+				{#if venueName}
+					<span class="text-[11px] text-light/30"
+						>· {venueName}</span
+					>
+				{/if}
+			</div>
+		</div>
+		<StatusBadge {status} />
+	</a>
+{:else}
+	<!-- Full card variant: for grid layouts -->
+	<a
+		{href}
+		class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
+	>
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-2">
+				<div
+					class="w-3 h-3 rounded-full"
+					style="background-color: {color || '#00A3E0'}"
+				></div>
+				<h3
+					class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
+				>
+					{name}
+				</h3>
+			</div>
+			<StatusBadge {status} />
+		</div>
+
+		<div class="flex items-center gap-3 text-[12px] text-light/40">
+			{#if startDate}
+				<span class="flex items-center gap-1">
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+						>calendar_today</span
+					>
+					{formatDate(startDate)}{endDate
+						? ` — ${formatDate(endDate)}`
+						: ""}
+				</span>
+			{/if}
+			{#if venueName}
+				<span class="flex items-center gap-1">
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+						>location_on</span
+					>
+					{venueName}
+				</span>
+			{/if}
+		</div>
+	</a>
+{/if}
diff --git a/src/lib/components/ui/MemberList.svelte b/src/lib/components/ui/MemberList.svelte
new file mode 100644
index 0000000..97878a0
--- /dev/null
+++ b/src/lib/components/ui/MemberList.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Avatar from "./Avatar.svelte";
+
+	interface MemberItem {
+		id: string;
+		user_id: string;
+		role: string;
+		profiles: {
+			id: string;
+			email: string;
+			full_name: string | null;
+			avatar_url: string | null;
+		} | null;
+	}
+
+	interface Props {
+		members: MemberItem[];
+		max?: number;
+		moreHref?: string;
+		moreLabel?: string;
+		emptyLabel?: string;
+	}
+
+	let {
+		members,
+		max = 6,
+		moreHref,
+		moreLabel,
+		emptyLabel,
+	}: Props = $props();
+
+	const visible = $derived(members.slice(0, max));
+	const remaining = $derived(members.length - max);
+</script>
+
+<div class="flex flex-col gap-1.5">
+	{#each visible as member}
+		<div class="flex items-center gap-2.5 px-1 py-1">
+			<Avatar
+				name={member.profiles?.full_name ||
+					member.profiles?.email ||
+					"?"}
+				src={member.profiles?.avatar_url}
+				size="sm"
+			/>
+			<div class="flex-1 min-w-0">
+				<p class="text-body-sm text-white truncate">
+					{member.profiles?.full_name ||
+						member.profiles?.email ||
+						"Unknown"}
+				</p>
+				<p class="text-[11px] text-light/40 capitalize">
+					{member.role}
+				</p>
+			</div>
+		</div>
+	{/each}
+	{#if remaining > 0 && moreHref && moreLabel}
+		<a
+			href={moreHref}
+			class="text-body-sm text-primary hover:underline text-center pt-1"
+		>
+			{moreLabel}
+		</a>
+	{/if}
+	{#if members.length === 0 && emptyLabel}
+		<p class="text-body-sm text-light/30 text-center py-4">
+			{emptyLabel}
+		</p>
+	{/if}
+</div>
diff --git a/src/lib/components/ui/ModuleCard.svelte b/src/lib/components/ui/ModuleCard.svelte
new file mode 100644
index 0000000..daec6e7
--- /dev/null
+++ b/src/lib/components/ui/ModuleCard.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		description: string;
+		icon: string;
+		href: string;
+		color?: string;
+		bg?: string;
+	}
+
+	let {
+		label,
+		description,
+		icon,
+		href,
+		color = "text-primary",
+		bg = "bg-primary/10",
+	}: Props = $props();
+</script>
+
+<a
+	{href}
+	class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-xl p-4 flex flex-col gap-2 transition-all"
+>
+	<div
+		class="w-10 h-10 rounded-xl {bg} flex items-center justify-center"
+	>
+		<span
+			class="material-symbols-rounded {color}"
+			style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+			>{icon}</span
+		>
+	</div>
+	<h3
+		class="text-body font-heading text-white group-hover:text-primary transition-colors"
+	>
+		{label}
+	</h3>
+	<p class="text-[12px] text-light/40">{description}</p>
+</a>
diff --git a/src/lib/components/ui/PageHeader.svelte b/src/lib/components/ui/PageHeader.svelte
new file mode 100644
index 0000000..034b157
--- /dev/null
+++ b/src/lib/components/ui/PageHeader.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		icon?: string;
+		iconColor?: string;
+		actions?: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		subtitle,
+		icon,
+		iconColor = "text-white",
+		actions,
+		class: className = "",
+	}: Props = $props();
+</script>
+
+<header
+	class="flex items-center justify-between px-6 py-5 border-b border-light/5 shrink-0 {className}"
+>
+	<div class="flex items-center gap-3 min-w-0">
+		{#if icon}
+			<span
+				class="material-symbols-rounded {iconColor} shrink-0"
+				style="font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;"
+				>{icon}</span
+			>
+		{/if}
+		<div class="min-w-0">
+			<h1 class="text-h1 font-heading text-white truncate">{title}</h1>
+			{#if subtitle}
+				<p class="text-body-sm text-light/50 mt-0.5">{subtitle}</p>
+			{/if}
+		</div>
+	</div>
+	{#if actions}
+		<div class="flex items-center gap-2 shrink-0 ml-4">
+			{@render actions()}
+		</div>
+	{/if}
+</header>
diff --git a/src/lib/components/ui/QuickLinkGrid.svelte b/src/lib/components/ui/QuickLinkGrid.svelte
new file mode 100644
index 0000000..40707e6
--- /dev/null
+++ b/src/lib/components/ui/QuickLinkGrid.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface QuickLink {
+		label: string;
+		icon: string;
+		href: string;
+		color?: string;
+	}
+
+	interface Props {
+		links: QuickLink[];
+	}
+
+	let { links }: Props = $props();
+</script>
+
+<div class="grid grid-cols-2 gap-2">
+	{#each links as link}
+		<a
+			href={link.href}
+			class="flex flex-col items-center gap-1.5 p-3 rounded-xl bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 transition-all text-center"
+		>
+			<span
+				class="material-symbols-rounded {link.color ?? 'text-light/50'}"
+				style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+				>{link.icon}</span
+			>
+			<span class="text-[12px] text-light/60">{link.label}</span>
+		</a>
+	{/each}
+</div>
diff --git a/src/lib/components/ui/SectionCard.svelte b/src/lib/components/ui/SectionCard.svelte
new file mode 100644
index 0000000..bdb4e27
--- /dev/null
+++ b/src/lib/components/ui/SectionCard.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		title?: string;
+		titleRight?: Snippet;
+		padding?: "sm" | "md" | "lg";
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		title,
+		titleRight,
+		padding = "md",
+		class: className = "",
+		children,
+	}: Props = $props();
+
+	const paddingClasses = {
+		sm: "p-3",
+		md: "p-5",
+		lg: "p-6",
+	};
+</script>
+
+<div
+	class="bg-dark/30 border border-light/5 rounded-xl {paddingClasses[padding]} {className}"
+>
+	{#if title || titleRight}
+		<div class="flex items-center justify-between mb-4">
+			{#if title}
+				<h2 class="text-body font-heading text-white">{title}</h2>
+			{/if}
+			{#if titleRight}
+				{@render titleRight()}
+			{/if}
+		</div>
+	{/if}
+	{@render children()}
+</div>
diff --git a/src/lib/components/ui/StatCard.svelte b/src/lib/components/ui/StatCard.svelte
new file mode 100644
index 0000000..54f06ea
--- /dev/null
+++ b/src/lib/components/ui/StatCard.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: number | string;
+		icon: string;
+		color?: string;
+		bg?: string;
+		href?: string | null;
+	}
+
+	let {
+		label,
+		value,
+		icon,
+		color = "text-primary",
+		bg = "bg-primary/10",
+		href = null,
+	}: Props = $props();
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-4 flex items-center gap-3 transition-all group"
+	>
+		<div
+			class="w-10 h-10 rounded-xl {bg} flex items-center justify-center shrink-0"
+		>
+			<span
+				class="material-symbols-rounded {color}"
+				style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+				>{icon}</span
+			>
+		</div>
+		<div>
+			<p class="text-xl font-bold text-white leading-none">{value}</p>
+			<p class="text-[12px] text-light/40 mt-0.5">{label}</p>
+		</div>
+	</a>
+{:else}
+	<div
+		class="bg-dark/30 border border-light/5 rounded-xl p-4 flex items-center gap-3"
+	>
+		<div
+			class="w-10 h-10 rounded-xl {bg} flex items-center justify-center shrink-0"
+		>
+			<span
+				class="material-symbols-rounded {color}"
+				style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+				>{icon}</span
+			>
+		</div>
+		<div>
+			<p class="text-xl font-bold text-white leading-none">{value}</p>
+			<p class="text-[12px] text-light/40 mt-0.5">{label}</p>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/ui/StatusBadge.svelte b/src/lib/components/ui/StatusBadge.svelte
new file mode 100644
index 0000000..7e45307
--- /dev/null
+++ b/src/lib/components/ui/StatusBadge.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		status: string;
+		size?: "sm" | "md";
+	}
+
+	let { status, size = "sm" }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		planning: "text-amber-400 bg-amber-400/10",
+		active: "text-emerald-400 bg-emerald-400/10",
+		completed: "text-blue-400 bg-blue-400/10",
+		archived: "text-light/40 bg-light/5",
+		draft: "text-light/40 bg-light/5",
+		sent: "text-amber-400 bg-amber-400/10",
+		signed: "text-emerald-400 bg-emerald-400/10",
+		fulfilled: "text-blue-400 bg-blue-400/10",
+	};
+
+	const sizeClasses = {
+		sm: "text-[10px] px-2 py-0.5",
+		md: "text-[12px] px-2.5 py-1",
+	};
+
+	const colors = $derived(colorMap[status] ?? "text-light/40 bg-light/5");
+</script>
+
+<span class="rounded-full capitalize {sizeClasses[size]} {colors}"
+	>{status}</span
+>
diff --git a/src/lib/components/ui/TabBar.svelte b/src/lib/components/ui/TabBar.svelte
new file mode 100644
index 0000000..fa033cf
--- /dev/null
+++ b/src/lib/components/ui/TabBar.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Tab {
+		value: string;
+		label: string;
+		icon?: string;
+	}
+
+	interface Props {
+		tabs: Tab[];
+		active: string;
+		onchange: (value: string) => void;
+	}
+
+	let { tabs, active, onchange }: Props = $props();
+</script>
+
+<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5 shrink-0">
+	{#each tabs as tab}
+		<button
+			type="button"
+			class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {active ===
+			tab.value
+				? 'bg-primary text-background'
+				: 'text-light/50 hover:text-white hover:bg-dark/50'}"
+			onclick={() => onchange(tab.value)}
+		>
+			{#if tab.icon}
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+					>{tab.icon}</span
+				>
+			{/if}
+			{tab.label}
+		</button>
+	{/each}
+</div>
diff --git a/src/lib/components/ui/index.ts b/src/lib/components/ui/index.ts
index eb32b1c..305a794 100644
--- a/src/lib/components/ui/index.ts
+++ b/src/lib/components/ui/index.ts
@@ -26,6 +26,17 @@ export { default as Icon } from './Icon.svelte';
 export { default as AssigneePicker } from './AssigneePicker.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
 export { default as PageSkeleton } from './PageSkeleton.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as SectionCard } from './SectionCard.svelte';
+export { default as StatCard } from './StatCard.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as TabBar } from './TabBar.svelte';
+export { default as MemberList } from './MemberList.svelte';
+export { default as ActivityFeed } from './ActivityFeed.svelte';
+export { default as EventCard } from './EventCard.svelte';
+export { default as ContentSkeleton } from './ContentSkeleton.svelte';
+export { default as QuickLinkGrid } from './QuickLinkGrid.svelte';
+export { default as ModuleCard } from './ModuleCard.svelte';
 export { default as ImagePreviewModal } from './ImagePreviewModal.svelte';
 export { default as Twemoji } from './Twemoji.svelte';
 export { default as EmojiPicker } from './EmojiPicker.svelte';
diff --git a/src/routes/[orgSlug]/+layout.server.ts b/src/routes/[orgSlug]/+layout.server.ts
index e2345fa..153acd2 100644
--- a/src/routes/[orgSlug]/+layout.server.ts
+++ b/src/routes/[orgSlug]/+layout.server.ts
@@ -20,7 +20,7 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 	}
 
 	// Now fetch membership, members, activity, and user profile in parallel (all depend on org.id)
-	const [membershipResult, membersResult, activityResult, profileResult, docCountResult, folderCountResult, kanbanCountResult] = await Promise.all([
+	const [membershipResult, membersResult, activityResult, profileResult, docCountResult, folderCountResult, kanbanCountResult, eventCountResult] = await Promise.all([
 		locals.supabase
 			.from('org_members')
 			.select('role, role_id')
@@ -68,7 +68,11 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 			.from('documents')
 			.select('id', { count: 'exact', head: true })
 			.eq('org_id', org.id)
-			.eq('type', 'kanban')
+			.eq('type', 'kanban'),
+		locals.supabase
+			.from('events')
+			.select('id', { count: 'exact', head: true })
+			.eq('org_id', org.id)
 	]);
 
 	const { data: membership } = membershipResult;
@@ -81,6 +85,7 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 		documentCount: docCountResult.count ?? 0,
 		folderCount: folderCountResult.count ?? 0,
 		kanbanCount: kanbanCountResult.count ?? 0,
+		eventCount: eventCountResult.count ?? 0,
 	};
 
 	if (!membership) {
@@ -121,6 +126,15 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 		profiles: (m.user_id ? memberProfilesMap[m.user_id] : null) ?? null
 	}));
 
+	// Fetch upcoming events for the overview
+	const { data: upcomingEvents } = await locals.supabase
+		.from('events')
+		.select('id, name, slug, status, start_date, end_date, color, venue_name')
+		.eq('org_id', org.id)
+		.in('status', ['planning', 'active'])
+		.order('start_date', { ascending: true, nullsFirst: false })
+		.limit(5);
+
 	return {
 		org,
 		userRole: membership.role,
@@ -128,6 +142,7 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 		members,
 		recentActivity: recentActivity ?? [],
 		stats,
+		upcomingEvents: upcomingEvents ?? [],
 		user,
 		profile: profile ?? { id: user.id, email: user.email ?? '', full_name: null, avatar_url: null }
 	};
diff --git a/src/routes/[orgSlug]/+layout.svelte b/src/routes/[orgSlug]/+layout.svelte
index 9cffd9e..6da719f 100644
--- a/src/routes/[orgSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/+layout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { page, navigating } from "$app/stores";
+	import { page } from "$app/stores";
 	import { goto } from "$app/navigation";
 	import type { Snippet } from "svelte";
 	import { getContext } from "svelte";
 	import { on } from "svelte/events";
-	import { Avatar, Logo, PageSkeleton } from "$lib/components/ui";
+	import { Avatar, Logo } from "$lib/components/ui";
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
 	import { hasPermission, type Permission } from "$lib/utils/permissions";
@@ -345,23 +345,7 @@
 	</aside>
 
 	<!-- Main Content Area -->
-	<main class="flex-1 bg-night rounded-[32px] overflow-auto relative">
-		{#if $navigating}
-			{@const target = $navigating.to?.url.pathname ?? ""}
-			{@const skeletonVariant = target.includes("/kanban")
-				? "kanban"
-				: target.includes("/documents")
-					? "files"
-					: target.includes("/calendar")
-						? "calendar"
-						: target.includes("/events")
-							? "default"
-							: target.includes("/settings")
-								? "settings"
-								: "default"}
-			<PageSkeleton variant={skeletonVariant} />
-		{:else}
-			{@render children()}
-		{/if}
+	<main class="flex-1 bg-night rounded-[32px] overflow-hidden relative">
+		{@render children()}
 	</main>
 </div>
diff --git a/src/routes/[orgSlug]/+page.svelte b/src/routes/[orgSlug]/+page.svelte
index 52910b7..f73084b 100644
--- a/src/routes/[orgSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/+page.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	import { Avatar, Card } from "$lib/components/ui";
+	import {
+		PageHeader,
+		StatCard,
+		SectionCard,
+		EventCard,
+		ActivityFeed,
+		MemberList,
+		QuickLinkGrid,
+	} from "$lib/components/ui";
 	import * as m from "$lib/paraglide/messages";
 
 	interface ActivityEntry {
@@ -15,6 +23,17 @@
 		} | null;
 	}
 
+	interface UpcomingEvent {
+		id: string;
+		name: string;
+		slug: string;
+		status: string;
+		start_date: string | null;
+		end_date: string | null;
+		color: string | null;
+		venue_name: string | null;
+	}
+
 	interface Props {
 		data: {
 			org: { id: string; name: string; slug: string };
@@ -24,8 +43,10 @@
 				documentCount: number;
 				folderCount: number;
 				kanbanCount: number;
+				eventCount: number;
 			};
 			recentActivity: ActivityEntry[];
+			upcomingEvents: UpcomingEvent[];
 			members: {
 				id: string;
 				user_id: string;
@@ -48,321 +69,174 @@
 			documentCount: 0,
 			folderCount: 0,
 			kanbanCount: 0,
+			eventCount: 0,
 		},
 	);
 
 	const recentActivity = $derived(data.recentActivity ?? []);
+	const upcomingEvents = $derived(data.upcomingEvents ?? []);
 	const members = $derived(data.members ?? []);
 
 	const isAdmin = $derived(
 		data.userRole === "owner" || data.userRole === "admin",
 	);
-
-	const statCards = $derived([
-		{
-			label: m.overview_stat_members(),
-			value: stats.memberCount,
-			icon: "group",
-			href: isAdmin ? `/${data.org.slug}/settings` : null,
-			color: "text-blue-400",
-			bg: "bg-blue-400/10",
-		},
-		{
-			label: m.overview_stat_documents(),
-			value: stats.documentCount,
-			icon: "description",
-			href: `/${data.org.slug}/documents`,
-			color: "text-emerald-400",
-			bg: "bg-emerald-400/10",
-		},
-		{
-			label: m.overview_stat_folders(),
-			value: stats.folderCount,
-			icon: "folder",
-			href: `/${data.org.slug}/documents`,
-			color: "text-amber-400",
-			bg: "bg-amber-400/10",
-		},
-		{
-			label: m.overview_stat_boards(),
-			value: stats.kanbanCount,
-			icon: "view_kanban",
-			href: `/${data.org.slug}/documents`,
-			color: "text-purple-400",
-			bg: "bg-purple-400/10",
-		},
-	]);
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
 
 	const quickLinks = $derived([
-		{
-			label: m.nav_files(),
-			icon: "cloud",
-			href: `/${data.org.slug}/documents`,
-		},
-		{
-			label: m.nav_calendar(),
-			icon: "calendar_today",
-			href: `/${data.org.slug}/calendar`,
-		},
-		...(isAdmin
-			? [
-					{
-						label: m.nav_settings(),
-						icon: "settings",
-						href: `/${data.org.slug}/settings`,
-					},
-				]
-			: []),
+		{ label: m.nav_events(), icon: "celebration", href: `/${data.org.slug}/events`, color: "text-primary" },
+		{ label: m.nav_files(), icon: "cloud", href: `/${data.org.slug}/documents`, color: "text-emerald-400" },
+		{ label: m.nav_calendar(), icon: "calendar_today", href: `/${data.org.slug}/calendar`, color: "text-blue-400" },
+		{ label: "Chat", icon: "chat", href: `/${data.org.slug}/chat`, color: "text-purple-400" },
 	]);
-
-	function getEntityTypeLabel(entityType: string): string {
-		const map: Record<string, () => string> = {
-			document: m.entity_document,
-			folder: m.entity_folder,
-			kanban_board: m.entity_kanban_board,
-			kanban_card: m.entity_kanban_card,
-			kanban_column: m.entity_kanban_column,
-			member: m.entity_member,
-			role: m.entity_role,
-			invite: m.entity_invite,
-		};
-		return (map[entityType] ?? (() => entityType))();
-	}
-
-	function getActivityIcon(action: string): string {
-		const map: Record<string, string> = {
-			create: "add_circle",
-			update: "edit",
-			delete: "delete",
-			move: "drive_file_move",
-			rename: "edit_note",
-		};
-		return map[action] ?? "info";
-	}
-
-	function getActivityColor(action: string): string {
-		const map: Record<string, string> = {
-			create: "text-emerald-400",
-			update: "text-blue-400",
-			delete: "text-red-400",
-			move: "text-amber-400",
-			rename: "text-purple-400",
-		};
-		return map[action] ?? "text-light/50";
-	}
-
-	function formatTimeAgo(dateStr: string | null): string {
-		if (!dateStr) return "";
-		const now = Date.now();
-		const then = new Date(dateStr).getTime();
-		const diffMs = now - then;
-		const diffMin = Math.floor(diffMs / 60000);
-		if (diffMin < 1) return m.activity_just_now();
-		if (diffMin < 60)
-			return m.activity_minutes_ago({ count: String(diffMin) });
-		const diffHr = Math.floor(diffMin / 60);
-		if (diffHr < 24) return m.activity_hours_ago({ count: String(diffHr) });
-		const diffDay = Math.floor(diffHr / 24);
-		return m.activity_days_ago({ count: String(diffDay) });
-	}
-
-	function getActivityDescription(entry: ActivityEntry): string {
-		const userName =
-			entry.profiles?.full_name || entry.profiles?.email || "Someone";
-		const entityType = getEntityTypeLabel(entry.entity_type);
-		const name = entry.entity_name ?? "—";
-
-		const map: Record<string, () => string> = {
-			create: () =>
-				m.activity_created({ user: userName, entityType, name }),
-			update: () =>
-				m.activity_updated({ user: userName, entityType, name }),
-			delete: () =>
-				m.activity_deleted({ user: userName, entityType, name }),
-			move: () => m.activity_moved({ user: userName, entityType, name }),
-			rename: () =>
-				m.activity_renamed({ user: userName, entityType, name }),
-		};
-		return (map[entry.action] ?? map["update"]!)();
-	}
 </script>
 
 <svelte:head>
 	<title>{data.org.name} | Root</title>
 </svelte:head>
 
-<div class="flex flex-col h-full p-4 lg:p-5 gap-6 overflow-auto">
-	<!-- Header -->
-	<header>
-		<h1 class="text-h1 font-heading text-white">{data.org.name}</h1>
-		<p class="text-body text-light/60 font-body">{m.overview_title()}</p>
-	</header>
-
-	<!-- Stats Grid -->
-	<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-		{#each statCards as stat}
-			{#if stat.href}
+<div class="flex flex-col h-full overflow-auto">
+	<PageHeader title={data.org.name} subtitle={m.overview_subtitle()}>
+		{#snippet actions()}
+			{#if isEditor}
 				<a
-					href={stat.href}
-					class="bg-night rounded-2xl p-5 flex flex-col gap-3 hover:bg-night/80 transition-colors group"
-				>
-					<div
-						class="w-10 h-10 rounded-xl {stat.bg} flex items-center justify-center"
-					>
-						<span
-							class="material-symbols-rounded {stat.color}"
-							style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-						>
-							{stat.icon}
-						</span>
-					</div>
-					<div>
-						<p class="text-2xl font-bold text-white">
-							{stat.value}
-						</p>
-						<p class="text-body-sm text-light/50">{stat.label}</p>
-					</div>
-				</a>
-			{:else}
-				<div class="bg-night rounded-2xl p-5 flex flex-col gap-3">
-					<div
-						class="w-10 h-10 rounded-xl {stat.bg} flex items-center justify-center"
-					>
-						<span
-							class="material-symbols-rounded {stat.color}"
-							style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-						>
-							{stat.icon}
-						</span>
-					</div>
-					<div>
-						<p class="text-2xl font-bold text-white">
-							{stat.value}
-						</p>
-						<p class="text-body-sm text-light/50">{stat.label}</p>
-					</div>
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
-		<!-- Recent Activity -->
-		<div
-			class="lg:col-span-2 bg-night rounded-2xl p-5 flex flex-col gap-4 min-h-0"
-		>
-			<h2 class="text-h3 font-heading text-white">
-				{m.activity_title()}
-			</h2>
-
-			{#if recentActivity.length === 0}
-				<div
-					class="flex-1 flex flex-col items-center justify-center text-light/40 py-12"
+					href="/{data.org.slug}/events"
+					class="flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
 				>
 					<span
-						class="material-symbols-rounded mb-3"
-						style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;"
+						class="material-symbols-rounded"
+						style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+						>celebration</span
 					>
-						history
-					</span>
-					<p class="text-body">{m.activity_empty()}</p>
-				</div>
-			{:else}
-				<div class="flex flex-col gap-1 overflow-auto flex-1">
-					{#each recentActivity as entry}
-						<div
-							class="flex items-start gap-3 px-3 py-2.5 rounded-xl hover:bg-dark/50 transition-colors"
-						>
-							<span
-								class="material-symbols-rounded {getActivityColor(
-									entry.action,
-								)} mt-0.5 shrink-0"
-								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
-							>
-								{getActivityIcon(entry.action)}
-							</span>
-							<div class="flex-1 min-w-0">
-								<p
-									class="text-body-sm text-light leading-relaxed"
-								>
-									{getActivityDescription(entry)}
-								</p>
-								<p class="text-[11px] text-light/40 mt-0.5">
-									{formatTimeAgo(entry.created_at)}
-								</p>
-							</div>
-						</div>
-					{/each}
-				</div>
+					{m.nav_events()}
+				</a>
 			{/if}
+		{/snippet}
+	</PageHeader>
+
+	<div class="flex-1 p-6 overflow-auto">
+		<!-- Stats Grid -->
+		<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+			<StatCard
+				label={m.overview_stat_events()}
+				value={stats.eventCount}
+				icon="celebration"
+				href="/{data.org.slug}/events"
+				color="text-primary"
+				bg="bg-primary/10"
+			/>
+			<StatCard
+				label={m.overview_stat_members()}
+				value={stats.memberCount}
+				icon="group"
+				href={isAdmin ? `/${data.org.slug}/settings` : null}
+				color="text-blue-400"
+				bg="bg-blue-400/10"
+			/>
+			<StatCard
+				label={m.overview_stat_documents()}
+				value={stats.documentCount}
+				icon="description"
+				href="/{data.org.slug}/documents"
+				color="text-emerald-400"
+				bg="bg-emerald-400/10"
+			/>
+			<StatCard
+				label={m.overview_stat_boards()}
+				value={stats.kanbanCount}
+				icon="view_kanban"
+				href="/{data.org.slug}/documents"
+				color="text-purple-400"
+				bg="bg-purple-400/10"
+			/>
 		</div>
 
-		<!-- Sidebar: Quick Links + Members -->
-		<div class="flex flex-col gap-6">
-			<!-- Quick Links -->
-			<div class="bg-night rounded-2xl p-5 flex flex-col gap-3">
-				<h2 class="text-h3 font-heading text-white">
-					{m.overview_quick_links()}
-				</h2>
-				<div class="flex flex-col gap-1">
-					{#each quickLinks as link}
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+			<!-- Left Column: Upcoming Events + Activity -->
+			<div class="lg:col-span-2 flex flex-col gap-6">
+				<!-- Upcoming Events -->
+				<SectionCard title={m.overview_upcoming_events()}>
+					{#snippet titleRight()}
 						<a
-							href={link.href}
-							class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-light hover:bg-dark/50 hover:text-white transition-colors"
+							href="/{data.org.slug}/events"
+							class="text-[12px] text-primary hover:underline"
+							>{m.overview_view_all_events()}</a
 						>
+					{/snippet}
+
+					{#if upcomingEvents.length === 0}
+						<div class="flex flex-col items-center justify-center text-light/40 py-8">
 							<span
-								class="material-symbols-rounded text-light/50"
-								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								class="material-symbols-rounded mb-2"
+								style="font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;"
+								>celebration</span
 							>
-								{link.icon}
-							</span>
-							<span class="text-body">{link.label}</span>
-						</a>
-					{/each}
-				</div>
+							<p class="text-body-sm">{m.overview_upcoming_empty()}</p>
+						</div>
+					{:else}
+						<div class="flex flex-col gap-1">
+							{#each upcomingEvents as event}
+								<EventCard
+									name={event.name}
+									slug={event.slug}
+									status={event.status}
+									startDate={event.start_date}
+									endDate={event.end_date}
+									color={event.color}
+									venueName={event.venue_name}
+									href="/{data.org.slug}/events/{event.slug}"
+									compact
+								/>
+							{/each}
+						</div>
+					{/if}
+				</SectionCard>
+
+				<!-- Recent Activity -->
+				<SectionCard title={m.activity_title()}>
+					<ActivityFeed entries={recentActivity} />
+				</SectionCard>
 			</div>
 
-			<!-- Team Members Preview -->
-			<div class="bg-night rounded-2xl p-5 flex flex-col gap-3">
-				<div class="flex items-center justify-between">
-					<h2 class="text-h3 font-heading text-white">
-						{m.overview_stat_members()}
-					</h2>
-					<span class="text-body-sm text-light/40"
-						>{stats.memberCount}</span
+			<!-- Right Column: Quick Links + Team -->
+			<div class="flex flex-col gap-6">
+				<SectionCard title={m.overview_quick_links()}>
+					<QuickLinkGrid links={quickLinks} />
+				</SectionCard>
+
+				<SectionCard title={m.overview_stat_members()}>
+					{#snippet titleRight()}
+						<span class="text-[12px] text-light/30">{stats.memberCount}</span>
+					{/snippet}
+					<MemberList
+						{members}
+						max={6}
+						moreHref="/{data.org.slug}/settings"
+						moreLabel={m.overview_more_members({ count: String(Math.max(0, stats.memberCount - 6)) })}
+					/>
+				</SectionCard>
+
+				{#if isAdmin}
+					<a
+						href="/{data.org.slug}/settings"
+						class="flex items-center gap-3 bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-4 transition-all group"
 					>
-				</div>
-				<div class="flex flex-col gap-2">
-					{#each members.slice(0, 5) as member}
-						<div class="flex items-center gap-3 px-1 py-1">
-							<Avatar
-								name={member.profiles?.full_name ||
-									member.profiles?.email ||
-									"?"}
-								src={member.profiles?.avatar_url}
-								size="sm"
-							/>
-							<div class="flex-1 min-w-0">
-								<p class="text-body-sm text-white truncate">
-									{member.profiles?.full_name ||
-										member.profiles?.email ||
-										"Unknown"}
-								</p>
-								<p class="text-[11px] text-light/40 capitalize">
-									{member.role}
-								</p>
-							</div>
+						<div class="w-10 h-10 rounded-xl bg-light/5 flex items-center justify-center">
+							<span
+								class="material-symbols-rounded text-light/40 group-hover:text-white transition-colors"
+								style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+								>settings</span
+							>
 						</div>
-					{/each}
-					{#if stats.memberCount > 5}
-						<a
-							href="/{data.org.slug}/settings"
-							class="text-body-sm text-primary hover:underline text-center pt-1"
-						>
-							+{stats.memberCount - 5} more
-						</a>
-					{/if}
-				</div>
+						<div>
+							<p class="text-body-sm text-white group-hover:text-primary transition-colors">
+								{m.nav_settings()}
+							</p>
+							<p class="text-[11px] text-light/30">{m.settings_general_title()}</p>
+						</div>
+					</a>
+				{/if}
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/[orgSlug]/account/+layout.svelte b/src/routes/[orgSlug]/account/+layout.svelte
new file mode 100644
index 0000000..ed00bc3
--- /dev/null
+++ b/src/routes/[orgSlug]/account/+layout.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname.includes("/account") ?? false,
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader
+		title={m.account_title()}
+		subtitle={m.account_subtitle()}
+		icon="person"
+		iconColor="text-light/50"
+	/>
+
+	{#if isNavigatingHere}
+		<ContentSkeleton variant="settings" />
+	{:else}
+		<div class="flex-1 overflow-auto">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/account/+page.svelte b/src/routes/[orgSlug]/account/+page.svelte
index d05b6ce..9aba7c9 100644
--- a/src/routes/[orgSlug]/account/+page.svelte
+++ b/src/routes/[orgSlug]/account/+page.svelte
@@ -227,16 +227,8 @@
 	<title>Account Settings | Root</title>
 </svelte:head>
 
-<div class="flex flex-col h-full p-4 lg:p-5 gap-4">
-	<!-- Header -->
-	<div>
-		<h1 class="font-heading text-h1 text-white">{m.account_title()}</h1>
-		<p class="font-body text-body text-light/60 mt-1">
-			{m.account_subtitle()}
-		</p>
-	</div>
-
-	<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 flex-1 min-h-0">
+<div class="flex-1 p-6">
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 		<!-- Profile Section -->
 		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
 			<h2 class="font-heading text-h3 text-white">
diff --git a/src/routes/[orgSlug]/calendar/+layout.svelte b/src/routes/[orgSlug]/calendar/+layout.svelte
new file mode 100644
index 0000000..76cd2eb
--- /dev/null
+++ b/src/routes/[orgSlug]/calendar/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname.includes("/calendar") ?? false,
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader title={m.nav_calendar()} icon="calendar_today" iconColor="text-blue-400" />
+
+	{#if isNavigatingHere}
+		<ContentSkeleton variant="calendar" />
+	{:else}
+		<div class="flex-1 overflow-auto">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/calendar/+page.svelte b/src/routes/[orgSlug]/calendar/+page.svelte
index bda44a0..a33f42b 100644
--- a/src/routes/[orgSlug]/calendar/+page.svelte
+++ b/src/routes/[orgSlug]/calendar/+page.svelte
@@ -456,13 +456,11 @@
 	<title>Calendar - {data.org.name} | Root</title>
 </svelte:head>
 
-<div class="flex flex-col h-full p-4 lg:p-5 gap-4">
-	<!-- Header -->
-	<header class="flex items-center gap-2 p-1">
-		<h1 class="flex-1 font-heading text-h1 text-white">
-			{m.calendar_title()}
-		</h1>
-		<Button size="md" onclick={() => handleDateClick(new Date())}
+<div class="flex flex-col h-full">
+	<!-- Toolbar -->
+	<div class="flex items-center gap-2 px-6 py-3 border-b border-light/5 shrink-0">
+		<div class="flex-1"></div>
+		<Button size="sm" onclick={() => handleDateClick(new Date())}
 			>{m.btn_new()}</Button
 		>
 		<ContextMenu
@@ -502,10 +500,10 @@
 					: []),
 			]}
 		/>
-	</header>
+	</div>
 
 	<!-- Calendar Grid -->
-	<div class="flex-1 overflow-auto">
+	<div class="flex-1 overflow-auto p-4">
 		<Calendar
 			events={allEvents}
 			onDateClick={handleDateClick}
diff --git a/src/routes/[orgSlug]/documents/+layout.svelte b/src/routes/[orgSlug]/documents/+layout.svelte
new file mode 100644
index 0000000..1d0dc23
--- /dev/null
+++ b/src/routes/[orgSlug]/documents/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname.includes("/documents") && !$navigating?.to?.url.pathname.includes("/events"),
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader title={m.nav_files()} icon="cloud" iconColor="text-emerald-400" />
+
+	{#if isNavigatingHere}
+		<ContentSkeleton variant="files" />
+	{:else}
+		<div class="flex-1 overflow-auto">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/documents/+page.svelte b/src/routes/[orgSlug]/documents/+page.svelte
index 892ad33..3091165 100644
--- a/src/routes/[orgSlug]/documents/+page.svelte
+++ b/src/routes/[orgSlug]/documents/+page.svelte
@@ -22,7 +22,7 @@
 	<title>Files - {data.org.name} | Root</title>
 </svelte:head>
 
-<div class="h-full p-4 lg:p-5">
+<div class="h-full p-6">
 	<FileBrowser
 		org={data.org}
 		bind:documents
diff --git a/src/routes/[orgSlug]/events/+layout.svelte b/src/routes/[orgSlug]/events/+layout.svelte
new file mode 100644
index 0000000..9fefa90
--- /dev/null
+++ b/src/routes/[orgSlug]/events/+layout.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating, page } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	// Only show the events list header when on the events list page itself,
+	// not on event detail pages (which have their own layout)
+	const isEventsList = $derived(
+		$page.url.pathname === `/${data.org.slug}/events`,
+	);
+
+	const isNavigatingToList = $derived(
+		$navigating?.to?.url.pathname === `/${data.org.slug}/events`,
+	);
+
+	const showListLayout = $derived(isEventsList || isNavigatingToList);
+</script>
+
+{#if showListLayout}
+	<div class="flex flex-col h-full overflow-hidden">
+		<PageHeader
+			title={m.events_title()}
+			subtitle={m.events_subtitle()}
+			icon="celebration"
+			iconColor="text-primary"
+		/>
+
+		{#if isNavigatingToList && !isEventsList}
+			<ContentSkeleton variant="list" />
+		{:else}
+			<div class="flex-1 overflow-hidden">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+{:else}
+	{@render children()}
+{/if}
diff --git a/src/routes/[orgSlug]/events/+page.svelte b/src/routes/[orgSlug]/events/+page.svelte
index 16bd286..3d60936 100644
--- a/src/routes/[orgSlug]/events/+page.svelte
+++ b/src/routes/[orgSlug]/events/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
-	import { Avatar } from "$lib/components/ui";
+	import { EventCard, TabBar, Button } from "$lib/components/ui";
 	import { getContext } from "svelte";
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
@@ -68,45 +68,6 @@
 		"#14B8A6",
 	];
 
-	function getStatusColor(status: string): string {
-		const map: Record<string, string> = {
-			planning: "text-amber-400 bg-amber-400/10",
-			active: "text-emerald-400 bg-emerald-400/10",
-			completed: "text-blue-400 bg-blue-400/10",
-			archived: "text-light/40 bg-light/5",
-		};
-		return map[status] ?? "text-light/40 bg-light/5";
-	}
-
-	function getStatusIcon(status: string): string {
-		const map: Record<string, string> = {
-			planning: "edit_note",
-			active: "play_circle",
-			completed: "check_circle",
-			archived: "archive",
-		};
-		return map[status] ?? "help";
-	}
-
-	function formatDate(dateStr: string | null): string {
-		if (!dateStr) return "";
-		return new Date(dateStr).toLocaleDateString(undefined, {
-			month: "short",
-			day: "numeric",
-			year: "numeric",
-		});
-	}
-
-	function formatDateRange(
-		start: string | null,
-		end: string | null,
-	): string {
-		if (!start && !end) return m.events_no_dates();
-		if (start && !end) return formatDate(start);
-		if (!start && end) return `Until ${formatDate(end)}`;
-		return `${formatDate(start)} — ${formatDate(end)}`;
-	}
-
 	async function handleCreate() {
 		if (!newEventName.trim()) return;
 		creating = true;
@@ -171,166 +132,66 @@
 </svelte:head>
 
 <div class="flex flex-col h-full">
-	<!-- Header -->
-	<header
-		class="flex items-center justify-between px-6 py-5 border-b border-light/5"
-	>
-		<div>
-			<h1 class="text-h1 font-heading text-white">{m.events_title()}</h1>
-			<p class="text-body-sm text-light/50 mt-1">
-				{m.events_subtitle()}
-			</p>
+	<!-- Toolbar: Status Tabs + Create Button -->
+	<div class="flex items-center justify-between px-6 py-3 border-b border-light/5 shrink-0">
+		<div class="flex items-center gap-1">
+			{#each statusTabs as tab}
+				<button
+					type="button"
+					class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
+					tab.value
+						? 'bg-primary text-background'
+						: 'text-light/50 hover:text-white hover:bg-dark/50'}"
+					onclick={() => switchStatus(tab.value)}
+				>
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+						>{tab.icon}</span
+					>
+					{tab.label}
+				</button>
+			{/each}
 		</div>
 		{#if isEditor}
-			<button
-				type="button"
-				class="flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
-				onclick={() => (showCreateModal = true)}
-			>
-				<span
-					class="material-symbols-rounded"
-					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
-					>add</span
-				>
+			<Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>
 				{m.events_new()}
-			</button>
+			</Button>
 		{/if}
-	</header>
-
-	<!-- Status Tabs -->
-	<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5">
-		{#each statusTabs as tab}
-			<button
-				type="button"
-				class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
-				tab.value
-					? 'bg-primary text-background'
-					: 'text-light/60 hover:text-white hover:bg-dark/50'}"
-				onclick={() => switchStatus(tab.value)}
-			>
-				<span
-					class="material-symbols-rounded"
-					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
-					>{tab.icon}</span
-				>
-				{tab.label}
-			</button>
-		{/each}
 	</div>
 
 	<!-- Events Grid -->
 	<div class="flex-1 overflow-auto p-6">
 		{#if data.events.length === 0}
-			<div
-				class="flex flex-col items-center justify-center h-full text-light/40"
-			>
+			<div class="flex flex-col items-center justify-center h-full text-light/40">
 				<span
 					class="material-symbols-rounded mb-4"
 					style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
 					>celebration</span
 				>
 				<p class="text-h3 font-heading mb-2">{m.events_empty_title()}</p>
-				<p class="text-body text-light/30">
-					{m.events_empty_desc()}
-				</p>
+				<p class="text-body text-light/30">{m.events_empty_desc()}</p>
 				{#if isEditor}
-					<button
-						type="button"
-						class="mt-4 flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
-						onclick={() => (showCreateModal = true)}
-					>
-						<span
-							class="material-symbols-rounded"
-							style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
-							>add</span
-						>
-						{m.events_create()}
-					</button>
+					<div class="mt-4">
+						<Button icon="add" onclick={() => (showCreateModal = true)}>
+							{m.events_create()}
+						</Button>
+					</div>
 				{/if}
 			</div>
 		{:else}
 			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
 				{#each data.events as event}
-					<a
+					<EventCard
+						name={event.name}
+						slug={event.slug}
+						status={event.status}
+						startDate={event.start_date}
+						endDate={event.end_date}
+						color={event.color}
+						venueName={event.venue_name}
 						href="/{data.org.slug}/events/{event.slug}"
-						class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
-					>
-						<!-- Color bar + Status -->
-						<div class="flex items-center justify-between">
-							<div class="flex items-center gap-2">
-								<div
-									class="w-3 h-3 rounded-full"
-									style="background-color: {event.color ||
-										'#00A3E0'}"
-								></div>
-								<h3
-									class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
-								>
-									{event.name}
-								</h3>
-							</div>
-							<span
-								class="text-[11px] font-body px-2 py-0.5 rounded-full capitalize {getStatusColor(
-									event.status,
-								)}"
-							>
-								{event.status}
-							</span>
-						</div>
-
-						<!-- Description -->
-						{#if event.description}
-							<p
-								class="text-body-sm text-light/50 line-clamp-2"
-							>
-								{event.description}
-							</p>
-						{/if}
-
-						<!-- Meta row -->
-						<div
-							class="flex items-center gap-4 text-[12px] text-light/40 mt-auto pt-2"
-						>
-							<!-- Date -->
-							<div class="flex items-center gap-1">
-								<span
-									class="material-symbols-rounded"
-									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
-									>calendar_today</span
-								>
-								<span
-									>{formatDateRange(
-										event.start_date,
-										event.end_date,
-									)}</span
-								>
-							</div>
-
-							<!-- Venue -->
-							{#if event.venue_name}
-								<div class="flex items-center gap-1">
-									<span
-										class="material-symbols-rounded"
-										style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
-										>location_on</span
-									>
-									<span class="truncate max-w-[120px]"
-										>{event.venue_name}</span
-									>
-								</div>
-							{/if}
-
-							<!-- Members -->
-							<div class="flex items-center gap-1 ml-auto">
-								<span
-									class="material-symbols-rounded"
-									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
-									>group</span
-								>
-								<span>{event.member_count}</span>
-							</div>
-						</div>
-					</a>
+					/>
 				{/each}
 			</div>
 		{/if}
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
index a2832a3..41bd06e 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
-	import { Avatar } from "$lib/components/ui";
+	import { ModuleCard, SectionCard, StatusBadge } from "$lib/components/ui";
 	import { getContext } from "svelte";
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
@@ -394,36 +394,21 @@
 			class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"
 		>
 			{#each moduleCards as mod}
-				<a
+				<ModuleCard
+					label={mod.label}
+					description={mod.description}
+					icon={mod.icon}
 					href={mod.href}
-					class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-xl p-4 flex flex-col gap-2 transition-all"
-				>
-					<div
-						class="w-10 h-10 rounded-xl {mod.bg} flex items-center justify-center"
-					>
-						<span
-							class="material-symbols-rounded {mod.color}"
-							style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
-							>{mod.icon}</span
-						>
-					</div>
-					<h3
-						class="text-body font-heading text-white group-hover:text-primary transition-colors"
-					>
-						{mod.label}
-					</h3>
-					<p class="text-[12px] text-light/40">{mod.description}</p>
-				</a>
+					color={mod.color}
+					bg={mod.bg}
+				/>
 			{/each}
 		</div>
 
 		<!-- Event Details Section -->
 		<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
 			<!-- Info Card -->
-			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
-				<h3 class="text-body font-heading text-white mb-3">
-					{m.events_details()}
-				</h3>
+			<SectionCard title={m.events_details()}>
 				<div class="flex flex-col gap-2.5">
 					<div class="flex items-center gap-3">
 						<span
@@ -474,41 +459,30 @@
 						</div>
 					{/if}
 				</div>
-			</div>
+			</SectionCard>
 
 			<!-- Team Card -->
-			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
-				<div class="flex items-center justify-between mb-3">
-					<h3 class="text-body font-heading text-white">
-						{m.events_team_count({ count: String(data.eventMembers.length) })}
-					</h3>
+			<SectionCard title={m.events_team_count({ count: String(data.eventMembers.length) })}>
+				{#snippet titleRight()}
 					<a
 						href="{basePath}/team"
 						class="text-[12px] text-primary hover:underline"
 						>{m.events_team_manage()}</a
 					>
-				</div>
+				{/snippet}
 				<div class="flex flex-col gap-2">
 					{#each data.eventMembers.slice(0, 6) as member}
 						<div class="flex items-center gap-2.5">
-							<Avatar
-								name={member.profile?.full_name ||
-									member.profile?.email ||
-									"?"}
-								src={member.profile?.avatar_url}
-								size="sm"
-							/>
+							<div class="w-7 h-7 rounded-full bg-primary/20 flex items-center justify-center text-[11px] font-bold text-primary shrink-0">
+								{(member.profile?.full_name || member.profile?.email || "?").charAt(0).toUpperCase()}
+							</div>
 							<div class="flex-1 min-w-0">
-								<p
-									class="text-body-sm text-white truncate"
-								>
+								<p class="text-body-sm text-white truncate">
 									{member.profile?.full_name ||
 										member.profile?.email ||
 										"Unknown"}
 								</p>
-								<p
-									class="text-[11px] text-light/40 capitalize"
-								>
+								<p class="text-[11px] text-light/40 capitalize">
 									{member.role}
 								</p>
 							</div>
@@ -528,7 +502,7 @@
 						</p>
 					{/if}
 				</div>
-			</div>
+			</SectionCard>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/[orgSlug]/kanban/+layout.svelte b/src/routes/[orgSlug]/kanban/+layout.svelte
new file mode 100644
index 0000000..d1447f1
--- /dev/null
+++ b/src/routes/[orgSlug]/kanban/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname.includes("/kanban") ?? false,
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader title={m.kanban_title()} icon="view_kanban" iconColor="text-purple-400" />
+
+	{#if isNavigatingHere}
+		<ContentSkeleton variant="kanban" />
+	{:else}
+		<div class="flex-1 overflow-hidden">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/kanban/+page.svelte b/src/routes/[orgSlug]/kanban/+page.svelte
index 866b5ef..f2774cc 100644
--- a/src/routes/[orgSlug]/kanban/+page.svelte
+++ b/src/routes/[orgSlug]/kanban/+page.svelte
@@ -494,13 +494,13 @@
 	>
 </svelte:head>
 
-<div class="flex flex-col h-full p-4 lg:p-5 gap-4">
-	<!-- Header -->
-	<header class="flex items-center gap-2 p-1">
+<div class="flex flex-col h-full">
+	<!-- Board toolbar -->
+	<div class="flex items-center gap-2 px-6 py-3 border-b border-light/5 shrink-0">
 		{#if isRenamingBoard && selectedBoard}
 			<input
 				type="text"
-				class="flex-1 bg-dark border border-primary rounded-lg px-3 py-1 text-white font-heading text-h1 focus:outline-none"
+				class="flex-1 bg-dark border border-primary rounded-lg px-3 py-1 text-white font-heading text-body focus:outline-none"
 				bind:value={renameBoardValue}
 				onkeydown={(e) => {
 					if (e.key === "Enter") confirmBoardRename();
@@ -509,12 +509,30 @@
 				onblur={confirmBoardRename}
 				autofocus
 			/>
-		{:else}
-			<h1 class="flex-1 font-heading text-h1 text-white">
-				{selectedBoard ? selectedBoard.name : m.kanban_title()}
-			</h1>
+		{:else if selectedBoard}
+			<h2 class="font-heading text-body text-white">{selectedBoard.name}</h2>
 		{/if}
-		<Button size="md" onclick={() => (showCreateBoardModal = true)}
+
+		{#if boards.length > 1}
+			<div class="flex gap-1 ml-2">
+				{#each boards as board}
+					<button
+						type="button"
+						class="px-3 py-1 rounded-lg text-[12px] font-body whitespace-nowrap transition-colors {selectedBoard?.id ===
+						board.id
+							? 'bg-primary text-background'
+							: 'text-light/50 hover:text-white hover:bg-dark/50'}"
+						onclick={() => loadBoard(board.id)}
+					>
+						{board.name}
+					</button>
+				{/each}
+			</div>
+		{/if}
+
+		<div class="flex-1"></div>
+
+		<Button size="sm" onclick={() => (showCreateBoardModal = true)}
 			>{m.btn_new()}</Button
 		>
 		<ContextMenu
@@ -539,28 +557,10 @@
 					: []),
 			]}
 		/>
-	</header>
-
-	<!-- Board selector (compact) -->
-	{#if boards.length > 1}
-		<div class="flex gap-2 overflow-x-auto pb-2">
-			{#each boards as board}
-				<button
-					type="button"
-					class="px-4 py-2 rounded-[32px] text-sm font-body whitespace-nowrap transition-colors {selectedBoard?.id ===
-					board.id
-						? 'bg-primary text-night'
-						: 'bg-dark text-light hover:bg-dark/80'}"
-					onclick={() => loadBoard(board.id)}
-				>
-					{board.name}
-				</button>
-			{/each}
-		</div>
-	{/if}
+	</div>
 
 	<!-- Kanban Board -->
-	<div class="flex-1 overflow-hidden">
+	<div class="flex-1 overflow-hidden p-4">
 		{#if selectedBoard}
 			<KanbanBoard
 				columns={selectedBoard.columns}
diff --git a/src/routes/[orgSlug]/settings/+layout.svelte b/src/routes/[orgSlug]/settings/+layout.svelte
new file mode 100644
index 0000000..213799c
--- /dev/null
+++ b/src/routes/[orgSlug]/settings/+layout.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname.includes("/settings") ?? false,
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader
+		title={m.settings_title()}
+		icon="settings"
+		iconColor="text-light/50"
+	/>
+
+	{#if isNavigatingHere}
+		<ContentSkeleton variant="settings" />
+	{:else}
+		<div class="flex-1 overflow-auto">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/settings/+page.svelte b/src/routes/[orgSlug]/settings/+page.svelte
index 5a83189..52158aa 100644
--- a/src/routes/[orgSlug]/settings/+page.svelte
+++ b/src/routes/[orgSlug]/settings/+page.svelte
@@ -274,33 +274,24 @@
 	<title>Settings - {data.org.name} | Root</title>
 </svelte:head>
 
-<div class="flex flex-col h-full p-4 lg:p-5 gap-4 overflow-auto">
-	<!-- Header -->
-	<div class="flex flex-col gap-4">
-		<header class="flex flex-wrap items-center gap-2 p-1 rounded-[32px]">
-			<Avatar name="Settings" size="md" />
-			<h1 class="flex-1 font-heading text-h1 text-white">
-				{m.settings_title()}
-			</h1>
-			<IconButton title="More options">
-				<Icon name="more_horiz" size={24} />
-			</IconButton>
-		</header>
-
-		<!-- Pill Tab Navigation -->
-		<div class="flex flex-wrap gap-4">
-			{#each tabs as tab}
-				<Button
-					variant={activeTab === tab.id ? "primary" : "secondary"}
-					size="md"
-					onclick={() => (activeTab = tab.id)}
-				>
-					{tab.label}
-				</Button>
-			{/each}
-		</div>
+<div class="flex flex-col h-full">
+	<!-- Tab Navigation -->
+	<div class="flex flex-wrap gap-1 px-6 py-3 border-b border-light/5 shrink-0">
+		{#each tabs as tab}
+			<button
+				type="button"
+				class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {activeTab === tab.id
+					? 'bg-primary text-background'
+					: 'text-light/50 hover:text-white hover:bg-dark/50'}"
+				onclick={() => (activeTab = tab.id)}
+			>
+				{tab.label}
+			</button>
+		{/each}
 	</div>
 
+	<div class="flex-1 overflow-auto p-6">
+
 	<!-- General Tab -->
 	{#if activeTab === "general"}
 		<SettingsGeneral
@@ -416,6 +407,7 @@
 			serviceAccountEmail={data.serviceAccountEmail ?? null}
 		/>
 	{/if}
+	</div>
 </div>
 
 <!-- Create/Edit Tag Modal -->

From 819d5b876a7ba90f142428250bf7ca666f2cbd2d Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 11:03:58 +0200
Subject: [PATCH 05/10] ui: overhaul files, kanban, calendar, settings, chat
 modules

- FileBrowser: modernize breadcrumbs, toolbar, list/grid items, empty states
- KanbanColumn: remove fixed height, border-based styling, compact header
- KanbanCard: cleaner border styling, smaller tags, compact footer
- Calendar: compact nav bar, border grid, today circle indicator, day view empty state
- DocumentViewer: remove bg-night rounded-[32px], border-b header pattern
- Settings tags: inline border/rounded-xl cards, icon action buttons
- Chat: create +layout.svelte with PageHeader, overhaul sidebar and main area
- Chat i18n: add nav_chat, chat_title, chat_subtitle keys (en + et)

svelte-check: 0 errors, vitest: 112/112 passed
---
 messages/en.json                              |   3 +
 messages/et.json                              |   3 +
 src/lib/components/calendar/Calendar.svelte   | 137 +++++-------
 .../documents/DocumentViewer.svelte           |  35 ++-
 .../components/documents/FileBrowser.svelte   | 201 +++++++++---------
 src/lib/components/kanban/KanbanCard.svelte   |  61 ++----
 src/lib/components/ui/KanbanColumn.svelte     |  31 ++-
 src/routes/[orgSlug]/chat/+layout.svelte      |  36 ++++
 src/routes/[orgSlug]/chat/+page.svelte        | 180 ++++++++--------
 src/routes/[orgSlug]/settings/+page.svelte    |  99 +++++----
 10 files changed, 376 insertions(+), 410 deletions(-)
 create mode 100644 src/routes/[orgSlug]/chat/+layout.svelte

diff --git a/messages/en.json b/messages/en.json
index 23d83fd..f620aa8 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -254,6 +254,9 @@
 	"entity_invite": "invite",
 	"entity_event": "event",
 	"nav_events": "Events",
+	"nav_chat": "Chat",
+	"chat_title": "Chat",
+	"chat_subtitle": "Team messaging and communication",
 	"events_title": "Events",
 	"events_subtitle": "Organize and manage your events",
 	"events_new": "New Event",
diff --git a/messages/et.json b/messages/et.json
index 228d7cc..f206b28 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -254,6 +254,9 @@
 	"entity_invite": "kutse",
 	"entity_event": "ürituse",
 	"nav_events": "Üritused",
+	"nav_chat": "Vestlus",
+	"chat_title": "Vestlus",
+	"chat_subtitle": "Meeskonna sõnumid ja suhtlus",
 	"events_title": "Üritused",
 	"events_subtitle": "Korralda ja halda oma üritusi",
 	"events_new": "Uus üritus",
diff --git a/src/lib/components/calendar/Calendar.svelte b/src/lib/components/calendar/Calendar.svelte
index f2bad56..20061cc 100644
--- a/src/lib/components/calendar/Calendar.svelte
+++ b/src/lib/components/calendar/Calendar.svelte
@@ -123,63 +123,63 @@
 	});
 </script>
 
-<div class="flex flex-col h-full gap-2">
+<div class="flex flex-col h-full">
 	<!-- Navigation bar -->
-	<div class="flex items-center justify-between px-2">
-		<div class="flex items-center gap-2">
+	<div class="flex items-center justify-between px-4 py-2 shrink-0">
+		<div class="flex items-center gap-1">
 			<button
-				class="p-1 text-light/60 hover:text-light hover:bg-dark rounded-full transition-colors"
+				class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 				onclick={prev}
 				aria-label="Previous"
 			>
 				<span
 					class="material-symbols-rounded"
-					style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
 					>chevron_left</span
 				>
 			</button>
 			<span
-				class="font-heading text-h4 text-white min-w-[200px] text-center"
+				class="font-heading text-body-sm text-white min-w-[180px] text-center"
 				>{headerTitle}</span
 			>
 			<button
-				class="p-1 text-light/60 hover:text-light hover:bg-dark rounded-full transition-colors"
+				class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 				onclick={next}
 				aria-label="Next"
 			>
 				<span
 					class="material-symbols-rounded"
-					style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
 					>chevron_right</span
 				>
 			</button>
 			<button
-				class="px-3 py-1 text-body-md font-body text-light/60 hover:text-white hover:bg-dark rounded-[32px] transition-colors ml-2"
+				class="px-2.5 py-1 text-body-sm font-body text-light/50 hover:text-white hover:bg-dark/50 rounded-lg transition-colors ml-1"
 				onclick={goToToday}
 			>
 				Today
 			</button>
 		</div>
-		<div class="flex bg-dark rounded-[32px] p-0.5">
+		<div class="flex gap-0.5 bg-dark/30 rounded-lg p-0.5">
 			<button
-				class="px-3 py-1 text-body-md font-body rounded-[32px] transition-colors {currentView ===
+				class="px-2.5 py-1 text-[12px] font-body rounded-md transition-colors {currentView ===
 				'day'
-					? 'bg-primary text-night'
-					: 'text-light/60 hover:text-light'}"
+					? 'bg-primary text-background'
+					: 'text-light/50 hover:text-white'}"
 				onclick={() => (currentView = "day")}>Day</button
 			>
 			<button
-				class="px-3 py-1 text-body-md font-body rounded-[32px] transition-colors {currentView ===
+				class="px-2.5 py-1 text-[12px] font-body rounded-md transition-colors {currentView ===
 				'week'
-					? 'bg-primary text-night'
-					: 'text-light/60 hover:text-light'}"
+					? 'bg-primary text-background'
+					: 'text-light/50 hover:text-white'}"
 				onclick={() => (currentView = "week")}>Week</button
 			>
 			<button
-				class="px-3 py-1 text-body-md font-body rounded-[32px] transition-colors {currentView ===
+				class="px-2.5 py-1 text-[12px] font-body rounded-md transition-colors {currentView ===
 				'month'
-					? 'bg-primary text-night'
-					: 'text-light/60 hover:text-light'}"
+					? 'bg-primary text-background'
+					: 'text-light/50 hover:text-white'}"
 				onclick={() => (currentView = "month")}>Month</button
 			>
 		</div>
@@ -187,48 +187,40 @@
 
 	<!-- Month View -->
 	{#if currentView === "month"}
-		<div
-			class="flex flex-col flex-1 gap-2 min-h-0 bg-background rounded-xl p-2"
-		>
+		<div class="flex flex-col flex-1 min-h-0">
 			<!-- Day Headers -->
-			<div class="grid grid-cols-7 gap-2">
+			<div class="grid grid-cols-7 border-b border-light/5">
 				{#each weekDayHeaders as day}
-					<div class="flex items-center justify-center py-2 px-2">
-						<span
-							class="font-heading text-h4 text-white text-center"
-							>{day}</span
-						>
+					<div class="flex items-center justify-center py-2">
+						<span class="font-body text-[11px] text-light/40 uppercase tracking-wider">{day}</span>
 					</div>
 				{/each}
 			</div>
 
 			<!-- Calendar Grid -->
-			<div
-				class="flex-1 flex flex-col gap-2 min-h-0 rounded-lg overflow-hidden"
-			>
+			<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
 				{#each weeks as week}
-					<div class="grid grid-cols-7 gap-2 flex-1">
+					<div class="grid grid-cols-7 flex-1 border-b border-light/5 last:border-b-0">
 						{#each week as day}
 							{@const dayEvents = getEventsForDay(day)}
 							{@const isToday = isSameDay(day, today)}
 							{@const inMonth = isCurrentMonth(day)}
-							<div
-								class="bg-night rounded-none flex flex-col items-start px-2 py-2.5 overflow-hidden transition-colors hover:bg-dark/50 min-h-0 cursor-pointer
-									{!inMonth ? 'opacity-50' : ''}"
+							<button
+								type="button"
+								class="flex flex-col items-start px-1.5 py-1 overflow-hidden transition-colors hover:bg-dark/30 min-h-0 cursor-pointer border-r border-light/5 last:border-r-0
+									{!inMonth ? 'opacity-40' : ''}"
 								onclick={() => onDateClick?.(day)}
 							>
 								<span
-									class="font-body text-body text-white {isToday
-										? 'text-primary font-bold'
-										: ''}"
+									class="text-[12px] font-body w-6 h-6 flex items-center justify-center rounded-full shrink-0
+									{isToday ? 'bg-primary text-background font-bold' : 'text-light/60'}"
 								>
 									{day.getDate()}
 								</span>
 								{#each dayEvents.slice(0, 2) as event}
 									<button
-										class="w-full mt-1 px-2 py-0.5 rounded-[4px] text-body-sm font-bold font-body text-night truncate text-left"
-										style="background-color: {event.color ??
-											'#00A3E0'}"
+										class="w-full mt-0.5 px-1.5 py-0.5 rounded text-[11px] font-body text-night truncate text-left font-medium"
+										style="background-color: {event.color ?? '#00A3E0'}"
 										onclick={(e) => {
 											e.stopPropagation();
 											onEventClick?.(event);
@@ -238,12 +230,9 @@
 									</button>
 								{/each}
 								{#if dayEvents.length > 2}
-									<span
-										class="text-body-sm text-light/40 mt-0.5"
-										>+{dayEvents.length - 2} more</span
-									>
+									<span class="text-[10px] text-light/30 mt-0.5 px-1">+{dayEvents.length - 2}</span>
 								{/if}
-							</div>
+							</button>
 						{/each}
 					</div>
 				{/each}
@@ -253,40 +242,25 @@
 
 	<!-- Week View -->
 	{#if currentView === "week"}
-		<div
-			class="flex flex-col flex-1 gap-2 min-h-0 bg-background rounded-xl p-2"
-		>
-			<div
-				class="grid grid-cols-7 gap-2 flex-1 rounded-lg overflow-hidden"
-			>
+		<div class="flex flex-col flex-1 min-h-0">
+			<div class="grid grid-cols-7 flex-1 overflow-hidden">
 				{#each weekDates as day}
 					{@const dayEvents = getEventsForDay(day)}
 					{@const isToday = isSameDay(day, today)}
-					<div class="flex flex-col overflow-hidden">
-						<div class="px-2 py-2 text-center">
-							<div
-								class="font-heading text-h4 {isToday
-									? 'text-primary'
-									: 'text-white'}"
-							>
+					<div class="flex flex-col overflow-hidden border-r border-light/5 last:border-r-0">
+						<div class="px-2 py-2 text-center border-b border-light/5">
+							<div class="text-[11px] font-body uppercase tracking-wider {isToday ? 'text-primary' : 'text-light/40'}">
 								{weekDayHeaders[(day.getDay() + 6) % 7]}
 							</div>
-							<div
-								class="font-body text-body-md {isToday
-									? 'text-primary'
-									: 'text-light/60'}"
-							>
+							<div class="text-body-sm font-heading mt-0.5 {isToday ? 'text-primary' : 'text-white'}">
 								{day.getDate()}
 							</div>
 						</div>
-						<div
-							class="bg-night flex-1 px-2 pb-2 space-y-1 overflow-y-auto"
-						>
+						<div class="flex-1 px-1.5 py-1.5 space-y-1 overflow-y-auto">
 							{#each dayEvents as event}
 								<button
-									class="w-full px-2 py-1.5 rounded-[4px] text-body-sm font-bold font-body text-night truncate text-left"
-									style="background-color: {event.color ??
-										'#00A3E0'}"
+									class="w-full px-2 py-1.5 rounded text-[11px] font-body text-night truncate text-left font-medium"
+									style="background-color: {event.color ?? '#00A3E0'}"
 									onclick={() => onEventClick?.(event)}
 								>
 									{event.title}
@@ -302,27 +276,24 @@
 	<!-- Day View -->
 	{#if currentView === "day"}
 		{@const dayEvents = getEventsForDay(currentDate)}
-		<div class="flex-1 bg-night px-4 py-5 min-h-0 overflow-auto">
+		<div class="flex-1 px-4 py-4 min-h-0 overflow-auto">
 			{#if dayEvents.length === 0}
-				<div class="text-center text-light/40 py-12">
-					<p class="font-body text-body">No events for this day</p>
+				<div class="flex flex-col items-center justify-center h-full text-light/40">
+					<span class="material-symbols-rounded mb-3" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">event_busy</span>
+					<p class="text-body-sm">No events for this day</p>
 				</div>
 			{:else}
 				<div class="space-y-2">
 					{#each dayEvents as event}
 						<button
-							class="w-full text-left p-3 rounded-[8px] transition-colors hover:opacity-80"
-							style="background-color: {event.color ??
-								'#00A3E0'}20; border-left: 3px solid {event.color ??
-								'#00A3E0'}"
+							class="w-full text-left p-3 rounded-xl border border-light/5 hover:border-light/10 transition-all"
+							style="border-left: 3px solid {event.color ?? '#00A3E0'}"
 							onclick={() => onEventClick?.(event)}
 						>
-							<div class="font-heading text-h5 text-white">
+							<div class="font-heading text-body-sm text-white">
 								{event.title}
 							</div>
-							<div
-								class="font-body text-body-md text-light/60 mt-1"
-							>
+							<div class="text-[12px] text-light/40 mt-1">
 								{new Date(event.start_time).toLocaleTimeString(
 									"en-US",
 									{ hour: "numeric", minute: "2-digit" },
@@ -333,9 +304,7 @@
 								)}
 							</div>
 							{#if event.description}
-								<div
-									class="font-body text-body-md text-light/50 mt-2"
-								>
+								<div class="text-[12px] text-light/30 mt-1.5 line-clamp-2">
 									{event.description}
 								</div>
 							{/if}
diff --git a/src/lib/components/documents/DocumentViewer.svelte b/src/lib/components/documents/DocumentViewer.svelte
index ab98a67..8c3dc7d 100644
--- a/src/lib/components/documents/DocumentViewer.svelte
+++ b/src/lib/components/documents/DocumentViewer.svelte
@@ -42,17 +42,15 @@
 	}
 </script>
 
-<div
-	class="bg-night rounded-[32px] overflow-hidden flex flex-col min-w-0 h-full"
->
+<div class="flex flex-col min-w-0 h-full overflow-hidden">
 	<!-- Lock Banner -->
 	{#if locked}
 		<div
-			class="flex items-center gap-2 px-4 py-2.5 bg-warning/10 border-b border-warning/20"
+			class="flex items-center gap-2 px-4 py-2 bg-warning/10 border-b border-warning/20 shrink-0"
 		>
 			<span
 				class="material-symbols-rounded text-warning"
-				style="font-size: 20px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+				style="font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
 			>
 				lock
 			</span>
@@ -64,42 +62,35 @@
 	{/if}
 
 	<!-- Header -->
-	<header class="flex items-center gap-2 px-4 py-5">
-		<h2 class="flex-1 font-heading text-h1 text-white truncate">
+	<div class="flex items-center gap-2 px-5 py-3 border-b border-light/5 shrink-0">
+		<h2 class="flex-1 font-heading text-body-sm text-white truncate">
 			{document.name}
 		</h2>
 		{#if locked}
-			<Button size="md" disabled>
-				<span
-					class="material-symbols-rounded mr-1"
-					style="font-size: 16px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
-					>lock</span
-				>
-				Locked
-			</Button>
+			<Button size="sm" disabled>Locked</Button>
 		{:else if mode === "edit"}
-			<Button size="md" onclick={handleEditClick}>
+			<Button size="sm" onclick={handleEditClick}>
 				{isEditing ? "Preview" : "Edit"}
 			</Button>
 		{:else}
-			<Button size="md" onclick={handleEditClick}>Edit</Button>
+			<Button size="sm" onclick={handleEditClick}>Edit</Button>
 		{/if}
 		<button
 			type="button"
-			class="p-1 hover:bg-dark rounded-full transition-colors"
+			class="p-1 hover:bg-dark/50 rounded-lg transition-colors"
 			aria-label="More options"
 		>
 			<span
-				class="material-symbols-rounded text-light"
-				style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+				class="material-symbols-rounded text-light/40 hover:text-white"
+				style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
 			>
 				more_horiz
 			</span>
 		</button>
-	</header>
+	</div>
 
 	<!-- Editor Area -->
-	<div class="flex-1 bg-background rounded-[32px] mx-4 mb-4 overflow-auto">
+	<div class="flex-1 overflow-auto">
 		<Editor {document} {onSave} editable={isEditing} />
 	</div>
 </div>
diff --git a/src/lib/components/documents/FileBrowser.svelte b/src/lib/components/documents/FileBrowser.svelte
index 8e44fee..fae3729 100644
--- a/src/lib/components/documents/FileBrowser.svelte
+++ b/src/lib/components/documents/FileBrowser.svelte
@@ -5,9 +5,6 @@
 		Button,
 		Modal,
 		Input,
-		Avatar,
-		IconButton,
-		Icon,
 	} from "$lib/components/ui";
 	import { DocumentViewer } from "$lib/components/documents";
 	import { createLogger } from "$lib/utils/logger";
@@ -490,97 +487,101 @@
 	}
 </script>
 
-<div class="flex h-full gap-4">
+<div class="flex h-full gap-0">
 	<!-- Files Panel -->
-	<div
-		class="bg-night rounded-[32px] flex flex-col gap-4 px-4 py-5 overflow-hidden flex-1 min-w-0 h-full"
-	>
-		<!-- Header -->
-		<header class="flex items-center gap-2 p-1">
-			<Avatar name={title} size="md" />
-			<h1 class="flex-1 font-heading text-h1 text-white">{title}</h1>
-			<Button size="md" onclick={handleAdd}>{m.btn_new()}</Button>
-			<IconButton title={m.files_toggle_view()} onclick={toggleViewMode}>
-				<Icon
-					name={viewMode === "list" ? "grid_view" : "view_list"}
-					size={24}
-				/>
-			</IconButton>
-		</header>
-
-		<!-- Breadcrumb Path -->
-		<nav class="flex items-center gap-2 text-h3 font-heading">
-			{#each breadcrumbPath as crumb, i}
-				{#if i > 0}
-					<span
-						class="material-symbols-rounded text-light/30"
-						style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-					>
-						chevron_right
-					</span>
-				{/if}
-				<a
-					href={getFolderUrl(crumb.id)}
-					class="px-3 py-1 rounded-xl transition-colors
-					{crumb.id === currentFolderId
-						? 'text-white'
-						: 'text-light/60 hover:text-primary'}
-					{dragOverBreadcrumb === (crumb.id ?? '__root__')
-						? 'ring-2 ring-primary bg-primary/10'
-						: ''}"
-					ondragover={(e) => {
-						e.preventDefault();
-						e.stopPropagation();
-						if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-						dragOverBreadcrumb = crumb.id ?? "__root__";
-					}}
-					ondragleave={() => {
-						dragOverBreadcrumb = undefined;
-					}}
-					ondrop={async (e) => {
-						e.preventDefault();
-						e.stopPropagation();
-						dragOverBreadcrumb = undefined;
-						if (!draggedItem) return;
-						if (draggedItem.parent_id === crumb.id) {
+	<div class="flex flex-col flex-1 min-w-0 h-full overflow-hidden">
+		<!-- Toolbar: Breadcrumbs + Actions -->
+		<div class="flex items-center gap-2 px-6 py-3 border-b border-light/5 shrink-0">
+			<!-- Breadcrumb Path -->
+			<nav class="flex items-center gap-1 flex-1 min-w-0 overflow-x-auto">
+				{#each breadcrumbPath as crumb, i}
+					{#if i > 0}
+						<span
+							class="material-symbols-rounded text-light/20 shrink-0"
+							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+						>
+							chevron_right
+						</span>
+					{/if}
+					<a
+						href={getFolderUrl(crumb.id)}
+						class="px-2 py-1 rounded-lg text-body-sm font-body whitespace-nowrap transition-colors
+						{crumb.id === currentFolderId
+							? 'text-white bg-dark/30'
+							: 'text-light/50 hover:text-white hover:bg-dark/30'}
+						{dragOverBreadcrumb === (crumb.id ?? '__root__')
+							? 'ring-2 ring-primary bg-primary/10'
+							: ''}"
+						ondragover={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+							dragOverBreadcrumb = crumb.id ?? "__root__";
+						}}
+						ondragleave={() => {
+							dragOverBreadcrumb = undefined;
+						}}
+						ondrop={async (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							dragOverBreadcrumb = undefined;
+							if (!draggedItem) return;
+							if (draggedItem.parent_id === crumb.id) {
+								resetDragState();
+								return;
+							}
+							const draggedName = draggedItem.name;
+							await handleMove(draggedItem.id, crumb.id);
+							toasts.success(
+								`Moved "${draggedName}" to "${crumb.name}"`,
+							);
 							resetDragState();
-							return;
-						}
-						const draggedName = draggedItem.name;
-						await handleMove(draggedItem.id, crumb.id);
-						toasts.success(
-							`Moved "${draggedName}" to "${crumb.name}"`,
-						);
-						resetDragState();
-					}}
+						}}
+					>
+						{#if i === 0}
+							<span class="material-symbols-rounded" style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;">home</span>
+						{:else}
+							{crumb.name}
+						{/if}
+					</a>
+				{/each}
+			</nav>
+
+			<Button size="sm" icon="add" onclick={handleAdd}>{m.btn_new()}</Button>
+			<button
+				type="button"
+				class="p-1.5 rounded-lg text-light/40 hover:text-white hover:bg-dark/50 transition-colors"
+				title={m.files_toggle_view()}
+				onclick={toggleViewMode}
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+					>{viewMode === "list" ? "grid_view" : "view_list"}</span
 				>
-					{crumb.name}
-				</a>
-			{/each}
-		</nav>
+			</button>
+		</div>
 
 		<!-- File List/Grid -->
-		<div class="flex-1 overflow-auto min-h-0">
+		<div class="flex-1 overflow-auto min-h-0 p-4">
 			{#if viewMode === "list"}
 				<div
-					class="flex flex-col gap-1"
+					class="flex flex-col gap-0.5"
 					ondragover={handleContainerDragOver}
 					ondrop={handleDropOnEmpty}
 					role="list"
 				>
 					{#if currentFolderItems.length === 0}
-						<div class="text-center text-light/40 py-8 text-sm">
-							<p>
-								No files yet. Drag files here or create a new
-								one.
-							</p>
+						<div class="flex flex-col items-center justify-center text-light/40 py-16">
+							<span class="material-symbols-rounded mb-3" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">folder_open</span>
+							<p class="text-body-sm">{m.files_empty()}</p>
 						</div>
 					{:else}
 						{#each currentFolderItems as item}
 							<button
 								type="button"
-								class="flex items-center gap-2 h-10 pl-1 pr-2 py-1 rounded-[32px] w-full text-left transition-colors hover:bg-dark
-								{selectedDoc?.id === item.id ? 'bg-dark' : ''}
+								class="flex items-center gap-3 px-3 py-2 rounded-xl w-full text-left transition-colors hover:bg-dark/50
+								{selectedDoc?.id === item.id ? 'bg-dark/50 ring-1 ring-primary/20' : ''}
 								{draggedItem?.id === item.id ? 'opacity-50' : ''}
 								{dragOverFolder === item.id ? 'ring-2 ring-primary bg-primary/10' : ''}"
 								draggable="true"
@@ -595,24 +596,20 @@
 								oncontextmenu={(e) =>
 									handleContextMenu(e, item)}
 							>
-								<div
-									class="w-8 h-8 flex items-center justify-center p-1"
-								>
-									<span
-										class="material-symbols-rounded text-light"
-										style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-									>
-										{getDocIcon(item)}
-									</span>
-								</div>
 								<span
-									class="font-body text-body text-white truncate flex-1"
+									class="material-symbols-rounded shrink-0 {item.type === 'folder' ? 'text-amber-400' : item.type === 'kanban' ? 'text-purple-400' : 'text-light/50'}"
+									style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								>
+									{getDocIcon(item)}
+								</span>
+								<span
+									class="font-body text-body-sm text-white truncate flex-1"
 									>{item.name}</span
 								>
 								{#if item.type === "folder"}
 									<span
-										class="material-symbols-rounded text-light/50"
-										style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+										class="material-symbols-rounded text-light/20"
+										style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
 									>
 										chevron_right
 									</span>
@@ -624,26 +621,22 @@
 			{:else}
 				<!-- Grid View -->
 				<div
-					class="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
+					class="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
 					ondragover={handleContainerDragOver}
 					ondrop={handleDropOnEmpty}
 					role="list"
 				>
 					{#if currentFolderItems.length === 0}
-						<div
-							class="col-span-full text-center text-light/40 py-8 text-sm"
-						>
-							<p>
-								No files yet. Drag files here or create a new
-								one.
-							</p>
+						<div class="col-span-full flex flex-col items-center justify-center text-light/40 py-16">
+							<span class="material-symbols-rounded mb-3" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">folder_open</span>
+							<p class="text-body-sm">{m.files_empty()}</p>
 						</div>
 					{:else}
 						{#each currentFolderItems as item}
 							<button
 								type="button"
-								class="flex flex-col items-center gap-2 p-4 rounded-xl transition-colors hover:bg-dark
-								{selectedDoc?.id === item.id ? 'bg-dark' : ''}
+								class="flex flex-col items-center gap-2 p-3 rounded-xl border border-transparent transition-all hover:bg-dark/50 hover:border-light/5
+								{selectedDoc?.id === item.id ? 'bg-dark/50 border-primary/20' : ''}
 								{draggedItem?.id === item.id ? 'opacity-50' : ''}
 								{dragOverFolder === item.id ? 'ring-2 ring-primary bg-primary/10' : ''}"
 								draggable="true"
@@ -659,13 +652,13 @@
 									handleContextMenu(e, item)}
 							>
 								<span
-									class="material-symbols-rounded text-light"
-									style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;"
+									class="material-symbols-rounded {item.type === 'folder' ? 'text-amber-400' : item.type === 'kanban' ? 'text-purple-400' : 'text-light/40'}"
+									style="font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;"
 								>
 									{getDocIcon(item)}
 								</span>
 								<span
-									class="font-body text-body-md text-white text-center truncate w-full"
+									class="font-body text-[12px] text-white text-center truncate w-full"
 									>{item.name}</span
 								>
 							</button>
@@ -678,7 +671,7 @@
 
 	<!-- Compact Editor Panel (shown when a doc is selected) -->
 	{#if selectedDoc}
-		<div class="flex-1 min-w-0 h-full">
+		<div class="flex-1 min-w-0 h-full border-l border-light/5">
 			<DocumentViewer
 				document={selectedDoc}
 				onSave={handleSave}
diff --git a/src/lib/components/kanban/KanbanCard.svelte b/src/lib/components/kanban/KanbanCard.svelte
index 37a6e7a..b73c17e 100644
--- a/src/lib/components/kanban/KanbanCard.svelte
+++ b/src/lib/components/kanban/KanbanCard.svelte
@@ -57,7 +57,7 @@
 
 <button
 	type="button"
-	class="bg-night rounded-[16px] p-2 cursor-pointer hover:ring-1 hover:ring-primary/30 transition-all group w-full text-left overflow-clip flex flex-col gap-2 relative"
+	class="bg-night/80 border border-light/5 hover:border-light/10 rounded-xl px-3 py-2.5 cursor-pointer transition-all group w-full text-left flex flex-col gap-1.5 relative"
 	class:opacity-50={isDragging}
 	{draggable}
 	{ondragstart}
@@ -67,25 +67,25 @@
 	{#if ondelete}
 		<button
 			type="button"
-			class="absolute top-1 right-1 p-1 rounded-full opacity-0 group-hover:opacity-100 hover:bg-error/20 transition-all z-10"
+			class="absolute top-1.5 right-1.5 p-0.5 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-error/10 transition-all z-10"
 			onclick={handleDelete}
 			aria-label="Delete card"
 		>
 			<span
-				class="material-symbols-rounded text-light/40 hover:text-error"
-				style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+				class="material-symbols-rounded text-light/30 hover:text-error"
+				style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
 			>
-				delete
+				close
 			</span>
 		</button>
 	{/if}
 
 	<!-- Tags / Chips -->
 	{#if card.tags && card.tags.length > 0}
-		<div class="flex gap-[10px] items-start flex-wrap">
+		<div class="flex gap-1 items-start flex-wrap">
 			{#each card.tags as tag}
 				<span
-					class="rounded-[4px] px-1 py-[4px] font-body font-bold text-[14px] text-night leading-none overflow-clip"
+					class="rounded-[4px] px-1.5 py-0.5 font-body font-bold text-[11px] text-night leading-none"
 					style="background-color: {tag.color || '#00A3E0'}"
 				>
 					{tag.name}
@@ -95,55 +95,40 @@
 	{/if}
 
 	<!-- Title -->
-	<p class="font-body text-body text-white w-full leading-none p-1">
+	<p class="font-body text-body-sm text-white w-full leading-snug">
 		{card.title}
 	</p>
 
 	<!-- Bottom row: details + avatar -->
 	{#if hasFooter}
-		<div class="flex items-center justify-between w-full">
-			<div class="flex gap-1 items-center">
-				<!-- Due date -->
+		<div class="flex items-center justify-between w-full mt-0.5">
+			<div class="flex gap-2 items-center text-[11px] text-light/40">
 				{#if card.due_date}
-					<div class="flex items-center">
+					<span class="flex items-center gap-0.5">
 						<span
-							class="material-symbols-rounded text-light p-1"
-							style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-						>
-							calendar_today
-						</span>
-						<span
-							class="font-body text-[12px] text-light leading-none"
-						>
-							{formatDueDate(card.due_date)}
-						</span>
-					</div>
+							class="material-symbols-rounded"
+							style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+						>calendar_today</span>
+						{formatDueDate(card.due_date)}
+					</span>
 				{/if}
 
-				<!-- Checklist -->
 				{#if (card.checklist_total ?? 0) > 0}
-					<div class="flex items-center">
+					<span class="flex items-center gap-0.5">
 						<span
-							class="material-symbols-rounded text-light p-1"
-							style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
-						>
-							check_box
-						</span>
-						<span
-							class="font-body text-[12px] text-light leading-none"
-						>
-							{card.checklist_done ?? 0}/{card.checklist_total}
-						</span>
-					</div>
+							class="material-symbols-rounded"
+							style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+						>check_box</span>
+						{card.checklist_done ?? 0}/{card.checklist_total}
+					</span>
 				{/if}
 			</div>
 
-			<!-- Assignee avatar -->
 			{#if card.assignee_id}
 				<Avatar
 					name={card.assignee_name || "?"}
 					src={card.assignee_avatar}
-					size="sm"
+					size="xs"
 				/>
 			{/if}
 		</div>
diff --git a/src/lib/components/ui/KanbanColumn.svelte b/src/lib/components/ui/KanbanColumn.svelte
index f604b1b..990988e 100644
--- a/src/lib/components/ui/KanbanColumn.svelte
+++ b/src/lib/components/ui/KanbanColumn.svelte
@@ -14,28 +14,25 @@
 </script>
 
 <div
-	class="bg-background flex flex-col gap-4 items-start overflow-hidden px-4 py-5 rounded-[32px] w-64 h-[512px]"
+	class="bg-dark/20 border border-light/5 flex flex-col overflow-hidden rounded-xl w-[272px] shrink-0 h-full"
 >
 	<!-- Header -->
-	<div class="flex items-center gap-2 p-1 rounded-[32px] w-full">
+	<div class="flex items-center gap-2 px-3 py-2.5 border-b border-light/5">
 		<div class="flex-1 flex items-center gap-2 min-w-0">
-			<span class="font-heading text-h4 text-white truncate">{title}</span
-			>
-			<div
-				class="bg-dark flex items-center justify-center p-1 rounded-lg shrink-0"
-			>
-				<span class="font-heading text-h6 text-white">{count}</span>
-			</div>
+			<span class="font-heading text-body-sm text-white truncate">{title}</span>
+			<span
+				class="text-[11px] text-light/40 bg-light/5 px-1.5 py-0.5 rounded-md shrink-0"
+			>{count}</span>
 		</div>
 		{#if onMore}
 			<button
 				type="button"
-				class="p-1 flex items-center justify-center hover:bg-dark/50 rounded-full transition-colors"
+				class="p-0.5 flex items-center justify-center hover:bg-dark/50 rounded-lg transition-colors"
 				onclick={onMore}
 			>
 				<span
-					class="material-symbols-rounded text-light"
-					style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+					class="material-symbols-rounded text-light/40 hover:text-white"
+					style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
 				>
 					more_horiz
 				</span>
@@ -45,7 +42,7 @@
 
 	<!-- Cards container -->
 	<div
-		class="flex-1 flex flex-col gap-2 items-start overflow-y-auto w-full min-h-0"
+		class="flex-1 flex flex-col gap-1.5 p-2 overflow-y-auto min-h-0"
 	>
 		{#if children}
 			{@render children()}
@@ -54,8 +51,10 @@
 
 	<!-- Add button -->
 	{#if onAddCard}
-		<Button variant="secondary" fullWidth icon="add" onclick={onAddCard}>
-			Add card
-		</Button>
+		<div class="px-2 pb-2">
+			<Button variant="tertiary" fullWidth size="sm" icon="add" onclick={onAddCard}>
+				Add card
+			</Button>
+		</div>
 	{/if}
 </div>
diff --git a/src/routes/[orgSlug]/chat/+layout.svelte b/src/routes/[orgSlug]/chat/+layout.svelte
new file mode 100644
index 0000000..0022c62
--- /dev/null
+++ b/src/routes/[orgSlug]/chat/+layout.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { navigating } from "$app/stores";
+	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const isNavigatingHere = $derived(
+		$navigating?.to?.url.pathname?.includes(`/${data.org.slug}/chat`),
+	);
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+	<PageHeader
+		title={m.chat_title()}
+		subtitle={m.chat_subtitle()}
+		icon="chat"
+		iconColor="text-primary"
+	/>
+
+	{#if isNavigatingHere && !$navigating?.from?.url.pathname?.includes(`/${data.org.slug}/chat`)}
+		<ContentSkeleton variant="default" />
+	{:else}
+		<div class="flex-1 overflow-hidden">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/[orgSlug]/chat/+page.svelte b/src/routes/[orgSlug]/chat/+page.svelte
index 41e1da2..56638e3 100644
--- a/src/routes/[orgSlug]/chat/+page.svelte
+++ b/src/routes/[orgSlug]/chat/+page.svelte
@@ -392,9 +392,9 @@
 <!-- Matrix Login Modal -->
 {#if showMatrixLogin}
 	<div class="h-full flex items-center justify-center">
-		<div class="bg-night rounded-[32px] p-8 w-full max-w-md">
-			<h2 class="font-heading text-h3 text-white mb-2">Connect to Chat</h2>
-			<p class="text-light/50 text-body mb-6">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-8 w-full max-w-md">
+			<h2 class="font-heading text-body text-white mb-1">Connect to Chat</h2>
+			<p class="text-body-sm text-light/50 mb-6">
 				Enter your Matrix credentials to enable messaging.
 			</p>
 
@@ -410,12 +410,12 @@
 					placeholder="@user:matrix.org"
 				/>
 				<div>
-					<label class="block text-body-sm font-body text-light mb-1">Password</label>
+					<label class="block text-body-sm font-body text-light/60 mb-1">Password</label>
 					<input
 						type="password"
 						bind:value={matrixPassword}
 						placeholder="Password"
-						class="w-full bg-dark border border-light/10 rounded-2xl px-4 py-3 text-white font-body text-body placeholder:text-light/30 focus:outline-none focus:border-primary"
+						class="w-full bg-dark border border-light/10 rounded-xl px-3 py-2 text-white font-body text-body-sm placeholder:text-light/30 focus:outline-none focus:border-primary"
 						onkeydown={(e) => {
 							if (e.key === "Enter") handleMatrixLogin();
 						}}
@@ -438,9 +438,9 @@
 	<div class="h-full flex items-center justify-center">
 		<div class="text-center">
 			<div
-				class="animate-spin w-12 h-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"
+				class="animate-spin w-10 h-10 border-3 border-primary border-t-transparent rounded-full mx-auto mb-4"
 			></div>
-			<p class="text-light/50">
+			<p class="text-body-sm text-light/40">
 				{#if isInitializing}
 					Connecting to Matrix...
 				{:else if $syncState === "CATCHUP"}
@@ -460,56 +460,50 @@
 {:else if matrixClient}
 	<MatrixProvider client={matrixClient}>
 		{#snippet children()}
-			<div class="h-full flex gap-2 min-h-0">
+			<div class="h-full flex min-h-0">
 				<!-- Chat Sidebar -->
-				<aside class="w-56 bg-night rounded-[32px] flex flex-col overflow-hidden shrink-0">
-					<header class="px-3 py-5">
-						<div class="flex items-center gap-2">
-							<span class="material-symbols-rounded text-light" style="font-size: 20px;">chat</span>
-							<span class="flex-1 font-heading text-light text-base">Messages</span>
-							<button
-								class="text-light hover:text-primary transition-colors"
-								onclick={() => (showStartDMModal = true)}
-								title="New message"
-							>
-								<span class="material-symbols-rounded" style="font-size: 20px;">add</span>
-							</button>
-						</div>
-					</header>
+				<aside class="w-56 border-r border-light/5 flex flex-col overflow-hidden shrink-0">
+					<div class="flex items-center gap-2 px-3 py-2.5 border-b border-light/5">
+						<span class="flex-1 font-heading text-body-sm text-white">Messages</span>
+						<button
+							class="p-1 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+							onclick={() => (showStartDMModal = true)}
+							title="New message"
+						>
+							<span class="material-symbols-rounded" style="font-size: 18px;">add</span>
+						</button>
+					</div>
 
 					<!-- Room search -->
-					<div class="px-3 pb-2">
+					<div class="px-2 py-2">
 						<div class="relative">
 							<span
-								class="material-symbols-rounded absolute left-3 top-1/2 -translate-y-1/2 text-light/40"
+								class="material-symbols-rounded absolute left-2.5 top-1/2 -translate-y-1/2 text-light/30"
 								style="font-size: 16px;"
 							>search</span>
 							<input
 								type="text"
 								bind:value={roomSearchQuery}
-								placeholder="Search rooms..."
-								class="w-full pl-9 pr-3 py-2 bg-dark text-light text-sm rounded-lg border border-light/10 placeholder:text-light/30 focus:outline-none focus:border-primary"
+								placeholder="Search..."
+								class="w-full pl-8 pr-3 py-1.5 bg-dark/50 text-white text-[12px] rounded-lg border border-light/5 placeholder:text-light/30 focus:outline-none focus:border-primary"
 							/>
 						</div>
 					</div>
 
 					<!-- Room list (sectioned) -->
-					<nav class="flex-1 overflow-y-auto px-2 pb-2">
+					<nav class="flex-1 overflow-y-auto px-1.5 pb-2">
 						{#if allRooms.length === 0}
-							<p class="text-light/40 text-sm text-center py-8">
+							<p class="text-light/30 text-[12px] text-center py-8">
 								{roomSearchQuery ? "No matching rooms" : "No rooms yet"}
 							</p>
 						{:else}
 							<!-- Org / Space Rooms -->
 							{#if filteredOrgRooms.length > 0}
-								<div class="mb-2">
+								<div class="mb-1.5">
 									<div class="flex items-center justify-between px-2 py-1">
-										<span class="text-xs font-semibold text-light/40 uppercase tracking-wider">
-											<span class="material-symbols-rounded align-middle" style="font-size: 14px;">workspaces</span>
-											Organization
-										</span>
+										<span class="text-[10px] font-body text-light/30 uppercase tracking-wider">Organization</span>
 										<button
-											class="w-5 h-5 flex items-center justify-center text-light/40 hover:text-light hover:bg-light/10 rounded transition-colors"
+											class="p-0.5 text-light/30 hover:text-white hover:bg-dark/50 rounded transition-colors"
 											onclick={() => (showCreateRoomModal = true)}
 											title="Create room"
 										>
@@ -520,16 +514,16 @@
 										{#each filteredOrgRooms as room (room.roomId)}
 											<li>
 												<button
-													class="w-full flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] transition-colors text-left
-														{$selectedRoomId === room.roomId ? 'bg-primary/20' : 'hover:bg-light/5'}"
+													class="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors text-left
+														{$selectedRoomId === room.roomId ? 'bg-primary/10 text-white' : 'text-light/60 hover:bg-dark/50 hover:text-white'}"
 													onclick={() => handleRoomSelect(room.roomId)}
 												>
 													<Avatar src={room.avatarUrl} name={room.name} size="xs" />
 													<div class="flex-1 min-w-0">
-														<span class="font-bold text-sm text-light truncate block">{room.name}</span>
+														<span class="text-[12px] font-body truncate block">{room.name}</span>
 													</div>
 													{#if room.unreadCount > 0}
-														<span class="bg-primary text-white text-xs px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
+														<span class="bg-primary text-background text-[10px] px-1.5 py-0.5 rounded-full min-w-[16px] text-center font-bold">
 															{room.unreadCount > 99 ? "99+" : room.unreadCount}
 														</span>
 													{/if}
@@ -542,14 +536,11 @@
 
 							<!-- Direct Messages -->
 							{#if filteredDmRooms.length > 0}
-								<div class="mb-2">
+								<div class="mb-1.5">
 									<div class="flex items-center justify-between px-2 py-1">
-										<span class="text-xs font-semibold text-light/40 uppercase tracking-wider">
-											<span class="material-symbols-rounded align-middle" style="font-size: 14px;">chat_bubble</span>
-											Direct Messages
-										</span>
+										<span class="text-[10px] font-body text-light/30 uppercase tracking-wider">Direct Messages</span>
 										<button
-											class="w-5 h-5 flex items-center justify-center text-light/40 hover:text-light hover:bg-light/10 rounded transition-colors"
+											class="p-0.5 text-light/30 hover:text-white hover:bg-dark/50 rounded transition-colors"
 											onclick={() => (showStartDMModal = true)}
 											title="New DM"
 										>
@@ -560,16 +551,16 @@
 										{#each filteredDmRooms as room (room.roomId)}
 											<li>
 												<button
-													class="w-full flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] transition-colors text-left
-														{$selectedRoomId === room.roomId ? 'bg-primary/20' : 'hover:bg-light/5'}"
+													class="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors text-left
+														{$selectedRoomId === room.roomId ? 'bg-primary/10 text-white' : 'text-light/60 hover:bg-dark/50 hover:text-white'}"
 													onclick={() => handleRoomSelect(room.roomId)}
 												>
 													<Avatar src={room.avatarUrl} name={room.name} size="xs" />
 													<div class="flex-1 min-w-0">
-														<span class="font-bold text-sm text-light truncate block">{room.name}</span>
+														<span class="text-[12px] font-body truncate block">{room.name}</span>
 													</div>
 													{#if room.unreadCount > 0}
-														<span class="bg-primary text-white text-xs px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
+														<span class="bg-primary text-background text-[10px] px-1.5 py-0.5 rounded-full min-w-[16px] text-center font-bold">
 															{room.unreadCount > 99 ? "99+" : room.unreadCount}
 														</span>
 													{/if}
@@ -582,14 +573,11 @@
 
 							<!-- Other Rooms (not in a space, not DMs) -->
 							{#if filteredOtherRooms.length > 0}
-								<div class="mb-2">
+								<div class="mb-1.5">
 									<div class="flex items-center justify-between px-2 py-1">
-										<span class="text-xs font-semibold text-light/40 uppercase tracking-wider">
-											<span class="material-symbols-rounded align-middle" style="font-size: 14px;">tag</span>
-											Rooms
-										</span>
+										<span class="text-[10px] font-body text-light/30 uppercase tracking-wider">Rooms</span>
 										<button
-											class="w-5 h-5 flex items-center justify-center text-light/40 hover:text-light hover:bg-light/10 rounded transition-colors"
+											class="p-0.5 text-light/30 hover:text-white hover:bg-dark/50 rounded transition-colors"
 											onclick={() => (showCreateRoomModal = true)}
 											title="Create room"
 										>
@@ -600,16 +588,16 @@
 										{#each filteredOtherRooms as room (room.roomId)}
 											<li>
 												<button
-													class="w-full flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] transition-colors text-left
-														{$selectedRoomId === room.roomId ? 'bg-primary/20' : 'hover:bg-light/5'}"
+													class="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors text-left
+														{$selectedRoomId === room.roomId ? 'bg-primary/10 text-white' : 'text-light/60 hover:bg-dark/50 hover:text-white'}"
 													onclick={() => handleRoomSelect(room.roomId)}
 												>
 													<Avatar src={room.avatarUrl} name={room.name} size="xs" />
 													<div class="flex-1 min-w-0">
-														<span class="font-bold text-sm text-light truncate block">{room.name}</span>
+														<span class="text-[12px] font-body truncate block">{room.name}</span>
 													</div>
 													{#if room.unreadCount > 0}
-														<span class="bg-primary text-white text-xs px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
+														<span class="bg-primary text-background text-[10px] px-1.5 py-0.5 rounded-full min-w-[16px] text-center font-bold">
 															{room.unreadCount > 99 ? "99+" : room.unreadCount}
 														</span>
 													{/if}
@@ -623,76 +611,76 @@
 					</nav>
 
 					<!-- User footer -->
-					<footer class="p-3 border-t border-light/10">
+					<div class="px-2 py-2 border-t border-light/5">
 						<div class="flex items-center gap-2">
 							<Avatar name={$auth.userId || "User"} size="xs" status="online" />
 							<div class="flex-1 min-w-0">
-								<p class="text-xs font-medium text-light truncate">{$auth.userId}</p>
+								<p class="text-[11px] text-light/50 truncate">{$auth.userId}</p>
 							</div>
 							<button
-								class="text-light/50 hover:text-light p-1 rounded-lg hover:bg-light/10 transition-colors"
+								class="p-1 text-light/30 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 								onclick={handleLogout}
 								title="Disconnect chat"
 							>
-								<span class="material-symbols-rounded" style="font-size: 18px;">logout</span>
+								<span class="material-symbols-rounded" style="font-size: 16px;">logout</span>
 							</button>
 						</div>
-					</footer>
+					</div>
 				</aside>
 
 				<!-- Main Chat Area -->
-				<main class="flex-1 flex flex-col min-h-0 overflow-hidden bg-night rounded-[32px]">
+				<main class="flex-1 flex flex-col min-h-0 overflow-hidden">
 					{#if $selectedRoomId}
 						<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
 							<!-- Room Header -->
-							<header class="h-14 px-5 flex items-center border-b border-light/10">
+							<div class="px-4 py-2.5 flex items-center border-b border-light/5 shrink-0">
 								{#each $roomSummaries.filter((r) => r.roomId === $selectedRoomId) as room}
-									<div class="flex items-center gap-3 w-full">
+									<div class="flex items-center gap-2.5 w-full">
 										<Avatar src={room.avatarUrl} name={room.name} size="sm" />
 										<div class="flex-1 min-w-0">
-											<h2 class="font-heading text-h5 text-light truncate">{room.name}</h2>
-											<p class="text-xs text-light/50">
+											<h2 class="font-heading text-body-sm text-white truncate">{room.name}</h2>
+											<p class="text-[11px] text-light/40">
 												{room.memberCount} members{room.isEncrypted ? " · Encrypted" : ""}
 											</p>
 										</div>
 										<button
-											class="p-2 text-light/50 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
+											class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 											onclick={() => (showMessageSearch = !showMessageSearch)}
 											title="Search messages"
 										>
-											<span class="material-symbols-rounded" style="font-size: 20px;">search</span>
+											<span class="material-symbols-rounded" style="font-size: 18px;">search</span>
 										</button>
 										<button
-											class="p-2 text-light/50 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
+											class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 											onclick={() => (showRoomInfo = !showRoomInfo)}
 											title="Room info"
 										>
-											<span class="material-symbols-rounded" style="font-size: 20px;">info</span>
+											<span class="material-symbols-rounded" style="font-size: 18px;">info</span>
 										</button>
 										<button
-											class="p-2 text-light/50 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
+											class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 											onclick={() => (showMemberList = !showMemberList)}
 											title="Members"
 										>
-											<span class="material-symbols-rounded" style="font-size: 20px;">group</span>
+											<span class="material-symbols-rounded" style="font-size: 18px;">group</span>
 										</button>
 									</div>
 								{/each}
-							</header>
+							</div>
 
 							<!-- Message search panel -->
 							{#if showMessageSearch}
-								<div class="border-b border-light/10 p-3 bg-dark/50">
+								<div class="border-b border-light/5 px-4 py-2.5">
 									<div class="relative">
-										<span class="material-symbols-rounded absolute left-3 top-1/2 -translate-y-1/2 text-light/40" style="font-size: 16px;">search</span>
+										<span class="material-symbols-rounded absolute left-2.5 top-1/2 -translate-y-1/2 text-light/30" style="font-size: 16px;">search</span>
 										<input
 											type="text"
 											bind:value={messageSearchQuery}
-											placeholder="Search messages in this room..."
-											class="w-full pl-9 pr-8 py-2 bg-night text-light text-sm rounded-lg border border-light/10 placeholder:text-light/30 focus:outline-none focus:border-primary"
+											placeholder="Search messages..."
+											class="w-full pl-8 pr-8 py-1.5 bg-dark/50 text-white text-[12px] rounded-lg border border-light/5 placeholder:text-light/30 focus:outline-none focus:border-primary"
 										/>
 										<button
-											class="absolute right-2 top-1/2 -translate-y-1/2 text-light/40 hover:text-light"
+											class="absolute right-2 top-1/2 -translate-y-1/2 text-light/30 hover:text-white"
 											onclick={() => { showMessageSearch = false; messageSearchQuery = ""; }}
 										>
 											<span class="material-symbols-rounded" style="font-size: 16px;">close</span>
@@ -700,22 +688,22 @@
 									</div>
 									{#if messageSearchQuery && messageSearchResults.length > 0}
 										<div class="mt-2 max-h-48 overflow-y-auto">
-											<p class="text-xs text-light/40 mb-2">
+											<p class="text-[11px] text-light/30 mb-1.5">
 												{messageSearchResults.length} result{messageSearchResults.length !== 1 ? "s" : ""}
 											</p>
 											{#each messageSearchResults.slice(0, 20) as result}
 												<button
-													class="w-full text-left px-3 py-2 hover:bg-light/5 rounded transition-colors"
+													class="w-full text-left px-3 py-1.5 hover:bg-dark/50 rounded-lg transition-colors"
 													onclick={() => { showMessageSearch = false; messageSearchQuery = ""; }}
 												>
-													<p class="text-xs text-primary">{result.senderName}</p>
-													<p class="text-sm text-light truncate">{result.content}</p>
-													<p class="text-xs text-light/30">{new Date(result.timestamp).toLocaleString()}</p>
+													<p class="text-[11px] text-primary">{result.senderName}</p>
+													<p class="text-body-sm text-white truncate">{result.content}</p>
+													<p class="text-[10px] text-light/30">{new Date(result.timestamp).toLocaleString()}</p>
 												</button>
 											{/each}
 										</div>
 									{:else if messageSearchQuery}
-										<p class="text-sm text-light/40 mt-2">No results found</p>
+										<p class="text-body-sm text-light/30 mt-2">No results found</p>
 									{/if}
 								</div>
 							{/if}
@@ -729,11 +717,11 @@
 								role="region"
 							>
 								{#if isDraggingFile}
-									<div class="absolute inset-0 z-50 bg-primary/20 border-2 border-dashed border-primary rounded-lg flex items-center justify-center backdrop-blur-sm">
+									<div class="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-xl flex items-center justify-center backdrop-blur-sm">
 										<div class="text-center">
-											<span class="material-symbols-rounded text-primary mb-4 block" style="font-size: 64px;">upload_file</span>
-											<p class="text-xl font-semibold text-primary">Drop to upload</p>
-											<p class="text-sm text-light/60 mt-1">Release to send file</p>
+											<span class="material-symbols-rounded text-primary mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">upload_file</span>
+											<p class="text-body-sm font-heading text-primary">Drop to upload</p>
+											<p class="text-[12px] text-light/40 mt-0.5">Release to send file</p>
 										</div>
 									</div>
 								{/if}
@@ -764,7 +752,7 @@
 								<!-- Side panels -->
 								{#if showRoomInfo}
 									{#each $roomSummaries.filter((r) => r.roomId === $selectedRoomId) as currentRoom}
-										<aside class="w-72 border-l border-light/10 bg-dark/30">
+										<aside class="w-72 border-l border-light/5">
 											<RoomInfoPanel
 												room={currentRoom}
 												members={currentMembers}
@@ -773,7 +761,7 @@
 										</aside>
 									{/each}
 								{:else if showMemberList}
-									<aside class="w-64 border-l border-light/10 bg-dark/30">
+									<aside class="w-64 border-l border-light/5">
 										<MemberList members={currentMembers} />
 									</aside>
 								{/if}
@@ -782,10 +770,10 @@
 					{:else}
 						<!-- No room selected -->
 						<div class="flex-1 flex items-center justify-center">
-							<div class="text-center text-light/40">
-								<span class="material-symbols-rounded mb-4 block" style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300;">chat</span>
-								<h2 class="font-heading text-h4 text-light/50 mb-2">Select a room</h2>
-								<p class="text-body text-light/30">Choose a conversation to start chatting</p>
+							<div class="text-center text-light/30">
+								<span class="material-symbols-rounded mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">chat</span>
+								<p class="text-body-sm text-light/40 mb-1">Select a room</p>
+								<p class="text-[12px] text-light/20">Choose a conversation to start chatting</p>
 							</div>
 						</div>
 					{/if}
diff --git a/src/routes/[orgSlug]/settings/+page.svelte b/src/routes/[orgSlug]/settings/+page.svelte
index 52158aa..10960f3 100644
--- a/src/routes/[orgSlug]/settings/+page.svelte
+++ b/src/routes/[orgSlug]/settings/+page.svelte
@@ -322,74 +322,73 @@
 
 	<!-- Tags Tab -->
 	{#if activeTab === "tags"}
-		<div class="space-y-6 max-w-2xl">
+		<div class="space-y-4 max-w-2xl">
 			<div class="flex items-center justify-between">
 				<div>
-					<h2 class="text-lg font-semibold text-light">
+					<h2 class="text-body font-heading text-white">
 						{m.settings_tags_title()}
 					</h2>
-					<p class="text-sm text-light/50">
+					<p class="text-body-sm text-light/50 mt-0.5">
 						{m.settings_tags_desc()}
 					</p>
 				</div>
-				<Button onclick={() => openTagModal()} icon="add">
+				<Button size="sm" onclick={() => openTagModal()} icon="add">
 					{m.settings_tags_create()}
 				</Button>
 			</div>
 
 			{#if orgTags.length === 0 && tagsLoaded}
-				<Card>
-					<div class="p-8 text-center">
-						<span
-							class="material-symbols-rounded text-light/20 mb-4 block"
-							style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;"
-							>label</span
-						>
-						<p class="text-light/50">{m.settings_tags_empty()}</p>
-					</div>
-				</Card>
+				<div class="bg-dark/30 border border-light/5 rounded-xl p-8 text-center">
+					<span
+						class="material-symbols-rounded text-light/20 mb-3 block"
+						style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+						>label</span
+					>
+					<p class="text-body-sm text-light/40">{m.settings_tags_empty()}</p>
+				</div>
 			{:else}
-				<div class="grid gap-3">
+				<div class="flex flex-col gap-2">
 					{#each orgTags as tag}
-						<Card>
-							<div class="flex items-center justify-between p-4">
-								<div class="flex items-center gap-3">
-									<div
-										class="w-8 h-8 rounded-lg flex items-center justify-center"
-										style="background-color: {tag.color ||
-											'#00A3E0'}"
+						<div class="flex items-center justify-between px-4 py-3 bg-dark/30 border border-light/5 rounded-xl hover:border-light/10 transition-colors">
+							<div class="flex items-center gap-3">
+								<div
+									class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
+									style="background-color: {tag.color || '#00A3E0'}"
+								>
+									<span
+										class="material-symbols-rounded text-night"
+										style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 16;"
+										>label</span
 									>
-										<span
-											class="material-symbols-rounded text-night"
-											style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 18;"
-											>label</span
-										>
-									</div>
-									<div>
-										<p class="text-light font-medium">
-											{tag.name}
-										</p>
-										<p class="text-xs text-light/40">
-											{tag.color || "#00A3E0"}
-										</p>
-									</div>
 								</div>
-								<div class="flex items-center gap-2">
-									<Button
-										variant="tertiary"
-										size="sm"
-										onclick={() => openTagModal(tag)}
-										>Edit</Button
-									>
-									<Button
-										variant="danger"
-										size="sm"
-										onclick={() => deleteOrgTag(tag)}
-										>Delete</Button
-									>
+								<div>
+									<p class="text-body-sm text-white font-medium">
+										{tag.name}
+									</p>
+									<p class="text-[11px] text-light/30">
+										{tag.color || "#00A3E0"}
+									</p>
 								</div>
 							</div>
-						</Card>
+							<div class="flex items-center gap-1.5">
+								<button
+									type="button"
+									class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+									onclick={() => openTagModal(tag)}
+									title="Edit"
+								>
+									<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">edit</span>
+								</button>
+								<button
+									type="button"
+									class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
+									onclick={() => deleteOrgTag(tag)}
+									title="Delete"
+								>
+									<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">delete</span>
+								</button>
+							</div>
+						</div>
 					{/each}
 				</div>
 			{/if}

From 9d5e58f85834c04384bd0889885cfe4e341b540e Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 11:18:23 +0200
Subject: [PATCH 06/10] ui: overhaul home page, style guide, account settings -
 Home page: bg-background, border-based org cards, material icons, compact
 typography - Style guide: new header with back button, rounded-xl swatches,
 consistent section headings - Account settings: replace bg-background
 rounded-[32px] with border-based rounded-xl cards - svelte-check: 0 errors,
 vitest: 112/112 passed

---
 src/routes/+page.svelte                   | 119 +++-----
 src/routes/[orgSlug]/account/+page.svelte |  42 +--
 src/routes/style/+page.svelte             | 326 +++++++---------------
 3 files changed, 151 insertions(+), 336 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 18e1545..a7e5e7d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from "svelte";
-    import { Button, Card, Modal, Input } from "$lib/components/ui";
+    import { Button, Modal, Input } from "$lib/components/ui";
     import { createOrganization, generateSlug } from "$lib/api/organizations";
     import { toasts } from "$lib/stores/toast.svelte";
     import type { SupabaseClient } from "@supabase/supabase-js";
@@ -58,108 +58,53 @@
     <title>Organizations | Root</title>
 </svelte:head>
 
-<div class="min-h-screen bg-dark">
-    <header class="border-b border-light/10 bg-surface">
-        <div
-            class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"
-        >
-            <h1 class="text-xl font-bold text-light">Root Org</h1>
-            <div class="flex items-center gap-4">
-                <a href="/style" class="text-sm text-light/60 hover:text-light"
-                    >Style Guide</a
-                >
+<div class="min-h-screen bg-background">
+    <!-- Header -->
+    <header class="border-b border-light/5">
+        <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <span class="material-symbols-rounded text-primary" style="font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;">hub</span>
+                <span class="font-heading text-h4 text-white">Root</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <a href="/style" class="px-3 py-1.5 text-[12px] text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">Style Guide</a>
                 <form method="POST" action="/auth/logout">
-                    <Button variant="tertiary" size="sm" type="submit"
-                        >Sign Out</Button
-                    >
+                    <Button variant="tertiary" size="sm" type="submit">Sign Out</Button>
                 </form>
             </div>
         </div>
     </header>
 
-    <main class="max-w-6xl mx-auto px-6 py-8">
-        <div class="flex items-center justify-between mb-8">
+    <main class="max-w-5xl mx-auto px-6 py-8">
+        <div class="flex items-center justify-between mb-6">
             <div>
-                <h2 class="text-2xl font-bold text-light">
-                    Your Organizations
-                </h2>
-                <p class="text-light/50 mt-1">
-                    Select an organization to get started
-                </p>
+                <h2 class="font-heading text-h3 text-white">Your Organizations</h2>
+                <p class="text-body-sm text-light/40 mt-1">Select an organization to get started</p>
             </div>
-            <Button onclick={() => (showCreateModal = true)}>
-                <svg
-                    class="w-4 h-4 mr-2"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
-                New Organization
-            </Button>
+            <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>New Organization</Button>
         </div>
 
         {#if organizations.length === 0}
-            <Card>
-                <div class="p-12 text-center">
-                    <svg
-                        class="w-16 h-16 mx-auto mb-4 text-light/30"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                    >
-                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                        <circle cx="9" cy="7" r="4" />
-                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                    </svg>
-                    <h3 class="text-lg font-medium text-light mb-2">
-                        No organizations yet
-                    </h3>
-                    <p class="text-light/50 mb-6">
-                        Create your first organization to start collaborating
-                    </p>
-                    <Button onclick={() => (showCreateModal = true)}
-                        >Create Organization</Button
-                    >
-                </div>
-            </Card>
+            <div class="bg-dark/30 border border-light/5 rounded-xl p-12 text-center">
+                <span class="material-symbols-rounded text-light/20 mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">groups</span>
+                <h3 class="font-heading text-body text-white mb-1">No organizations yet</h3>
+                <p class="text-body-sm text-light/40 mb-6">Create your first organization to start collaborating</p>
+                <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>Create Organization</Button>
+            </div>
         {:else}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                 {#each organizations as org}
                     <a href="/{org.slug}" class="block group">
-                        <Card
-                            class="h-full hover:ring-1 hover:ring-primary/50 transition-all"
-                        >
-                            <div class="p-6">
-                                <div
-                                    class="flex items-start justify-between mb-4"
-                                >
-                                    <div
-                                        class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center text-primary font-bold text-lg"
-                                    >
-                                        {org.name.charAt(0).toUpperCase()}
-                                    </div>
-                                    <span
-                                        class="text-xs px-2 py-1 bg-light/10 rounded text-light/60 capitalize"
-                                    >
-                                        {org.role}
-                                    </span>
+                        <div class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-5 transition-all h-full">
+                            <div class="flex items-start justify-between mb-3">
+                                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body">
+                                    {org.name.charAt(0).toUpperCase()}
                                 </div>
-                                <h3
-                                    class="text-lg font-semibold text-light group-hover:text-primary transition-colors"
-                                >
-                                    {org.name}
-                                </h3>
-                                <p class="text-sm text-light/40 mt-1">
-                                    /{org.slug}
-                                </p>
+                                <span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-md text-light/40 capitalize font-body">{org.role}</span>
                             </div>
-                        </Card>
+                            <h3 class="font-heading text-body-sm text-white group-hover:text-primary transition-colors">{org.name}</h3>
+                            <p class="text-[11px] text-light/30 mt-0.5 font-body">/{org.slug}</p>
+                        </div>
                     </a>
                 {/each}
             </div>
diff --git a/src/routes/[orgSlug]/account/+page.svelte b/src/routes/[orgSlug]/account/+page.svelte
index 9aba7c9..e73afaf 100644
--- a/src/routes/[orgSlug]/account/+page.svelte
+++ b/src/routes/[orgSlug]/account/+page.svelte
@@ -227,17 +227,17 @@
 	<title>Account Settings | Root</title>
 </svelte:head>
 
-<div class="flex-1 p-6">
+<div class="flex-1 p-6 overflow-auto">
 	<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 		<!-- Profile Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_profile()}
 			</h2>
 
 			<!-- Avatar -->
 			<div class="flex flex-col gap-3">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_photo()}</span
 				>
 				<div class="flex items-center gap-4">
@@ -306,8 +306,8 @@
 		</div>
 
 		<!-- Appearance Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_appearance()}
 			</h2>
 
@@ -325,7 +325,7 @@
 
 			<!-- Accent Color -->
 			<div class="flex flex-col gap-2">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_accent_color()}</span
 				>
 				<div class="flex flex-wrap gap-2 items-center">
@@ -363,10 +363,10 @@
 			<!-- Use Org Theme -->
 			<div class="flex items-center justify-between">
 				<div>
-					<p class="font-body text-body text-white">
+					<p class="font-body text-body-sm text-white">
 						{m.account_use_org_theme()}
 					</p>
-					<p class="font-body text-[12px] text-light/50">
+					<p class="font-body text-[11px] text-light/40">
 						{m.account_use_org_theme_desc()}
 					</p>
 				</div>
@@ -388,20 +388,20 @@
 
 			<!-- Language -->
 			<div class="flex flex-col gap-2">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_language()}</span
 				>
-				<p class="font-body text-[12px] text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_language_desc()}
 				</p>
 				<div class="flex gap-2 mt-1">
 					{#each locales as locale}
 						<button
 							type="button"
-							class="px-4 py-2 rounded-full text-sm font-medium transition-colors {currentLocale ===
+							class="px-3 py-1.5 rounded-lg text-[12px] font-medium transition-colors {currentLocale ===
 							locale
-								? 'bg-primary text-night'
-								: 'bg-light/10 text-light/70 hover:bg-light/20'}"
+								? 'bg-primary text-background'
+								: 'bg-light/5 text-light/50 hover:bg-light/10'}"
 							onclick={() => handleLanguageChange(locale)}
 						>
 							{localeLabels[locale] ?? locale}
@@ -418,16 +418,16 @@
 		</div>
 
 		<!-- Security & Sessions Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_security()}
 			</h2>
 
 			<div class="flex flex-col gap-2">
-				<p class="font-body text-body text-white">
+				<p class="font-body text-body-sm text-white">
 					{m.account_password()}
 				</p>
-				<p class="font-body text-body-sm text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_password_desc()}
 				</p>
 				<div class="mt-2">
@@ -452,11 +452,11 @@
 				</div>
 			</div>
 
-			<div class="border-t border-light/10 pt-4 flex flex-col gap-2">
-				<p class="font-body text-body text-white">
+			<div class="border-t border-light/5 pt-4 flex flex-col gap-2">
+				<p class="font-body text-body-sm text-white">
 					{m.account_active_sessions()}
 				</p>
-				<p class="font-body text-body-sm text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_sessions_desc()}
 				</p>
 				<div class="mt-2">
diff --git a/src/routes/style/+page.svelte b/src/routes/style/+page.svelte
index 66d8d58..5601b3d 100644
--- a/src/routes/style/+page.svelte
+++ b/src/routes/style/+page.svelte
@@ -36,97 +36,76 @@
 	<title>Style Guide | Root</title>
 </svelte:head>
 
-<div class="min-h-screen bg-dark p-8">
-	<div class="max-w-6xl mx-auto space-y-12">
-		<!-- Back Button -->
-		<a
-			href="/"
-			class="inline-flex items-center gap-2 text-light/60 hover:text-light transition-colors"
-		>
-			<svg
-				class="w-5 h-5"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path d="M19 12H5M12 19l-7-7 7-7" />
-			</svg>
-			Back to Home
-		</a>
+<div class="min-h-screen bg-background">
+	<!-- Header -->
+	<header class="border-b border-light/5">
+		<div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+			<div class="flex items-center gap-3">
+				<a href="/" class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">
+					<span class="material-symbols-rounded" style="font-size: 20px;">arrow_back</span>
+				</a>
+				<span class="font-heading text-body text-white">Style Guide</span>
+				<span class="text-[11px] text-light/30 font-body">All UI components and their variants</span>
+			</div>
+		</div>
+	</header>
 
-		<!-- Header -->
-		<header class="text-center space-y-4">
-			<h1 class="text-4xl font-bold text-light">Root Style Guide</h1>
-			<p class="text-light/60">All UI components and their variants</p>
-		</header>
+	<div class="max-w-5xl mx-auto px-6 py-8 space-y-10">
 
-		<!-- Colors - Figma Design System -->
+		<!-- Colors -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Colors
-			</h2>
-			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-				<div class="space-y-2">
-					<div
-						class="w-full h-20 rounded-[32px] bg-background border border-light/20"
-					></div>
-					<p class="text-sm text-light/60">Background</p>
-					<code class="text-xs text-light/40">#05090F</code>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Colors</h2>
+			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-background border border-light/10"></div>
+					<p class="text-[12px] text-light/60 font-body">Background</p>
+					<code class="text-[10px] text-light/30">#05090F</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-night"></div>
-					<p class="text-sm text-light/60">Night</p>
-					<code class="text-xs text-light/40">#0A121F</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-night"></div>
+					<p class="text-[12px] text-light/60 font-body">Night</p>
+					<code class="text-[10px] text-light/30">#0A121F</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-dark"></div>
-					<p class="text-sm text-light/60">Dark</p>
-					<code class="text-xs text-light/40">#14243E</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-dark"></div>
+					<p class="text-[12px] text-light/60 font-body">Dark</p>
+					<code class="text-[10px] text-light/30">#14243E</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-light"></div>
-					<p class="text-sm text-light/60">Light</p>
-					<code class="text-xs text-light/40">#E5E6F0</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-light"></div>
+					<p class="text-[12px] text-light/60 font-body">Light</p>
+					<code class="text-[10px] text-light/30">#E5E6F0</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-primary"></div>
-					<p class="text-sm text-light/60">Primary</p>
-					<code class="text-xs text-light/40">#00A3E0</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-primary"></div>
+					<p class="text-[12px] text-light/60 font-body">Primary</p>
+					<code class="text-[10px] text-light/30">#00A3E0</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-success"></div>
-					<p class="text-sm text-light/60">Success</p>
-					<code class="text-xs text-light/40">#33E000</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-success"></div>
+					<p class="text-[12px] text-light/60 font-body">Success</p>
+					<code class="text-[10px] text-light/30">#33E000</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-warning"></div>
-					<p class="text-sm text-light/60">Warning</p>
-					<code class="text-xs text-light/40">#FFAB00</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-warning"></div>
+					<p class="text-[12px] text-light/60 font-body">Warning</p>
+					<code class="text-[10px] text-light/30">#FFAB00</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-error"></div>
-					<p class="text-sm text-light/60">Error</p>
-					<code class="text-xs text-light/40">#E03D00</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-error"></div>
+					<p class="text-[12px] text-light/60 font-body">Error</p>
+					<code class="text-[10px] text-light/30">#E03D00</code>
 				</div>
 			</div>
 		</section>
 
 		<!-- Buttons -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Buttons
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Buttons</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Button variant="primary">Primary</Button>
 						<Button variant="secondary">Secondary</Button>
@@ -137,9 +116,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Button size="sm">Small</Button>
 						<Button size="md">Medium</Button>
@@ -148,9 +125,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						With Icons (Material Symbols)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">With Icons</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Button icon="add">Add Item</Button>
 						<Button variant="secondary" icon="edit">Edit</Button>
@@ -160,9 +135,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						States
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
 					<div class="flex flex-wrap gap-3">
 						<Button>Normal</Button>
 						<Button disabled>Disabled</Button>
@@ -171,9 +144,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Full Width
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Full Width</h3>
 					<div class="max-w-sm">
 						<Button fullWidth icon="rocket_launch"
 							>Full Width Button</Button
@@ -185,11 +156,7 @@
 
 		<!-- Inputs -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Inputs
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Inputs</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Input
@@ -229,11 +196,7 @@
 
 		<!-- Textarea -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Textarea
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Textarea</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Textarea
@@ -251,11 +214,7 @@
 
 		<!-- Select -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Select
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Select</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Select
@@ -273,17 +232,11 @@
 
 		<!-- Avatars -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Avatars
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Avatars</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-end gap-4">
 						<Avatar name="John Doe" size="sm" />
 						<Avatar name="John Doe" size="md" />
@@ -293,9 +246,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						With Status (placeholder)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">With Status</h3>
 					<div class="flex items-center gap-4">
 						<Avatar name="Online User" size="lg" />
 						<Avatar name="Away User" size="lg" />
@@ -305,9 +256,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Different Names (Color Generation)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Color Generation</h3>
 					<div class="flex items-center gap-4">
 						<Avatar name="Alice" size="lg" />
 						<Avatar name="Bob" size="lg" />
@@ -321,17 +270,11 @@
 
 		<!-- Chips -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Chips
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Chips</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Chip variant="primary">Primary</Chip>
 						<Chip variant="success">Success</Chip>
@@ -345,11 +288,7 @@
 
 		<!-- List Items -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				List Items
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">List Items</h2>
 
 			<div class="max-w-[240px] space-y-2">
 				<ListItem icon="info">Default Item</ListItem>
@@ -364,11 +303,7 @@
 
 		<!-- Org Header -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Organization Header
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Organization Header</h2>
 
 			<div class="max-w-[240px] space-y-4">
 				<OrgHeader name="Acme Corp" role="Admin" />
@@ -379,11 +314,7 @@
 
 		<!-- Calendar Day -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Calendar Day
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Calendar Day</h2>
 
 			<div class="flex gap-1 max-w-[720px]">
 				<CalendarDay day="Mon" isHeader />
@@ -403,17 +334,11 @@
 
 		<!-- Badges -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Badges
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Badges</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Badge variant="default">Default</Badge>
 						<Badge variant="primary">Primary</Badge>
@@ -425,9 +350,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Badge size="sm">Small</Badge>
 						<Badge size="md">Medium</Badge>
@@ -439,11 +362,7 @@
 
 		<!-- Cards -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Cards
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Cards</h2>
 
 			<div class="grid md:grid-cols-3 gap-6">
 				<Card variant="default">
@@ -469,17 +388,11 @@
 
 		<!-- Toggle -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Toggle
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toggle</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-center gap-6">
 						<div class="flex items-center gap-2">
 							<Toggle size="sm" />
@@ -497,9 +410,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						States
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
 					<div class="flex items-center gap-6">
 						<div class="flex items-center gap-2">
 							<Toggle />
@@ -520,17 +431,11 @@
 
 		<!-- Spinners -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Spinners
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Spinners</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-center gap-6">
 						<Spinner size="sm" />
 						<Spinner size="md" />
@@ -539,9 +444,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Colors
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Colors</h3>
 					<div class="flex items-center gap-6">
 						<Spinner color="primary" />
 						<Spinner color="light" />
@@ -555,11 +458,7 @@
 
 		<!-- Modal -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Modal
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Modal</h2>
 
 			<div>
 				<Button onclick={() => (modalOpen = true)}>Open Modal</Button>
@@ -584,18 +483,12 @@
 
 		<!-- Typography -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Typography
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Typography</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<!-- Headings (Tilt Warp) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Headings &mdash; Tilt Warp
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Headings &mdash; Tilt Warp</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -644,9 +537,7 @@
 
 				<!-- Button Text (Tilt Warp) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Button Text &mdash; Tilt Warp
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Button Text &mdash; Tilt Warp</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -680,9 +571,7 @@
 
 				<!-- Body Text (Work Sans) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Body &mdash; Work Sans
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Body &mdash; Work Sans</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -721,11 +610,7 @@
 
 		<!-- Toasts -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Toasts
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toasts</h2>
 			<div class="space-y-4">
 				<Toast
 					variant="success"
@@ -752,15 +637,9 @@
 
 		<!-- Logo -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Logo
-			</h2>
-			<p class="text-light/60">
-				Brand logo component with size variants.
-			</p>
-			<div class="flex items-center gap-8 bg-night p-6 rounded-xl">
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Logo</h2>
+			<p class="text-[12px] text-light/40 font-body">Brand logo component with size variants.</p>
+			<div class="flex items-center gap-8 bg-dark/30 border border-light/5 p-5 rounded-xl">
 				<div class="flex flex-col items-center gap-2">
 					<Logo size="sm" />
 					<span class="text-xs text-light/60">Small</span>
@@ -774,16 +653,9 @@
 
 		<!-- ContentHeader -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Content Header
-			</h2>
-			<p class="text-light/60">
-				Page header component with avatar, title, action button, and
-				more menu.
-			</p>
-			<div class="bg-night p-6 rounded-xl space-y-4">
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Content Header</h2>
+			<p class="text-[12px] text-light/40 font-body">Page header component with avatar, title, action button, and more menu.</p>
+			<div class="bg-dark/30 border border-light/5 p-5 rounded-xl space-y-4">
 				<ContentHeader
 					title="Page Title"
 					actionLabel="+ New"
@@ -796,10 +668,8 @@
 		</section>
 
 		<!-- Footer -->
-		<footer class="text-center py-8 border-t border-light/10">
-			<p class="text-light/40 text-sm">
-				Root Organization Platform - Style Guide
-			</p>
+		<footer class="text-center py-8 border-t border-light/5">
+			<p class="text-[11px] text-light/30 font-body">Root Organization Platform &mdash; Style Guide</p>
 		</footer>
 	</div>
 </div>

From 4999836a57078f47a2f15bbfdcc46871c231d671 Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 11:23:49 +0200
Subject: [PATCH 07/10] ui: overhaul org settings components (General, Members,
 Roles, Integrations) - SettingsGeneral: border-based cards, compact danger
 zone with error border - SettingsMembers: Avatar component, icon buttons,
 border-based list - SettingsRoles: icon buttons for edit/delete, smaller
 permission badges - SettingsIntegrations: compact integration cards, Material
 Symbols for coming-soon - Removed unused Card imports from all settings
 components - svelte-check: 0 errors, vitest: 112/112 passed

---
 .../settings/SettingsGeneral.svelte           | 145 ++++++-----
 .../settings/SettingsIntegrations.svelte      | 238 ++++++------------
 .../settings/SettingsMembers.svelte           | 151 +++++------
 .../components/settings/SettingsRoles.svelte  | 118 ++++-----
 4 files changed, 261 insertions(+), 391 deletions(-)

diff --git a/src/lib/components/settings/SettingsGeneral.svelte b/src/lib/components/settings/SettingsGeneral.svelte
index a3881c5..644f12a 100644
--- a/src/lib/components/settings/SettingsGeneral.svelte
+++ b/src/lib/components/settings/SettingsGeneral.svelte
@@ -124,93 +124,88 @@
 	}
 </script>
 
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-6 max-w-2xl">
 	<!-- Organization Details -->
-	<h2 class="font-heading text-h2 text-white">Organization details</h2>
+	<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+		<h2 class="font-heading text-body text-white">Organization details</h2>
 
-	<div class="flex flex-col gap-8">
-		<div class="flex flex-col gap-4">
-			<!-- Avatar Upload -->
-			<div class="flex flex-col gap-2">
-				<span class="font-body text-body-sm text-light">Avatar</span>
-				<div class="flex items-center gap-4">
-					<Avatar name={orgName || "?"} src={avatarUrl} size="lg" />
-					<div class="flex gap-2">
-						<input
-							type="file"
-							accept="image/*"
-							class="hidden"
-							bind:this={avatarInput}
-							onchange={handleAvatarUpload}
-						/>
+		<!-- Avatar Upload -->
+		<div class="flex flex-col gap-2">
+			<span class="font-body text-body-sm text-light/60">Avatar</span>
+			<div class="flex items-center gap-4">
+				<Avatar name={orgName || "?"} src={avatarUrl} size="lg" />
+				<div class="flex gap-2">
+					<input
+						type="file"
+						accept="image/*"
+						class="hidden"
+						bind:this={avatarInput}
+						onchange={handleAvatarUpload}
+					/>
+					<Button
+						variant="secondary"
+						size="sm"
+						onclick={() => avatarInput?.click()}
+						loading={isUploading}
+					>
+						Upload
+					</Button>
+					{#if avatarUrl}
 						<Button
-							variant="secondary"
+							variant="tertiary"
 							size="sm"
-							onclick={() => avatarInput?.click()}
-							loading={isUploading}
+							onclick={removeAvatar}
 						>
-							Upload
+							Remove
 						</Button>
-						{#if avatarUrl}
-							<Button
-								variant="tertiary"
-								size="sm"
-								onclick={removeAvatar}
-							>
-								Remove
-							</Button>
-						{/if}
-					</div>
+					{/if}
 				</div>
 			</div>
-			<Input
-				label="Name"
-				bind:value={orgName}
-				placeholder="Organization name"
-			/>
-			<Input
-				label="URL slug (yoursite.com/...)"
-				bind:value={orgSlug}
-				placeholder="my-org"
-			/>
+		</div>
+		<Input
+			label="Name"
+			bind:value={orgName}
+			placeholder="Organization name"
+		/>
+		<Input
+			label="URL slug (yoursite.com/...)"
+			bind:value={orgSlug}
+			placeholder="my-org"
+		/>
+		<div>
+			<Button size="sm" onclick={saveGeneralSettings} loading={isSaving}
+				>Save Changes</Button
+			>
+		</div>
+	</div>
+
+	<!-- Danger Zone -->
+	{#if isOwner}
+		<div class="bg-dark/30 border border-error/10 rounded-xl p-5 flex flex-col gap-3">
+			<h4 class="font-heading text-body-sm text-error">Danger Zone</h4>
+			<p class="font-body text-[11px] text-light/40">
+				Permanently delete this organization and all its data.
+			</p>
 			<div>
-				<Button onclick={saveGeneralSettings} loading={isSaving}
-					>Save Changes</Button
+				<Button variant="danger" size="sm" onclick={onDelete}
+					>Delete Organization</Button
 				>
 			</div>
 		</div>
+	{/if}
 
-		<!-- Danger Zone -->
-		{#if isOwner}
-			<div class="flex flex-col gap-4">
-				<h4 class="font-heading text-h4 text-white">Danger Zone</h4>
-				<p class="font-body text-body text-white">
-					Permanently delete this organization and all its data.
-				</p>
-				<div>
-					<Button variant="danger" onclick={onDelete}
-						>Delete Organization</Button
-					>
-				</div>
+	<!-- Leave Organization (non-owners) -->
+	{#if !isOwner}
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-3">
+			<h4 class="font-heading text-body-sm text-white">Leave Organization</h4>
+			<p class="font-body text-[11px] text-light/40">
+				Leave this organization. You will need to be re-invited to rejoin.
+			</p>
+			<div>
+				<Button variant="secondary" size="sm" onclick={onLeave}
+					>Leave {org.name}</Button
+				>
 			</div>
-		{/if}
-
-		<!-- Leave Organization (non-owners) -->
-		{#if !isOwner}
-			<div class="flex flex-col gap-4">
-				<h4 class="font-heading text-h4 text-white">
-					Leave Organization
-				</h4>
-				<p class="font-body text-body text-white">
-					Leave this organization. You will need to be re-invited to
-					rejoin.
-				</p>
-				<div>
-					<Button variant="secondary" onclick={onLeave}
-						>Leave {org.name}</Button
-					>
-				</div>
-			</div>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/components/settings/SettingsIntegrations.svelte b/src/lib/components/settings/SettingsIntegrations.svelte
index ee12a1c..91d5702 100644
--- a/src/lib/components/settings/SettingsIntegrations.svelte
+++ b/src/lib/components/settings/SettingsIntegrations.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Modal, Card, Input } from "$lib/components/ui";
+	import { Button, Modal, Input } from "$lib/components/ui";
 	import { toasts } from "$lib/stores/toast.svelte";
 	import {
 		extractCalendarId,
@@ -108,184 +108,88 @@
 	}
 </script>
 
-<div class="space-y-6 max-w-2xl">
-	<Card>
-		<div class="p-6">
-			<div class="flex items-start gap-4">
-				<div
-					class="w-12 h-12 bg-white rounded-lg flex items-center justify-center"
-				>
-					<svg class="w-8 h-8" viewBox="0 0 24 24">
-						<path
-							fill="#4285F4"
-							d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-						/>
-						<path
-							fill="#34A853"
-							d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-						/>
-						<path
-							fill="#FBBC05"
-							d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-						/>
-						<path
-							fill="#EA4335"
-							d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-						/>
-					</svg>
-				</div>
-				<div class="flex-1">
-					<h3 class="text-lg font-semibold text-light">
-						Google Calendar
-					</h3>
-					<p class="text-sm text-light/50 mt-1">
-						Sync events between your organization and Google
-						Calendar.
-					</p>
+<div class="space-y-3 max-w-2xl">
+	<!-- Google Calendar -->
+	<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
+		<div class="flex items-start gap-4">
+			<div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shrink-0">
+				<svg class="w-6 h-6" viewBox="0 0 24 24">
+					<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+					<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+					<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+					<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+				</svg>
+			</div>
+			<div class="flex-1 min-w-0">
+				<h3 class="font-heading text-body-sm text-white">Google Calendar</h3>
+				<p class="text-[11px] text-light/40 mt-0.5">
+					Sync events between your organization and Google Calendar.
+				</p>
 
-					{#if orgCalendar}
-						<div
-							class="mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-lg"
-						>
-							<div
-								class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-3 bg-green-500/10 rounded-lg"
-							>
-								<div class="min-w-0 flex-1">
-									<p
-										class="text-sm font-medium text-green-400"
-									>
-										Connected
-									</p>
-									<p class="text-light font-medium">
-										{orgCalendar.calendar_name ||
-											"Google Calendar"}
-									</p>
-									<p
-										class="text-xs text-light/50 truncate"
-										title={orgCalendar.calendar_id}
-									>
-										{orgCalendar.calendar_id}
-									</p>
-									<p class="text-xs text-light/40 mt-1">
-										Events sync both ways — create here or
-										in Google Calendar.
-									</p>
-									<a
-										href="https://calendar.google.com/calendar/u/0/r?cid={encodeURIComponent(
-											orgCalendar.calendar_id,
-										)}"
-										target="_blank"
-										rel="noopener noreferrer"
-										class="inline-flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 mt-2"
-									>
-										<svg
-											class="w-3.5 h-3.5"
-											viewBox="0 0 24 24"
-											fill="none"
-											stroke="currentColor"
-											stroke-width="2"
-										>
-											<path
-												d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
-											/>
-											<polyline points="15 3 21 3 21 9" />
-											<line
-												x1="10"
-												y1="14"
-												x2="21"
-												y2="3"
-											/>
-										</svg>
-										Open in Google Calendar
-									</a>
-								</div>
-								<Button
-									variant="danger"
-									size="sm"
-									onclick={disconnectOrgCalendar}
-									>Disconnect</Button
+				{#if orgCalendar}
+					<div class="mt-3 p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+						<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+							<div class="min-w-0 flex-1">
+								<p class="text-[11px] font-medium text-green-400">Connected</p>
+								<p class="text-body-sm text-white">{orgCalendar.calendar_name || "Google Calendar"}</p>
+								<p class="text-[10px] text-light/40 truncate" title={orgCalendar.calendar_id}>{orgCalendar.calendar_id}</p>
+								<p class="text-[10px] text-light/30 mt-1">Events sync both ways.</p>
+								<a
+									href="https://calendar.google.com/calendar/u/0/r?cid={encodeURIComponent(orgCalendar.calendar_id)}"
+									target="_blank"
+									rel="noopener noreferrer"
+									class="inline-flex items-center gap-1 text-[11px] text-blue-400 hover:text-blue-300 mt-1.5"
 								>
+									<span class="material-symbols-rounded" style="font-size: 14px;">open_in_new</span>
+									Open in Google Calendar
+								</a>
 							</div>
+							<Button variant="danger" size="sm" onclick={disconnectOrgCalendar}>Disconnect</Button>
 						</div>
-					{:else if !serviceAccountEmail}
-						<div
-							class="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg"
-						>
-							<p class="text-sm text-yellow-400 font-medium">
-								Setup required
-							</p>
-							<p class="text-xs text-light/50 mt-1">
-								A server administrator needs to configure the <code
-									class="bg-light/10 px-1 rounded"
-									>GOOGLE_SERVICE_ACCOUNT_KEY</code
-								> environment variable before calendars can be connected.
-							</p>
-						</div>
-					{:else}
-						<div class="mt-4">
-							<Button onclick={() => (showConnectModal = true)}
-								>Connect Google Calendar</Button
-							>
-						</div>
-					{/if}
-				</div>
+					</div>
+				{:else if !serviceAccountEmail}
+					<div class="mt-3 p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+						<p class="text-[11px] text-yellow-400 font-medium">Setup required</p>
+						<p class="text-[10px] text-light/40 mt-1">
+							A server administrator needs to configure the <code class="bg-light/10 px-1 rounded">GOOGLE_SERVICE_ACCOUNT_KEY</code> environment variable.
+						</p>
+					</div>
+				{:else}
+					<div class="mt-3">
+						<Button size="sm" onclick={() => (showConnectModal = true)}>Connect Google Calendar</Button>
+					</div>
+				{/if}
 			</div>
 		</div>
-	</Card>
+	</div>
 
-	<Card>
-		<div class="p-6 opacity-50">
-			<div class="flex items-start gap-4">
-				<div
-					class="w-12 h-12 bg-[#7289da] rounded-lg flex items-center justify-center"
-				>
-					<svg
-						class="w-7 h-7 text-white"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-					>
-						<path
-							d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"
-						/>
-					</svg>
-				</div>
-				<div class="flex-1">
-					<h3 class="text-lg font-semibold text-light">Discord</h3>
-					<p class="text-sm text-light/50 mt-1">
-						Get notifications in your Discord server.
-					</p>
-					<p class="text-xs text-light/40 mt-2">Coming soon</p>
-				</div>
+	<!-- Discord (coming soon) -->
+	<div class="bg-dark/30 border border-light/5 rounded-xl p-5 opacity-40">
+		<div class="flex items-start gap-4">
+			<div class="w-10 h-10 bg-[#5865F2] rounded-xl flex items-center justify-center shrink-0">
+				<span class="material-symbols-rounded text-white" style="font-size: 22px;">forum</span>
+			</div>
+			<div class="flex-1">
+				<h3 class="font-heading text-body-sm text-white">Discord</h3>
+				<p class="text-[11px] text-light/40 mt-0.5">Get notifications in your Discord server.</p>
+				<p class="text-[10px] text-light/30 mt-1">Coming soon</p>
 			</div>
 		</div>
-	</Card>
+	</div>
 
-	<Card>
-		<div class="p-6 opacity-50">
-			<div class="flex items-start gap-4">
-				<div
-					class="w-12 h-12 bg-[#4A154B] rounded-lg flex items-center justify-center"
-				>
-					<svg
-						class="w-7 h-7 text-white"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-					>
-						<path
-							d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
-						/>
-					</svg>
-				</div>
-				<div class="flex-1">
-					<h3 class="text-lg font-semibold text-light">Slack</h3>
-					<p class="text-sm text-light/50 mt-1">
-						Get notifications in your Slack workspace.
-					</p>
-					<p class="text-xs text-light/40 mt-2">Coming soon</p>
-				</div>
+	<!-- Slack (coming soon) -->
+	<div class="bg-dark/30 border border-light/5 rounded-xl p-5 opacity-40">
+		<div class="flex items-start gap-4">
+			<div class="w-10 h-10 bg-[#4A154B] rounded-xl flex items-center justify-center shrink-0">
+				<span class="material-symbols-rounded text-white" style="font-size: 22px;">tag</span>
+			</div>
+			<div class="flex-1">
+				<h3 class="font-heading text-body-sm text-white">Slack</h3>
+				<p class="text-[11px] text-light/40 mt-0.5">Get notifications in your Slack workspace.</p>
+				<p class="text-[10px] text-light/30 mt-1">Coming soon</p>
 			</div>
 		</div>
-	</Card>
+	</div>
 </div>
 
 <!-- Connect Calendar Modal -->
diff --git a/src/lib/components/settings/SettingsMembers.svelte b/src/lib/components/settings/SettingsMembers.svelte
index 7ffa104..b5a4d58 100644
--- a/src/lib/components/settings/SettingsMembers.svelte
+++ b/src/lib/components/settings/SettingsMembers.svelte
@@ -2,7 +2,6 @@
 	import {
 		Button,
 		Modal,
-		Card,
 		Input,
 		Select,
 		Avatar,
@@ -169,113 +168,97 @@
 	}
 </script>
 
-<div class="space-y-6">
+<div class="space-y-4 max-w-2xl">
 	<div class="flex items-center justify-between">
-		<h2 class="text-lg font-semibold text-light">
-			{m.settings_members_title({
-				count: String(members.length),
-			})}
-		</h2>
-		<Button onclick={() => (showInviteModal = true)}>
-			<svg
-				class="w-4 h-4 mr-2"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle
-					cx="9"
-					cy="7"
-					r="4"
-				/><line x1="19" y1="8" x2="19" y2="14" /><line
-					x1="22"
-					y1="11"
-					x2="16"
-					y2="11"
-				/>
-			</svg>
+		<div>
+			<h2 class="font-heading text-body text-white">
+				{m.settings_members_title({
+					count: String(members.length),
+				})}
+			</h2>
+		</div>
+		<Button size="sm" icon="person_add" onclick={() => (showInviteModal = true)}>
 			{m.settings_members_invite()}
 		</Button>
 	</div>
 
 	<!-- Pending Invites -->
 	{#if invites.length > 0}
-		<Card>
-			<div class="p-4">
-				<h3 class="text-sm font-medium text-light/70 mb-3">
-					{m.settings_members_pending()}
-				</h3>
-				<div class="space-y-2">
-					{#each invites as invite}
-						<div
-							class="flex items-center justify-between py-2 px-3 bg-light/5 rounded-lg"
-						>
-							<div>
-								<p class="text-light">{invite.email}</p>
-								<p class="text-xs text-light/40">
-									Invited as {invite.role} • Expires {new Date(
-										invite.expires_at,
-									).toLocaleDateString()}
-								</p>
-							</div>
-							<div class="flex items-center gap-2">
-								<Button
-									variant="tertiary"
-									size="sm"
-									onclick={() =>
-										navigator.clipboard.writeText(
-											`${window.location.origin}/invite/${invite.token}`,
-										)}
-									>{m.settings_members_copy_link()}</Button
-								>
-								<Button
-									variant="danger"
-									size="sm"
-									onclick={() => cancelInvite(invite.id)}
-									>Cancel</Button
-								>
-							</div>
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-4">
+			<h3 class="text-body-sm font-heading text-light/60 mb-3">
+				{m.settings_members_pending()}
+			</h3>
+			<div class="space-y-2">
+				{#each invites as invite}
+					<div
+						class="flex items-center justify-between py-2 px-3 bg-light/5 rounded-lg"
+					>
+						<div>
+							<p class="text-body-sm text-white">{invite.email}</p>
+							<p class="text-[11px] text-light/40">
+								Invited as {invite.role} • Expires {new Date(
+									invite.expires_at,
+								).toLocaleDateString()}
+							</p>
 						</div>
-					{/each}
-				</div>
+						<div class="flex items-center gap-1.5">
+							<button
+								type="button"
+								class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+								onclick={() =>
+									navigator.clipboard.writeText(
+										`${window.location.origin}/invite/${invite.token}`,
+									)}
+								title={m.settings_members_copy_link()}
+							>
+								<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">content_copy</span>
+							</button>
+							<button
+								type="button"
+								class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
+								onclick={() => cancelInvite(invite.id)}
+								title="Cancel invite"
+							>
+								<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">close</span>
+							</button>
+						</div>
+					</div>
+				{/each}
 			</div>
-		</Card>
+		</div>
 	{/if}
 
 	<!-- Members List -->
-	<Card>
-		<div class="divide-y divide-light/10">
+	<div class="bg-dark/30 border border-light/5 rounded-xl overflow-hidden">
+		<div class="divide-y divide-light/5">
 			{#each members as member}
 				{@const rawProfile = member.profiles}
 				{@const profile = Array.isArray(rawProfile)
 					? rawProfile[0]
 					: rawProfile}
 				<div
-					class="flex items-center justify-between p-4 hover:bg-light/5 transition-colors"
+					class="flex items-center justify-between px-4 py-3 hover:bg-light/5 transition-colors"
 				>
 					<div class="flex items-center gap-3">
-						<div
-							class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium"
-						>
-							{(profile?.full_name ||
-								profile?.email ||
-								"?")[0].toUpperCase()}
-						</div>
+						<Avatar
+							name={profile?.full_name || profile?.email || "?"}
+							src={profile?.avatar_url}
+							size="sm"
+						/>
 						<div>
-							<p class="text-light font-medium">
+							<p class="text-body-sm text-white">
 								{profile?.full_name ||
 									profile?.email ||
 									"Unknown User"}
 							</p>
-							<p class="text-sm text-light/50">
+							<p class="text-[11px] text-light/40">
 								{profile?.email || "No email"}
 							</p>
 						</div>
 					</div>
-					<div class="flex items-center gap-3">
+					<div class="flex items-center gap-2">
 						<span
-							class="px-2 py-1 text-xs rounded-full capitalize"
+							class="px-2 py-0.5 text-[10px] rounded-md capitalize font-body"
 							style="background-color: {roles.find(
 								(r) => r.name.toLowerCase() === member.role,
 							)?.color ?? '#6366f1'}20; color: {roles.find(
@@ -283,18 +266,20 @@
 							)?.color ?? '#6366f1'}">{member.role}</span
 						>
 						{#if member.user_id !== userId && member.role !== "owner"}
-							<Button
-								variant="tertiary"
-								size="sm"
+							<button
+								type="button"
+								class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
 								onclick={() => openMemberModal(member)}
-								>Edit</Button
+								title="Edit"
 							>
+								<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">edit</span>
+							</button>
 						{/if}
 					</div>
 				</div>
 			{/each}
 		</div>
-	</Card>
+	</div>
 </div>
 
 <!-- Invite Member Modal -->
diff --git a/src/lib/components/settings/SettingsRoles.svelte b/src/lib/components/settings/SettingsRoles.svelte
index 13115b6..4a775f7 100644
--- a/src/lib/components/settings/SettingsRoles.svelte
+++ b/src/lib/components/settings/SettingsRoles.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Modal, Card, Input } from "$lib/components/ui";
+	import { Button, Modal, Input } from "$lib/components/ui";
 	import { toasts } from "$lib/stores/toast.svelte";
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
@@ -188,86 +188,72 @@
 	}
 </script>
 
-<div class="space-y-6">
+<div class="space-y-4 max-w-2xl">
 	<div class="flex items-center justify-between">
 		<div>
-			<h2 class="text-lg font-semibold text-light">Roles</h2>
-			<p class="text-sm text-light/50">
+			<h2 class="font-heading text-body text-white">Roles</h2>
+			<p class="text-body-sm text-light/40 mt-0.5">
 				Create custom roles with specific permissions.
 			</p>
 		</div>
-		<Button onclick={() => openRoleModal()} icon="add">
+		<Button size="sm" onclick={() => openRoleModal()} icon="add">
 			Create Role
 		</Button>
 	</div>
 
-	<div class="grid gap-4">
+	<div class="flex flex-col gap-2">
 		{#each roles as role}
-			<Card>
-				<div class="p-4">
-					<div class="flex items-center justify-between mb-3">
-						<div class="flex items-center gap-3">
-							<div
-								class="w-3 h-3 rounded-full"
-								style="background-color: {role.color}"
-							></div>
-							<span class="font-medium text-light"
-								>{role.name}</span
-							>
-							{#if role.is_system}
-								<span
-									class="text-xs text-light/40 bg-light/10 px-2 py-0.5 rounded"
-									>System</span
-								>
-							{/if}
-							{#if role.is_default}
-								<span
-									class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded"
-									>Default</span
-								>
-							{/if}
-						</div>
-						<div class="flex items-center gap-2">
-							{#if !role.is_system || role.name !== "Owner"}
-								<Button
-									variant="tertiary"
-									size="sm"
-									onclick={() => openRoleModal(role)}
-									>Edit</Button
-								>
-							{/if}
-							{#if !role.is_system}
-								<Button
-									variant="danger"
-									size="sm"
-									onclick={() => deleteRole(role)}
-									>Delete</Button
-								>
-							{/if}
-						</div>
+			<div class="bg-dark/30 border border-light/5 rounded-xl px-4 py-3 hover:border-light/10 transition-colors">
+				<div class="flex items-center justify-between mb-2">
+					<div class="flex items-center gap-2">
+						<div
+							class="w-2.5 h-2.5 rounded-full shrink-0"
+							style="background-color: {role.color}"
+						></div>
+						<span class="text-body-sm font-medium text-white">{role.name}</span>
+						{#if role.is_system}
+							<span class="text-[10px] text-light/30 bg-light/5 px-1.5 py-0.5 rounded-md">System</span>
+						{/if}
+						{#if role.is_default}
+							<span class="text-[10px] text-primary bg-primary/10 px-1.5 py-0.5 rounded-md">Default</span>
+						{/if}
 					</div>
-					<div class="flex flex-wrap gap-1">
-						{#if role.permissions.includes("*")}
-							<span
-								class="text-xs bg-light/10 text-light/70 px-2 py-1 rounded"
-								>All Permissions</span
+					<div class="flex items-center gap-1.5">
+						{#if !role.is_system || role.name !== "Owner"}
+							<button
+								type="button"
+								class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+								onclick={() => openRoleModal(role)}
+								title="Edit"
 							>
-						{:else}
-							{#each role.permissions.slice(0, 6) as perm}
-								<span
-									class="text-xs bg-light/10 text-light/50 px-2 py-1 rounded"
-									>{perm}</span
-								>
-							{/each}
-							{#if role.permissions.length > 6}
-								<span class="text-xs text-light/40"
-									>+{role.permissions.length - 6} more</span
-								>
-							{/if}
+								<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">edit</span>
+							</button>
+						{/if}
+						{#if !role.is_system}
+							<button
+								type="button"
+								class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
+								onclick={() => deleteRole(role)}
+								title="Delete"
+							>
+								<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">delete</span>
+							</button>
 						{/if}
 					</div>
 				</div>
-			</Card>
+				<div class="flex flex-wrap gap-1">
+					{#if role.permissions.includes("*")}
+						<span class="text-[10px] bg-light/5 text-light/50 px-1.5 py-0.5 rounded-md">All Permissions</span>
+					{:else}
+						{#each role.permissions.slice(0, 6) as perm}
+							<span class="text-[10px] bg-light/5 text-light/40 px-1.5 py-0.5 rounded-md">{perm}</span>
+						{/each}
+						{#if role.permissions.length > 6}
+							<span class="text-[10px] text-light/30">+{role.permissions.length - 6} more</span>
+						{/if}
+					{/if}
+				</div>
+			</div>
 		{/each}
 	</div>
 </div>

From edc5f8af856255d1525635152e75b761215fa5e7 Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 11:39:51 +0200
Subject: [PATCH 08/10] feat: add event module pages (placeholders + full Team
 module) - 6 placeholder 'coming soon' pages: tasks, files, schedule, budget,
 guests, sponsors - Full Team module: add/remove members, change roles, role
 badges - Uses existing event_members DB table and API layer - i18n keys added
 for EN and ET (module placeholders + team) - svelte-check: 0 errors, vitest:
 112/112 passed

---
 messages/en.json                              |  17 +
 messages/et.json                              |  17 +
 .../events/[eventSlug]/budget/+page.svelte    |  32 ++
 .../events/[eventSlug]/files/+page.svelte     |  32 ++
 .../events/[eventSlug]/guests/+page.svelte    |  32 ++
 .../events/[eventSlug]/schedule/+page.svelte  |  32 ++
 .../events/[eventSlug]/sponsors/+page.svelte  |  32 ++
 .../events/[eventSlug]/tasks/+page.svelte     |  32 ++
 .../events/[eventSlug]/team/+page.svelte      | 490 ++++++++++++++++++
 9 files changed, 716 insertions(+)
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/budget/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/files/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/guests/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/schedule/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/sponsors/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/tasks/+page.svelte
 create mode 100644 src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte

diff --git a/messages/en.json b/messages/en.json
index f620aa8..191b81f 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -324,6 +324,23 @@
 	"events_mod_team_desc": "Team members and shift scheduling",
 	"events_mod_sponsors": "Sponsors",
 	"events_mod_sponsors_desc": "Sponsors, partners, and deliverables",
+	"module_coming_soon": "Coming Soon",
+	"module_coming_soon_desc": "This module is under development and will be available soon.",
+	"team_title": "Event Team",
+	"team_subtitle": "Manage team members and their roles for this event.",
+	"team_add_member": "Add Member",
+	"team_role_lead": "Lead",
+	"team_role_manager": "Manager",
+	"team_role_member": "Member",
+	"team_empty": "No team members assigned yet. Add members from your organization.",
+	"team_remove_confirm": "Remove {name} from this event's team?",
+	"team_remove_btn": "Remove",
+	"team_added": "{name} added to team",
+	"team_removed": "{name} removed from team",
+	"team_updated": "Role updated",
+	"team_select_member": "Select a member",
+	"team_select_role": "Select role",
+	"team_already_assigned": "Already on team",
 	"overview_subtitle": "Welcome back. Here's what's happening.",
 	"overview_stat_events": "Events",
 	"overview_upcoming_events": "Upcoming Events",
diff --git a/messages/et.json b/messages/et.json
index f206b28..79f59f6 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -324,6 +324,23 @@
 	"events_mod_team_desc": "Meeskonnaliikmed ja vahetuste planeerimine",
 	"events_mod_sponsors": "Sponsorid",
 	"events_mod_sponsors_desc": "Sponsorid, partnerid ja kohustused",
+	"module_coming_soon": "Tulekul",
+	"module_coming_soon_desc": "See moodul on arendamisel ja saab peagi kättesaadavaks.",
+	"team_title": "Ürituse meeskond",
+	"team_subtitle": "Halda meeskonnaliikmeid ja nende rolle selle ürituse jaoks.",
+	"team_add_member": "Lisa liige",
+	"team_role_lead": "Juht",
+	"team_role_manager": "Haldur",
+	"team_role_member": "Liige",
+	"team_empty": "Meeskonnaliikmeid pole veel määratud. Lisa liikmeid oma organisatsioonist.",
+	"team_remove_confirm": "Eemalda {name} selle ürituse meeskonnast?",
+	"team_remove_btn": "Eemalda",
+	"team_added": "{name} lisatud meeskonda",
+	"team_removed": "{name} eemaldatud meeskonnast",
+	"team_updated": "Roll uuendatud",
+	"team_select_member": "Vali liige",
+	"team_select_role": "Vali roll",
+	"team_already_assigned": "Juba meeskonnas",
 	"overview_subtitle": "Tere tagasi. Siin on ülevaade toimuvast.",
 	"overview_stat_events": "Üritused",
 	"overview_upcoming_events": "Tulevased üritused",
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/budget/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/budget/+page.svelte
new file mode 100644
index 0000000..7d948ce
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/budget/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_budget()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>account_balance_wallet</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_budget()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_budget_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/files/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/files/+page.svelte
new file mode 100644
index 0000000..88895a9
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/files/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_files()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>folder</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_files()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_files_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/guests/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/guests/+page.svelte
new file mode 100644
index 0000000..e0c7002
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/guests/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_guests()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>groups</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_guests()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_guests_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/schedule/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/schedule/+page.svelte
new file mode 100644
index 0000000..5f69922
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/schedule/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_schedule()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>calendar_today</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_schedule()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_schedule_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/sponsors/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/sponsors/+page.svelte
new file mode 100644
index 0000000..ec6994e
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/sponsors/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_sponsors()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>handshake</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_sponsors()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_sponsors_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/tasks/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/tasks/+page.svelte
new file mode 100644
index 0000000..d1509e6
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/tasks/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			event: { name: string; slug: string };
+		};
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_tasks()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center h-full text-light/40 p-6">
+	<span
+		class="material-symbols-rounded mb-4"
+		style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+		>task_alt</span
+	>
+	<h2 class="text-h3 font-heading text-white mb-2">{m.events_mod_tasks()}</h2>
+	<p class="text-body-sm text-light/30 text-center max-w-sm">
+		{m.events_mod_tasks_desc()}
+	</p>
+	<span
+		class="mt-4 text-[11px] text-light/20 bg-light/5 px-3 py-1 rounded-full"
+		>{m.module_coming_soon()}</span
+	>
+</div>
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
new file mode 100644
index 0000000..ce37cfb
--- /dev/null
+++ b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
@@ -0,0 +1,490 @@
+<script lang="ts">
+	import { Avatar, Button, Modal, Select } from "$lib/components/ui";
+	import { getContext } from "svelte";
+	import type { SupabaseClient } from "@supabase/supabase-js";
+	import type { Database } from "$lib/supabase/types";
+	import { toasts } from "$lib/stores/ui";
+	import type { Event, EventMember } from "$lib/api/events";
+	import * as m from "$lib/paraglide/messages";
+
+	interface OrgMember {
+		id: string;
+		user_id: string;
+		role: string;
+		profiles: {
+			id: string;
+			email: string;
+			full_name: string | null;
+			avatar_url: string | null;
+		} | null;
+	}
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			members: OrgMember[];
+			event: Event;
+			eventMembers: (EventMember & {
+				profile?: {
+					id: string;
+					email: string;
+					full_name: string | null;
+					avatar_url: string | null;
+				};
+			})[];
+		};
+	}
+
+	let { data }: Props = $props();
+
+	const supabase = getContext<SupabaseClient<Database>>("supabase");
+
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
+
+	// Local mutable copy of event members
+	let teamMembers = $state(data.eventMembers);
+
+	// Sync when data changes (e.g. after invalidation)
+	$effect(() => {
+		teamMembers = data.eventMembers;
+	});
+
+	// Add member modal
+	let showAddModal = $state(false);
+	let selectedUserId = $state("");
+	let selectedRole = $state<"lead" | "manager" | "member">("member");
+	let adding = $state(false);
+
+	// Remove confirmation
+	let memberToRemove = $state<(typeof teamMembers)[0] | null>(null);
+	let removing = $state(false);
+
+	// Edit role
+	let editingMember = $state<(typeof teamMembers)[0] | null>(null);
+	let editRole = $state<"lead" | "manager" | "member">("member");
+	let updatingRole = $state(false);
+
+	// Org members not yet on the team
+	const availableMembers = $derived(
+		data.members.filter(
+			(om) => !teamMembers.some((tm) => tm.user_id === om.user_id),
+		),
+	);
+
+	const roleOptions = $derived([
+		{ value: "lead", label: m.team_role_lead() },
+		{ value: "manager", label: m.team_role_manager() },
+		{ value: "member", label: m.team_role_member() },
+	]);
+
+	function getRoleColor(role: string): string {
+		const map: Record<string, string> = {
+			lead: "text-amber-400 bg-amber-400/10",
+			manager: "text-purple-400 bg-purple-400/10",
+			member: "text-light/50 bg-light/5",
+		};
+		return map[role] ?? "text-light/50 bg-light/5";
+	}
+
+	function getMemberName(member: (typeof teamMembers)[0]): string {
+		return member.profile?.full_name || member.profile?.email || "Unknown";
+	}
+
+	async function handleAdd() {
+		if (!selectedUserId) return;
+		adding = true;
+		try {
+			const { data: inserted, error } = await (supabase as any)
+				.from("event_members")
+				.upsert(
+					{
+						event_id: data.event.id,
+						user_id: selectedUserId,
+						role: selectedRole,
+					},
+					{ onConflict: "event_id,user_id" },
+				)
+				.select()
+				.single();
+
+			if (error) throw error;
+
+			// Find profile from org members
+			const orgMember = data.members.find(
+				(m) => m.user_id === selectedUserId,
+			);
+			const profile = orgMember?.profiles ?? undefined;
+
+			teamMembers = [
+				...teamMembers,
+				{ ...inserted, profile },
+			];
+
+			const name = profile?.full_name || profile?.email || "Member";
+			toasts.success(m.team_added({ name }));
+			showAddModal = false;
+			selectedUserId = "";
+			selectedRole = "member";
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to add member");
+		} finally {
+			adding = false;
+		}
+	}
+
+	async function handleRemove() {
+		if (!memberToRemove) return;
+		removing = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("event_members")
+				.delete()
+				.eq("event_id", data.event.id)
+				.eq("user_id", memberToRemove.user_id);
+
+			if (error) throw error;
+
+			const name = getMemberName(memberToRemove);
+			teamMembers = teamMembers.filter(
+				(m) => m.user_id !== memberToRemove!.user_id,
+			);
+			toasts.success(m.team_removed({ name }));
+			memberToRemove = null;
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to remove member");
+		} finally {
+			removing = false;
+		}
+	}
+
+	async function handleRoleUpdate() {
+		if (!editingMember) return;
+		updatingRole = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("event_members")
+				.update({ role: editRole })
+				.eq("event_id", data.event.id)
+				.eq("user_id", editingMember.user_id);
+
+			if (error) throw error;
+
+			teamMembers = teamMembers.map((m) =>
+				m.user_id === editingMember!.user_id
+					? { ...m, role: editRole }
+					: m,
+			);
+			toasts.success(m.team_updated());
+			editingMember = null;
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to update role");
+		} finally {
+			updatingRole = false;
+		}
+	}
+
+	function openEditRole(member: (typeof teamMembers)[0]) {
+		editingMember = member;
+		editRole = member.role;
+	}
+</script>
+
+<svelte:head>
+	<title>{m.events_mod_team()} | {data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col h-full overflow-auto p-6">
+	<div class="max-w-2xl w-full mx-auto flex flex-col gap-4">
+		<!-- Header -->
+		<div class="flex items-center justify-between">
+			<div>
+				<h2 class="font-heading text-body text-white">{m.team_title()}</h2>
+				<p class="text-body-sm text-light/40 mt-0.5">{m.team_subtitle()}</p>
+			</div>
+			{#if isEditor}
+				<Button
+					size="sm"
+					icon="person_add"
+					onclick={() => (showAddModal = true)}
+					disabled={availableMembers.length === 0}
+				>
+					{m.team_add_member()}
+				</Button>
+			{/if}
+		</div>
+
+		<!-- Team List -->
+		{#if teamMembers.length === 0}
+			<div
+				class="flex flex-col items-center justify-center py-16 text-light/40"
+			>
+				<span
+					class="material-symbols-rounded mb-4"
+					style="font-size: 56px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+					>badge</span
+				>
+				<p class="text-body-sm text-light/30 text-center max-w-sm">
+					{m.team_empty()}
+				</p>
+				{#if isEditor && availableMembers.length > 0}
+					<div class="mt-4">
+						<Button
+							size="sm"
+							icon="person_add"
+							onclick={() => (showAddModal = true)}
+						>
+							{m.team_add_member()}
+						</Button>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div
+				class="bg-dark/30 border border-light/5 rounded-xl overflow-hidden"
+			>
+				<div class="divide-y divide-light/5">
+					{#each teamMembers as member}
+						<div
+							class="flex items-center justify-between px-4 py-3 hover:bg-light/5 transition-colors"
+						>
+							<div class="flex items-center gap-3">
+								<Avatar
+									name={member.profile?.full_name ||
+										member.profile?.email ||
+										"?"}
+									src={member.profile?.avatar_url}
+									size="sm"
+								/>
+								<div>
+									<p class="text-body-sm text-white">
+										{member.profile?.full_name ||
+											member.profile?.email ||
+											"Unknown"}
+									</p>
+									<p class="text-[11px] text-light/40">
+										{member.profile?.email || ""}
+									</p>
+								</div>
+							</div>
+							<div class="flex items-center gap-2">
+								<span
+									class="px-2 py-0.5 text-[10px] rounded-md capitalize font-body {getRoleColor(
+										member.role,
+									)}">{member.role}</span
+								>
+								{#if isEditor}
+									<button
+										type="button"
+										class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+										onclick={() => openEditRole(member)}
+										title="Change role"
+									>
+										<span
+											class="material-symbols-rounded"
+											style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+											>swap_horiz</span
+										>
+									</button>
+									<button
+										type="button"
+										class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
+										onclick={() =>
+											(memberToRemove = member)}
+										title={m.team_remove_btn()}
+									>
+										<span
+											class="material-symbols-rounded"
+											style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+											>person_remove</span
+										>
+									</button>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Add Member Modal -->
+<Modal
+	isOpen={showAddModal}
+	onClose={() => (showAddModal = false)}
+	title={m.team_add_member()}
+>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1.5">
+			<label
+				for="team-member-select"
+				class="text-body-sm text-light/60 font-body"
+				>{m.team_select_member()}</label
+			>
+			<select
+				id="team-member-select"
+				bind:value={selectedUserId}
+				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+			>
+				<option value="" disabled>{m.team_select_member()}</option>
+				{#each availableMembers as om}
+					<option value={om.user_id}>
+						{om.profiles?.full_name || om.profiles?.email || om.user_id}
+					</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="flex flex-col gap-1.5">
+			<label
+				for="team-role-select"
+				class="text-body-sm text-light/60 font-body"
+				>{m.team_select_role()}</label
+			>
+			<select
+				id="team-role-select"
+				bind:value={selectedRole}
+				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+			>
+				{#each roleOptions as opt}
+					<option value={opt.value}>{opt.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
+			<button
+				type="button"
+				class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+				onclick={() => {
+					showAddModal = false;
+					selectedUserId = "";
+					selectedRole = "member";
+				}}
+			>
+				{m.btn_cancel()}
+			</button>
+			<button
+				type="button"
+				disabled={!selectedUserId || adding}
+				class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+				onclick={handleAdd}
+			>
+				{adding ? "..." : m.team_add_member()}
+			</button>
+		</div>
+	</div>
+</Modal>
+
+<!-- Edit Role Modal -->
+<Modal
+	isOpen={!!editingMember}
+	onClose={() => (editingMember = null)}
+	title="Change Role"
+>
+	{#if editingMember}
+		<div class="flex flex-col gap-4">
+			<div class="flex items-center gap-3 p-3 bg-dark/30 rounded-xl">
+				<Avatar
+					name={editingMember.profile?.full_name ||
+						editingMember.profile?.email ||
+						"?"}
+					src={editingMember.profile?.avatar_url}
+					size="sm"
+				/>
+				<div>
+					<p class="text-body-sm text-white">
+						{editingMember.profile?.full_name ||
+							editingMember.profile?.email ||
+							"Unknown"}
+					</p>
+					<p class="text-[11px] text-light/40 capitalize">
+						{editingMember.role}
+					</p>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-1.5">
+				<label
+					for="edit-role-select"
+					class="text-body-sm text-light/60 font-body"
+					>{m.team_select_role()}</label
+				>
+				<select
+					id="edit-role-select"
+					bind:value={editRole}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+				>
+					{#each roleOptions as opt}
+						<option value={opt.value}>{opt.label}</option>
+					{/each}
+				</select>
+			</div>
+
+			<div
+				class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
+			>
+				<button
+					type="button"
+					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+					onclick={() => (editingMember = null)}
+				>
+					{m.btn_cancel()}
+				</button>
+				<button
+					type="button"
+					disabled={updatingRole || editRole === editingMember.role}
+					class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					onclick={handleRoleUpdate}
+				>
+					{updatingRole ? "..." : m.btn_save()}
+				</button>
+			</div>
+		</div>
+	{/if}
+</Modal>
+
+<!-- Remove Confirmation -->
+{#if memberToRemove}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+		onkeydown={(e) => e.key === "Escape" && (memberToRemove = null)}
+		onclick={(e) => e.target === e.currentTarget && (memberToRemove = null)}
+		role="dialog"
+		aria-modal="true"
+		aria-label={m.team_remove_btn()}
+	>
+		<div
+			class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6"
+		>
+			<h2 class="text-h3 font-heading text-white mb-2">
+				{m.team_remove_btn()}
+			</h2>
+			<p class="text-body-sm text-light/50 mb-6">
+				{m.team_remove_confirm({ name: getMemberName(memberToRemove) })}
+			</p>
+			<div class="flex items-center justify-end gap-3">
+				<button
+					type="button"
+					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+					onclick={() => (memberToRemove = null)}
+				>
+					{m.btn_cancel()}
+				</button>
+				<button
+					type="button"
+					class="px-4 py-2 bg-error text-white rounded-xl text-body-sm hover:bg-error/80 transition-colors disabled:opacity-50"
+					disabled={removing}
+					onclick={handleRemove}
+				>
+					{removing ? "..." : m.team_remove_btn()}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

From 1f2484da3d2a716268f188b51208fb6f13383802 Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 12:47:34 +0200
Subject: [PATCH 09/10] feat: event team management with departments and roles
 - Migration 023: event_roles, event_departments, event_member_departments
 tables - Auto-seed default roles (Head Organizer, Team Lead, Organizer,
 Volunteer, Sponsor) and departments (Logistics, IT & Tech, Marketing,
 Finance, Program, Sponsorship, Design, Volunteers) on event creation - API:
 full CRUD for roles, departments, member-department assignments - Enhanced
 fetchEventMembers with role + department resolution - Team page: sidebar with
 department filter + role legend, list/dept view toggle, add/edit/remove
 members with role + multi-department + notes - i18n: 25 new keys in EN and ET
 for team management - svelte-check: 0 errors, vitest: 112/112 passed

---
 messages/en.json                              |  24 +
 messages/et.json                              |  24 +
 src/lib/api/events.ts                         | 281 +++++-
 .../events/[eventSlug]/+layout.server.ts      |  10 +-
 .../events/[eventSlug]/+layout.svelte         |  13 +-
 .../[orgSlug]/events/[eventSlug]/+page.svelte |  13 +-
 .../events/[eventSlug]/team/+page.svelte      | 936 ++++++++++++------
 .../migrations/023_event_team_management.sql  | 142 +++
 8 files changed, 1135 insertions(+), 308 deletions(-)
 create mode 100644 supabase/migrations/023_event_team_management.sql

diff --git a/messages/en.json b/messages/en.json
index 191b81f..2a07f22 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -341,6 +341,30 @@
 	"team_select_member": "Select a member",
 	"team_select_role": "Select role",
 	"team_already_assigned": "Already on team",
+	"team_departments": "Departments",
+	"team_roles": "Roles",
+	"team_all": "All",
+	"team_no_department": "Unassigned",
+	"team_add_department": "Add Department",
+	"team_add_role": "Add Role",
+	"team_edit_department": "Edit Department",
+	"team_edit_role": "Edit Role",
+	"team_dept_name": "Department name",
+	"team_role_name": "Role name",
+	"team_dept_created": "Department created",
+	"team_dept_updated": "Department updated",
+	"team_dept_deleted": "Department deleted",
+	"team_role_created": "Role created",
+	"team_role_updated": "Role updated",
+	"team_role_deleted": "Role deleted",
+	"team_dept_delete_confirm": "Delete department {name}? Members will be unassigned from it.",
+	"team_role_delete_confirm": "Delete role {name}? Members will lose this role assignment.",
+	"team_view_by_dept": "By department",
+	"team_view_list": "List view",
+	"team_member_count": "{count} members",
+	"team_assign_dept": "Assign departments",
+	"team_notes": "Notes",
+	"team_notes_placeholder": "Optional notes about this member...",
 	"overview_subtitle": "Welcome back. Here's what's happening.",
 	"overview_stat_events": "Events",
 	"overview_upcoming_events": "Upcoming Events",
diff --git a/messages/et.json b/messages/et.json
index 79f59f6..70e5ec9 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -341,6 +341,30 @@
 	"team_select_member": "Vali liige",
 	"team_select_role": "Vali roll",
 	"team_already_assigned": "Juba meeskonnas",
+	"team_departments": "Osakonnad",
+	"team_roles": "Rollid",
+	"team_all": "Kõik",
+	"team_no_department": "Määramata",
+	"team_add_department": "Lisa osakond",
+	"team_add_role": "Lisa roll",
+	"team_edit_department": "Muuda osakonda",
+	"team_edit_role": "Muuda rolli",
+	"team_dept_name": "Osakonna nimi",
+	"team_role_name": "Rolli nimi",
+	"team_dept_created": "Osakond loodud",
+	"team_dept_updated": "Osakond uuendatud",
+	"team_dept_deleted": "Osakond kustutatud",
+	"team_role_created": "Roll loodud",
+	"team_role_updated": "Roll uuendatud",
+	"team_role_deleted": "Roll kustutatud",
+	"team_dept_delete_confirm": "Kustuta osakond {name}? Liikmed eemaldatakse sellest.",
+	"team_role_delete_confirm": "Kustuta roll {name}? Liikmed kaotavad selle rolli.",
+	"team_view_by_dept": "Osakondade järgi",
+	"team_view_list": "Nimekirja vaade",
+	"team_member_count": "{count} liiget",
+	"team_assign_dept": "Määra osakonnad",
+	"team_notes": "Märkmed",
+	"team_notes_placeholder": "Valikulised märkmed selle liikme kohta...",
 	"overview_subtitle": "Tere tagasi. Siin on ülevaade toimuvast.",
 	"overview_stat_events": "Üritused",
 	"overview_upcoming_events": "Tulevased üritused",
diff --git a/src/lib/api/events.ts b/src/lib/api/events.ts
index ed5711f..a3fc8c5 100644
--- a/src/lib/api/events.ts
+++ b/src/lib/api/events.ts
@@ -27,9 +27,44 @@ export interface EventMember {
 	event_id: string;
 	user_id: string;
 	role: 'lead' | 'manager' | 'member';
+	role_id: string | null;
+	notes: string | null;
 	assigned_at: string;
 }
 
+export interface EventRole {
+	id: string;
+	event_id: string;
+	name: string;
+	color: string;
+	sort_order: number;
+	is_default: boolean;
+	created_at: string;
+}
+
+export interface EventDepartment {
+	id: string;
+	event_id: string;
+	name: string;
+	color: string;
+	description: string | null;
+	sort_order: number;
+	created_at: string;
+}
+
+export interface EventMemberDepartment {
+	id: string;
+	event_member_id: string;
+	department_id: string;
+	assigned_at: string;
+}
+
+export interface EventMemberWithDetails extends EventMember {
+	profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null };
+	event_role?: EventRole;
+	departments: EventDepartment[];
+}
+
 export interface EventWithCounts extends Event {
 	member_count: number;
 }
@@ -211,7 +246,7 @@ export async function deleteEvent(
 export async function fetchEventMembers(
 	supabase: SupabaseClient<Database>,
 	eventId: string
-): Promise<(EventMember & { profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null } })[]> {
+): Promise<EventMemberWithDetails[]> {
 	const { data: members, error } = await supabase
 		.from('event_members')
 		.select('*')
@@ -234,9 +269,42 @@ export async function fetchEventMembers(
 
 	const profileMap = Object.fromEntries((profiles ?? []).map(p => [p.id, p]));
 
+	// Fetch roles for this event
+	const { data: roles } = await (supabase as any)
+		.from('event_roles')
+		.select('*')
+		.eq('event_id', eventId);
+	const roleMap = Object.fromEntries((roles ?? []).map((r: any) => [r.id, r]));
+
+	// Fetch member-department assignments
+	const memberIds = members.map((m: any) => m.id);
+	const { data: memberDepts } = await (supabase as any)
+		.from('event_member_departments')
+		.select('*')
+		.in('event_member_id', memberIds);
+
+	// Fetch departments for this event
+	const { data: departments } = await (supabase as any)
+		.from('event_departments')
+		.select('*')
+		.eq('event_id', eventId);
+	const deptMap = Object.fromEntries((departments ?? []).map((d: any) => [d.id, d]));
+
+	// Build member-to-departments map
+	const memberDeptMap: Record<string, EventDepartment[]> = {};
+	for (const md of (memberDepts ?? [])) {
+		const dept = deptMap[(md as any).department_id];
+		if (dept) {
+			if (!memberDeptMap[(md as any).event_member_id]) memberDeptMap[(md as any).event_member_id] = [];
+			memberDeptMap[(md as any).event_member_id].push(dept as unknown as EventDepartment);
+		}
+	}
+
 	return members.map((m: any) => ({
 		...m,
 		profile: profileMap[m.user_id] ?? undefined,
+		event_role: m.role_id ? (roleMap[m.role_id] as unknown as EventRole) ?? undefined : undefined,
+		departments: memberDeptMap[m.id] ?? [],
 	}));
 }
 
@@ -244,11 +312,17 @@ export async function addEventMember(
 	supabase: SupabaseClient<Database>,
 	eventId: string,
 	userId: string,
-	role: 'lead' | 'manager' | 'member' = 'member'
+	params: { role?: 'lead' | 'manager' | 'member'; role_id?: string; notes?: string } = {}
 ): Promise<EventMember> {
-	const { data, error } = await supabase
+	const { data, error } = await (supabase as any)
 		.from('event_members')
-		.upsert({ event_id: eventId, user_id: userId, role }, { onConflict: 'event_id,user_id' })
+		.upsert({
+			event_id: eventId,
+			user_id: userId,
+			role: params.role ?? 'member',
+			role_id: params.role_id ?? null,
+			notes: params.notes ?? null,
+		}, { onConflict: 'event_id,user_id' })
 		.select()
 		.single();
 
@@ -275,3 +349,202 @@ export async function removeEventMember(
 		throw error;
 	}
 }
+
+// ============================================================
+// Event Roles
+// ============================================================
+
+export async function fetchEventRoles(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<EventRole[]> {
+	const { data, error } = await (supabase as any)
+		.from('event_roles')
+		.select('*')
+		.eq('event_id', eventId)
+		.order('sort_order');
+
+	if (error) {
+		log.error('fetchEventRoles failed', { error, data: { eventId } });
+		throw error;
+	}
+	return (data ?? []) as unknown as EventRole[];
+}
+
+export async function createEventRole(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	params: { name: string; color?: string; sort_order?: number }
+): Promise<EventRole> {
+	const { data, error } = await (supabase as any)
+		.from('event_roles')
+		.insert({
+			event_id: eventId,
+			name: params.name,
+			color: params.color ?? '#6366f1',
+			sort_order: params.sort_order ?? 0,
+		})
+		.select()
+		.single();
+
+	if (error) {
+		log.error('createEventRole failed', { error, data: { eventId, name: params.name } });
+		throw error;
+	}
+	return data as unknown as EventRole;
+}
+
+export async function updateEventRole(
+	supabase: SupabaseClient<Database>,
+	roleId: string,
+	params: Partial<Pick<EventRole, 'name' | 'color' | 'sort_order' | 'is_default'>>
+): Promise<EventRole> {
+	const { data, error } = await (supabase as any)
+		.from('event_roles')
+		.update(params)
+		.eq('id', roleId)
+		.select()
+		.single();
+
+	if (error) {
+		log.error('updateEventRole failed', { error, data: { roleId } });
+		throw error;
+	}
+	return data as unknown as EventRole;
+}
+
+export async function deleteEventRole(
+	supabase: SupabaseClient<Database>,
+	roleId: string
+): Promise<void> {
+	const { error } = await (supabase as any)
+		.from('event_roles')
+		.delete()
+		.eq('id', roleId);
+
+	if (error) {
+		log.error('deleteEventRole failed', { error, data: { roleId } });
+		throw error;
+	}
+}
+
+// ============================================================
+// Event Departments
+// ============================================================
+
+export async function fetchEventDepartments(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<EventDepartment[]> {
+	const { data, error } = await (supabase as any)
+		.from('event_departments')
+		.select('*')
+		.eq('event_id', eventId)
+		.order('sort_order');
+
+	if (error) {
+		log.error('fetchEventDepartments failed', { error, data: { eventId } });
+		throw error;
+	}
+	return (data ?? []) as unknown as EventDepartment[];
+}
+
+export async function createEventDepartment(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	params: { name: string; color?: string; description?: string; sort_order?: number }
+): Promise<EventDepartment> {
+	const { data, error } = await (supabase as any)
+		.from('event_departments')
+		.insert({
+			event_id: eventId,
+			name: params.name,
+			color: params.color ?? '#00A3E0',
+			description: params.description ?? null,
+			sort_order: params.sort_order ?? 0,
+		})
+		.select()
+		.single();
+
+	if (error) {
+		log.error('createEventDepartment failed', { error, data: { eventId, name: params.name } });
+		throw error;
+	}
+	return data as unknown as EventDepartment;
+}
+
+export async function updateEventDepartment(
+	supabase: SupabaseClient<Database>,
+	deptId: string,
+	params: Partial<Pick<EventDepartment, 'name' | 'color' | 'description' | 'sort_order'>>
+): Promise<EventDepartment> {
+	const { data, error } = await (supabase as any)
+		.from('event_departments')
+		.update(params)
+		.eq('id', deptId)
+		.select()
+		.single();
+
+	if (error) {
+		log.error('updateEventDepartment failed', { error, data: { deptId } });
+		throw error;
+	}
+	return data as unknown as EventDepartment;
+}
+
+export async function deleteEventDepartment(
+	supabase: SupabaseClient<Database>,
+	deptId: string
+): Promise<void> {
+	const { error } = await (supabase as any)
+		.from('event_departments')
+		.delete()
+		.eq('id', deptId);
+
+	if (error) {
+		log.error('deleteEventDepartment failed', { error, data: { deptId } });
+		throw error;
+	}
+}
+
+// ============================================================
+// Member-Department Assignments
+// ============================================================
+
+export async function assignMemberDepartment(
+	supabase: SupabaseClient<Database>,
+	eventMemberId: string,
+	departmentId: string
+): Promise<EventMemberDepartment> {
+	const { data, error } = await (supabase as any)
+		.from('event_member_departments')
+		.upsert(
+			{ event_member_id: eventMemberId, department_id: departmentId },
+			{ onConflict: 'event_member_id,department_id' }
+		)
+		.select()
+		.single();
+
+	if (error) {
+		log.error('assignMemberDepartment failed', { error, data: { eventMemberId, departmentId } });
+		throw error;
+	}
+	return data as unknown as EventMemberDepartment;
+}
+
+export async function unassignMemberDepartment(
+	supabase: SupabaseClient<Database>,
+	eventMemberId: string,
+	departmentId: string
+): Promise<void> {
+	const { error } = await (supabase as any)
+		.from('event_member_departments')
+		.delete()
+		.eq('event_member_id', eventMemberId)
+		.eq('department_id', departmentId);
+
+	if (error) {
+		log.error('unassignMemberDepartment failed', { error, data: { eventMemberId, departmentId } });
+		throw error;
+	}
+}
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts b/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
index 2b45be1..8d63c6e 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts
@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
-import { fetchEventBySlug, fetchEventMembers } from '$lib/api/events';
+import { fetchEventBySlug, fetchEventMembers, fetchEventRoles, fetchEventDepartments } from '$lib/api/events';
 import { createLogger } from '$lib/utils/logger';
 
 const log = createLogger('page.event-detail');
@@ -16,9 +16,13 @@ export const load: LayoutServerLoad = async ({ params, locals, parent }) => {
 		const event = await fetchEventBySlug(locals.supabase, orgId, params.eventSlug);
 		if (!event) error(404, 'Event not found');
 
-		const members = await fetchEventMembers(locals.supabase, event.id);
+		const [members, roles, departments] = await Promise.all([
+			fetchEventMembers(locals.supabase, event.id),
+			fetchEventRoles(locals.supabase, event.id),
+			fetchEventDepartments(locals.supabase, event.id),
+		]);
 
-		return { event, eventMembers: members };
+		return { event, eventMembers: members, eventRoles: roles, eventDepartments: departments };
 	} catch (e: any) {
 		if (e?.status === 404) throw e;
 		log.error('Failed to load event', { error: e, data: { orgId, eventSlug: params.eventSlug } });
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
index 702a6bb..1a56d39 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte
@@ -2,7 +2,7 @@
 	import { page } from "$app/stores";
 	import { Avatar } from "$lib/components/ui";
 	import type { Snippet } from "svelte";
-	import type { Event, EventMember } from "$lib/api/events";
+	import type { Event, EventMemberWithDetails, EventRole, EventDepartment } from "$lib/api/events";
 	import * as m from "$lib/paraglide/messages";
 
 	interface Props {
@@ -10,14 +10,9 @@
 			org: { id: string; name: string; slug: string };
 			userRole: string;
 			event: Event;
-			eventMembers: (EventMember & {
-				profile?: {
-					id: string;
-					email: string;
-					full_name: string | null;
-					avatar_url: string | null;
-				};
-			})[];
+			eventMembers: EventMemberWithDetails[];
+			eventRoles: EventRole[];
+			eventDepartments: EventDepartment[];
 		};
 		children: Snippet;
 	}
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
index 41bd06e..bb94357 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/+page.svelte
@@ -5,7 +5,7 @@
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
 	import { toasts } from "$lib/stores/ui";
-	import type { Event, EventMember } from "$lib/api/events";
+	import type { Event, EventMemberWithDetails, EventRole, EventDepartment } from "$lib/api/events";
 	import * as m from "$lib/paraglide/messages";
 
 	interface Props {
@@ -13,14 +13,9 @@
 			org: { id: string; name: string; slug: string };
 			userRole: string;
 			event: Event;
-			eventMembers: (EventMember & {
-				profile?: {
-					id: string;
-					email: string;
-					full_name: string | null;
-					avatar_url: string | null;
-				};
-			})[];
+			eventMembers: EventMemberWithDetails[];
+			eventRoles: EventRole[];
+			eventDepartments: EventDepartment[];
 		};
 	}
 
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
index ce37cfb..175a09b 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
-	import { Avatar, Button, Modal, Select } from "$lib/components/ui";
+	import { Avatar, Button, Modal } from "$lib/components/ui";
 	import { getContext } from "svelte";
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import type { Database } from "$lib/supabase/types";
 	import { toasts } from "$lib/stores/ui";
-	import type { Event, EventMember } from "$lib/api/events";
+	import type {
+		Event,
+		EventMemberWithDetails,
+		EventRole,
+		EventDepartment,
+	} from "$lib/api/events";
 	import * as m from "$lib/paraglide/messages";
 
 	interface OrgMember {
@@ -25,14 +30,9 @@
 			userRole: string;
 			members: OrgMember[];
 			event: Event;
-			eventMembers: (EventMember & {
-				profile?: {
-					id: string;
-					email: string;
-					full_name: string | null;
-					avatar_url: string | null;
-				};
-			})[];
+			eventMembers: EventMemberWithDetails[];
+			eventRoles: EventRole[];
+			eventDepartments: EventDepartment[];
 		};
 	}
 
@@ -44,28 +44,44 @@
 		["owner", "admin", "editor"].includes(data.userRole),
 	);
 
-	// Local mutable copy of event members
-	let teamMembers = $state(data.eventMembers);
+	// Local mutable state
+	let teamMembers = $state<EventMemberWithDetails[]>(data.eventMembers);
+	let roles = $state<EventRole[]>(data.eventRoles);
+	let departments = $state<EventDepartment[]>(data.eventDepartments);
 
-	// Sync when data changes (e.g. after invalidation)
 	$effect(() => {
 		teamMembers = data.eventMembers;
+		roles = data.eventRoles;
+		departments = data.eventDepartments;
 	});
 
-	// Add member modal
-	let showAddModal = $state(false);
-	let selectedUserId = $state("");
-	let selectedRole = $state<"lead" | "manager" | "member">("member");
-	let adding = $state(false);
+	// View mode
+	let viewMode = $state<"list" | "dept">("list");
+	let filterDeptId = $state<string | null>(null);
 
-	// Remove confirmation
-	let memberToRemove = $state<(typeof teamMembers)[0] | null>(null);
-	let removing = $state(false);
+	// Filtered members
+	const filteredMembers = $derived(() => {
+		if (!filterDeptId) return teamMembers;
+		if (filterDeptId === "__unassigned__")
+			return teamMembers.filter((tm) => tm.departments.length === 0);
+		return teamMembers.filter((tm) =>
+			tm.departments.some((d) => d.id === filterDeptId),
+		);
+	});
 
-	// Edit role
-	let editingMember = $state<(typeof teamMembers)[0] | null>(null);
-	let editRole = $state<"lead" | "manager" | "member">("member");
-	let updatingRole = $state(false);
+	// Group by department for dept view
+	const membersByDept = $derived(() => {
+		const groups: { dept: EventDepartment | null; members: EventMemberWithDetails[] }[] = [];
+		for (const dept of departments) {
+			const deptMembers = teamMembers.filter((tm) =>
+				tm.departments.some((d) => d.id === dept.id),
+			);
+			if (deptMembers.length > 0) groups.push({ dept, members: deptMembers });
+		}
+		const unassigned = teamMembers.filter((tm) => tm.departments.length === 0);
+		if (unassigned.length > 0) groups.push({ dept: null, members: unassigned });
+		return groups;
+	});
 
 	// Org members not yet on the team
 	const availableMembers = $derived(
@@ -74,25 +90,49 @@
 		),
 	);
 
-	const roleOptions = $derived([
-		{ value: "lead", label: m.team_role_lead() },
-		{ value: "manager", label: m.team_role_manager() },
-		{ value: "member", label: m.team_role_member() },
-	]);
+	// ---- Add member modal ----
+	let showAddModal = $state(false);
+	let selectedUserId = $state("");
+	let selectedRoleId = $state("");
+	let selectedDeptIds = $state<string[]>([]);
+	let addNotes = $state("");
+	let adding = $state(false);
 
-	function getRoleColor(role: string): string {
-		const map: Record<string, string> = {
-			lead: "text-amber-400 bg-amber-400/10",
-			manager: "text-purple-400 bg-purple-400/10",
-			member: "text-light/50 bg-light/5",
-		};
-		return map[role] ?? "text-light/50 bg-light/5";
-	}
+	// ---- Edit member modal ----
+	let editingMember = $state<EventMemberWithDetails | null>(null);
+	let editRoleId = $state("");
+	let editDeptIds = $state<string[]>([]);
+	let editNotes = $state("");
+	let updatingMember = $state(false);
 
-	function getMemberName(member: (typeof teamMembers)[0]): string {
+	// ---- Remove confirmation ----
+	let memberToRemove = $state<EventMemberWithDetails | null>(null);
+	let removing = $state(false);
+
+	// ---- Department/Role management ----
+	let showDeptModal = $state(false);
+	let editingDept = $state<EventDepartment | null>(null);
+	let deptName = $state("");
+	let deptColor = $state("#00A3E0");
+	let savingDept = $state(false);
+
+	let showRoleModal = $state(false);
+	let editingRole = $state<EventRole | null>(null);
+	let roleName = $state("");
+	let roleColor = $state("#6366f1");
+	let savingRole = $state(false);
+
+	const presetColors = [
+		"#00A3E0", "#8B5CF6", "#EC4899", "#F59E0B",
+		"#10B981", "#EF4444", "#6366F1", "#14B8A6",
+		"#F97316", "#3B82F6",
+	];
+
+	function getMemberName(member: EventMemberWithDetails): string {
 		return member.profile?.full_name || member.profile?.email || "Unknown";
 	}
 
+	// ---- CRUD: Add member ----
 	async function handleAdd() {
 		if (!selectedUserId) return;
 		adding = true;
@@ -103,31 +143,48 @@
 					{
 						event_id: data.event.id,
 						user_id: selectedUserId,
-						role: selectedRole,
+						role: "member",
+						role_id: selectedRoleId || null,
+						notes: addNotes.trim() || null,
 					},
 					{ onConflict: "event_id,user_id" },
 				)
 				.select()
 				.single();
-
 			if (error) throw error;
 
-			// Find profile from org members
-			const orgMember = data.members.find(
-				(m) => m.user_id === selectedUserId,
-			);
+			// Assign departments
+			for (const deptId of selectedDeptIds) {
+				await (supabase as any)
+					.from("event_member_departments")
+					.upsert(
+						{ event_member_id: inserted.id, department_id: deptId },
+						{ onConflict: "event_member_id,department_id" },
+					);
+			}
+
+			const orgMember = data.members.find((om) => om.user_id === selectedUserId);
 			const profile = orgMember?.profiles ?? undefined;
+			const assignedDepts = departments.filter((d) => selectedDeptIds.includes(d.id));
+			const assignedRole = roles.find((r) => r.id === selectedRoleId);
 
 			teamMembers = [
 				...teamMembers,
-				{ ...inserted, profile },
+				{
+					...inserted,
+					profile,
+					event_role: assignedRole,
+					departments: assignedDepts,
+				},
 			];
 
 			const name = profile?.full_name || profile?.email || "Member";
 			toasts.success(m.team_added({ name }));
 			showAddModal = false;
 			selectedUserId = "";
-			selectedRole = "member";
+			selectedRoleId = "";
+			selectedDeptIds = [];
+			addNotes = "";
 		} catch (e: any) {
 			toasts.error(e.message || "Failed to add member");
 		} finally {
@@ -135,6 +192,74 @@
 		}
 	}
 
+	// ---- CRUD: Edit member ----
+	function openEditMember(member: EventMemberWithDetails) {
+		editingMember = member;
+		editRoleId = member.role_id ?? "";
+		editDeptIds = member.departments.map((d) => d.id);
+		editNotes = member.notes ?? "";
+	}
+
+	async function handleEditSave() {
+		if (!editingMember) return;
+		updatingMember = true;
+		try {
+			// Update member record
+			const { error } = await (supabase as any)
+				.from("event_members")
+				.update({
+					role_id: editRoleId || null,
+					notes: editNotes.trim() || null,
+				})
+				.eq("id", editingMember.id);
+			if (error) throw error;
+
+			// Sync departments: remove old, add new
+			const oldDeptIds = editingMember.departments.map((d) => d.id);
+			const toRemove = oldDeptIds.filter((id) => !editDeptIds.includes(id));
+			const toAdd = editDeptIds.filter((id) => !oldDeptIds.includes(id));
+
+			for (const deptId of toRemove) {
+				await (supabase as any)
+					.from("event_member_departments")
+					.delete()
+					.eq("event_member_id", editingMember.id)
+					.eq("department_id", deptId);
+			}
+			for (const deptId of toAdd) {
+				await (supabase as any)
+					.from("event_member_departments")
+					.upsert(
+						{ event_member_id: editingMember.id, department_id: deptId },
+						{ onConflict: "event_member_id,department_id" },
+					);
+			}
+
+			// Update local state
+			const updatedRole = roles.find((r) => r.id === editRoleId);
+			const updatedDepts = departments.filter((d) => editDeptIds.includes(d.id));
+			teamMembers = teamMembers.map((tm) =>
+				tm.id === editingMember!.id
+					? {
+							...tm,
+							role_id: editRoleId || null,
+							event_role: updatedRole,
+							departments: updatedDepts,
+							notes: editNotes.trim() || null,
+						}
+					: tm,
+			);
+
+			toasts.success(m.team_updated());
+			editingMember = null;
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to update member");
+		} finally {
+			updatingMember = false;
+		}
+	}
+
+	// ---- CRUD: Remove member ----
 	async function handleRemove() {
 		if (!memberToRemove) return;
 		removing = true;
@@ -142,15 +267,11 @@
 			const { error } = await (supabase as any)
 				.from("event_members")
 				.delete()
-				.eq("event_id", data.event.id)
-				.eq("user_id", memberToRemove.user_id);
-
+				.eq("id", memberToRemove.id);
 			if (error) throw error;
 
 			const name = getMemberName(memberToRemove);
-			teamMembers = teamMembers.filter(
-				(m) => m.user_id !== memberToRemove!.user_id,
-			);
+			teamMembers = teamMembers.filter((tm) => tm.id !== memberToRemove!.id);
 			toasts.success(m.team_removed({ name }));
 			memberToRemove = null;
 		} catch (e: any) {
@@ -160,35 +281,141 @@
 		}
 	}
 
-	async function handleRoleUpdate() {
-		if (!editingMember) return;
-		updatingRole = true;
+	// ---- CRUD: Departments ----
+	function openDeptModal(dept?: EventDepartment) {
+		editingDept = dept ?? null;
+		deptName = dept?.name ?? "";
+		deptColor = dept?.color ?? "#00A3E0";
+		showDeptModal = true;
+	}
+
+	async function handleSaveDept() {
+		if (!deptName.trim()) return;
+		savingDept = true;
 		try {
-			const { error } = await (supabase as any)
-				.from("event_members")
-				.update({ role: editRole })
-				.eq("event_id", data.event.id)
-				.eq("user_id", editingMember.user_id);
-
-			if (error) throw error;
-
-			teamMembers = teamMembers.map((m) =>
-				m.user_id === editingMember!.user_id
-					? { ...m, role: editRole }
-					: m,
-			);
-			toasts.success(m.team_updated());
-			editingMember = null;
+			if (editingDept) {
+				const { data: updated, error } = await (supabase as any)
+					.from("event_departments")
+					.update({ name: deptName.trim(), color: deptColor })
+					.eq("id", editingDept.id)
+					.select()
+					.single();
+				if (error) throw error;
+				departments = departments.map((d) =>
+					d.id === editingDept!.id ? updated : d,
+				);
+				toasts.success(m.team_dept_updated());
+			} else {
+				const { data: created, error } = await (supabase as any)
+					.from("event_departments")
+					.insert({
+						event_id: data.event.id,
+						name: deptName.trim(),
+						color: deptColor,
+						sort_order: departments.length,
+					})
+					.select()
+					.single();
+				if (error) throw error;
+				departments = [...departments, created];
+				toasts.success(m.team_dept_created());
+			}
+			showDeptModal = false;
 		} catch (e: any) {
-			toasts.error(e.message || "Failed to update role");
+			toasts.error(e.message || "Failed to save department");
 		} finally {
-			updatingRole = false;
+			savingDept = false;
 		}
 	}
 
-	function openEditRole(member: (typeof teamMembers)[0]) {
-		editingMember = member;
-		editRole = member.role;
+	async function handleDeleteDept(dept: EventDepartment) {
+		try {
+			const { error } = await (supabase as any)
+				.from("event_departments")
+				.delete()
+				.eq("id", dept.id);
+			if (error) throw error;
+			departments = departments.filter((d) => d.id !== dept.id);
+			// Remove from members' local state
+			teamMembers = teamMembers.map((tm) => ({
+				...tm,
+				departments: tm.departments.filter((d) => d.id !== dept.id),
+			}));
+			toasts.success(m.team_dept_deleted());
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to delete department");
+		}
+	}
+
+	// ---- CRUD: Roles ----
+	function openRoleModal(role?: EventRole) {
+		editingRole = role ?? null;
+		roleName = role?.name ?? "";
+		roleColor = role?.color ?? "#6366f1";
+		showRoleModal = true;
+	}
+
+	async function handleSaveRole() {
+		if (!roleName.trim()) return;
+		savingRole = true;
+		try {
+			if (editingRole) {
+				const { data: updated, error } = await (supabase as any)
+					.from("event_roles")
+					.update({ name: roleName.trim(), color: roleColor })
+					.eq("id", editingRole.id)
+					.select()
+					.single();
+				if (error) throw error;
+				roles = roles.map((r) =>
+					r.id === editingRole!.id ? updated : r,
+				);
+				toasts.success(m.team_role_updated());
+			} else {
+				const { data: created, error } = await (supabase as any)
+					.from("event_roles")
+					.insert({
+						event_id: data.event.id,
+						name: roleName.trim(),
+						color: roleColor,
+						sort_order: roles.length,
+					})
+					.select()
+					.single();
+				if (error) throw error;
+				roles = [...roles, created];
+				toasts.success(m.team_role_created());
+			}
+			showRoleModal = false;
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to save role");
+		} finally {
+			savingRole = false;
+		}
+	}
+
+	async function handleDeleteRole(role: EventRole) {
+		try {
+			const { error } = await (supabase as any)
+				.from("event_roles")
+				.delete()
+				.eq("id", role.id);
+			if (error) throw error;
+			roles = roles.filter((r) => r.id !== role.id);
+			// Clear role from members' local state
+			teamMembers = teamMembers.map((tm) =>
+				tm.role_id === role.id
+					? { ...tm, role_id: null, event_role: undefined }
+					: tm,
+			);
+			toasts.success(m.team_role_deleted());
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to delete role");
+		}
+	}
+
+	function toggleDeptSelection(arr: string[], id: string): string[] {
+		return arr.includes(id) ? arr.filter((x) => x !== id) : [...arr, id];
 	}
 </script>
 
@@ -196,15 +423,42 @@
 	<title>{m.events_mod_team()} | {data.event.name} | {data.org.name}</title>
 </svelte:head>
 
-<div class="flex flex-col h-full overflow-auto p-6">
-	<div class="max-w-2xl w-full mx-auto flex flex-col gap-4">
-		<!-- Header -->
-		<div class="flex items-center justify-between">
+<div class="flex flex-col h-full overflow-auto">
+	<!-- Header toolbar -->
+	<div class="flex items-center justify-between px-6 py-3 border-b border-light/5 shrink-0">
+		<div class="flex items-center gap-4">
 			<div>
 				<h2 class="font-heading text-body text-white">{m.team_title()}</h2>
-				<p class="text-body-sm text-light/40 mt-0.5">{m.team_subtitle()}</p>
+				<p class="text-[11px] text-light/40">{m.team_member_count({ count: String(teamMembers.length) })}</p>
 			</div>
+			<!-- View toggle -->
+			<div class="flex items-center bg-dark/50 rounded-lg p-0.5">
+				<button
+					type="button"
+					class="flex items-center gap-1 px-2.5 py-1 rounded-md text-[11px] transition-colors {viewMode === 'list' ? 'bg-primary text-background' : 'text-light/50 hover:text-white'}"
+					onclick={() => (viewMode = "list")}
+				>
+					<span class="material-symbols-rounded" style="font-size: 14px;">list</span>
+					{m.team_view_list()}
+				</button>
+				<button
+					type="button"
+					class="flex items-center gap-1 px-2.5 py-1 rounded-md text-[11px] transition-colors {viewMode === 'dept' ? 'bg-primary text-background' : 'text-light/50 hover:text-white'}"
+					onclick={() => (viewMode = "dept")}
+				>
+					<span class="material-symbols-rounded" style="font-size: 14px;">account_tree</span>
+					{m.team_view_by_dept()}
+				</button>
+			</div>
+		</div>
+		<div class="flex items-center gap-2">
 			{#if isEditor}
+				<Button size="sm" variant="secondary" icon="domain" onclick={() => openDeptModal()}>
+					{m.team_add_department()}
+				</Button>
+				<Button size="sm" variant="secondary" icon="badge" onclick={() => openRoleModal()}>
+					{m.team_add_role()}
+				</Button>
 				<Button
 					size="sm"
 					icon="person_add"
@@ -215,238 +469,371 @@
 				</Button>
 			{/if}
 		</div>
+	</div>
 
-		<!-- Team List -->
-		{#if teamMembers.length === 0}
-			<div
-				class="flex flex-col items-center justify-center py-16 text-light/40"
-			>
-				<span
-					class="material-symbols-rounded mb-4"
-					style="font-size: 56px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
-					>badge</span
-				>
-				<p class="text-body-sm text-light/30 text-center max-w-sm">
-					{m.team_empty()}
-				</p>
-				{#if isEditor && availableMembers.length > 0}
-					<div class="mt-4">
-						<Button
-							size="sm"
-							icon="person_add"
-							onclick={() => (showAddModal = true)}
-						>
-							{m.team_add_member()}
-						</Button>
-					</div>
-				{/if}
-			</div>
-		{:else}
-			<div
-				class="bg-dark/30 border border-light/5 rounded-xl overflow-hidden"
-			>
-				<div class="divide-y divide-light/5">
-					{#each teamMembers as member}
-						<div
-							class="flex items-center justify-between px-4 py-3 hover:bg-light/5 transition-colors"
-						>
-							<div class="flex items-center gap-3">
-								<Avatar
-									name={member.profile?.full_name ||
-										member.profile?.email ||
-										"?"}
-									src={member.profile?.avatar_url}
-									size="sm"
-								/>
-								<div>
-									<p class="text-body-sm text-white">
-										{member.profile?.full_name ||
-											member.profile?.email ||
-											"Unknown"}
-									</p>
-									<p class="text-[11px] text-light/40">
-										{member.profile?.email || ""}
-									</p>
-								</div>
-							</div>
-							<div class="flex items-center gap-2">
-								<span
-									class="px-2 py-0.5 text-[10px] rounded-md capitalize font-body {getRoleColor(
-										member.role,
-									)}">{member.role}</span
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Sidebar: Departments & Roles -->
+		<aside class="w-52 shrink-0 border-r border-light/5 overflow-auto p-3 flex flex-col gap-4">
+			<!-- Departments -->
+			<div>
+				<p class="text-[10px] text-light/30 uppercase tracking-wider font-body mb-2 px-1">{m.team_departments()}</p>
+				<div class="flex flex-col gap-0.5">
+					<button
+						type="button"
+						class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[12px] transition-colors {filterDeptId === null ? 'bg-primary text-background' : 'text-light/60 hover:text-white hover:bg-dark/50'}"
+						onclick={() => (filterDeptId = null)}
+					>
+						<span class="material-symbols-rounded" style="font-size: 16px;">apps</span>
+						{m.team_all()}
+						<span class="ml-auto text-[10px] opacity-60">{teamMembers.length}</span>
+					</button>
+					{#each departments as dept}
+						<div class="group flex items-center">
+							<button
+								type="button"
+								class="flex-1 flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[12px] transition-colors {filterDeptId === dept.id ? 'bg-primary text-background' : 'text-light/60 hover:text-white hover:bg-dark/50'}"
+								onclick={() => (filterDeptId = dept.id)}
+							>
+								<div class="w-2 h-2 rounded-full shrink-0" style="background-color: {dept.color}"></div>
+								<span class="truncate">{dept.name}</span>
+								<span class="ml-auto text-[10px] opacity-60">{teamMembers.filter((tm) => tm.departments.some((d) => d.id === dept.id)).length}</span>
+							</button>
+							{#if isEditor}
+								<button
+									type="button"
+									class="p-1 text-light/20 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+									onclick={() => openDeptModal(dept)}
 								>
-								{#if isEditor}
-									<button
-										type="button"
-										class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
-										onclick={() => openEditRole(member)}
-										title="Change role"
-									>
-										<span
-											class="material-symbols-rounded"
-											style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
-											>swap_horiz</span
-										>
-									</button>
-									<button
-										type="button"
-										class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
-										onclick={() =>
-											(memberToRemove = member)}
-										title={m.team_remove_btn()}
-									>
-										<span
-											class="material-symbols-rounded"
-											style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
-											>person_remove</span
-										>
-									</button>
+									<span class="material-symbols-rounded" style="font-size: 14px;">edit</span>
+								</button>
+							{/if}
+						</div>
+					{/each}
+					<button
+						type="button"
+						class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[12px] transition-colors {filterDeptId === '__unassigned__' ? 'bg-primary text-background' : 'text-light/40 hover:text-white hover:bg-dark/50'}"
+						onclick={() => (filterDeptId = "__unassigned__")}
+					>
+						<span class="material-symbols-rounded" style="font-size: 16px;">help_outline</span>
+						{m.team_no_department()}
+						<span class="ml-auto text-[10px] opacity-60">{teamMembers.filter((tm) => tm.departments.length === 0).length}</span>
+					</button>
+				</div>
+			</div>
+
+			<!-- Roles legend -->
+			<div>
+				<p class="text-[10px] text-light/30 uppercase tracking-wider font-body mb-2 px-1">{m.team_roles()}</p>
+				<div class="flex flex-col gap-0.5">
+					{#each roles as role}
+						<div class="group flex items-center">
+							<div class="flex-1 flex items-center gap-2 px-2.5 py-1.5 text-[12px] text-light/50">
+								<div class="w-2 h-2 rounded-full shrink-0" style="background-color: {role.color}"></div>
+								<span class="truncate">{role.name}</span>
+								{#if role.is_default}
+									<span class="text-[9px] text-primary bg-primary/10 px-1 rounded">default</span>
 								{/if}
 							</div>
+							{#if isEditor}
+								<button
+									type="button"
+									class="p-1 text-light/20 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+									onclick={() => openRoleModal(role)}
+								>
+									<span class="material-symbols-rounded" style="font-size: 14px;">edit</span>
+								</button>
+							{/if}
 						</div>
 					{/each}
 				</div>
 			</div>
-		{/if}
+		</aside>
+
+		<!-- Main content -->
+		<div class="flex-1 overflow-auto p-6">
+			{#if teamMembers.length === 0}
+				<div class="flex flex-col items-center justify-center h-full text-light/40">
+					<span class="material-symbols-rounded mb-4" style="font-size: 56px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">badge</span>
+					<p class="text-body-sm text-light/30 text-center max-w-sm">{m.team_empty()}</p>
+					{#if isEditor && availableMembers.length > 0}
+						<div class="mt-4">
+							<Button size="sm" icon="person_add" onclick={() => (showAddModal = true)}>{m.team_add_member()}</Button>
+						</div>
+					{/if}
+				</div>
+			{:else if viewMode === "dept"}
+				<!-- Department grouped view -->
+				<div class="flex flex-col gap-6">
+					{#each membersByDept() as group}
+						<div>
+							<div class="flex items-center gap-2 mb-2">
+								{#if group.dept}
+									<div class="w-2.5 h-2.5 rounded-full" style="background-color: {group.dept.color}"></div>
+									<h3 class="text-body-sm font-heading text-white">{group.dept.name}</h3>
+								{:else}
+									<span class="material-symbols-rounded text-light/30" style="font-size: 16px;">help_outline</span>
+									<h3 class="text-body-sm font-heading text-light/40">{m.team_no_department()}</h3>
+								{/if}
+								<span class="text-[10px] text-light/30">{group.members.length}</span>
+							</div>
+							<div class="bg-dark/30 border border-light/5 rounded-xl overflow-hidden">
+								<div class="divide-y divide-light/5">
+									{#each group.members as member}
+										{@render memberRow(member)}
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<!-- Flat list view -->
+				<div class="bg-dark/30 border border-light/5 rounded-xl overflow-hidden">
+					<div class="divide-y divide-light/5">
+						{#each filteredMembers() as member}
+							{@render memberRow(member)}
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
 	</div>
 </div>
 
+{#snippet memberRow(member: EventMemberWithDetails)}
+	<div class="flex items-center justify-between px-4 py-3 hover:bg-light/5 transition-colors">
+		<div class="flex items-center gap-3 min-w-0">
+			<Avatar
+				name={member.profile?.full_name || member.profile?.email || "?"}
+				src={member.profile?.avatar_url}
+				size="sm"
+			/>
+			<div class="min-w-0">
+				<p class="text-body-sm text-white truncate">
+					{member.profile?.full_name || member.profile?.email || "Unknown"}
+				</p>
+				<div class="flex items-center gap-1.5 flex-wrap mt-0.5">
+					{#if member.event_role}
+						<span
+							class="px-1.5 py-0.5 text-[10px] rounded-md font-body"
+							style="background-color: {member.event_role.color}20; color: {member.event_role.color}"
+						>{member.event_role.name}</span>
+					{/if}
+					{#each member.departments as dept}
+						<span class="flex items-center gap-0.5 text-[10px] text-light/40">
+							<span class="w-1.5 h-1.5 rounded-full inline-block" style="background-color: {dept.color}"></span>
+							{dept.name}
+						</span>
+					{/each}
+				</div>
+			</div>
+		</div>
+		{#if isEditor}
+			<div class="flex items-center gap-1 shrink-0 ml-2">
+				<button
+					type="button"
+					class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors"
+					onclick={() => openEditMember(member)}
+					title="Edit"
+				>
+					<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">edit</span>
+				</button>
+				<button
+					type="button"
+					class="p-1.5 text-light/40 hover:text-error hover:bg-error/10 rounded-lg transition-colors"
+					onclick={() => (memberToRemove = member)}
+					title={m.team_remove_btn()}
+				>
+					<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">person_remove</span>
+				</button>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
 <!-- Add Member Modal -->
-<Modal
-	isOpen={showAddModal}
-	onClose={() => (showAddModal = false)}
-	title={m.team_add_member()}
->
+<Modal isOpen={showAddModal} onClose={() => (showAddModal = false)} title={m.team_add_member()}>
 	<div class="flex flex-col gap-4">
+		<!-- Select org member -->
 		<div class="flex flex-col gap-1.5">
-			<label
-				for="team-member-select"
-				class="text-body-sm text-light/60 font-body"
-				>{m.team_select_member()}</label
-			>
-			<select
-				id="team-member-select"
-				bind:value={selectedUserId}
-				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
-			>
+			<label for="add-member-select" class="text-body-sm text-light/60 font-body">{m.team_select_member()}</label>
+			<select id="add-member-select" bind:value={selectedUserId} class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary">
 				<option value="" disabled>{m.team_select_member()}</option>
 				{#each availableMembers as om}
-					<option value={om.user_id}>
-						{om.profiles?.full_name || om.profiles?.email || om.user_id}
-					</option>
+					<option value={om.user_id}>{om.profiles?.full_name || om.profiles?.email || om.user_id}</option>
 				{/each}
 			</select>
 		</div>
 
+		<!-- Select role -->
 		<div class="flex flex-col gap-1.5">
-			<label
-				for="team-role-select"
-				class="text-body-sm text-light/60 font-body"
-				>{m.team_select_role()}</label
-			>
-			<select
-				id="team-role-select"
-				bind:value={selectedRole}
-				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
-			>
-				{#each roleOptions as opt}
-					<option value={opt.value}>{opt.label}</option>
+			<label for="add-role-select" class="text-body-sm text-light/60 font-body">{m.team_select_role()}</label>
+			<select id="add-role-select" bind:value={selectedRoleId} class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary">
+				<option value="">—</option>
+				{#each roles as role}
+					<option value={role.id}>{role.name}</option>
 				{/each}
 			</select>
 		</div>
 
+		<!-- Select departments (chips) -->
+		{#if departments.length > 0}
+			<div class="flex flex-col gap-1.5">
+				<span class="text-body-sm text-light/60 font-body">{m.team_assign_dept()}</span>
+				<div class="flex flex-wrap gap-1.5">
+					{#each departments as dept}
+						<button
+							type="button"
+							class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] border transition-colors {selectedDeptIds.includes(dept.id) ? 'border-primary bg-primary/10 text-white' : 'border-light/10 text-light/50 hover:border-light/20'}"
+							onclick={() => (selectedDeptIds = toggleDeptSelection(selectedDeptIds, dept.id))}
+						>
+							<div class="w-2 h-2 rounded-full" style="background-color: {dept.color}"></div>
+							{dept.name}
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Notes -->
+		<div class="flex flex-col gap-1.5">
+			<label for="add-notes" class="text-body-sm text-light/60 font-body">{m.team_notes()}</label>
+			<textarea
+				id="add-notes"
+				bind:value={addNotes}
+				placeholder={m.team_notes_placeholder()}
+				rows="2"
+				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
+			></textarea>
+		</div>
+
 		<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
-			<button
-				type="button"
-				class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
-				onclick={() => {
-					showAddModal = false;
-					selectedUserId = "";
-					selectedRole = "member";
-				}}
-			>
+			<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => { showAddModal = false; selectedUserId = ""; selectedRoleId = ""; selectedDeptIds = []; addNotes = ""; }}>
 				{m.btn_cancel()}
 			</button>
-			<button
-				type="button"
-				disabled={!selectedUserId || adding}
-				class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-				onclick={handleAdd}
-			>
+			<button type="button" disabled={!selectedUserId || adding} class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed" onclick={handleAdd}>
 				{adding ? "..." : m.team_add_member()}
 			</button>
 		</div>
 	</div>
 </Modal>
 
-<!-- Edit Role Modal -->
-<Modal
-	isOpen={!!editingMember}
-	onClose={() => (editingMember = null)}
-	title="Change Role"
->
+<!-- Edit Member Modal -->
+<Modal isOpen={!!editingMember} onClose={() => (editingMember = null)} title="Edit Member">
 	{#if editingMember}
 		<div class="flex flex-col gap-4">
 			<div class="flex items-center gap-3 p-3 bg-dark/30 rounded-xl">
-				<Avatar
-					name={editingMember.profile?.full_name ||
-						editingMember.profile?.email ||
-						"?"}
-					src={editingMember.profile?.avatar_url}
-					size="sm"
-				/>
+				<Avatar name={editingMember.profile?.full_name || editingMember.profile?.email || "?"} src={editingMember.profile?.avatar_url} size="sm" />
 				<div>
-					<p class="text-body-sm text-white">
-						{editingMember.profile?.full_name ||
-							editingMember.profile?.email ||
-							"Unknown"}
-					</p>
-					<p class="text-[11px] text-light/40 capitalize">
-						{editingMember.role}
-					</p>
+					<p class="text-body-sm text-white">{editingMember.profile?.full_name || editingMember.profile?.email || "Unknown"}</p>
+					<p class="text-[11px] text-light/40">{editingMember.profile?.email || ""}</p>
 				</div>
 			</div>
 
+			<!-- Role -->
 			<div class="flex flex-col gap-1.5">
-				<label
-					for="edit-role-select"
-					class="text-body-sm text-light/60 font-body"
-					>{m.team_select_role()}</label
-				>
-				<select
-					id="edit-role-select"
-					bind:value={editRole}
-					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
-				>
-					{#each roleOptions as opt}
-						<option value={opt.value}>{opt.label}</option>
+				<label for="edit-role-select" class="text-body-sm text-light/60 font-body">{m.team_select_role()}</label>
+				<select id="edit-role-select" bind:value={editRoleId} class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary">
+					<option value="">—</option>
+					{#each roles as role}
+						<option value={role.id}>{role.name}</option>
 					{/each}
 				</select>
 			</div>
 
-			<div
-				class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
-			>
-				<button
-					type="button"
-					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
-					onclick={() => (editingMember = null)}
-				>
-					{m.btn_cancel()}
-				</button>
-				<button
-					type="button"
-					disabled={updatingRole || editRole === editingMember.role}
-					class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-					onclick={handleRoleUpdate}
-				>
-					{updatingRole ? "..." : m.btn_save()}
+			<!-- Departments -->
+			{#if departments.length > 0}
+				<div class="flex flex-col gap-1.5">
+					<span class="text-body-sm text-light/60 font-body">{m.team_assign_dept()}</span>
+					<div class="flex flex-wrap gap-1.5">
+						{#each departments as dept}
+							<button
+								type="button"
+								class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] border transition-colors {editDeptIds.includes(dept.id) ? 'border-primary bg-primary/10 text-white' : 'border-light/10 text-light/50 hover:border-light/20'}"
+								onclick={() => (editDeptIds = toggleDeptSelection(editDeptIds, dept.id))}
+							>
+								<div class="w-2 h-2 rounded-full" style="background-color: {dept.color}"></div>
+								{dept.name}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Notes -->
+			<div class="flex flex-col gap-1.5">
+				<label for="edit-notes" class="text-body-sm text-light/60 font-body">{m.team_notes()}</label>
+				<textarea id="edit-notes" bind:value={editNotes} placeholder={m.team_notes_placeholder()} rows="2" class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"></textarea>
+			</div>
+
+			<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
+				<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (editingMember = null)}>{m.btn_cancel()}</button>
+				<button type="button" disabled={updatingMember} class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed" onclick={handleEditSave}>
+					{updatingMember ? "..." : m.btn_save()}
 				</button>
 			</div>
 		</div>
 	{/if}
 </Modal>
 
+<!-- Department Modal -->
+<Modal isOpen={showDeptModal} onClose={() => (showDeptModal = false)} title={editingDept ? m.team_edit_department() : m.team_add_department()}>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1.5">
+			<label for="dept-name" class="text-body-sm text-light/60 font-body">{m.team_dept_name()}</label>
+			<input id="dept-name" type="text" bind:value={deptName} placeholder={m.team_dept_name()} class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary" />
+		</div>
+		<div class="flex flex-col gap-1.5">
+			<span class="text-body-sm text-light/60 font-body">Color</span>
+			<div class="flex items-center gap-2">
+				{#each presetColors as c}
+					<button type="button" class="w-6 h-6 rounded-full border-2 transition-all {deptColor === c ? 'border-white scale-110' : 'border-transparent hover:border-light/30'}" style="background-color: {c}" onclick={() => (deptColor = c)}></button>
+				{/each}
+			</div>
+		</div>
+		{#if editingDept}
+			<button type="button" class="text-[11px] text-error hover:underline self-start" onclick={() => { handleDeleteDept(editingDept!); showDeptModal = false; }}>
+				{m.team_dept_delete_confirm({ name: editingDept.name })}
+			</button>
+		{/if}
+		<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
+			<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (showDeptModal = false)}>{m.btn_cancel()}</button>
+			<button type="button" disabled={!deptName.trim() || savingDept} class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed" onclick={handleSaveDept}>
+				{savingDept ? "..." : m.btn_save()}
+			</button>
+		</div>
+	</div>
+</Modal>
+
+<!-- Role Modal -->
+<Modal isOpen={showRoleModal} onClose={() => (showRoleModal = false)} title={editingRole ? m.team_edit_role() : m.team_add_role()}>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1.5">
+			<label for="role-name" class="text-body-sm text-light/60 font-body">{m.team_role_name()}</label>
+			<input id="role-name" type="text" bind:value={roleName} placeholder={m.team_role_name()} class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary" />
+		</div>
+		<div class="flex flex-col gap-1.5">
+			<span class="text-body-sm text-light/60 font-body">Color</span>
+			<div class="flex items-center gap-2">
+				{#each presetColors as c}
+					<button type="button" class="w-6 h-6 rounded-full border-2 transition-all {roleColor === c ? 'border-white scale-110' : 'border-transparent hover:border-light/30'}" style="background-color: {c}" onclick={() => (roleColor = c)}></button>
+				{/each}
+			</div>
+		</div>
+		{#if editingRole}
+			<button type="button" class="text-[11px] text-error hover:underline self-start" onclick={() => { handleDeleteRole(editingRole!); showRoleModal = false; }}>
+				{m.team_role_delete_confirm({ name: editingRole.name })}
+			</button>
+		{/if}
+		<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
+			<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (showRoleModal = false)}>{m.btn_cancel()}</button>
+			<button type="button" disabled={!roleName.trim() || savingRole} class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed" onclick={handleSaveRole}>
+				{savingRole ? "..." : m.btn_save()}
+			</button>
+		</div>
+	</div>
+</Modal>
+
 <!-- Remove Confirmation -->
 {#if memberToRemove}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -459,29 +846,12 @@
 		aria-modal="true"
 		aria-label={m.team_remove_btn()}
 	>
-		<div
-			class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6"
-		>
-			<h2 class="text-h3 font-heading text-white mb-2">
-				{m.team_remove_btn()}
-			</h2>
-			<p class="text-body-sm text-light/50 mb-6">
-				{m.team_remove_confirm({ name: getMemberName(memberToRemove) })}
-			</p>
+		<div class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6">
+			<h2 class="text-h3 font-heading text-white mb-2">{m.team_remove_btn()}</h2>
+			<p class="text-body-sm text-light/50 mb-6">{m.team_remove_confirm({ name: getMemberName(memberToRemove) })}</p>
 			<div class="flex items-center justify-end gap-3">
-				<button
-					type="button"
-					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
-					onclick={() => (memberToRemove = null)}
-				>
-					{m.btn_cancel()}
-				</button>
-				<button
-					type="button"
-					class="px-4 py-2 bg-error text-white rounded-xl text-body-sm hover:bg-error/80 transition-colors disabled:opacity-50"
-					disabled={removing}
-					onclick={handleRemove}
-				>
+				<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (memberToRemove = null)}>{m.btn_cancel()}</button>
+				<button type="button" class="px-4 py-2 bg-error text-white rounded-xl text-body-sm hover:bg-error/80 transition-colors disabled:opacity-50" disabled={removing} onclick={handleRemove}>
 					{removing ? "..." : m.team_remove_btn()}
 				</button>
 			</div>
diff --git a/supabase/migrations/023_event_team_management.sql b/supabase/migrations/023_event_team_management.sql
new file mode 100644
index 0000000..2b7afbe
--- /dev/null
+++ b/supabase/migrations/023_event_team_management.sql
@@ -0,0 +1,142 @@
+-- Event Team Management: departments, roles, and member-department assignments
+-- Supports real-world event teams where members have roles and belong to departments
+
+-- ============================================================
+-- 1. Event Roles: customizable per-event position types
+-- ============================================================
+CREATE TABLE event_roles (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  color TEXT NOT NULL DEFAULT '#6366f1',
+  sort_order INT NOT NULL DEFAULT 0,
+  is_default BOOLEAN NOT NULL DEFAULT false,
+  created_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(event_id, name)
+);
+
+CREATE INDEX idx_event_roles_event ON event_roles(event_id);
+
+-- ============================================================
+-- 2. Event Departments: teams/areas within an event
+-- ============================================================
+CREATE TABLE event_departments (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  color TEXT NOT NULL DEFAULT '#00A3E0',
+  description TEXT,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(event_id, name)
+);
+
+CREATE INDEX idx_event_departments_event ON event_departments(event_id);
+
+-- ============================================================
+-- 3. Evolve event_members: add role_id FK, keep role text as fallback
+-- ============================================================
+ALTER TABLE event_members
+  ADD COLUMN role_id UUID REFERENCES event_roles(id) ON DELETE SET NULL,
+  ADD COLUMN notes TEXT;
+
+-- ============================================================
+-- 4. Member-Department assignments (many-to-many)
+-- ============================================================
+CREATE TABLE event_member_departments (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  event_member_id UUID NOT NULL REFERENCES event_members(id) ON DELETE CASCADE,
+  department_id UUID NOT NULL REFERENCES event_departments(id) ON DELETE CASCADE,
+  assigned_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(event_member_id, department_id)
+);
+
+CREATE INDEX idx_emd_member ON event_member_departments(event_member_id);
+CREATE INDEX idx_emd_department ON event_member_departments(department_id);
+
+-- ============================================================
+-- 5. RLS policies
+-- ============================================================
+ALTER TABLE event_roles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE event_departments ENABLE ROW LEVEL SECURITY;
+ALTER TABLE event_member_departments ENABLE ROW LEVEL SECURITY;
+
+-- Event roles: org members can view, editors+ can manage
+CREATE POLICY "Org members can view event roles" ON event_roles FOR SELECT
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_roles.event_id AND om.user_id = auth.uid()
+  ));
+
+CREATE POLICY "Editors can manage event roles" ON event_roles FOR ALL
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_roles.event_id AND om.user_id = auth.uid() AND om.role IN ('owner', 'admin', 'editor')
+  ));
+
+-- Event departments: org members can view, editors+ can manage
+CREATE POLICY "Org members can view event departments" ON event_departments FOR SELECT
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_departments.event_id AND om.user_id = auth.uid()
+  ));
+
+CREATE POLICY "Editors can manage event departments" ON event_departments FOR ALL
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_departments.event_id AND om.user_id = auth.uid() AND om.role IN ('owner', 'admin', 'editor')
+  ));
+
+-- Member-department assignments: org members can view, editors+ can manage
+CREATE POLICY "Org members can view member departments" ON event_member_departments FOR SELECT
+  USING (EXISTS (
+    SELECT 1 FROM event_members em
+    JOIN events e ON em.event_id = e.id
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE em.id = event_member_departments.event_member_id AND om.user_id = auth.uid()
+  ));
+
+CREATE POLICY "Editors can manage member departments" ON event_member_departments FOR ALL
+  USING (EXISTS (
+    SELECT 1 FROM event_members em
+    JOIN events e ON em.event_id = e.id
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE em.id = event_member_departments.event_member_id AND om.user_id = auth.uid() AND om.role IN ('owner', 'admin', 'editor')
+  ));
+
+-- ============================================================
+-- 6. Auto-seed default roles when a new event is created
+-- ============================================================
+CREATE OR REPLACE FUNCTION public.seed_event_defaults()
+RETURNS TRIGGER AS $$
+BEGIN
+  -- Default roles (generalized from real event data)
+  INSERT INTO public.event_roles (event_id, name, color, sort_order, is_default) VALUES
+    (NEW.id, 'Head Organizer', '#EF4444', 0, false),
+    (NEW.id, 'Team Lead',      '#8B5CF6', 1, false),
+    (NEW.id, 'Organizer',      '#F59E0B', 2, true),
+    (NEW.id, 'Volunteer',      '#10B981', 3, false),
+    (NEW.id, 'Sponsor',        '#00A3E0', 4, false);
+
+  -- Default departments (generalized from real event data)
+  INSERT INTO public.event_departments (event_id, name, color, sort_order) VALUES
+    (NEW.id, 'Logistics',    '#F59E0B', 0),
+    (NEW.id, 'IT & Tech',    '#6366F1', 1),
+    (NEW.id, 'Marketing',    '#EC4899', 2),
+    (NEW.id, 'Finance',      '#10B981', 3),
+    (NEW.id, 'Program',      '#8B5CF6', 4),
+    (NEW.id, 'Sponsorship',  '#00A3E0', 5),
+    (NEW.id, 'Design',       '#F97316', 6),
+    (NEW.id, 'Volunteers',   '#14B8A6', 7);
+
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+CREATE TRIGGER on_event_created_seed_defaults
+  AFTER INSERT ON events
+  FOR EACH ROW EXECUTE FUNCTION public.seed_event_defaults();

From 676468d3ec8d7349a7da459b6036bc24910e925a Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 12:53:56 +0200
Subject: [PATCH 10/10] feat: extended profile fields (phone, discord,
 shirt/hoodie sizes) - Migration 024: add phone, discord_handle, shirt_size,
 hoodie_size to profiles - Account page: new Contact & Sizing section with
 phone, discord, size dropdowns - Save profile persists all new fields -
 Layout server: profile queries include new fields for org members and user -
 Event team page: member rows show phone, discord, T-shirt and hoodie sizes -
 EventMemberWithDetails profile type extended - i18n: 8 new keys in EN and ET
 - svelte-check: 0 errors, vitest: 112/112 passed

---
 messages/en.json                              |  8 ++
 messages/et.json                              |  8 ++
 src/lib/api/events.ts                         |  8 +-
 src/routes/[orgSlug]/+layout.server.ts        | 12 +--
 src/routes/[orgSlug]/account/+page.svelte     | 76 ++++++++++++++++++-
 .../events/[eventSlug]/team/+page.svelte      | 18 +++++
 .../024_profile_extended_fields.sql           |  8 ++
 7 files changed, 126 insertions(+), 12 deletions(-)
 create mode 100644 supabase/migrations/024_profile_extended_fields.sql

diff --git a/messages/en.json b/messages/en.json
index 2a07f22..101b623 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -175,6 +175,14 @@
 	"account_display_name": "Display Name",
 	"account_display_name_placeholder": "Your name",
 	"account_email": "Email",
+	"account_phone": "Phone",
+	"account_phone_placeholder": "+372 ...",
+	"account_discord": "Discord",
+	"account_discord_placeholder": "username",
+	"account_contact_info": "Contact & Sizing",
+	"account_shirt_size": "Shirt Size",
+	"account_hoodie_size": "Hoodie Size",
+	"account_size_placeholder": "Select size",
 	"account_save_profile": "Save Profile",
 	"account_appearance": "Appearance",
 	"account_theme": "Theme",
diff --git a/messages/et.json b/messages/et.json
index 70e5ec9..ec3232a 100644
--- a/messages/et.json
+++ b/messages/et.json
@@ -175,6 +175,14 @@
 	"account_display_name": "Kuvatav nimi",
 	"account_display_name_placeholder": "Sinu nimi",
 	"account_email": "E-post",
+	"account_phone": "Telefon",
+	"account_phone_placeholder": "+372 ...",
+	"account_discord": "Discord",
+	"account_discord_placeholder": "kasutajanimi",
+	"account_contact_info": "Kontakt ja suurused",
+	"account_shirt_size": "Särgi suurus",
+	"account_hoodie_size": "Pusa suurus",
+	"account_size_placeholder": "Vali suurus",
 	"account_save_profile": "Salvesta profiil",
 	"account_appearance": "Välimus",
 	"account_theme": "Teema",
diff --git a/src/lib/api/events.ts b/src/lib/api/events.ts
index a3fc8c5..8fef5d9 100644
--- a/src/lib/api/events.ts
+++ b/src/lib/api/events.ts
@@ -60,7 +60,7 @@ export interface EventMemberDepartment {
 }
 
 export interface EventMemberWithDetails extends EventMember {
-	profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null };
+	profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null; phone: string | null; discord_handle: string | null; shirt_size: string | null; hoodie_size: string | null };
 	event_role?: EventRole;
 	departments: EventDepartment[];
 }
@@ -262,12 +262,12 @@ export async function fetchEventMembers(
 
 	// Fetch profiles separately (same pattern as org_members)
 	const userIds = members.map((m: any) => m.user_id);
-	const { data: profiles } = await supabase
+	const { data: profiles } = await (supabase as any)
 		.from('profiles')
-		.select('id, email, full_name, avatar_url')
+		.select('id, email, full_name, avatar_url, phone, discord_handle, shirt_size, hoodie_size')
 		.in('id', userIds);
 
-	const profileMap = Object.fromEntries((profiles ?? []).map(p => [p.id, p]));
+	const profileMap = Object.fromEntries((profiles ?? []).map((p: any) => [p.id, p]));
 
 	// Fetch roles for this event
 	const { data: roles } = await (supabase as any)
diff --git a/src/routes/[orgSlug]/+layout.server.ts b/src/routes/[orgSlug]/+layout.server.ts
index 153acd2..229d6d5 100644
--- a/src/routes/[orgSlug]/+layout.server.ts
+++ b/src/routes/[orgSlug]/+layout.server.ts
@@ -49,9 +49,9 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 			.eq('org_id', org.id)
 			.order('created_at', { ascending: false })
 			.limit(10),
-		locals.supabase
+		(locals.supabase as any)
 			.from('profiles')
-			.select('id, email, full_name, avatar_url')
+			.select('id, email, full_name, avatar_url, phone, discord_handle, shirt_size, hoodie_size')
 			.eq('id', user.id)
 			.single(),
 		locals.supabase
@@ -108,16 +108,16 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 
 	// Fetch profiles separately since org_members.user_id FK points to auth.users, not profiles
 	const memberUserIds = (rawMembers ?? []).map(m => m.user_id).filter((id): id is string => id !== null);
-	let memberProfilesMap: Record<string, { id: string; email: string; full_name: string | null; avatar_url: string | null }> = {};
+	let memberProfilesMap: Record<string, { id: string; email: string; full_name: string | null; avatar_url: string | null; phone: string | null; discord_handle: string | null; shirt_size: string | null; hoodie_size: string | null }> = {};
 
 	if (memberUserIds.length > 0) {
-		const { data: memberProfiles } = await locals.supabase
+		const { data: memberProfiles } = await (locals.supabase as any)
 			.from('profiles')
-			.select('id, email, full_name, avatar_url')
+			.select('id, email, full_name, avatar_url, phone, discord_handle, shirt_size, hoodie_size')
 			.in('id', memberUserIds);
 
 		if (memberProfiles) {
-			memberProfilesMap = Object.fromEntries(memberProfiles.map(p => [p.id, p]));
+			memberProfilesMap = Object.fromEntries(memberProfiles.map((p: any) => [p.id, p]));
 		}
 	}
 
diff --git a/src/routes/[orgSlug]/account/+page.svelte b/src/routes/[orgSlug]/account/+page.svelte
index e73afaf..e3df42b 100644
--- a/src/routes/[orgSlug]/account/+page.svelte
+++ b/src/routes/[orgSlug]/account/+page.svelte
@@ -16,6 +16,10 @@
 				email: string;
 				full_name: string | null;
 				avatar_url: string | null;
+				phone: string | null;
+				discord_handle: string | null;
+				shirt_size: string | null;
+				hoodie_size: string | null;
 			};
 			preferences: {
 				id: string;
@@ -34,10 +38,16 @@
 	// Profile state
 	let fullName = $state(data.profile.full_name ?? "");
 	let avatarUrl = $state(data.profile.avatar_url ?? null);
+	let phone = $state(data.profile.phone ?? "");
+	let discordHandle = $state(data.profile.discord_handle ?? "");
+	let shirtSize = $state(data.profile.shirt_size ?? "");
+	let hoodieSize = $state(data.profile.hoodie_size ?? "");
 	let isSaving = $state(false);
 	let isUploading = $state(false);
 	let avatarInput = $state<HTMLInputElement | null>(null);
 
+	const clothingSizes = ["XS", "S", "M", "L", "XL", "XXL", "3XL"];
+
 	// Preferences state
 	let theme = $state(data.preferences?.theme ?? "dark");
 	let accentColor = $state(data.preferences?.accent_color ?? "#00A3E0");
@@ -57,6 +67,10 @@
 	$effect(() => {
 		fullName = data.profile.full_name ?? "";
 		avatarUrl = data.profile.avatar_url ?? null;
+		phone = data.profile.phone ?? "";
+		discordHandle = data.profile.discord_handle ?? "";
+		shirtSize = data.profile.shirt_size ?? "";
+		hoodieSize = data.profile.hoodie_size ?? "";
 		theme = data.preferences?.theme ?? "dark";
 		accentColor = data.preferences?.accent_color ?? "#00A3E0";
 		useOrgTheme = data.preferences?.use_org_theme ?? true;
@@ -161,9 +175,15 @@
 
 	async function saveProfile() {
 		isSaving = true;
-		const { error } = await supabase
+		const { error } = await (supabase as any)
 			.from("profiles")
-			.update({ full_name: fullName || null })
+			.update({
+				full_name: fullName || null,
+				phone: phone || null,
+				discord_handle: discordHandle || null,
+				shirt_size: shirtSize || null,
+				hoodie_size: hoodieSize || null,
+			})
 			.eq("id", data.profile.id);
 
 		if (error) {
@@ -305,6 +325,58 @@
 			</div>
 		</div>
 
+		<!-- Contact & Sizing Section -->
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
+				{m.account_contact_info()}
+			</h2>
+
+			<Input
+				label={m.account_phone()}
+				bind:value={phone}
+				placeholder={m.account_phone_placeholder()}
+			/>
+
+			<Input
+				label={m.account_discord()}
+				bind:value={discordHandle}
+				placeholder={m.account_discord_placeholder()}
+			/>
+
+			<div class="grid grid-cols-2 gap-3">
+				<div class="flex flex-col gap-1.5">
+					<span class="font-body text-body-sm text-light/60">{m.account_shirt_size()}</span>
+					<select
+						bind:value={shirtSize}
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					>
+						<option value="">{m.account_size_placeholder()}</option>
+						{#each clothingSizes as size}
+							<option value={size}>{size}</option>
+						{/each}
+					</select>
+				</div>
+				<div class="flex flex-col gap-1.5">
+					<span class="font-body text-body-sm text-light/60">{m.account_hoodie_size()}</span>
+					<select
+						bind:value={hoodieSize}
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					>
+						<option value="">{m.account_size_placeholder()}</option>
+						{#each clothingSizes as size}
+							<option value={size}>{size}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+
+			<div>
+				<Button onclick={saveProfile} loading={isSaving}>
+					{m.account_save_profile()}
+				</Button>
+			</div>
+		</div>
+
 		<!-- Appearance Section -->
 		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
 			<h2 class="font-heading text-body text-white">
diff --git a/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
index 175a09b..f1a3be8 100644
--- a/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
+++ b/src/routes/[orgSlug]/events/[eventSlug]/team/+page.svelte
@@ -21,6 +21,10 @@
 			email: string;
 			full_name: string | null;
 			avatar_url: string | null;
+			phone: string | null;
+			discord_handle: string | null;
+			shirt_size: string | null;
+			hoodie_size: string | null;
 		} | null;
 	}
 
@@ -626,6 +630,20 @@
 						</span>
 					{/each}
 				</div>
+				<div class="flex items-center gap-3 mt-0.5 text-[10px] text-light/30">
+					{#if member.profile?.phone}
+						<span class="flex items-center gap-0.5"><span class="material-symbols-rounded" style="font-size: 12px;">phone</span>{member.profile.phone}</span>
+					{/if}
+					{#if member.profile?.discord_handle}
+						<span class="flex items-center gap-0.5"><span class="material-symbols-rounded" style="font-size: 12px;">chat</span>{member.profile.discord_handle}</span>
+					{/if}
+					{#if member.profile?.shirt_size}
+						<span>T: {member.profile.shirt_size}</span>
+					{/if}
+					{#if member.profile?.hoodie_size}
+						<span>H: {member.profile.hoodie_size}</span>
+					{/if}
+				</div>
 			</div>
 		</div>
 		{#if isEditor}
diff --git a/supabase/migrations/024_profile_extended_fields.sql b/supabase/migrations/024_profile_extended_fields.sql
new file mode 100644
index 0000000..b1d4ab2
--- /dev/null
+++ b/supabase/migrations/024_profile_extended_fields.sql
@@ -0,0 +1,8 @@
+-- Extended profile fields: contact info and clothing sizes
+-- These are collected during onboarding and visible to event team managers
+
+ALTER TABLE profiles
+  ADD COLUMN phone TEXT,
+  ADD COLUMN discord_handle TEXT,
+  ADD COLUMN shirt_size TEXT,
+  ADD COLUMN hoodie_size TEXT;