diff --git a/resources/views/admin/machines/utilization.blade.php b/resources/views/admin/machines/utilization.blade.php
index b2eaee3..2eb641c 100644
--- a/resources/views/admin/machines/utilization.blade.php
+++ b/resources/views/admin/machines/utilization.blade.php
@@ -252,7 +252,7 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
             <p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-3">{{ __('Reporting Period') }}</p>
             <div class="relative group">
                 <input type="date" x-model="startDate" @change="fetchData"
-                       class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer">
+                       class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer dark:[&::-webkit-calendar-picker-indicator]:invert">
                 <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-500"></div>
             </div>
             <p class="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p>
@@ -321,9 +321,9 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
                     <!-- Machine Header -->
                     <div class="luxury-card rounded-[2.5rem] p-8 border-b-4 border-b-cyan-500 shadow-xl shadow-cyan-500/5 relative overflow-hidden">
                         <div class="absolute top-0 right-0 p-8">
-                            <div class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/5 backdrop-blur-md">
-                                <div :class="selectedMachine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-400'" class="size-2 rounded-full"></div>
-                                <span class="text-[10px] font-black uppercase tracking-widest" x-text="selectedMachine.status === 'online' ? '{{ __("Online") }}' : '{{ __("Offline") }}'"></span>
+                            <div class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/10 backdrop-blur-md">
+                                <div :class="selectedMachine.status === 'online' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' : 'bg-slate-400'" class="w-2 h-2 rounded-full"></div>
+                                <span class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200" x-text="selectedMachine.status === 'online' ? '{{ __("Online") }}' : '{{ __("Offline") }}'"></span>
                             </div>
                         </div>