diff --git a/src/components/common/status-badge.tsx b/src/components/common/status-badge.tsx
new file mode 100644
index 0000000..4892630
--- /dev/null
+++ b/src/components/common/status-badge.tsx
@@ -0,0 +1,18 @@
+import type { Status } from "@/api/contracts/models";
+import { Badge } from "@/components/ui/badge";
+
+export function StatusBadge({
+  status,
+}: {
+  status: Status | "open" | "acknowledged" | "resolved";
+}) {
+  const variant =
+    status === "healthy" || status === "resolved"
+      ? "success"
+      : status === "warning" || status === "maintenance" || status === "acknowledged"
+        ? "warning"
+        : status === "critical" || status === "open"
+          ? "danger"
+          : "outline";
+  return <Badge variant={variant}>{status}</Badge>;
+}