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] 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}