diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index 28176ff..3a272db 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -122,19 +122,7 @@ function isOverdue(): boolean {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.4rem 0.75rem;
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 1px solid var(--color-border);
-  transform: none !important;
-}
-.task-card.compact:first-child {
-  border-top: 1px solid var(--color-border);
-}
-.task-card.compact:hover {
-  box-shadow: none;
-  background: rgba(99, 102, 241, 0.04);
-  transform: none;
+  padding: 0.45rem 0.85rem;
 }
 
 /* Status dot */
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index 762b0eb..21cd4aa 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -8,9 +8,8 @@ import { useListKeyboardNavigation } from "@/composables/useListKeyboardNavigati
 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";
+type ViewMode = "smart" | "grouped";
 
 const route = useRoute();
 const router = useRouter();
@@ -22,29 +21,23 @@ function onFocusSearch() {
   searchBarRef.value?.focus();
 }
 
-const viewMode = ref<ViewMode>(
-  (localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
-);
+const _storedMode = localStorage.getItem("fabled-tasks-view-mode");
+const viewMode = ref<ViewMode>(_storedMode === "grouped" ? "grouped" : "smart");
 
 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.limit = mode === "grouped" ? 100 : 200;
+  store.offset = 0;
   store.refresh();
 }
 
-const isFlat = computed(() => viewMode.value === "flat");
-const { activeIndex } = useListKeyboardNavigation(
+// Keyboard nav disabled — smart sections span multiple containers
+useListKeyboardNavigation(
   computed(() => store.tasks),
   (task) => router.push(`/tasks/${task.id}`),
   ".kb-active-item",
-  isFlat,
+  computed(() => false),
 );
 
 // Project map for group labels and task breadcrumbs
@@ -66,6 +59,36 @@ interface TaskGroup {
   tasks: Task[];
 }
 
+interface TaskSection {
+  key: string;
+  label: string;
+  tasks: Task[];
+}
+
+const smartSections = computed<TaskSection[]>(() => {
+  if (viewMode.value !== "smart") return [];
+  const today = new Date().toISOString().slice(0, 10);
+  const weekEnd = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
+  const overdue: Task[] = [], dueToday: Task[] = [], thisWeek: Task[] = [],
+        upcoming: Task[] = [], noDueDate: Task[] = [], done: Task[] = [];
+  for (const task of store.tasks) {
+    if (task.status === "done")   { done.push(task); continue; }
+    if (!task.due_date)           { noDueDate.push(task); continue; }
+    if (task.due_date < today)    { overdue.push(task); continue; }
+    if (task.due_date === today)  { dueToday.push(task); continue; }
+    if (task.due_date <= weekEnd) { thisWeek.push(task); continue; }
+    upcoming.push(task);
+  }
+  const sections: TaskSection[] = [];
+  if (overdue.length)   sections.push({ key: "overdue",  label: "Overdue",      tasks: overdue });
+  if (dueToday.length)  sections.push({ key: "today",    label: "Due Today",    tasks: dueToday });
+  if (thisWeek.length)  sections.push({ key: "week",     label: "This Week",    tasks: thisWeek });
+  if (upcoming.length)  sections.push({ key: "upcoming", label: "Upcoming",     tasks: upcoming });
+  if (noDueDate.length) sections.push({ key: "no-date",  label: "No Due Date",  tasks: noDueDate });
+  if (done.length)      sections.push({ key: "done",     label: "Completed",    tasks: done });
+  return sections;
+});
+
 const groupedTasks = computed<TaskGroup[]>(() => {
   if (viewMode.value !== "grouped") return [];
   const map = new Map<number | null, Task[]>();
@@ -101,9 +124,8 @@ onMounted(async () => {
   if (route.query.status) {
     store.statusFilter = route.query.status as TaskStatus;
   }
-  if (viewMode.value === "grouped") {
-    store.limit = 100;
-  }
+  store.limit = viewMode.value === "grouped" ? 100 : 200;
+  collapsedGroups.value.add("done");
   await Promise.all([store.refresh(), loadProjects()]);
   document.addEventListener("shortcut:focus-search", onFocusSearch);
 });
@@ -167,10 +189,6 @@ function onStatusToggle(id: number, status: TaskStatus) {
   store.patchStatus(id, status);
 }
 
-function onOffsetUpdate(offset: number) {
-  store.setOffset(offset);
-}
-
 // Collapse state for grouped sections
 const collapsedGroups = ref<Set<string>>(new Set());
 function toggleGroup(key: string) {
@@ -222,9 +240,9 @@ function toggleGroup(key: string) {
         <!-- View mode toggle -->
         <div class="view-toggle">
           <button
-            :class="['toggle-btn', { active: viewMode === 'flat' }]"
-            title="Flat list"
-            @click="setViewMode('flat')"
+            :class="['toggle-btn', { active: viewMode === 'smart' }]"
+            title="Smart sections (by due date)"
+            @click="setViewMode('smart')"
           >☰</button>
           <button
             :class="['toggle-btn', { active: viewMode === 'grouped' }]"
@@ -300,30 +318,28 @@ function toggleGroup(key: string) {
       </div>
     </template>
 
-    <!-- Flat compact list -->
-    <div v-else class="cards-list">
-      <div
-        v-for="(task, i) in store.tasks"
-        :key="task.id"
-        :class="{ 'kb-active-item': activeIndex === i }"
-      >
-        <TaskCard
-          :task="task"
-          compact
-          :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-          @tag-click="onTagClick"
-          @status-toggle="onStatusToggle"
-        />
+    <!-- Smart sections view (by due date) -->
+    <template v-else>
+      <div v-for="section in smartSections" :key="section.key" class="task-section">
+        <button class="section-header" @click="toggleGroup(section.key)">
+          <span :class="['section-dot', `dot-${section.key}`]"></span>
+          <span class="section-label">{{ section.label }}</span>
+          <span class="section-count">{{ section.tasks.length }}</span>
+          <span class="section-chevron">{{ collapsedGroups.has(section.key) ? "▶" : "▼" }}</span>
+        </button>
+        <div v-show="!collapsedGroups.has(section.key)" class="section-tasks">
+          <TaskCard
+            v-for="task in section.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>
       </div>
-    </div>
-
-    <PaginationBar
-      v-if="viewMode === 'flat'"
-      :total="store.total"
-      :limit="store.limit"
-      :offset="store.offset"
-      @update:offset="onOffsetUpdate"
-    />
+    </template>
   </main>
 </template>
 
@@ -453,19 +469,63 @@ function toggleGroup(key: string) {
   100% { background-position: -200% 0; }
 }
 
-/* Flat compact list */
-.cards-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
+/* Smart sections */
+.task-section {
   margin-top: 1rem;
 }
-.cards-list > div {
-  border-radius: var(--radius-sm, 6px);
-  transition: background 0.15s;
+.section-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;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text);
 }
-.cards-list > div:hover {
-  background: rgba(99,102,241,0.05);
+.section-header:hover .section-label {
+  color: var(--color-primary);
+}
+.section-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-overdue  { background: var(--color-danger, #e74c3c); }
+.dot-today    { background: var(--color-primary); }
+.dot-week     { background: #f59e0b; }
+.dot-upcoming { background: var(--color-text-secondary); }
+.dot-no-date  { background: var(--color-text-muted); }
+.dot-done     { background: var(--color-status-done, #22c55e); }
+.section-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  flex: 1;
+  transition: color 0.15s;
+}
+.section-count {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+.section-chevron {
+  font-size: 0.65rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.section-tasks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem 0 0.25rem;
 }
 
 /* Grouped view */