diff --git a/src/components/helper/StatusBadge.tsx b/src/components/helper/StatusBadge.tsx
new file mode 100644
index 00000000..fa15812e
--- /dev/null
+++ b/src/components/helper/StatusBadge.tsx
@@ -0,0 +1,44 @@
+import Badge from '@/components/Badge';
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface StatusBadgeProps {
+  color: Color;
+  text: string;
+}
+
+const StatusBadge = ({ color = 'neutral', text }: StatusBadgeProps) => {
+  return (
+    <Badge
+      variant='soft'
+      className={{
+        badge: cn(
+          'px-2 py-1 w-full flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content',
+          {
+            'bg-base-content/5': color === 'neutral',
+            'bg-success/30': color === 'success',
+            'bg-error/20': color === 'error',
+          }
+        ),
+      }}
+      color={color}
+    >
+      <svg
+        height='12'
+        width='12'
+        xmlns='http://www.w3.org/2000/svg'
+        className={cn({
+          'text-base-content/10': color === 'neutral',
+          'text-success': color === 'success',
+          'text-error': color === 'error',
+        })}
+      >
+        <circle r='6' cx='6' cy='6' fill='currentColor' />
+      </svg>
+
+      {text}
+    </Badge>
+  );
+};
+
+export default StatusBadge;