diff --git a/frontend-v2/src/app.css b/frontend-v2/src/app.css
index 3974661..74465c2 100644
--- a/frontend-v2/src/app.css
+++ b/frontend-v2/src/app.css
@@ -16,9 +16,9 @@
   body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
   :root {
     /* ── Fonts ── */
-    --font: 'Inter', -apple-system, system-ui, sans-serif;
+    --font: 'DM Sans', -apple-system, system-ui, sans-serif;
     --mono: 'JetBrains Mono', ui-monospace, monospace;
-    --transition: 180ms ease;
+    --transition: 150ms ease;
 
     /* ── Spacing scale (4px grid) ──
      * Use these everywhere: padding, margin, gap.
@@ -106,16 +106,16 @@
   /* ── LIGHT MODE ── */
   :root {
     /* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */
-    --canvas: #F5F6F8;
+    --canvas: #F4F5F7;
     --surface: #FFFFFF;
-    --surface-secondary: #FAFAFB;
+    --surface-secondary: #F8F9FA;
     --card: #FFFFFF;
-    --card-secondary: #FAFAFB;
-    --card-hover: #f0f0f3;
+    --card-secondary: #F8F9FA;
+    --card-hover: #F0F1F4;
 
     /* Borders */
-    --border: rgba(0,0,0,0.06);
-    --border-strong: rgba(0,0,0,0.1);
+    --border: rgba(0,0,0,0.07);
+    --border-strong: rgba(0,0,0,0.12);
 
     /* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */
     --text-1: #1a1a1f;
@@ -202,6 +202,9 @@
     background: var(--canvas);
     color: var(--text-1);
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
     transition: background var(--transition), color var(--transition);
     -webkit-font-smoothing: antialiased;
   }
@@ -306,18 +309,12 @@
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   padding: var(--card-pad);
-  transition: box-shadow 0.2s ease;
-}
-.module:hover {
-  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
 }
 .module.primary {
   padding: var(--card-pad-primary);
   box-shadow: var(--shadow-md);
 }
-.module.primary:hover {
-  box-shadow: var(--shadow-lg);
-}
 .module.flush { padding: 0; }
 
 .module-header {
@@ -328,11 +325,11 @@
 }
 
 .module-title {
-  font-size: var(--text-sm);
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
   color: var(--text-3);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.1em;
 }
 
 .module-action {
@@ -353,22 +350,22 @@
   align-items: center;
   gap: var(--inner-gap);
   padding: var(--row-pad-y) var(--row-pad-x);
-  transition: background var(--transition);
+  transition: background 0.15s ease;
 }
 .data-row:hover { background: var(--card-hover); }
 .data-row + .data-row { border-top: 1px solid var(--border); }
-.data-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
-.data-row:nth-child(even):hover { background: var(--card-hover); }
 
 /* ── Badges ──
  * Semantic status badges. Variants: error, success, warning, accent, muted.
  */
 .badge {
-  font-size: var(--text-xs);
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--radius-xs);
   flex-shrink: 0;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .badge.error { background: var(--error-dim); color: var(--error); }
 .badge.success { background: var(--success-dim); color: var(--success); }
@@ -412,12 +409,12 @@
  * Uppercase label above a group of content.
  */
 .section-label {
-  font-size: var(--text-xs);
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: var(--text-3);
-  margin-bottom: var(--sp-1.5);
+  margin-bottom: var(--sp-2);
 }
 
 /* ── Page wrapper ── */
@@ -427,24 +424,25 @@
   font-size: var(--text-xl);
   font-weight: 600;
   color: var(--text-1);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
   line-height: var(--leading-tight);
 }
 .page-subtitle {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
   margin-bottom: var(--sp-1);
 }
 .page-greeting {
   font-size: var(--text-2xl);
-  font-weight: 300;
+  font-weight: 400;
   color: var(--text-1);
   line-height: var(--leading-tight);
+  letter-spacing: -0.02em;
 }
