diff --git a/src/components/ListView.tsx b/src/components/ListView.tsx
new file mode 100644
index 0000000..08c4619
--- /dev/null
+++ b/src/components/ListView.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { useApp } from './AppProvider';
+import TaskCard from './TaskCard';
+
+export default function ListView() {
+  const { tasks, projects, filterStatus, filterPriority, filterCompleted } = useApp();
+
+  // Add project info to each task
+  const tasksWithProject = tasks.map(task => {
+    const project = projects.find(p => p.id === task.projectId);
+    return { ...task, projectColor: project?.color, projectName: project?.name };
+  });
+
+  // Apply client-side filters for status, priority, completed
+  const filteredTasks = tasksWithProject.filter(task => {
+    if (filterStatus && task.status !== filterStatus) return false;
+    if (filterPriority && task.priority !== filterPriority) return false;
+    if (filterCompleted === 'true' && !task.completed) return false;
+    if (filterCompleted === 'false' && task.completed) return false;
+    return true;
+  });
+
+  // Group by status
+  const todoTasks = filteredTasks.filter(t => t.status === 'todo');
+  const inProgressTasks = filteredTasks.filter(t => t.status === 'in_progress');
+  const doneTasks = filteredTasks.filter(t => t.status === 'done');
+
+  const renderSection = (title: string, tasks: typeof filteredTasks, icon: string) => {
+    if (tasks.length === 0 && filterStatus) return null;
+    return (
+      <div className="mb-6">
+        <h3 className="text-sm font-semibold text-text-secondary mb-2 flex items-center gap-2">
+          <span>{icon}</span>
+          {title}
+          <span className="text-xs text-text-secondary font-normal">({tasks.length})</span>
+        </h3>
+        <div className="space-y-2">
+          {tasks.map(task => (
+            <TaskCard
+              key={task.id}
+              task={task}
+              projectColor={task.projectColor}
+              projectName={task.projectName}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4">
+      {filteredTasks.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-full text-text-secondary">
+          <span className="text-4xl mb-4">📝</span>
+          <p className="text-lg font-medium">No tasks yet</p>
+          <p className="text-sm mt-1">Create your first task to get started!</p>
+        </div>
+      ) : (
+        <>
+          {renderSection('To Do', todoTasks, '📋')}
+          {renderSection('In Progress', inProgressTasks, '🔄')}
+          {renderSection('Done', doneTasks, '✅')}
+        </>
+      )}
+    </div>
+  );
+}