diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 8e0f7055..78161b96 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -186,12 +186,13 @@ const ApprovalHistoryModal = ({
         {/* Header */}
         <div className='flex items-center justify-between'>
           <h2 className='text-xl font-bold'>Riwayat Approval</h2>
-          <button
+          <Button
             onClick={closeModalHandler}
-            className='btn btn-sm btn-circle btn-ghost'
+            variant='ghost'
+            className='btn-circle btn-sm p-0'
           >
             <Icon icon='mdi:close' width={20} height={20} />
-          </button>
+          </Button>
         </div>
 
         {isLoading ? (
@@ -697,15 +698,18 @@ const RecordingTable = () => {
               };
 
               return (
-                <button
+                <Badge
+                  variant='soft'
+                  color={statusColor}
+                  className={{
+                    badge:
+                      'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                  }}
                   onClick={openApprovalHistory}
-                  className='btn btn-ghost btn-xs p-0 h-auto min-h-0 text-left hover:bg-transparent'
                   title='Klik untuk lihat riwayat approval'
                 >
-                  <Badge variant='soft' color={statusColor} size='sm'>
-                    {approval.step_name}
-                  </Badge>
-                </button>
+                  {approval.step_name}
+                </Badge>
               );
             },
           },