diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 7185e31b..766c17d2 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -18,6 +18,7 @@ import { useCallback, useMemo } from 'react';
 export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
 
 export type ApprovalStepLog = {
+  action: string;
   action_by?: string;
   date?: string;
   notes?: string | null;
@@ -65,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
                 position='right'
                 className={{
                   wrapper: 'md:tooltip-bottom',
+                  content: 'p-0 rounded overflow-hidden',
                 }}
                 content={
                   <>
                     {approval.logs && approval.logs.length > 0 && (
-                      <div className='flex flex-col gap-2'>
-                        {approval.logs?.map((approvalLog, logIdx) => (
-                          <div
-                            key={logIdx}
-                            className='flex flex-col text-base text-start'
-                          >
-                            {approvalLog.date && (
-                              <span>
-                                {formatDate(
-                                  approvalLog.date,
-                                  'YYYY-MM-DD, HH:mm:ss'
-                                )}
-                              </span>
-                            )}
-                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
-                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
-                          </div>
-                        ))}
+                      <div className='flex flex-col gap-0'>
+                        {approval.logs?.map((approvalLog, logIdx) => {
+                          const action =
+                            approvalLog.action === 'CREATED'
+                              ? 'Dibuat'
+                              : approvalLog.action === 'UPDATED'
+                                ? 'Diperbarui'
+                                : approvalLog.action === 'APPROVED'
+                                  ? 'Disetujui'
+                                  : approvalLog.action === 'REJECTED'
+                                    ? 'Ditolak'
+                                    : '-';
+
+                          return (
+                            <div
+                              key={logIdx}
+                              className={cn(
+                                'p-2 flex flex-col text-base text-start',
+                                {
+                                  'bg-success text-success-content':
+                                    approvalLog.action === 'APPROVED',
+                                  'bg-error text-error-content':
+                                    approvalLog.action === 'REJECTED',
+                                  'bg-info text-info-content':
+                                    approvalLog.action === 'CREATED',
+                                  'bg-warning text-warning-content':
+                                    approvalLog.action === 'UPDATED',
+                                }
+                              )}
+                            >
+                              {approvalLog.date && (
+                                <span>
+                                  {formatDate(
+                                    approvalLog.date,
+                                    'YYYY-MM-DD, HH:mm:ss'
+                                  )}
+                                </span>
+                              )}
+                              <span>Aksi: {action}</span>
+                              <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                              <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                            </div>
+                          );
+                        })}
                       </div>
                     )}
                   </>
@@ -130,6 +158,8 @@ export const formatGroupedApprovalsToApprovalSteps = (
       const lastStepNumber =
         groupedApprovals[groupedApprovals.length - 1]?.step_number;
 
+      const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
+
       if (!approvalGroup && currentStepNumber <= lastStepNumber) {
         throw new Error(
           `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
@@ -158,6 +188,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
         if (approvalGroup.approvals) {
           switch (approvalGroup?.approvals[0]?.action) {
             case 'CREATED':
+            case 'UPDATED':
             case 'APPROVED':
               approvalStatus = 'APPROVED';
               break;
@@ -171,7 +202,10 @@ export const formatGroupedApprovalsToApprovalSteps = (
               break;
           }
         }
-      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+      } else if (
+        approvalGroup.step_number === latestApproval.step_number + 1 &&
+        !isLatestApprovalRejected
+      ) {
         approvalStatus = 'WAITING';
       } else {
         approvalStatus = 'IDLE';
@@ -182,6 +216,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
             action_by: approval.action_by.name,
             date: approval.action_at,
             notes: approval.notes,
+            action: approval.action,
           }))
         : [];
 
@@ -192,6 +227,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
       };
     });
 
+  console.log({
+    approvalLine,
+    groupedApprovals,
+    latestApproval,
+    formattedApprovalSteps,
+  });
+
   return formattedApprovalSteps;
 };