diff --git a/packages/web/src/components/StatusBadge.tsx b/packages/web/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..114d68d
--- /dev/null
+++ b/packages/web/src/components/StatusBadge.tsx
@@ -0,0 +1,35 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const statusStyles: Record<string, string> = {
+  // Initiative statuses
+  active: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  completed: "bg-green-100 text-green-800 hover:bg-green-100/80 border-green-200",
+  archived: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+
+  // Phase statuses
+  pending: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+  in_progress: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  blocked: "bg-red-100 text-red-800 hover:bg-red-100/80 border-red-200",
+};
+
+const defaultStyle = "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200";
+
+function formatStatusText(status: string): string {
+  return status.replace(/_/g, " ").toUpperCase();
+}
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const style = statusStyles[status] ?? defaultStyle;
+
+  return (
+    <Badge className={cn(style, className)}>
+      {formatStatusText(status)}
+    </Badge>
+  );
+}