diff --git a/packages/web/src/components/ProgressBar.tsx b/packages/web/src/components/ProgressBar.tsx
new file mode 100644
index 0000000..9d4e40d
--- /dev/null
+++ b/packages/web/src/components/ProgressBar.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+interface ProgressBarProps {
+  completed: number;
+  total: number;
+  className?: string;
+}
+
+export function ProgressBar({ completed, total, className }: ProgressBarProps) {
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  const fillColor =
+    percentage === 0
+      ? ""
+      : percentage === 100
+        ? "bg-green-500"
+        : "bg-primary";
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="h-2 flex-1 rounded-full bg-muted">
+        {percentage > 0 && (
+          <div
+            className={cn("h-2 rounded-full transition-all", fillColor)}
+            style={{ width: `${percentage}%` }}
+          />
+        )}
+      </div>
+      <span className="text-xs font-medium text-muted-foreground">
+        {percentage}%
+      </span>
+    </div>
+  );
+}