diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index e2c7a41..1e4d17a 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -5,7 +5,7 @@ import TagPill from "@/components/TagPill.vue";
 import { relativeTime } from "@/composables/useRelativeTime";
 import { renderPreview } from "@/utils/markdown";
 
-const props = defineProps<{ note: Note }>();
+const props = defineProps<{ note: Note; compact?: boolean }>();
 const emit = defineEmits<{ "tag-click": [tag: string] }>();
 const router = useRouter();
 
@@ -19,21 +19,40 @@ function goEdit() {
 </script>
 
 <template>
-  <router-link :to="`/notes/${note.id}`" class="note-card">
-    <div class="note-top">
-      <h3 class="note-title">{{ note.title || "Untitled" }}</h3>
-      <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
-    </div>
-    <div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
-    <div class="note-meta">
-      <TagPill
-        v-for="tag in note.tags"
-        :key="tag"
-        :tag="tag"
-        @click.stop="onTagClick(tag)"
-      />
-      <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
-    </div>
+  <router-link :to="`/notes/${note.id}`" :class="['note-card', { compact }]">
+
+    <!-- Compact: single row -->
+    <template v-if="compact">
+      <span class="note-title-compact">{{ note.title || "Untitled" }}</span>
+      <div class="note-tags-compact">
+        <TagPill
+          v-for="tag in note.tags.slice(0, 3)"
+          :key="tag"
+          :tag="tag"
+          @click.stop="onTagClick(tag)"
+        />
+      </div>
+      <span class="timestamp-compact">{{ relativeTime(note.updated_at) }}</span>
+    </template>
+
+    <!-- Full: original layout -->
+    <template v-else>
+      <div class="note-top">
+        <h3 class="note-title">{{ note.title || "Untitled" }}</h3>
+        <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
+      </div>
+      <div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
+      <div class="note-meta">
+        <TagPill
+          v-for="tag in note.tags"
+          :key="tag"
+          :tag="tag"
+          @click.stop="onTagClick(tag)"
+        />
+        <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
+      </div>
+    </template>
+
   </router-link>
 </template>
 
@@ -51,6 +70,36 @@ function goEdit() {
 .note-card:hover {
   box-shadow: 0 2px 8px var(--color-shadow);
 }
+
+/* Compact single-row layout */
+.note-card.compact {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.75rem;
+}
+.note-title-compact {
+  font-size: 0.9rem;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.note-tags-compact {
+  display: flex;
+  gap: 0.3rem;
+  flex-shrink: 0;
+}
+.timestamp-compact {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* Full layout */
 .note-top {
   display: flex;
   align-items: center;
@@ -75,7 +124,7 @@ function goEdit() {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
   color: var(--color-primary);
diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index 70cdf09..4838a50 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -7,7 +7,11 @@ import TagPill from "@/components/TagPill.vue";
 import { relativeTime } from "@/composables/useRelativeTime";
 import { renderPreview } from "@/utils/markdown";
 
-const props = defineProps<{ task: Task }>();
+const props = defineProps<{
+  task: Task;
+  compact?: boolean;
+  projectTitle?: string;
+}>();
 const router = useRouter();
 const emit = defineEmits<{
   "tag-click": [tag: string];
@@ -20,6 +24,18 @@ const statusCycle: Record<TaskStatus, TaskStatus> = {
   done: "todo",
 };
 
+const statusDotClass: Record<TaskStatus, string> = {
+  todo: "dot-todo",
+  in_progress: "dot-in-progress",
+  done: "dot-done",
+};
+
+const statusTitle: Record<TaskStatus, string> = {
+  todo: "Todo — click to mark In Progress",
+  in_progress: "In Progress — click to mark Done",
+  done: "Done — click to mark Todo",
+};
+
 function cycleStatus() {
   emit("status-toggle", props.task.id, statusCycle[props.task.status!]);
 }
@@ -36,30 +52,51 @@ function isOverdue(): boolean {
 </script>
 
 <template>
-  <router-link :to="`/tasks/${task.id}`" class="task-card">
-    <div class="task-top">
-      <StatusBadge
-        :status="task.status!"
-        clickable
+  <router-link :to="`/tasks/${task.id}`" :class="['task-card', { compact }]">
+
+    <!-- Compact: single row -->
+    <template v-if="compact">
+      <button
+        :class="['status-dot', statusDotClass[task.status!]]"
+        :title="statusTitle[task.status!]"
         @click.prevent.stop="cycleStatus"
-      />
+      ></button>
       <PriorityBadge :priority="task.priority!" />
-      <h3 class="task-title">{{ task.title || "Untitled" }}</h3>
-      <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
-    </div>
-    <div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
-    <div class="task-meta">
-      <span v-if="task.due_date" :class="['due-date', { overdue: isOverdue() }]">
-        Due: {{ task.due_date }}
+      <span class="task-title-compact">{{ task.title || "Untitled" }}</span>
+      <span v-if="projectTitle" class="project-crumb">{{ projectTitle }}</span>
+      <span v-if="task.due_date" :class="['due-compact', { overdue: isOverdue() }]">
+        {{ task.due_date }}
       </span>
-      <TagPill
-        v-for="tag in task.tags"
-        :key="tag"
-        :tag="tag"
-        @click.stop="emit('tag-click', tag)"
-      />
-      <span class="timestamp">{{ relativeTime(task.updated_at) }}</span>
-    </div>
+      <button class="btn-edit-compact" title="Edit" @click.prevent.stop="goEdit">Edit</button>
+    </template>
+
+    <!-- Full: original layout -->
+    <template v-else>
+      <div class="task-top">
+        <StatusBadge
+          :status="task.status!"
+          clickable
+          @click.prevent.stop="cycleStatus"
+        />
+        <PriorityBadge :priority="task.priority!" />
+        <h3 class="task-title">{{ task.title || "Untitled" }}</h3>
+        <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
+      </div>
+      <div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
+      <div class="task-meta">
+        <span v-if="task.due_date" :class="['due-date', { overdue: isOverdue() }]">
+          Due: {{ task.due_date }}
+        </span>
+        <TagPill
+          v-for="tag in task.tags"
+          :key="tag"
+          :tag="tag"
+          @click.stop="emit('tag-click', tag)"
+        />
+        <span class="timestamp">{{ relativeTime(task.updated_at) }}</span>
+      </div>
+    </template>
+
   </router-link>
 </template>
 
@@ -77,6 +114,93 @@ function isOverdue(): boolean {
 .task-card:hover {
   box-shadow: 0 2px 8px var(--color-shadow);
 }
+
+/* Compact single-row layout */
+.task-card.compact {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+}
+
+/* Status dot */
+.status-dot {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s, opacity 0.1s;
+}
+.status-dot:hover {
+  transform: scale(1.25);
+  opacity: 0.8;
+}
+.dot-todo {
+  background: var(--color-status-todo, #94a3b8);
+  border: 2px solid var(--color-status-todo, #94a3b8);
+  background: transparent;
+  border: 2px solid var(--color-text-muted);
+}
+.dot-in-progress {
+  background: var(--color-status-in-progress, #3b82f6);
+}
+.dot-done {
+  background: var(--color-status-done, #22c55e);
+}
+
+.task-title-compact {
+  font-size: 0.9rem;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-crumb {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 0.1rem 0.4rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.due-compact {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.due-compact.overdue {
+  color: var(--color-danger, #e74c3c);
+  font-weight: 600;
+}
+.btn-edit-compact {
+  flex-shrink: 0;
+  padding: 0.15rem 0.45rem;
+  font-size: 0.75rem;
+  background: none;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+.task-card.compact:hover .btn-edit-compact {
+  opacity: 1;
+}
+.btn-edit-compact:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* Full layout */
 .task-top {
   display: flex;
   align-items: center;
@@ -101,7 +225,7 @@ function isOverdue(): boolean {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
   color: var(--color-primary);
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index dfcfa75..065c576 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -12,6 +12,8 @@ import type { TaskStatus } from "@/types/task";
 import { useTasksStore } from "@/stores/tasks";
 import { useChatStore } from "@/stores/chat";
 
+// ─── Task data ───────────────────────────────────────────────────────────────
+
 const recentNotes = ref<Note[]>([]);
 const overdueTasks = ref<Task[]>([]);
 const dueTodayTasks = ref<Task[]>([]);
@@ -22,21 +24,70 @@ const otherTasks = ref<Task[]>([]);
 const loading = ref(true);
 const tasksStore = useTasksStore();
 
+// ─── Project data ─────────────────────────────────────────────────────────────
+
+interface MilestoneSummary {
+  id: number;
+  title: string;
+  status: string;
+  pct: number;
+  total: number;
+  completed: number;
+}
+interface DashProject {
+  id: number;
+  title: string;
+  status: string;
+  summary?: {
+    task_counts: { todo?: number; in_progress?: number; done?: number };
+    milestone_summary: MilestoneSummary[];
+  };
+}
+
+const activeProjects = ref<DashProject[]>([]);
+const projectMap = ref<Map<number, string>>(new Map());
+
+async function loadProjects() {
+  try {
+    const data = await apiGet<{ projects: DashProject[] }>("/api/projects?status=active");
+    const projects = data.projects.slice(0, 6);
+    projectMap.value = new Map(data.projects.map((p) => [p.id, p.title]));
+    // Fetch summaries in parallel
+    await Promise.allSettled(
+      projects.map(async (p) => {
+        try {
+          const full = await apiGet<DashProject>(`/api/projects/${p.id}`);
+          p.summary = full.summary;
+        } catch { /* non-fatal */ }
+      })
+    );
+    activeProjects.value = projects;
+  } catch { /* non-fatal */ }
+}
+
+function milestoneColor(index: number): string {
+  const palette = [
+    "var(--color-primary)",
+    "var(--color-success, #22c55e)",
+    "#c98a00",
+    "var(--color-danger, #e74c3c)",
+    "#8b5cf6",
+  ];
+  return palette[index % palette.length];
+}
+
+// ─── Sorting helpers ──────────────────────────────────────────────────────────
+
 const PRIORITY_ORDER: Record<string, number> = {
-  high: 3,
-  medium: 2,
-  low: 1,
-  none: 0,
+  high: 3, medium: 2, low: 1, none: 0,
 };
 
 function dateStr(offsetDays: number = 0): string {
   const d = new Date();
   d.setDate(d.getDate() + offsetDays);
   return (
-    d.getFullYear() +
-    "-" +
-    String(d.getMonth() + 1).padStart(2, "0") +
-    "-" +
+    d.getFullYear() + "-" +
+    String(d.getMonth() + 1).padStart(2, "0") + "-" +
     String(d.getDate()).padStart(2, "0")
   );
 }
@@ -54,19 +105,17 @@ function sortByPriorityThenDate(tasks: Task[]): Task[] {
 }
 
 function sortOtherTasks(tasks: Task[]): Task[] {
-  const withDate = tasks
-    .filter((t) => t.due_date)
-    .sort((a, b) => a.due_date!.localeCompare(b.due_date!));
-  const withoutDate = tasks
-    .filter((t) => !t.due_date)
-    .sort((a, b) => {
-      const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
-      const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
-      return pb - pa;
-    });
+  const withDate = tasks.filter((t) => t.due_date).sort((a, b) => a.due_date!.localeCompare(b.due_date!));
+  const withoutDate = tasks.filter((t) => !t.due_date).sort((a, b) => {
+    const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
+    const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
+    return pb - pa;
+  });
   return [...withDate, ...withoutDate].slice(0, 10);
 }
 
+// ─── Data loading ─────────────────────────────────────────────────────────────
+
 onMounted(async () => {
   const today = dateStr(0);
   const nextWeek = dateStr(7);
@@ -74,79 +123,48 @@ onMounted(async () => {
   const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, otherRes] =
     await Promise.allSettled([
       apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=8"),
-      apiGet<TaskListResponse>(
-        `/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`
-      ),
-      apiGet<TaskListResponse>(
-        `/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`
-      ),
-      apiGet<TaskListResponse>(
-        `/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`
-      ),
-      apiGet<TaskListResponse>(
-        `/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`
-      ),
-      apiGet<TaskListResponse>(
-        `/api/tasks?sort=updated_at&order=desc&limit=50`
-      ),
+      apiGet<TaskListResponse>(`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`),
+      apiGet<TaskListResponse>(`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`),
+      apiGet<TaskListResponse>(`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`),
+      apiGet<TaskListResponse>(`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`),
+      apiGet<TaskListResponse>(`/api/tasks?sort=updated_at&order=desc&limit=50`),
     ]);
 
-  if (notesRes.status === "fulfilled") {
-    recentNotes.value = notesRes.value.notes;
-  }
+  if (notesRes.status === "fulfilled") recentNotes.value = notesRes.value.notes;
 
-  // Build seen-set incrementally so each section deduplicates against all above it
   const seen = new Set<number>();
-
   if (overdueRes.status === "fulfilled") {
-    overdueTasks.value = sortByPriorityThenDate(
-      overdueRes.value.tasks.filter((t) => t.status !== "done")
-    );
+    overdueTasks.value = sortByPriorityThenDate(overdueRes.value.tasks.filter((t) => t.status !== "done"));
     for (const t of overdueTasks.value) seen.add(t.id);
   }
-
   if (dueSoonRes.status === "fulfilled") {
-    const notDone = dueSoonRes.value.tasks.filter(
-      (t) => t.status !== "done" && !seen.has(t.id)
-    );
-    const todayList: Task[] = [];
-    const weekList: Task[] = [];
+    const notDone = dueSoonRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
+    const todayList: Task[] = [], weekList: Task[] = [];
     for (const t of notDone) {
-      if (t.due_date === today) {
-        todayList.push(t);
-      } else {
-        weekList.push(t);
-      }
+      (t.due_date === today ? todayList : weekList).push(t);
     }
     dueTodayTasks.value = sortByPriorityThenDate(todayList);
     dueThisWeekTasks.value = sortByPriorityThenDate(weekList);
     for (const t of dueTodayTasks.value) seen.add(t.id);
     for (const t of dueThisWeekTasks.value) seen.add(t.id);
   }
-
   if (highPriRes.status === "fulfilled") {
-    highPriorityTasks.value = highPriRes.value.tasks.filter(
-      (t) => t.status !== "done" && !seen.has(t.id)
-    );
+    highPriorityTasks.value = highPriRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
     for (const t of highPriorityTasks.value) seen.add(t.id);
   }
-
   if (inProgressRes.status === "fulfilled") {
-    inProgressTasks.value = inProgressRes.value.tasks.filter(
-      (t) => !seen.has(t.id)
-    );
+    inProgressTasks.value = inProgressRes.value.tasks.filter((t) => !seen.has(t.id));
     for (const t of inProgressTasks.value) seen.add(t.id);
   }
-
   if (otherRes.status === "fulfilled") {
-    const remaining = otherRes.value.tasks.filter(
-      (t) => t.status !== "done" && !seen.has(t.id)
-    );
-    otherTasks.value = sortOtherTasks(remaining);
+    otherTasks.value = sortOtherTasks(otherRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id)));
   }
 
   loading.value = false;
   nextTick(() => chatInputRef.value?.focus());
+
+  // Load projects in parallel (non-blocking)
+  loadProjects();
 });
 
 const noTasks = computed(
@@ -160,12 +178,8 @@ const noTasks = computed(
 );
 
 const allTaskLists = [
-  () => overdueTasks,
-  () => dueTodayTasks,
-  () => dueThisWeekTasks,
-  () => highPriorityTasks,
-  () => inProgressTasks,
-  () => otherTasks,
+  () => overdueTasks, () => dueTodayTasks, () => dueThisWeekTasks,
+  () => highPriorityTasks, () => inProgressTasks, () => otherTasks,
 ];
 
 function removeFromAllLists(id: number) {
@@ -183,22 +197,19 @@ function onStatusToggle(id: number, status: TaskStatus) {
       for (const getList of allTaskLists) {
         const list = getList();
         const idx = list.value.findIndex((t) => t.id === updated.id);
-        if (idx !== -1) {
-          list.value[idx] = updated;
-          break;
-        }
+        if (idx !== -1) { list.value[idx] = updated; break; }
       }
     }
   });
 }
 
+// ─── Chat widget ──────────────────────────────────────────────────────────────
+
 const chatInputRef = ref<{ focus: () => void } | null>(null);
 const chatStore = useChatStore();
 
 chatStore.fetchStatus().then(() => {
-  if (chatStore.defaultModel) {
-    chatStore.warmModel(chatStore.defaultModel);
-  }
+  if (chatStore.defaultModel) chatStore.warmModel(chatStore.defaultModel);
 });
 
 const dashboardConvId = ref<number | null>(null);
@@ -254,7 +265,7 @@ function clearDashboardResponse() {
 <template>
   <main class="home">
 
-    <!-- Chat widget — full width at top -->
+    <!-- Chat widget -->
     <section class="chat-section">
       <div class="quick-actions">
         <button
@@ -263,39 +274,23 @@ function clearDashboardResponse() {
           class="quick-action-chip"
           :disabled="chatStore.streaming || !chatStore.chatReady"
           @click="onQuickAction(q)"
-        >
-          {{ q }}
-        </button>
+        >{{ q }}</button>
       </div>
       <DashboardChatInput ref="chatInputRef" @submit="onChatSubmit" />
     </section>
 
-    <!-- Inline response — full width -->
+    <!-- Inline response -->
     <div v-if="dashboardConvId" class="dashboard-response">
       <div class="dashboard-response-query">{{ dashboardQuery }}</div>
-
-      <div
-        v-if="chatStore.streaming && chatStore.streamingToolCalls.length"
-        class="dashboard-tool-calls"
-      >
-        <ToolCallCard
-          v-for="(tc, i) in chatStore.streamingToolCalls"
-          :key="i"
-          :tool-call="tc"
-        />
+      <div v-if="chatStore.streaming && chatStore.streamingToolCalls.length" class="dashboard-tool-calls">
+        <ToolCallCard v-for="(tc, i) in chatStore.streamingToolCalls" :key="i" :tool-call="tc" />
       </div>
       <div v-else-if="dashboardDone && dashboardFinalToolCalls.length" class="dashboard-tool-calls">
-        <ToolCallCard
-          v-for="(tc, i) in dashboardFinalToolCalls"
-          :key="i"
-          :tool-call="tc"
-        />
+        <ToolCallCard v-for="(tc, i) in dashboardFinalToolCalls" :key="i" :tool-call="tc" />
       </div>
-
       <div v-if="chatStore.streaming" class="dashboard-response-text streaming">
         <div v-if="chatStore.streamingStatus && !chatStore.streamingContent" class="dashboard-status-line">
-          <span class="dashboard-status-dot"></span>
-          {{ chatStore.streamingStatus }}
+          <span class="dashboard-status-dot"></span>{{ chatStore.streamingStatus }}
         </div>
         <span v-else-if="chatStore.streamingContent">{{ chatStore.streamingContent }}</span>
         <span v-else class="thinking-dots">...</span>
@@ -303,25 +298,22 @@ function clearDashboardResponse() {
       <div v-else-if="dashboardDone && dashboardFinalContent" class="dashboard-response-text">
         {{ dashboardFinalContent }}
       </div>
-
       <div class="dashboard-response-actions" :class="{ conversational: isConversational }">
         <router-link
           :to="`/chat/${dashboardConvId}`"
           class="btn-open-chat"
           :class="{ prominent: isConversational }"
-        >
-          {{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}
-        </router-link>
+        >{{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}</router-link>
         <button class="btn-clear-response" @click="clearDashboardResponse">Clear</button>
       </div>
     </div>
 
     <p v-if="loading" class="loading">Loading...</p>
 
-    <!-- Two-column grid -->
+    <!-- Main grid: Tasks + Notes -->
     <div v-else class="dashboard-grid">
 
-      <!-- Left: Tasks -->
+      <!-- Tasks column -->
       <div class="col-tasks">
         <div class="col-header">
           <h2>Tasks</h2>
@@ -336,11 +328,13 @@ function clearDashboardResponse() {
         <template v-else>
           <section v-if="overdueTasks.length" class="section section-overdue">
             <h3 class="section-title">Overdue</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in overdueTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -348,11 +342,13 @@ function clearDashboardResponse() {
 
           <section v-if="dueTodayTasks.length" class="section">
             <h3 class="section-title">Due Today</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in dueTodayTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -360,11 +356,13 @@ function clearDashboardResponse() {
 
           <section v-if="dueThisWeekTasks.length" class="section">
             <h3 class="section-title">Due This Week</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in dueThisWeekTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -372,11 +370,13 @@ function clearDashboardResponse() {
 
           <section v-if="highPriorityTasks.length" class="section section-high-priority">
             <h3 class="section-title">High Priority</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in highPriorityTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -384,11 +384,13 @@ function clearDashboardResponse() {
 
           <section v-if="inProgressTasks.length" class="section">
             <h3 class="section-title">In Progress</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in inProgressTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -396,11 +398,13 @@ function clearDashboardResponse() {
 
           <section v-if="otherTasks.length" class="section">
             <h3 class="section-title">Other</h3>
-            <div class="cards">
+            <div class="task-rows">
               <TaskCard
                 v-for="task in otherTasks"
                 :key="task.id"
                 :task="task"
+                compact
+                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
                 @status-toggle="onStatusToggle"
               />
             </div>
@@ -408,13 +412,13 @@ function clearDashboardResponse() {
         </template>
       </div>
 
-      <!-- Right: Notes -->
+      <!-- Notes column: 2-per-row mini grid -->
       <div class="col-notes">
         <div class="col-header">
           <h2>Recent Notes</h2>
           <router-link to="/notes" class="see-all">See all</router-link>
         </div>
-        <div v-if="recentNotes.length" class="cards">
+        <div v-if="recentNotes.length" class="notes-mini-grid">
           <NoteCard
             v-for="note in recentNotes"
             :key="note.id"
@@ -428,6 +432,53 @@ function clearDashboardResponse() {
       </div>
 
     </div>
+
+    <!-- Projects widget -->
+    <div v-if="activeProjects.length" class="projects-section">
+      <div class="col-header">
+        <h2>Active Projects</h2>
+        <router-link to="/projects" class="see-all">See all</router-link>
+      </div>
+      <div class="projects-strip">
+        <router-link
+          v-for="project in activeProjects"
+          :key="project.id"
+          :to="`/projects/${project.id}`"
+          class="project-mini-card"
+        >
+          <div class="project-mini-title">{{ project.title }}</div>
+          <template v-if="project.summary?.milestone_summary?.length">
+            <div
+              v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
+              :key="ms.id"
+              class="ms-row"
+            >
+              <span class="ms-label">{{ ms.title }}</span>
+              <div class="ms-track">
+                <div
+                  class="ms-fill"
+                  :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
+                ></div>
+              </div>
+              <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
+            </div>
+          </template>
+          <div v-else-if="project.summary" class="project-mini-counts">
+            <span v-if="project.summary.task_counts.in_progress">
+              {{ project.summary.task_counts.in_progress }} in progress
+            </span>
+            <span v-if="project.summary.task_counts.todo">
+              {{ project.summary.task_counts.todo }} todo
+            </span>
+            <span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
+              No open tasks
+            </span>
+          </div>
+          <div v-else class="project-mini-counts muted">Loading…</div>
+        </router-link>
+      </div>
+    </div>
+
   </main>
 </template>
 
@@ -438,10 +489,8 @@ function clearDashboardResponse() {
   padding: 0 1rem;
 }
 
-/* Chat section */
-.chat-section {
-  margin-bottom: 1rem;
-}
+/* Chat */
+.chat-section { margin-bottom: 1rem; }
 .quick-actions {
   display: flex;
   flex-wrap: wrap;
@@ -462,10 +511,7 @@ function clearDashboardResponse() {
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
-.quick-action-chip:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
+.quick-action-chip:disabled { opacity: 0.4; cursor: default; }
 
 /* Inline response */
 .dashboard-response {
@@ -490,17 +536,11 @@ function clearDashboardResponse() {
 .dashboard-response-text {
   font-size: 0.9rem;
   line-height: 1.55;
-  color: var(--color-text);
   white-space: pre-wrap;
   word-break: break-word;
 }
-.dashboard-response-text.streaming {
-  color: var(--color-text-muted);
-}
-.thinking-dots {
-  display: inline-block;
-  animation: blink 1.2s infinite;
-}
+.dashboard-response-text.streaming { color: var(--color-text-muted); }
+.thinking-dots { display: inline-block; animation: blink 1.2s infinite; }
 .dashboard-status-line {
   display: flex;
   align-items: center;
@@ -534,9 +574,7 @@ function clearDashboardResponse() {
   text-decoration: none;
   font-weight: 500;
 }
-.btn-open-chat:hover {
-  text-decoration: underline;
-}
+.btn-open-chat:hover { text-decoration: underline; }
 .btn-open-chat.prominent {
   background: var(--color-primary);
   color: #fff;
@@ -544,10 +582,7 @@ function clearDashboardResponse() {
   border-radius: var(--radius-sm);
   font-size: 0.9rem;
 }
-.btn-open-chat.prominent:hover {
-  text-decoration: none;
-  opacity: 0.9;
-}
+.btn-open-chat.prominent:hover { text-decoration: none; opacity: 0.9; }
 .btn-clear-response {
   font-size: 0.8rem;
   color: var(--color-text-muted);
@@ -556,11 +591,9 @@ function clearDashboardResponse() {
   cursor: pointer;
   padding: 0;
 }
-.btn-clear-response:hover {
-  color: var(--color-text);
-}
+.btn-clear-response:hover { color: var(--color-text); }
 
-/* Two-column grid */
+/* Main grid */
 .dashboard-grid {
   display: grid;
   grid-template-columns: 3fr 2fr;
@@ -573,28 +606,20 @@ function clearDashboardResponse() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-}
-.col-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
+  margin-bottom: 0.75rem;
 }
+.col-header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
 .see-all {
   color: var(--color-primary);
   text-decoration: none;
   font-size: 0.85rem;
 }
-.see-all:hover {
-  text-decoration: underline;
-}
+.see-all:hover { text-decoration: underline; }
 
-/* Task sections */
-.section {
-  margin-bottom: 1.5rem;
-}
+/* Task sections — compact rows */
+.section { margin-bottom: 1.25rem; }
 .section-title {
-  margin: 0 0 0.6rem;
+  margin: 0 0 0.4rem;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -605,31 +630,100 @@ function clearDashboardResponse() {
   border-left: 3px solid var(--color-danger, #e74c3c);
   padding-left: 0.75rem;
 }
-.section-overdue .section-title {
-  color: var(--color-danger, #e74c3c);
-}
+.section-overdue .section-title { color: var(--color-danger, #e74c3c); }
 .section-high-priority {
   border-left: 3px solid var(--color-warning, #f59e0b);
   padding-left: 0.75rem;
 }
-.cards {
+.task-rows {
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
-}
-.loading {
-  color: var(--color-text-secondary);
+  gap: 0.2rem;
 }
 
-/* Empty states */
-.empty-state {
-  text-align: center;
-  padding: 1.5rem 0;
+/* Notes mini-grid: 2-per-row within the column */
+.notes-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
 }
-.empty-text {
+
+/* Projects widget */
+.projects-section {
+  margin-top: 2rem;
+}
+.projects-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.75rem;
+}
+.project-mini-card {
+  display: block;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.15s;
+}
+.project-mini-card:hover {
+  box-shadow: 0 2px 8px var(--color-shadow);
+}
+.project-mini-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ms-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.3rem;
+}
+.ms-label {
+  font-size: 0.72rem;
   color: var(--color-text-muted);
-  margin: 0 0 0.75rem;
+  width: 5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
+.ms-track {
+  flex: 1;
+  height: 5px;
+  background: var(--color-bg-secondary);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.ms-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.3s;
+}
+.ms-pct {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  width: 2.2rem;
+  text-align: right;
+  flex-shrink: 0;
+}
+.project-mini-counts {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.muted { color: var(--color-text-muted); }
+
+.loading { color: var(--color-text-secondary); }
+.empty-state { text-align: center; padding: 1.5rem 0; }
+.empty-text { color: var(--color-text-muted); margin: 0 0 0.75rem; }
 .btn-cta {
   display: inline-block;
   padding: 0.45rem 1rem;
@@ -644,8 +738,8 @@ function clearDashboardResponse() {
 
 /* Mobile */
 @media (max-width: 768px) {
-  .dashboard-grid {
-    grid-template-columns: 1fr;
-  }
+  .dashboard-grid { grid-template-columns: 1fr; }
+  .notes-mini-grid { grid-template-columns: 1fr; }
+  .projects-strip { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/frontend/src/views/NotesListView.vue b/frontend/src/views/NotesListView.vue
index eb62cf1..940f282 100644
--- a/frontend/src/views/NotesListView.vue
+++ b/frontend/src/views/NotesListView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useNotesStore } from "@/stores/notes";
 import SearchBar from "@/components/SearchBar.vue";
@@ -7,10 +7,21 @@ import NoteCard from "@/components/NoteCard.vue";
 import TagPill from "@/components/TagPill.vue";
 import PaginationBar from "@/components/PaginationBar.vue";
 
+type ViewMode = "grid" | "list";
+
 const route = useRoute();
 const router = useRouter();
 const store = useNotesStore();
 
+const viewMode = ref<ViewMode>(
+  (localStorage.getItem("fabled-notes-view-mode") as ViewMode) ?? "grid"
+);
+
+function setViewMode(mode: ViewMode) {
+  viewMode.value = mode;
+  localStorage.setItem("fabled-notes-view-mode", mode);
+}
+
 onMounted(() => {
   const tag = route.query.tag;
   if (tag) {
@@ -81,9 +92,22 @@ function onOffsetUpdate(offset: number) {
           <option value="title">Title</option>
         </select>
         <button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
-          {{ store.sortOrder === "asc" ? "\u2191" : "\u2193" }}
+          {{ store.sortOrder === "asc" ? "↑" : "↓" }}
         </button>
       </div>
+      <!-- View mode toggle -->
+      <div class="view-toggle">
+        <button
+          :class="['toggle-btn', { active: viewMode === 'grid' }]"
+          title="Grid view"
+          @click="setViewMode('grid')"
+        >⊞</button>
+        <button
+          :class="['toggle-btn', { active: viewMode === 'list' }]"
+          title="Compact list"
+          @click="setViewMode('list')"
+        >☰</button>
+      </div>
     </div>
 
     <div v-if="store.activeTagFilters.length" class="active-filters">
@@ -99,10 +123,7 @@ function onOffsetUpdate(offset: number) {
     </div>
 
     <p v-if="store.loading">Loading...</p>
-    <div
-      v-else-if="store.notes.length === 0"
-      class="empty-state"
-    >
+    <div v-else-if="store.notes.length === 0" class="empty-state">
       <template v-if="store.searchQuery || store.activeTagFilters.length">
         <p class="empty-title">No notes match your filters</p>
         <p class="empty-subtitle">Try adjusting your search or removing filters.</p>
@@ -113,7 +134,9 @@ function onOffsetUpdate(offset: number) {
         <router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
       </template>
     </div>
-    <div v-else class="cards">
+
+    <!-- Grid view -->
+    <div v-else-if="viewMode === 'grid'" class="cards-grid">
       <NoteCard
         v-for="note in store.notes"
         :key="note.id"
@@ -122,6 +145,17 @@ function onOffsetUpdate(offset: number) {
       />
     </div>
 
+    <!-- Compact list view -->
+    <div v-else class="cards-list">
+      <NoteCard
+        v-for="note in store.notes"
+        :key="note.id"
+        :note="note"
+        compact
+        @tag-click="onTagClick"
+      />
+    </div>
+
     <PaginationBar
       :total="store.total"
       :limit="store.limit"
@@ -156,7 +190,8 @@ function onOffsetUpdate(offset: number) {
 }
 .controls {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 0.75rem;
 }
 .sort-controls {
@@ -181,6 +216,26 @@ function onOffsetUpdate(offset: number) {
   cursor: pointer;
   font-size: 0.95rem;
 }
+.view-toggle {
+  display: flex;
+  gap: 0.2rem;
+}
+.toggle-btn {
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.toggle-btn.active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
 .active-filters {
   display: flex;
   align-items: center;
@@ -200,12 +255,23 @@ function onOffsetUpdate(offset: number) {
   font-size: 0.8rem;
   padding: 0;
 }
-.cards {
-  display: flex;
-  flex-direction: column;
+
+/* Grid layout */
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 0.75rem;
   margin-top: 1rem;
 }
+
+/* Compact list layout */
+.cards-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-top: 1rem;
+}
+
 .empty-state {
   text-align: center;
   margin-top: 3rem;
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index 71268bb..a465c0b 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -1,18 +1,83 @@
 <script setup lang="ts">
-import { onMounted, watch } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useTasksStore } from "@/stores/tasks";
-import type { TaskStatus } from "@/types/task";
+import type { Task, TaskStatus } from "@/types/task";
+import { apiGet } from "@/api/client";
 import SearchBar from "@/components/SearchBar.vue";
 import TaskCard from "@/components/TaskCard.vue";
 import TagPill from "@/components/TagPill.vue";
 import PaginationBar from "@/components/PaginationBar.vue";
 
+type ViewMode = "flat" | "grouped";
+
 const route = useRoute();
 const router = useRouter();
 const store = useTasksStore();
 
-onMounted(() => {
+const viewMode = ref<ViewMode>(
+  (localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
+);
+
+function setViewMode(mode: ViewMode) {
+  viewMode.value = mode;
+  localStorage.setItem("fabled-tasks-view-mode", mode);
+  if (mode === "grouped") {
+    store.limit = 100;
+    store.offset = 0;
+  } else {
+    store.limit = 20;
+    store.offset = 0;
+  }
+  store.refresh();
+}
+
+// Project map for group labels and task breadcrumbs
+const projectMap = ref<Map<number, string>>(new Map());
+
+async function loadProjects() {
+  try {
+    const data = await apiGet<{ projects: { id: number; title: string }[] }>("/api/projects");
+    projectMap.value = new Map(data.projects.map((p) => [p.id, p.title]));
+  } catch {
+    // non-fatal — labels just won't show
+  }
+}
+
+// Grouped tasks: [{projectId, title, tasks[]}]
+interface TaskGroup {
+  projectId: number | null;
+  title: string;
+  tasks: Task[];
+}
+
+const groupedTasks = computed<TaskGroup[]>(() => {
+  if (viewMode.value !== "grouped") return [];
+  const map = new Map<number | null, Task[]>();
+  for (const task of store.tasks) {
+    const key = task.project_id ?? null;
+    if (!map.has(key)) map.set(key, []);
+    map.get(key)!.push(task);
+  }
+  const groups: TaskGroup[] = [];
+  // Named projects first (sorted by title), then "No Project"
+  for (const [id, tasks] of map) {
+    if (id !== null) {
+      groups.push({
+        projectId: id,
+        title: projectMap.value.get(id) ?? `Project #${id}`,
+        tasks,
+      });
+    }
+  }
+  groups.sort((a, b) => a.title.localeCompare(b.title));
+  if (map.has(null)) {
+    groups.push({ projectId: null, title: "No Project", tasks: map.get(null)! });
+  }
+  return groups;
+});
+
+onMounted(async () => {
   const tag = route.query.tag;
   if (tag) {
     const tags = Array.isArray(tag) ? (tag as string[]) : [tag as string];
@@ -21,7 +86,10 @@ onMounted(() => {
   if (route.query.status) {
     store.statusFilter = route.query.status as TaskStatus;
   }
-  store.refresh();
+  if (viewMode.value === "grouped") {
+    store.limit = 100;
+  }
+  await Promise.all([store.refresh(), loadProjects()]);
 });
 
 watch(
@@ -82,6 +150,16 @@ function onStatusToggle(id: number, status: TaskStatus) {
 function onOffsetUpdate(offset: number) {
   store.setOffset(offset);
 }
+
+// Collapse state for grouped sections
+const collapsedGroups = ref<Set<string>>(new Set());
+function toggleGroup(key: string) {
+  if (collapsedGroups.value.has(key)) {
+    collapsedGroups.value.delete(key);
+  } else {
+    collapsedGroups.value.add(key);
+  }
+}
 </script>
 
 <template>
@@ -108,17 +186,32 @@ function onOffsetUpdate(offset: number) {
           <option value="high">High</option>
         </select>
       </div>
-      <div class="sort-controls">
-        <select :value="store.sortField" @change="onSortChange" class="sort-select">
-          <option value="updated_at">Updated</option>
-          <option value="created_at">Created</option>
-          <option value="title">Title</option>
-          <option value="due_date">Due Date</option>
-          <option value="priority">Priority</option>
-        </select>
-        <button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
-          {{ store.sortOrder === "asc" ? "\u2191" : "\u2193" }}
-        </button>
+      <div class="right-controls">
+        <div class="sort-controls">
+          <select :value="store.sortField" @change="onSortChange" class="sort-select">
+            <option value="updated_at">Updated</option>
+            <option value="created_at">Created</option>
+            <option value="title">Title</option>
+            <option value="due_date">Due Date</option>
+            <option value="priority">Priority</option>
+          </select>
+          <button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
+            {{ store.sortOrder === "asc" ? "↑" : "↓" }}
+          </button>
+        </div>
+        <!-- View mode toggle -->
+        <div class="view-toggle">
+          <button
+            :class="['toggle-btn', { active: viewMode === 'flat' }]"
+            title="Flat list"
+            @click="setViewMode('flat')"
+          >☰</button>
+          <button
+            :class="['toggle-btn', { active: viewMode === 'grouped' }]"
+            title="Group by project"
+            @click="setViewMode('grouped')"
+          >⊟</button>
+        </div>
       </div>
     </div>
 
@@ -135,10 +228,8 @@ function onOffsetUpdate(offset: number) {
     </div>
 
     <p v-if="store.loading">Loading...</p>
-    <div
-      v-else-if="store.tasks.length === 0"
-      class="empty-state"
-    >
+
+    <div v-else-if="store.tasks.length === 0" class="empty-state">
       <template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
         <p class="empty-title">No tasks match your filters</p>
         <p class="empty-subtitle">Try adjusting your search or removing filters.</p>
@@ -149,17 +240,56 @@ function onOffsetUpdate(offset: number) {
         <router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
       </template>
     </div>
-    <div v-else class="cards">
+
+    <!-- Grouped view -->
+    <template v-else-if="viewMode === 'grouped'">
+      <div
+        v-for="group in groupedTasks"
+        :key="group.projectId ?? 'none'"
+        class="task-group"
+      >
+        <button
+          class="group-header"
+          @click="toggleGroup(String(group.projectId))"
+        >
+          <span class="group-chevron">{{ collapsedGroups.has(String(group.projectId)) ? '▶' : '▼' }}</span>
+          <span class="group-title">{{ group.title }}</span>
+          <span class="group-count">{{ group.tasks.length }}</span>
+          <router-link
+            v-if="group.projectId"
+            :to="`/projects/${group.projectId}`"
+            class="group-open-link"
+            @click.stop
+          >Open project →</router-link>
+        </button>
+        <div v-if="!collapsedGroups.has(String(group.projectId))" class="group-tasks">
+          <TaskCard
+            v-for="task in group.tasks"
+            :key="task.id"
+            :task="task"
+            compact
+            @tag-click="onTagClick"
+            @status-toggle="onStatusToggle"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- Flat compact list -->
+    <div v-else class="cards-list">
       <TaskCard
         v-for="task in store.tasks"
         :key="task.id"
         :task="task"
+        compact
+        :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
         @tag-click="onTagClick"
         @status-toggle="onStatusToggle"
       />
     </div>
 
     <PaginationBar
+      v-if="viewMode === 'flat'"
       :total="store.total"
       :limit="store.limit"
       :offset="store.offset"
@@ -194,6 +324,7 @@ function onOffsetUpdate(offset: number) {
 .controls {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-top: 0.75rem;
   gap: 0.5rem;
   flex-wrap: wrap;
@@ -202,6 +333,11 @@ function onOffsetUpdate(offset: number) {
   display: flex;
   gap: 0.5rem;
 }
+.right-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .filter-select,
 .sort-select {
   padding: 0.3rem 0.5rem;
@@ -225,6 +361,26 @@ function onOffsetUpdate(offset: number) {
   cursor: pointer;
   font-size: 0.95rem;
 }
+.view-toggle {
+  display: flex;
+  gap: 0.2rem;
+}
+.toggle-btn {
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.toggle-btn.active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
 .active-filters {
   display: flex;
   align-items: center;
@@ -244,12 +400,70 @@ function onOffsetUpdate(offset: number) {
   font-size: 0.8rem;
   padding: 0;
 }
-.cards {
+
+/* Flat compact list */
+.cards-list {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.3rem;
   margin-top: 1rem;
 }
+
+/* Grouped view */
+.task-group {
+  margin-top: 1.25rem;
+}
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.3rem 0 0.3rem 0;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text);
+}
+.group-header:hover {
+  color: var(--color-primary);
+}
+.group-chevron {
+  font-size: 0.65rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.group-title {
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  flex: 1;
+}
+.group-count {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+.group-open-link {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.group-open-link:hover {
+  text-decoration: underline;
+}
+.group-tasks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.4rem;
+}
+
 .empty-state {
   text-align: center;
   margin-top: 3rem;