diff --git a/resources/views/livewire/studio/finance/payrolls.blade.php b/resources/views/livewire/studio/finance/payrolls.blade.php
index 57609dd..d50a453 100644
--- a/resources/views/livewire/studio/finance/payrolls.blade.php
+++ b/resources/views/livewire/studio/finance/payrolls.blade.php
@@ -19,8 +19,8 @@
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4 text-sm">
             @foreach ($payrolls as $payroll)
                 <flux:card class="h-auto">
-                    <div class="border rounded-lg p-4 bg-white shadow-sm">
-                        <div class="flex justify-between items-center mb-2">
+                    <div class="border rounded-lg p-4 bg-white shadow-sm dark:bg-zinc-900">
+                        <div class="flex justify-between items-center mb-3">
                             <div>
                                 <flux:heading>{{ $payroll->user->employee->full_name }}</flux:heading>
                                 <flux:text>{{ formatDate($payroll->period_month, 'F Y') }}</flux:text>
@@ -29,9 +29,6 @@
                                 <flux:badge color="{{ $payroll->is_paid->color() }}">
                                     {{ $payroll->is_paid->label() }}
                                 </flux:badge>
-                                <div class="text-xs text-gray-400 mt-1">
-                                    {{ $payroll->paid_at ? formatDateTime($payroll->paid_at) : '-' }}
-                                </div>
                             </div>
                         </div>
 
@@ -50,7 +47,7 @@
                             </div>
                         </div>
 
-                        <flux:separator class="my-2 !bg-black" />
+                        <flux:separator class="my-2 !bg-black dark:!bg-white" />
 
                         <flux:text class="mb-1">Rincian</flux:text>
                         @foreach ($payroll->adjustments->where('payroll_id', $payroll->id) as $item)
@@ -70,11 +67,11 @@ class="font-bold {{ $item->type->value == \App\Enums\SalaryAdjustmentType::DEDUC
                             </div>
                         @endforeach
 
-                        <flux:separator class="my-2 !bg-black" />
+                        <flux:separator class="my-2 !bg-black dark:!bg-white" />
 
                         <div class="flex justify-between items-center mt-2">
                             <flux:text>Total Gaji</flux:text>
-                            <div class="text-gray-900 font-bold">{{ currency($payroll->total_salary, 'Rp') }}</div>
+                            <FLux:heading>{{ currency($payroll->total_salary, 'Rp') }}</FLux:heading>
                         </div>
                     </div>
                 </flux:card>