diff --git a/frontend/src/pages/TasksPage.tsx b/frontend/src/pages/TasksPage.tsx
index 2a58f1c..0995cd7 100644
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@@ -100,9 +100,9 @@ export default function TasksPage() {
             {/* Metrics Row */}
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                 <MetricCard label="Assigned to Me" value={tasks.filter(t => t.assigneeId === user?.id).length} icon={User} color="text-[var(--color-primary)]" />
-                <MetricCard label="Overdue" value={3} icon={AlertCircle} color="text-[var(--color-error)]" />
-                <MetricCard label="Due Today" value={tasks.filter(t => t.status !== 'COMPLETED').length} icon={Clock} color="text-[var(--color-warning)]" />
-                <MetricCard label="Completed 24h" value={completedTasks.length} icon={CheckCircle2} color="text-[var(--color-accent)]" />
+                <MetricCard label="Overdue" value={tasks.filter(t => t.status !== 'COMPLETED' && t.dueDate && new Date(t.dueDate) < new Date()).length} icon={AlertCircle} color="text-[var(--color-error)]" />
+                <MetricCard label="Due Today" value={tasks.filter(t => t.status !== 'COMPLETED' && t.dueDate && new Date(t.dueDate).toDateString() === new Date().toDateString()).length} icon={Clock} color="text-[var(--color-warning)]" />
+                <MetricCard label="Completed 24h" value={tasks.filter(t => t.status === 'COMPLETED' && t.completedAt && new Date(t.completedAt) > new Date(Date.now() - 24 * 60 * 60 * 1000)).length} icon={CheckCircle2} color="text-[var(--color-accent)]" />
             </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">