diff --git a/resources/views/livewire/confirm-mapping.blade.php b/resources/views/livewire/confirm-mapping.blade.php
index 81b27269..094598c5 100644
--- a/resources/views/livewire/confirm-mapping.blade.php
+++ b/resources/views/livewire/confirm-mapping.blade.php
@@ -15,21 +15,21 @@
         <div></div>
         <div>Startime Difference</div>
         <div></div>
-        <div class="bg-gray-100 p-1 border rounded-lg">{{ $e->format('d-m-y H:i') }}</div>
+        <div class="bg-gray-100 dark:bg-gray-700 p-1 border dark:border-gray-800 rounded-lg">{{ $e->format('d-m-y H:i') }}</div>
         @if ($seconds == 0)
             <div class="bg-green-100 text-green-500 p-1 border rounded-lg flex justify-center gap-1">
                 <span>Matching</span>
                 <x-phosphor-smiley class="w-5 h-5" />
             </div>
         @elseif ($seconds < 1800 && $seconds > -1800)
-            <div class="bg-blue-100 text-blue-500
+            <div class="bg-blue-100  dark:bg-blue-300 text-blue-500  dark:text-blue-600
                     p-1 border rounded-lg">{{ $text }}</div>
         @elseif ($seconds < 7200 && $seconds > -7200)
-            <div class="bg-amber-100 text-amber-500 p-1 border rounded-lg">{{ $text }}</div>
+            <div class="bg-amber-100 dark:bg-amber-300 text-amber-500 dark:text-amber-600 p-1 border rounded-lg">{{ $text }}</div>
         @else
-            <div class="bg-red-100 text-red-500 p-1 border rounded-lg">{{ $text }}</div>
+            <div class="bg-red-100 dark:bg-red-300 text-red-500 dark:text-red-600 p-1 border rounded-lg">{{ $text }}</div>
         @endif
-        <div class="bg-gray-100 p-1 border rounded-lg">{{ $m->format('d-m-y H:i') }}</div>
+        <div class="bg-gray-100 dark:bg-gray-700 p-1 border dark:border-gray-800 rounded-lg">{{ $m->format('d-m-y H:i') }}</div>
         <div class="col-span-3 flex justify-center gap-2 mt-6">
             <div>
                 @if ($event->country?->iso2)