diff --git a/packages/web/src/components/ProgressPanel.tsx b/packages/web/src/components/ProgressPanel.tsx
new file mode 100644
index 0000000..ee7ebbb
--- /dev/null
+++ b/packages/web/src/components/ProgressPanel.tsx
@@ -0,0 +1,35 @@
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { ProgressBar } from "@/components/ProgressBar";
+
+export interface ProgressPanelProps {
+  phasesComplete: number;
+  phasesTotal: number;
+  tasksComplete: number;
+  tasksTotal: number;
+}
+
+export function ProgressPanel({
+  phasesComplete,
+  phasesTotal,
+  tasksComplete,
+  tasksTotal,
+}: ProgressPanelProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <h2 className="text-lg font-semibold">Progress</h2>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ProgressBar completed={tasksComplete} total={tasksTotal} />
+        <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+          <span>
+            Phases: {phasesComplete}/{phasesTotal} complete
+          </span>
+          <span>
+            Tasks: {tasksComplete}/{tasksTotal} complete
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}