diff --git a/resources/views/history-modal.blade.php b/resources/views/history-modal.blade.php
index c0e0514..4e4094c 100644
--- a/resources/views/history-modal.blade.php
+++ b/resources/views/history-modal.blade.php
@@ -1,15 +1,26 @@
 @use('Illuminate\Support\Str')
 
-<div class="audit-timeline" style="--bg-card: white; --border-card: #e5e7eb; --shadow-card: 0 1px 2px rgba(0,0,0,0.05);
-    --bg-header: rgba(249,250,251,0.5); --border-header: #f3f4f6;
-    --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #6b7280; --text-placeholder: #9ca3af; --text-empty: #d1d5db;
-    --avatar-from: #f3f4f6; --avatar-to: #e5e7eb; --avatar-text: #374151; --avatar-border: white;
-    --timeline: #e5e7eb;">
-
+<div class="audit-timeline">
     <style>
         .audit-timeline {
+            --bg-card: white;
+            --border-card: #e5e7eb;
+            --shadow-card: 0 1px 2px rgba(0,0,0,0.05);
+            --bg-header: rgba(249,250,251,0.5);
+            --border-header: #f3f4f6;
+            --text-primary: #111827;
+            --text-secondary: #4b5563;
+            --text-muted: #6b7280;
+            --text-placeholder: #9ca3af;
+            --text-empty: #d1d5db;
+            --avatar-from: #f3f4f6;
+            --avatar-to: #e5e7eb;
+            --avatar-text: #374151;
+            --avatar-border: white;
+            --timeline: #e5e7eb;
+
             position: relative;
-            margin-left: 1rem;
+            margin-inline-start: 1rem;
             display: flex;
             flex-direction: column;
             gap: 2rem;
@@ -18,7 +29,7 @@
         .audit-timeline::before {
             content: '';
             position: absolute;
-            left: -0.75rem;
+            inset-inline-start: -0.75rem;
             top: 0;
             bottom: 0;
             width: 2px;
@@ -42,16 +53,58 @@
             --avatar-border: #111827;
             --timeline: #374151;
         }
+
+        .dark .audit-event-created {
+            background-color: rgba(16,185,129,0.1) !important;
+            color: #10b981 !important;
+            border-color: rgba(16,185,129,0.3) !important;
+        }
+
+        .dark .audit-event-deleted {
+            background-color: rgba(239,68,68,0.1) !important;
+            color: #ef4444 !important;
+            border-color: rgba(239,68,68,0.3) !important;
+        }
+
+        .dark .audit-event-updated {
+            background-color: rgba(59,130,246,0.1) !important;
+            color: #3b82f6 !important;
+            border-color: rgba(59,130,246,0.3) !important;
+        }
+
+        .dark .audit-old-value {
+            color: #f87171 !important;
+            background-color: rgba(239,68,68,0.1) !important;
+            border-color: rgba(239,68,68,0.3) !important;
+        }
+
+        .dark .audit-new-value {
+            color: #34d399 !important;
+            background-color: rgba(16,185,129,0.1) !important;
+            border-color: rgba(16,185,129,0.3) !important;
+        }
+
+        .audit-arrow-icon {
+            position: absolute;
+            inset-inline-start: -1.25rem;
+            top: 0.9rem;
+            color: var(--text-placeholder);
+            opacity: 0.8;
+        }
+
+        [dir="rtl"] .audit-arrow-icon svg {
+            transform: scaleX(-1);
+        }
     </style>
 
     @forelse($audits as $audit)
         <div style="position: relative;">
-            <div style="position: absolute; left: -1.25rem; top: 0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 4px solid var(--avatar-border); display: flex; align-items: center; justify-content: center;
+            <div style="position: absolute; inset-inline-start: -1.25rem; top: 0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 4px solid var(--avatar-border); display: flex; align-items: center; justify-content: center;
                 background-color: {{ $audit->event === 'created' ? '#10b981' : ($audit->event === 'deleted' ? '#ef4444' : '#3b82f6') }};">
             </div>
 
             <div style="background-color: var(--bg-card); border-radius: 0.75rem; border: 1px solid var(--border-card); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow 0.2s ease;">
-                
+
                 <div style="padding: 0.75rem 1rem; background-color: var(--bg-header); border-bottom: 1px solid var(--border-header); display: flex; justify-content: space-between; align-items: center;">
                     <div style="display: flex; align-items: center; gap: 0.75rem;">
                         @if($audit->user)
@@ -75,7 +128,7 @@
                     </div>
 
                     <div style="display: flex; align-items: center; gap: 0.75rem;">
-                        <span style="padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.625rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid;
+                        <span class="audit-event-{{ $audit->event }}" style="padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.625rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid;
                             {{ $audit->event === 'created' ? 'background-color: #ecfdf5; color: #065f46; border-color: #d1fae5;' :
                               ($audit->event === 'deleted' ? 'background-color: #fef2f2; color: #991b1b; border-color: #fecaca;' :
                               'background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe;') }}">
@@ -106,14 +159,14 @@
 
                         <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                             @foreach($keys as $key)
-                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0.25rem 0.5rem; margin: 0 -0.5rem; border-radius: 0.375rem; transition: background-color 0.15s;">
+                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0.25rem 0.5rem; margin-inline: -0.5rem; border-radius: 0.375rem; transition: background-color 0.15s;">
                                     <div style="display: flex; flex-direction: column;">
                                         <span style="font-size: 0.625rem; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.125rem;">
                                             {{ Str::headline($key) }}
                                         </span>
-                                        
+
                                         @if(array_key_exists($key, $old))
-                                            <div style="font-family: ui-monospace, monospace; font-size: 0.75rem; color: #dc2626; background-color: rgba(239,68,68,0.05); padding: 0.125rem 0.375rem; border-radius: 0.25rem; width: fit-content; word-break: break-all; border: 1px solid #fee2e2;">
+                                            <div class="audit-old-value" style="font-family: ui-monospace, monospace; font-size: 0.75rem; color: #dc2626; background-color: rgba(239,68,68,0.05); padding: 0.125rem 0.375rem; border-radius: 0.25rem; width: fit-content; word-break: break-all; border: 1px solid #fee2e2;">
                                                 @if(is_array($old[$key]))
                                                     {{ json_encode($old[$key]) }}
                                                 @elseif(is_null($old[$key]))
@@ -130,7 +183,7 @@
                                     </div>
 
                                     <div style="position: relative; display: flex; flex-direction: column;">
-                                        <div style="position: absolute; left: -1.25rem; top: 0.9rem; color: var(--text-placeholder); opacity: 0.8;">
+                                        <div class="audit-arrow-icon">
                                             <x-heroicon-m-arrow-right style="width: 0.75rem; height: 0.75rem;"/>
                                         </div>
 
@@ -139,7 +192,7 @@
                                         </span>
 
                                         @if(array_key_exists($key, $new))
-                                            <div style="font-family: ui-monospace, monospace; font-size: 0.75rem; color: #059669; background-color: rgba(16,185,129,0.05); padding: 0.125rem 0.375rem; border-radius: 0.25rem; width: fit-content; word-break: break-all; border: 1px solid #d1fae5;">
+                                            <div class="audit-new-value" style="font-family: ui-monospace, monospace; font-size: 0.75rem; color: #059669; background-color: rgba(16,185,129,0.05); padding: 0.125rem 0.375rem; border-radius: 0.25rem; width: fit-content; word-break: break-all; border: 1px solid #d1fae5;">
                                                 @if(is_array($new[$key]))
                                                     {{ json_encode($new[$key]) }}
                                                 @elseif(is_null($new[$key]))
@@ -170,4 +223,4 @@
             <p style="font-size: 0.75rem; color: var(--text-muted);">Changes will appear here once you edit this record.</p>
         </div>
     @endforelse
-</div>
\ No newline at end of file
+</div>