-.page-greeting strong { font-weight: 600; }
+.page-greeting strong { font-weight: 700; }
 
 /* ── App surface (centered container) ── */
 .app-surface {
diff --git a/frontend-v2/src/app.html b/frontend-v2/src/app.html
index f0ea0b5..6b07520 100644
--- a/frontend-v2/src/app.html
+++ b/frontend-v2/src/app.html
@@ -3,6 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/frontend-v2/src/lib/components/dashboard/TaskSlideOver.svelte b/frontend-v2/src/lib/components/dashboard/TaskSlideOver.svelte
new file mode 100644
index 0000000..bfae630
--- /dev/null
+++ b/frontend-v2/src/lib/components/dashboard/TaskSlideOver.svelte
@@ -0,0 +1,552 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Task {
+		id: string;
+		title: string;
+		projectId: string;
+		_projectName: string;
+		_projectId: string;
+		startDate?: string;
+		dueDate?: string;
+		isAllDay?: boolean;
+		priority: number;
+		status: number;
+		repeatFlag?: string;
+	}
+
+	interface Props {
+		open: boolean;
+		onclose: () => void;
+	}
+
+	let { open = $bindable(), onclose }: Props = $props();
+
+	let loading = $state(true);
+	let overdueTasks = $state<Task[]>([]);
+	let todayTasks = $state<Task[]>([]);
+	let upcomingTasks = $state<Task[]>([]);
+	let projects = $state<{ id: string; name: string }[]>([]);
+	let completing = $state<Set<string>>(new Set());
+
+	// Quick add
+	let quickTitle = $state('');
+	let quickProjectId = $state('');
+	let saving = $state(false);
+
+	async function api(path: string, opts: RequestInit = {}) {
+		const res = await fetch(`/api/tasks${path}`, { credentials: 'include', ...opts });
+		if (!res.ok) throw new Error(`${res.status}`);
+		return res.json();
+	}
+
+	function formatTime(task: Task): string {
+		const d = task.startDate || task.dueDate;
+		if (!d || task.isAllDay) return '';
+		try {
+			const date = new Date(d);
+			const h = date.getHours(), m = date.getMinutes();
+			if (h === 0 && m === 0) return '';
+			const ampm = h >= 12 ? 'PM' : 'AM';
+			const hour = h % 12 || 12;
+			return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
+		} catch { return ''; }
+	}
+
+	function formatDueLabel(task: Task): string {
+		const d = task.startDate || task.dueDate;
+		if (!d) return '';
+		try {
+			const date = new Date(d);
+			const now = new Date();
+			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+			const taskDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+			const diff = Math.round((taskDate.getTime() - today.getTime()) / 86400000);
+			if (diff === 0) return '';
+			if (diff === 1) return 'Tomorrow';
+			if (diff === -1) return 'Yesterday';
+			if (diff < -1) return `${Math.abs(diff)}d overdue`;
+			if (diff <= 7) return date.toLocaleDateString('en-US', { weekday: 'short' });
+			return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+		} catch { return ''; }
+	}
+
+	function isOverdue(task: Task): boolean {
+		const d = task.startDate || task.dueDate;
+		if (!d) return false;
+		return new Date(d) < new Date(new Date().toDateString());
+	}
+
+	async function loadAll() {
+		loading = true;
+		try {
+			const [todayData, allData, projData] = await Promise.all([
+				api('/today'),
+				api('/tasks'),
+				api('/projects'),
+			]);
+
+			overdueTasks = (todayData.overdue || []).sort((a: Task, b: Task) =>
+				(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''));
+			todayTasks = (todayData.today || []).sort((a: Task, b: Task) =>
+				(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''));
+
+			// Upcoming = tasks with future dates, not today
+			const todayStr = new Date().toISOString().split('T')[0];
+			upcomingTasks = (allData.tasks || [])
+				.filter((t: Task) => {
+					const d = (t.startDate || t.dueDate || '')?.slice(0, 10);
+					return d > todayStr && t.status === 0;
+				})
+				.sort((a: Task, b: Task) =>
+					(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''))
+				.slice(0, 8);
+
+			projects = (projData.projects || []).map((p: any) => ({ id: p.id, name: p.name }));
+			if (projects.length > 0 && !quickProjectId) quickProjectId = projects[0].id;
+		} catch { /* silent */ }
+		loading = false;
+		completing = new Set();
+	}
+
+	async function completeTask(task: Task) {
+		completing = new Set([...completing, task.id]);
+		try {
+			await api(`/tasks/${task.id}/complete`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ projectId: task.projectId || task._projectId })
+			});
+			setTimeout(loadAll, 400);
+		} catch {
+			completing = new Set([...completing].filter(id => id !== task.id));
+		}
+	}
+
+	async function quickAdd() {
+		if (!quickTitle.trim()) return;
+		saving = true;
+		try {
+			const now = new Date();
+			const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T00:00:00+0000`;
+			await api('/tasks', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					title: quickTitle.trim(),
+					projectId: quickProjectId || undefined,
+					dueDate: todayStr,
+					isAllDay: true,
+				})
+			});
+			quickTitle = '';
+			await loadAll();
+		} catch { /* silent */ }
+		saving = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onclose();
+	}
+
+	function handleQuickKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') quickAdd();
+	}
+
+	$effect(() => {
+		if (open) loadAll();
+	});
+</script>
+
+<svelte:window onkeydown={open ? handleKeydown : undefined} />
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="so-overlay" class:so-visible={open} onclick={(e) => { if (e.target === e.currentTarget) onclose(); }} onkeydown={() => {}}>
+		<div class="so-panel" class:so-enter={open}>
+
+			<!-- Header -->
+			<div class="so-header">
+				<div>
+					<div class="so-label">Tasks</div>
+					<div class="so-summary">
+						{#if overdueTasks.length > 0}
+							<span class="so-overdue-count">{overdueTasks.length} overdue</span>
+							<span class="so-sep">&middot;</span>
+						{/if}
+						{todayTasks.length} today
+					</div>
+				</div>
+				<div class="so-header-actions">
+					<a href="/tasks" class="so-manage" onclick={onclose}>Manage</a>
+					<button class="so-close" onclick={onclose}>
+						<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="14" y2="14"/><line x1="14" y1="4" x2="4" y2="14"/></svg>
+					</button>
+				</div>
+			</div>
+
+			<!-- Body -->
+			<div class="so-body">
+				{#if loading}
+					<div class="so-loading">
+						<div class="skeleton" style="height:40px;margin-bottom:8px"></div>
+						<div class="skeleton" style="height:40px;margin-bottom:8px"></div>
+						<div class="skeleton" style="height:40px"></div>
+					</div>
+				{:else}
+
+					<!-- Next Up (first overdue or first today) -->
+					{@const nextTask = overdueTasks[0] || todayTasks[0]}
+					{#if nextTask}
+						<div class="so-section">
+							<div class="so-section-label">Next up</div>
+							<div class="so-next" class:so-next-overdue={isOverdue(nextTask)}>
+								<button class="so-check-lg" onclick={() => completeTask(nextTask)} class:so-completing={completing.has(nextTask.id)}>
+									<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+										<rect x="1.5" y="1.5" width="19" height="19" rx="5" stroke="{isOverdue(nextTask) ? 'var(--error)' : 'var(--accent)'}" stroke-width="2"/>
+									</svg>
+								</button>
+								<div class="so-next-content">
+									<div class="so-next-title">{nextTask.title}</div>
+									<div class="so-next-meta">
+										{#if formatTime(nextTask)}{formatTime(nextTask)} &middot; {/if}{nextTask._projectName}
+										{#if isOverdue(nextTask)}
+											<span class="so-overdue-badge">{formatDueLabel(nextTask)}</span>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Today -->
+					{@const restToday = nextTask ? [...overdueTasks.slice(isOverdue(nextTask) ? 1 : 0), ...todayTasks.slice(isOverdue(nextTask) ? 0 : 1)] : []}
+					{#if restToday.length > 0}
+						<div class="so-section">
+							<div class="so-section-label">{overdueTasks.length > 0 ? 'Today & Overdue' : 'Today'} &middot; {restToday.length}</div>
+							{#each restToday as task (task.id)}
+								<div class="so-row" class:so-completing={completing.has(task.id)}>
+									<button class="so-check" onclick={() => completeTask(task)}>
+										<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+											<rect x="1" y="1" width="14" height="14" rx="3.5" stroke="{isOverdue(task) ? 'var(--error)' : 'var(--border-strong)'}" stroke-width="1.5"/>
+										</svg>
+									</button>
+									<span class="so-row-title" class:so-row-overdue={isOverdue(task)}>{task.title}</span>
+									<span class="so-row-meta">
+										{#if formatTime(task)}{formatTime(task)}{:else}{task._projectName}{/if}
+									</span>
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					<!-- Upcoming -->
+					{#if upcomingTasks.length > 0}
+						<div class="so-section">
+							<div class="so-section-label">Upcoming</div>
+							{#each upcomingTasks as task (task.id)}
+								<div class="so-row" class:so-completing={completing.has(task.id)}>
+									<button class="so-check" onclick={() => completeTask(task)}>
+										<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+											<rect x="1" y="1" width="14" height="14" rx="3.5" stroke="var(--border-strong)" stroke-width="1.5"/>
+										</svg>
+									</button>
+									<span class="so-row-title">{task.title}</span>
+									<span class="so-row-meta">{formatDueLabel(task)}</span>
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					<!-- Empty -->
+					{#if !nextTask && restToday.length === 0 && upcomingTasks.length === 0}
+						<div class="so-empty">All clear. Nothing on the agenda.</div>
+					{/if}
+
+				{/if}
+			</div>
+
+			<!-- Quick Add -->
+			<div class="so-footer">
+				<div class="so-quick-add">
+					<input
+						class="so-quick-input"
+						placeholder="Quick add task..."
+						bind:value={quickTitle}
+						onkeydown={handleQuickKeydown}
+						disabled={saving}
+					/>
+					{#if quickTitle.trim()}
+						<button class="so-quick-submit" onclick={quickAdd} disabled={saving}>
+							{saving ? '...' : 'Add'}
+						</button>
+					{/if}
+				</div>
+			</div>
+
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* ── Overlay ── */
+	.so-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 90;
+		background: rgba(0, 0, 0, 0);
+		transition: background 0.3s ease;
+	}
+	.so-overlay.so-visible {
+		background: var(--overlay);
+	}
+
+	/* ── Panel ── */
+	.so-panel {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: 400px;
+		max-width: 100vw;
+		background: var(--surface);
+		box-shadow: -8px 0 32px rgba(0,0,0,0.1);
+		display: flex;
+		flex-direction: column;
+		transform: translateX(100%);
+		transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	.so-panel.so-enter {
+		transform: translateX(0);
+	}
+
+	/* ── Header ── */
+	.so-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		padding: var(--sp-6) var(--sp-6) var(--sp-4);
+		border-bottom: 1px solid var(--border);
+		flex-shrink: 0;
+	}
+
+	.so-label {
+		font-size: var(--text-lg);
+		font-weight: 700;
+		color: var(--text-1);
+		letter-spacing: -0.02em;
+	}
+
+	.so-summary {
+		font-size: var(--text-sm);
+		color: var(--text-3);
+		margin-top: 2px;
+	}
+
+	.so-overdue-count { color: var(--error); font-weight: 600; }
+	.so-sep { color: var(--text-4); margin: 0 2px; }
+
+	.so-header-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+	}
+
+	.so-manage {
+		font-size: var(--text-sm);
+		color: var(--accent);
+		text-decoration: none;
+		font-weight: 500;
+	}
+	.so-manage:hover { text-decoration: underline; }
+
+	.so-close {
+		width: 32px;
+		height: 32px;
+		border-radius: var(--radius-md);
+		border: none;
+		background: none;
+		color: var(--text-3);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.15s;
+	}
+	.so-close:hover { background: var(--card-hover); color: var(--text-1); }
+
+	/* ── Body ── */
+	.so-body {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--sp-2) var(--sp-6);
+	}
+
+	.so-loading { padding: var(--sp-4) 0; }
+
+	/* ── Section ── */
+	.so-section {
+		padding: var(--sp-4) 0 var(--sp-2);
+	}
+
+	.so-section-label {
+		font-size: 10px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		color: var(--text-4);
+		margin-bottom: var(--sp-2);
+	}
+
+	/* ── Next Up (hero task) ── */
+	.so-next {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-3);
+		padding: var(--sp-4);
+		background: var(--accent-dim);
+		border-radius: var(--radius);
+		transition: opacity 0.3s;
+	}
+	.so-next.so-next-overdue { background: var(--error-dim); }
+
+	.so-check-lg {
+		flex-shrink: 0;
+		padding: 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		margin-top: 1px;
+		transition: transform 0.15s;
+	}
+	.so-check-lg:hover { transform: scale(1.1); }
+	.so-check-lg.so-completing { opacity: 0.3; }
+	.so-check-lg:hover svg rect { fill: var(--accent-dim); }
+
+	.so-next-content { flex: 1; min-width: 0; }
+
+	.so-next-title {
+		font-size: var(--text-md);
+		font-weight: 600;
+		color: var(--text-1);
+		line-height: var(--leading-snug);
+	}
+
+	.so-next-meta {
+		font-size: var(--text-sm);
+		color: var(--text-3);
+		margin-top: 3px;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex-wrap: wrap;
+	}
+
+	.so-overdue-badge {
+		font-size: 10px;
+		font-weight: 700;
+		color: var(--error);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	/* ── Task rows ── */
+	.so-row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: 9px 0;
+		transition: opacity 0.3s;
+	}
+	.so-row.so-completing { opacity: 0.15; }
+
+	.so-check {
+		flex-shrink: 0;
+		padding: 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		opacity: 0.5;
+		transition: opacity 0.15s;
+	}
+	.so-row:hover .so-check { opacity: 1; }
+	.so-check:hover svg rect { stroke: var(--accent); fill: var(--accent-dim); }
+
+	.so-row-title {
+		flex: 1;
+		font-size: var(--text-sm);
+		color: var(--text-1);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+	.so-row-title.so-row-overdue { color: var(--error); }
+
+	.so-row-meta {
+		flex-shrink: 0;
+		font-size: 11px;
+		color: var(--text-4);
+		font-family: var(--mono);
+	}
+
+	.so-empty {
+		padding: var(--sp-10) var(--sp-4);
+		text-align: center;
+		color: var(--text-4);
+		font-size: var(--text-sm);
+	}
+
+	/* ── Quick Add ── */
+	.so-footer {
+		flex-shrink: 0;
+		padding: var(--sp-4) var(--sp-6);
+		border-top: 1px solid var(--border);
+		background: var(--surface);
+	}
+
+	.so-quick-add {
+		display: flex;
+		gap: var(--sp-2);
+		align-items: center;
+	}
+
+	.so-quick-input {
+		flex: 1;
+		padding: 10px 14px;
+		border-radius: var(--radius-md);
+		background: var(--surface-secondary);
+		border: 1px solid var(--border);
+		color: var(--text-1);
+		font-size: var(--text-sm);
+		font-family: var(--font);
+		outline: none;
+		transition: border-color 0.15s;
+	}
+	.so-quick-input:focus { border-color: var(--accent); }
+	.so-quick-input::placeholder { color: var(--text-4); }
+
+	.so-quick-submit {
+		padding: 10px var(--sp-4);
+		border-radius: var(--radius-md);
+		background: var(--accent);
+		color: white;
+		border: none;
+		font-size: var(--text-sm);
+		font-weight: 600;
+		cursor: pointer;
+		white-space: nowrap;
+		transition: opacity 0.15s;
+	}
+	.so-quick-submit:hover { opacity: 0.9; }
+
+	/* ── Mobile ── */
+	@media (max-width: 480px) {
+		.so-panel { width: 100vw; }
+		.so-header { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
+		.so-body { padding: var(--sp-2) var(--sp-5); }
+		.so-footer { padding: var(--sp-4) var(--sp-5); }
+	}
+</style>
diff --git a/frontend-v2/src/lib/components/layout/Navbar.svelte b/frontend-v2/src/lib/components/layout/Navbar.svelte
index 7112eef..d915805 100644
--- a/frontend-v2/src/lib/components/layout/Navbar.svelte
+++ b/frontend-v2/src/lib/components/layout/Navbar.svelte
@@ -93,8 +93,8 @@
 		z-index: 50;
 		background: var(--nav-bg);
 		border-bottom: 1px solid var(--border);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
+		backdrop-filter: blur(20px) saturate(1.4);
+		-webkit-backdrop-filter: blur(20px) saturate(1.4);
 	}
 	.navbar-inner {
 		max-width: 1400px;
@@ -106,15 +106,16 @@
 		gap: var(--sp-5);
 	}
 	.navbar-logo {
-		font-weight: 600;
+		font-weight: 700;
 		font-size: var(--text-md);
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
 		color: var(--text-1);
 		flex-shrink: 0;
+		letter-spacing: -0.02em;
 	}
-	.navbar-logo svg { width: 20px; height: 20px; }
+	.navbar-logo svg { width: 18px; height: 18px; color: var(--accent); }
 
 	.navbar-links {
 		display: flex;
diff --git a/frontend-v2/src/routes/(app)/+page.svelte b/frontend-v2/src/routes/(app)/+page.svelte
index e287b3c..9938f7a 100644
--- a/frontend-v2/src/routes/(app)/+page.svelte
+++ b/frontend-v2/src/routes/(app)/+page.svelte
@@ -5,8 +5,18 @@
 	import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
 	import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
 	import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
-	import TasksPanel from '$lib/components/dashboard/TasksPanel.svelte';
-	import TasksModule from '$lib/components/dashboard/TasksModule.svelte';
+	import TaskSlideOver from '$lib/components/dashboard/TaskSlideOver.svelte';
+
+	interface QuickTask {
+		id: string;
+		title: string;
+		startDate?: string;
+		dueDate?: string;
+		isAllDay?: boolean;
+		_projectName: string;
+		projectId: string;
+		_projectId: string;
+	}
 
 	const userName = $derived((page as any).data?.user?.display_name || 'there');
 
@@ -19,6 +29,51 @@
 	let fitnessCalLogged = $state(0);
 	let fitnessProtein = $state(0);
 	let fitnessCarbs = $state(0);
+	let headerTasks = $state<QuickTask[]>([]);
+	let headerOverdue = $state(0);
+	let headerTotalCount = $state(0);
+	let taskPanelOpen = $state(false);
+
+	function getGreeting(): string {
+		const h = new Date().getHours();
+		if (h < 12) return 'Good morning';
+		if (h < 17) return 'Good afternoon';
+		return 'Good evening';
+	}
+
+	function getDateString(): string {
+		return new Date().toLocaleDateString('en-US', {
+			weekday: 'long', month: 'long', day: 'numeric'
+		});
+	}
+
+	function formatTaskTime(t: QuickTask): string {
+		const d = t.startDate || t.dueDate;
+		if (!d || t.isAllDay) return '';
+		try {
+			const date = new Date(d);
+			const h = date.getHours(), m = date.getMinutes();
+			if (h === 0 && m === 0) return '';
+			const ampm = h >= 12 ? 'PM' : 'AM';
+			const hour = h % 12 || 12;
+			return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
+		} catch { return ''; }
+	}
+
+	async function loadTasks() {
+		try {
+			const res = await fetch('/api/tasks/today', { credentials: 'include' });
+			if (res.ok) {
+				const t = await res.json();
+				headerOverdue = t.overdueCount || 0;
+				const today = t.today || [];
+				const overdue = t.overdue || [];
+				headerTotalCount = today.length + overdue.length;
+				// First task for preview
+				headerTasks = [...overdue, ...today].slice(0, 1);
+			}
+		} catch { /* silent */ }
+	}
 
 	onMount(async () => {
 		const n = new Date();
@@ -57,20 +112,52 @@
 				fitnessCalRemaining = Math.max(0, (g.calories || 2000) - fitnessCalLogged);
 			}
 		} catch { /* silent */ }
+
+		await loadTasks();
 	});
 </script>
 
-<div class="page dash-page">
-	<div class="dash-layout">
-		<aside class="tasks-sidebar">
-			<TasksPanel />
-		</aside>
-		<div class="app-surface">
-		<div class="page-header">
-			<div class="page-subtitle">Dashboard</div>
-			<div class="page-greeting">Good to see you, <strong>{userName}</strong></div>
+<div class="page">
+	<div class="app-surface">
+		<!-- Dashboard header with task trigger -->
+		<div class="dash-header">
+			<div class="dash-left">
+				<div class="dash-date">{getDateString()}</div>
+				<h1 class="dash-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
+			</div>
+			<button class="task-trigger" onclick={() => taskPanelOpen = true}>
+				<div class="task-trigger-icon" class:has-overdue={headerOverdue > 0}>
+					<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+						<rect x="2" y="2" width="14" height="14" rx="3"/>
+						<path d="M6 9l2 2 4-4"/>
+					</svg>
+					{#if headerOverdue > 0}
+						<span class="task-trigger-dot"></span>
+					{/if}
+				</div>
+				<div class="task-trigger-text">
+					<span class="task-trigger-count">
+						{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}
+						{#if headerOverdue > 0}
+							<span class="task-trigger-overdue">&middot; {headerOverdue} overdue</span>
+						{/if}
+					</span>
+					{#if headerTasks[0]}
+						<span class="task-trigger-next">
+							Next: {headerTasks[0].title}
+							{#if formatTaskTime(headerTasks[0])} &middot; {formatTaskTime(headerTasks[0])}{/if}
+						</span>
+					{:else}
+						<span class="task-trigger-next">All clear for today</span>
+					{/if}
+				</div>
+				<svg class="task-trigger-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 4l4 4-4 4"/></svg>
+			</button>
 		</div>
 
+		<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
+
+		<!-- Action cards -->
 		<div class="action-cards">
 			<DashboardActionCard
 				title="{budgetUncatCount} uncategorized transactions"
@@ -96,8 +183,7 @@
 			/>
 		</div>
 
-		<TasksModule />
-
+		<!-- Modules -->
 		<div class="modules-grid">
 			<BudgetModule />
 			<div class="right-stack">
@@ -106,59 +192,133 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </div>
 
 <style>
-	.dash-layout {
-		display: grid;
-		grid-template-columns: 280px 1fr;
-		gap: var(--module-gap);
-		max-width: 1500px;
-		margin: 0 auto;
-		padding: 0 var(--sp-6);
+	/* ── Dashboard header ── */
+	.dash-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--sp-6);
+		margin-bottom: var(--section-gap);
 	}
 
-	.tasks-sidebar {
-		position: sticky;
-		top: 80px;
-		align-self: start;
+	.dash-date {
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--accent);
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		margin-bottom: var(--sp-1);
 	}
 
-	.dash-layout > :global(.app-surface) {
-		padding: 0;
-		max-width: none;
+	.dash-greeting {
+		font-size: var(--text-2xl);
+		font-weight: 400;
+		color: var(--text-1);
+		line-height: var(--leading-tight);
+		letter-spacing: -0.02em;
+		margin: 0;
+	}
+	.dash-greeting strong { font-weight: 700; }
+
+	/* ── Task trigger button ── */
+	.task-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		padding: var(--sp-3) var(--sp-4);
+		border-radius: var(--radius);
+		background: var(--card);
+		border: 1px solid var(--border);
+		box-shadow: var(--shadow-sm);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		text-align: left;
+		flex-shrink: 0;
+		max-width: 320px;
+	}
+	.task-trigger:hover {
+		box-shadow: var(--shadow-md);
+		border-color: var(--accent-border);
+	}
+	.task-trigger:active { transform: scale(0.98); }
+
+	.task-trigger-icon {
+		width: 36px;
+		height: 36px;
+		border-radius: var(--radius-md);
+		background: var(--accent-dim);
+		color: var(--accent);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		position: relative;
+	}
+	.task-trigger-icon.has-overdue {
+		background: var(--error-dim);
+		color: var(--error);
 	}
 
-	@media (max-width: 1100px) {
-		.dash-layout {
-			display: block;
-			padding: 0;
-		}
-		.tasks-sidebar {
-			display: none;
-		}
-		.dash-layout > :global(.app-surface) {
-			padding: 0 var(--sp-6);
-			max-width: 1200px;
-			margin: 0 auto;
-		}
+	.task-trigger-dot {
+		position: absolute;
+		top: -2px;
+		right: -2px;
+		width: 8px;
+		height: 8px;
+		border-radius: var(--radius-full);
+		background: var(--error);
+		border: 2px solid var(--card);
 	}
 
-	@media (max-width: 768px) {
-		.dash-layout > :global(.app-surface) {
-			padding: 0 var(--sp-5);
-		}
+	.task-trigger-text {
+		flex: 1;
+		min-width: 0;
 	}
 
+	.task-trigger-count {
+		display: block;
+		font-size: var(--text-sm);
+		font-weight: 600;
+		color: var(--text-1);
+	}
+
+	.task-trigger-overdue {
+		color: var(--error);
+		font-weight: 600;
+	}
+
+	.task-trigger-next {
+		display: block;
+		font-size: 12px;
+		color: var(--text-3);
+		margin-top: 1px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.task-trigger-arrow {
+		color: var(--text-4);
+		flex-shrink: 0;
+		transition: transform 0.2s;
+	}
+	.task-trigger:hover .task-trigger-arrow {
+		transform: translateX(2px);
+		color: var(--accent);
+	}
+
+	/* ── Action cards ── */
 	.action-cards {
 		display: flex;
 		flex-direction: column;
-		gap: var(--section-gap);
-		margin-bottom: calc(var(--section-gap) + 8px);
-		padding-top: 4px;
+		gap: var(--sp-3);
+		margin-bottom: var(--section-gap);
 	}
 
+	/* ── Modules grid ── */
 	.modules-grid {
 		display: grid;
 		grid-template-columns: 1.3fr 0.7fr;
@@ -172,6 +332,21 @@
 		gap: var(--module-gap);
 	}
 
+	/* ── Mobile ── */
+	@media (max-width: 900px) {
+		.dash-header {
+			flex-direction: column;
+			gap: var(--sp-3);
+		}
+		.dash-greeting {
+			font-size: var(--text-xl);
+		}
+		.task-trigger {
+			max-width: none;
+			width: 100%;
+		}
+	}
+
 	@media (max-width: 768px) {
 		.modules-grid {
 			grid-template-columns: 1fr;