diff --git a/src/components/pages/expense/ExpenseStatusBadge.tsx b/src/components/pages/expense/ExpenseStatusBadge.tsx
index a7fcb3e9..eee84224 100644
--- a/src/components/pages/expense/ExpenseStatusBadge.tsx
+++ b/src/components/pages/expense/ExpenseStatusBadge.tsx
@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface ExpenseStatusBadgeProps {
   approval?: BaseApproval;
@@ -11,49 +12,45 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
 
   const latestApprovalStepNumber = approval?.step_number;
 
-  let expenseStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = 'gray';
+  let expenseStatusBadgeColor: Color = 'neutral';
 
   switch (latestApprovalStepNumber) {
     case 1:
-      expenseStatusPillBadgeColor = 'gray';
+      expenseStatusBadgeColor = 'neutral';
       break;
 
     case 2:
-      expenseStatusPillBadgeColor = 'purple';
+      expenseStatusBadgeColor = 'info';
       break;
 
     case 3:
-      expenseStatusPillBadgeColor = 'blue';
+      expenseStatusBadgeColor = 'warning';
       break;
 
     case 4:
-      expenseStatusPillBadgeColor = 'yellow';
+      expenseStatusBadgeColor = 'error';
       break;
 
     case 5:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
 
     case 6:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
   }
 
   if (isLatestApprovalRejected) {
-    expenseStatusPillBadgeColor = 'red';
+    expenseStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
-      color={expenseStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={expenseStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };
diff --git a/src/components/pages/expense/RealizationStatusBadge.tsx b/src/components/pages/expense/RealizationStatusBadge.tsx
index 720c1d03..d04d35c3 100644
--- a/src/components/pages/expense/RealizationStatusBadge.tsx
+++ b/src/components/pages/expense/RealizationStatusBadge.tsx
@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface RealizationStatusBadgeProps {
   approval?: BaseApproval;
@@ -15,23 +16,21 @@ const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
     ? 'Sudah Realisasi'
     : 'Belum Realisasi';
 
-  let realizationStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+  let realizationStatusBadgeColor: Color = isExpenseRealized
+    ? 'success'
+    : 'warning';
 
   if (isLatestApprovalRejected) {
-    realizationStatusPillBadgeColor = 'red';
+    realizationStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
-      color={realizationStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={realizationStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };