diff --git a/android/app/release/baselineProfiles/0/app-release.dm b/android/app/release/baselineProfiles/0/app-release.dm
new file mode 100644
index 0000000..44f9488
Binary files /dev/null and b/android/app/release/baselineProfiles/0/app-release.dm differ
diff --git a/android/app/release/baselineProfiles/1/app-release.dm b/android/app/release/baselineProfiles/1/app-release.dm
new file mode 100644
index 0000000..7c12850
Binary files /dev/null and b/android/app/release/baselineProfiles/1/app-release.dm differ
diff --git a/android/app/release/output-metadata.json b/android/app/release/output-metadata.json
new file mode 100644
index 0000000..36f38ec
--- /dev/null
+++ b/android/app/release/output-metadata.json
@@ -0,0 +1,37 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.ouji.factory.myapp",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 1,
+      "versionName": "1.0.1a",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File",
+  "baselineProfiles": [
+    {
+      "minApi": 28,
+      "maxApi": 30,
+      "baselineProfiles": [
+        "baselineProfiles/1/app-release.dm"
+      ]
+    },
+    {
+      "minApi": 31,
+      "maxApi": 2147483647,
+      "baselineProfiles": [
+        "baselineProfiles/0/app-release.dm"
+      ]
+    }
+  ],
+  "minSdkVersionForDexing": 24
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index d74d6d7..d552586 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -178,6 +178,12 @@ onMounted(async () => {
         sessionStorage.setItem('token', token)
       }
 
+      // Get cached worker data to retrieve username
+      const cachedWorkerData = await authService.getCachedWorkerData(autoLoginResult.userId);
+      if (cachedWorkerData && cachedWorkerData.username) {
+        sessionStorage.setItem('username', cachedWorkerData.username);
+      }
+
       // Start native services
       await nativeServicesManager.onUserLogin()
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 82cb921..c1fe388 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -100,3 +100,10 @@
     padding-bottom: calc(var(--safe-area-inset-bottom) + 4rem); /* 4rem = bottom nav height */
   }
 }
+
+/* Dark mode overrides */
+@layer base {
+  html.dark {
+    color-scheme: dark;
+  }
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index e096982..b86c15d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -250,5 +250,14 @@
 
   "workLocationTracking": "Work Location Tracking",
   "locationTrackingForAttendance": "Location tracking active for work attendance",
-  "monitoringLocation": "Monitoring location for work attendance"
+  "monitoringLocation": "Monitoring location for work attendance",
+
+  "appInformation": "App Information",
+  "version": "Version",
+  "platform": "Platform",
+  "android": "Android",
+  "web": "Web",
+  "darkMode": "Dark Mode",
+  "enableDarkMode": "Enable dark mode",
+  "disableDarkMode": "Disable dark mode"
 }
diff --git a/src/locales/ms.json b/src/locales/ms.json
index f2cb7a3..b40fe9c 100644
--- a/src/locales/ms.json
+++ b/src/locales/ms.json
@@ -249,5 +249,14 @@
   "workLocationTracking": "Penjejakan Lokasi Kerja",
   "locationTrackingForAttendance": "Penjejakan lokasi aktif untuk kehadiran kerja",
   "monitoringLocation": "Memantau lokasi untuk kehadiran kerja",
-  "failedToVerifyStatus": "Gagal untuk mengesahkan status semasa dari pelayan."
+  "failedToVerifyStatus": "Gagal untuk mengesahkan status semasa dari pelayan.",
+
+  "appInformation": "Maklumat Aplikasi",
+  "version": "Versi",
+  "platform": "Platform",
+  "android": "Android",
+  "web": "Web",
+  "darkMode": "Mod Gelap",
+  "enableDarkMode": "Aktifkan mod gelap",
+  "disableDarkMode": "Nyahaktifkan mod gelap"
 }
diff --git a/src/services/authService.js b/src/services/authService.js
index 059ac82..2af6b79 100644
--- a/src/services/authService.js
+++ b/src/services/authService.js
@@ -228,9 +228,9 @@ class AuthService {
           credentials
         )
 
-        // Cache worker data
+        // Cache worker data including username
         if (decodedToken.role === 'worker') {
-          await this.cacheWorkerData(decodedToken.userId, { full_name: data.fullName })
+          await this.cacheWorkerData(decodedToken.userId, { full_name: data.fullName, username: username })
         }
 
         return {
diff --git a/src/views/ChangePasswordView.vue b/src/views/ChangePasswordView.vue
index fef5171..1212c69 100644
--- a/src/views/ChangePasswordView.vue
+++ b/src/views/ChangePasswordView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed left-0 right-0 top-0 z-50 bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6" style="padding-top: calc(var(--safe-area-inset-top) + 1.5rem);">
@@ -13,32 +13,32 @@
     </header>
 
     <main class="main-with-fixed-header-and-nav px-4 py-8">
-      <div class="bg-white rounded-2xl shadow-lg p-8 w-full max-w-lg mx-auto mt-8">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 w-full max-w-lg mx-auto mt-8">
         <form @submit.prevent="handleChangePassword" class="space-y-6">
           <!-- Success Message -->
-          <div v-if="successMessage" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg">
+          <div v-if="successMessage" class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 rounded-lg">
             {{ $t(successMessage) }}
           </div>
           <!-- Error Message -->
-          <div v-if="errorMessage" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg">
+          <div v-if="errorMessage" class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 rounded-lg">
             {{ $t(errorMessage) }}
           </div>
 
           <!-- Form Fields -->
           <div>
-            <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('currentPassword') }}</label>
+            <label for="currentPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('currentPassword') }}</label>
             <input type="password" id="currentPassword" v-model="passwords.currentPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
           <div>
-            <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('newPassword') }}</label>
+            <label for="newPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('newPassword') }}</label>
             <input type="password" id="newPassword" v-model="passwords.newPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
           <div>
-            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('confirmNewPassword') }}</label>
+            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('confirmNewPassword') }}</label>
             <input type="password" id="confirmPassword" v-model="passwords.confirmPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
 
           <!-- Submit Button -->
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 267ba64..39036fe 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -92,6 +92,7 @@ const handleLogin = async () => {
       sessionStorage.setItem('userId', loginResult.userId.toString())
       sessionStorage.setItem('userRole', loginResult.userRole)
       sessionStorage.setItem('token', loginResult.token)
+      sessionStorage.setItem('username', username.value)
 
       console.log('✅ SESSION STORAGE SET:', {
         userId: sessionStorage.getItem('userId'),
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index d0a4c5d..4416d86 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 min-h-screen">
     <!-- Fixed Header -->
     <header class="fixed-header-safe bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6">
@@ -10,7 +10,7 @@
     <!-- Scrollable Main Content -->
     <main class="main-with-fixed-header-and-nav px-4 py-8 space-y-4">
       <!-- Menu Items -->
-      <div class="bg-white rounded-2xl shadow-lg overflow-hidden mt-8">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden mt-8">
         <!-- Clock History -->
         <router-link to="/worker/history"
           class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
@@ -24,19 +24,6 @@
           <ChevronRightIcon class="w-6 h-6 text-gray-400" />
         </router-link>
 
-        <!-- Service Status -->
-        <router-link to="/worker/services-status"
-          class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
-          <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-5">
-            <CogIcon class="w-8 h-8 text-green-600" />
-          </div>
-          <div class="flex-grow">
-            <h3 class="font-semibold text-lg text-gray-900">{{ $t('servicesStatus') }}</h3>
-            <p class="text-sm text-gray-500">{{ $t('systemServicesStatus') }}</p>
-          </div>
-          <ChevronRightIcon class="w-6 h-6 text-gray-400" />
-        </router-link>
-
         <!-- Change Password -->
         <router-link to="/worker/change-password"
           class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
@@ -58,7 +45,7 @@
           <div class="flex-grow">
             <h3 class="font-semibold text-lg text-gray-900 mb-2">{{ $t('language') }}</h3>
             <select v-model="currentLang" @change="changeLang"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
               <option value="en">{{ $t('english') }}</option>
               <option value="ms">{{ $t('malay') }}</option>
               <option value="tm">{{ $t('tamil') }}</option>
@@ -70,6 +57,21 @@
         </div>
       </div>
 
+      <!-- App Information -->
+      <div class="bg-white rounded-2xl shadow-lg p-6">
+        <h3 class="font-semibold text-lg text-gray-900 mb-4">{{ $t('appInformation') }}</h3>
+        <div class="space-y-3">
+          <div class="flex justify-between">
+            <span class="text-gray-600">{{ $t('version') }}</span>
+            <span class="font-medium text-gray-900">1.0.0</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">{{ $t('platform') }}</span>
+            <span class="font-medium text-gray-900">{{ $t('android') }}</span>
+          </div>
+        </div>
+      </div>
+
       <!-- Logout Button -->
       <button @click="logout"
         class="w-full flex items-center justify-center p-5 bg-white rounded-2xl shadow-lg hover:bg-red-50 transition-colors">
@@ -89,7 +91,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ChartBarIcon, CogIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+import { ChartBarIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
 import { authService } from '@/services/authService.js'
 import { nativeServicesManager } from '@/services/nativeServicesManager.js'
 
@@ -98,10 +100,18 @@ const router = useRouter()
 
 const currentLang = ref(locale.value)
 
-const changeLang = () => {
-  locale.value = currentLang.value
-  localStorage.setItem('lang', currentLang.value)
-}
+  onMounted(() => {
+    const savedLang = localStorage.getItem('lang')
+    if (savedLang) {
+      currentLang.value = savedLang
+    }
+  })
+
+  const changeLang = () => {
+    locale.value = currentLang.value
+    localStorage.setItem('lang', currentLang.value)
+  }
+
 
 const logout = async () => {
   try {
@@ -117,11 +127,4 @@ const logout = async () => {
     router.push('/')
   }
 }
-
-onMounted(() => {
-  const savedLang = localStorage.getItem('lang')
-  if (savedLang) {
-    currentLang.value = savedLang
-  }
-})
 </script>
diff --git a/src/views/WorkerDashboardView.vue b/src/views/WorkerDashboardView.vue
index bb6ef31..fb54e5f 100644
--- a/src/views/WorkerDashboardView.vue
+++ b/src/views/WorkerDashboardView.vue
@@ -1,38 +1,39 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed-header-safe bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6">
         <h1 class="text-3xl font-bold text-center">{{ $t('appTitle') }}</h1>
-        <p class="text-center text-blue-200 mt-1">{{ workerName }}</p>
       </div>
     </header>
 
     <main class="main-with-fixed-header px-4 py-8 space-y-8">
-      <!-- Clock Status Card -->
-      <div class="bg-white rounded-2xl shadow-lg p-6 text-center mt-16">
+      <!-- Worker Name Display -->
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 text-center mt-16">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">{{ workerName }}</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">{{ username }}</p>
         <div class="flex items-center justify-center gap-4 mb-4">
           <component :is="isClockedIn ? CheckCircleIcon : ClockIcon"
-                     :class="['w-16 h-16', isClockedIn ? 'text-green-500' : 'text-red-500']" />
+                     :class="['w-16 h-16', isClockedIn ? 'text-green-500 dark:text-green-400' : 'text-red-500 dark:text-red-400']" />
         </div>
-        <p class="text-lg text-gray-600 mb-1">{{ $t('yourStatus') }}</p>
-        <h2 class="text-3xl font-bold" :class="isClockedIn ? 'text-green-600' : 'text-red-600'">
+        <p class="text-lg text-gray-600 dark:text-gray-400 mb-1">{{ $t('yourStatus') }}</p>
+        <h2 class="text-3xl font-bold" :class="isClockedIn ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
           {{ clockStatus }}
         </h2>
       </div>
 
       <!-- Messages -->
-      <div v-if="successMessage" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg shadow-md">
+      <div v-if="successMessage" class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 rounded-lg shadow-md">
         {{ successMessage }}
       </div>
-      <div v-if="errorMessage" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-md">
+      <div v-if="errorMessage" class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 rounded-lg shadow-md">
         {{ errorMessage }}
       </div>
 
       <!-- QR Scanner Card -->
-      <div class="bg-white rounded-2xl shadow-lg p-6">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
         <div v-if="!isScannerActive" class="space-y-4 text-center">
-          <h3 class="text-xl font-semibold text-gray-800 mb-4">
+          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
             {{ $t('scanToClock', { action: $t(isClockedIn ? 'out' : 'in') }) }}
           </h3>
           <button @click="startScanner"
@@ -46,9 +47,9 @@
         <!-- QR Scanner Overlay -->
         <div id="qr-reader-container" v-show="isScannerActive"
           class="fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center z-50 p-4">
-          <div class="bg-white rounded-2xl p-6 w-full max-w-md">
-            <h3 class="text-2xl font-bold text-gray-900 text-center mb-4">{{ $t('scanQRCode') }}</h3>
-            <div id="qr-reader" class="w-full rounded-lg overflow-hidden border-4 border-gray-300"></div>
+          <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-md">
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 text-center mb-4">{{ $t('scanQRCode') }}</h3>
+            <div id="qr-reader" class="w-full rounded-lg overflow-hidden border-4 border-gray-300 dark:border-gray-600"></div>
           </div>
           <button @click="stopScanner"
             class="mt-8 bg-red-600 hover:bg-red-700 text-white font-bold px-10 py-4 rounded-xl transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-lg">
@@ -82,16 +83,31 @@ const isScannerActive = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
 const workerName = ref('')
+const username = ref('')
 
 let userId = sessionStorage.getItem('userId')
 
 const clockStatus = computed(() => (isClockedIn.value ? t('clockedIn') : t('clockedOut')))
 
 const fetchWorkerDetails = async () => {
+  // Try to get cached worker data first
+  try {
+    const cachedData = await authService.getCachedWorkerData(userId);
+    if (cachedData && cachedData.full_name) {
+      workerName.value = cachedData.full_name;
+      return;
+    }
+  } catch (cacheError) {
+    console.log('No cached worker data available, fetching from API:', cacheError);
+  }
+
+  // Fallback to API if no cached data
   try {
     const data = await apiFetch(`/api/workers/${userId}`)
     if (data) {
       workerName.value = data.full_name
+      // Cache the data for future use
+      await authService.cacheWorkerData(userId, { full_name: data.full_name, username: username.value });
     }
   } catch (err) {
     errorMessage.value = t('couldNotLoadWorkerInfo') + `: ${err.message}`
@@ -204,6 +220,15 @@ onMounted(async () => {
     console.error('Failed to initialize native services:', error)
   }
 
+  // Get username from the current approach
+  const storedUsername = sessionStorage.getItem('username');
+  if (storedUsername) {
+    username.value = storedUsername;
+  } else {
+    // Fallback to placeholder if not found
+    username.value = t('username');
+  }
+
   fetchWorkerDetails()
   fetchCurrentStatus()
 })
diff --git a/src/views/WorkerHistoryView.vue b/src/views/WorkerHistoryView.vue
index 7bae176..d59e04e 100644
--- a/src/views/WorkerHistoryView.vue
+++ b/src/views/WorkerHistoryView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed left-0 right-0 top-0 z-50 bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6" style="padding-top: calc(var(--safe-area-inset-top) + 1.5rem);">
@@ -15,27 +15,27 @@
     <main class="main-with-fixed-header-and-nav px-4 py-8">
       <!-- Empty State -->
       <div v-if="!clockHistory.length" class="text-center py-16 mt-8">
-        <ChartBarIcon class="w-16 h-16 text-gray-400 mx-auto mb-4" />
-        <h2 class="text-2xl font-semibold text-gray-700">{{ $t('noClockHistory') }}</h2>
-        <p class="text-gray-500 mt-2">{{ $t('clockHistoryEmptyState') }}</p>
+        <ChartBarIcon class="w-16 h-16 text-gray-400 dark:text-gray-500 mx-auto mb-4" />
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300">{{ $t('noClockHistory') }}</h2>
+        <p class="text-gray-500 dark:text-gray-400 mt-2">{{ $t('clockHistoryEmptyState') }}</p>
       </div>
 
       <!-- History List -->
       <div v-else class="space-y-4 mt-8 mb-10">
         <div v-for="event in clockHistory" :key="event.id"
-             class="bg-white rounded-2xl shadow-lg p-5 flex items-center space-x-4">
+             class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-5 flex items-center space-x-4">
           <div class="w-12 h-12 rounded-full flex items-center justify-center"
-               :class="event.event_type === 'clock_in' ? 'bg-green-100' : 'bg-red-100'">
+               :class="event.event_type === 'clock_in' ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50'">
             <component :is="event.event_type === 'clock_in' ? ArrowDownCircleIcon : ArrowUpCircleIcon"
-                       :class="['w-8 h-8', event.event_type === 'clock_in' ? 'text-green-600' : 'text-red-600']" />
+                       :class="['w-8 h-8', event.event_type === 'clock_in' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']" />
           </div>
           <div class="flex-grow">
-            <div class="font-bold text-lg text-gray-900">{{ $t(event.event_type) }}</div>
-            <div class="text-sm text-gray-600">{{ event.qrCodeUsedName }}</div>
+            <div class="font-bold text-lg text-gray-900 dark:text-gray-100">{{ $t(event.event_type) }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">{{ event.qrCodeUsedName }}</div>
           </div>
           <div class="text-right">
-            <div class="font-medium text-gray-800">{{ new Date(event.timestamp).toLocaleDateString() }}</div>
-            <div class="text-sm text-gray-500">{{ new Date(event.timestamp).toLocaleTimeString() }}</div>
+            <div class="font-medium text-gray-800 dark:text-gray-200">{{ new Date(event.timestamp).toLocaleDateString() }}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">{{ new Date(event.timestamp).toLocaleTimeString() }}</div>
           </div>
         </div>
       </div>