diff --git a/src/components/helper/StatusBadge.tsx b/src/components/helper/StatusBadge.tsx
index fa15812e..46b36559 100644
--- a/src/components/helper/StatusBadge.tsx
+++ b/src/components/helper/StatusBadge.tsx
@@ -5,9 +5,17 @@ import { Color } from '@/types/theme';
 interface StatusBadgeProps {
   color: Color;
   text: string;
+  className?: {
+    badge?: string;
+    status?: string;
+  };
 }
 
-const StatusBadge = ({ color = 'neutral', text }: StatusBadgeProps) => {
+const StatusBadge = ({
+  color = 'neutral',
+  text,
+  className,
+}: StatusBadgeProps) => {
   return (
     <Badge
       variant='soft'
@@ -18,8 +26,11 @@ const StatusBadge = ({ color = 'neutral', text }: StatusBadgeProps) => {
             'bg-base-content/5': color === 'neutral',
             'bg-success/30': color === 'success',
             'bg-error/20': color === 'error',
-          }
+            'bg-primary/20': color === 'info',
+          },
+          className?.badge
         ),
+        status: cn(className?.status),
       }}
       color={color}
     >
@@ -31,6 +42,7 @@ const StatusBadge = ({ color = 'neutral', text }: StatusBadgeProps) => {
           'text-base-content/10': color === 'neutral',
           'text-success': color === 'success',
           'text-error': color === 'error',
+          'text-primary': color === 'info',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />