diff --git a/assets/styles/loginpage/login.css b/assets/styles/loginpage/login.scss
similarity index 60%
rename from assets/styles/loginpage/login.css
rename to assets/styles/loginpage/login.scss
index c8035bd..a55a957 100644
--- a/assets/styles/loginpage/login.css
+++ b/assets/styles/loginpage/login.scss
@@ -1,14 +1,9 @@
-/* assets/styles/loginpage/login.css */
+/* assets/styles/loginpage/login.scss */
+@use '~/assets/scss/_colors.scss' as *;
 
-/* --- COLOR DEFINITIONS --- */
-/* Base Orange: #FF9B1B (New) */
-/* Hover/Darker Orange: #E68A00 (Calculated darker shade for hover effect) */
-/* --- END COLOR DEFINITIONS --- */
-
-
-/* Main Background - Now Orange */
+/* Main Background - Using Primary Color */
 .login-background {
-  background: #FF9B1B; /* Solid Orange Background: #FF9B1B */
+  background: $primary-500; /* Primary-500: #567EE7 */
   min-height: 100vh;
   position: relative;
   overflow: hidden;
@@ -26,7 +21,7 @@
   background: none;
 }
 
-/* Floating Medical Icons - Subtle on Orange Background */
+/* Floating Medical Icons - Subtle on Primary Background */
 .floating-medical-icon {
   position: absolute;
   opacity: 0.8;
@@ -45,7 +40,7 @@
 }
 
 .floating-medical-icon .v-icon {
-  color: rgba(255, 255, 255, 0.15) !important; /* Light white for icons on orange background */
+  color: rgba(255, 255, 255, 0.15) !important; /* Light white for icons on primary background */
 }
 
 /* Specific icon positioning - now static */
@@ -66,14 +61,14 @@
 }
 
 .white-card {
-  background: white !important; /* Main card background is white */
+  background: $neutral-300 !important; /* Neutral-300: #F5F7FA */
   border: 1px solid rgba(0, 0, 0, 0.1);
   /* box-shadow is now managed by .main-card */
 }
 
-/* Right Login Section (White) */
+/* Right Login Section (Neutral-300) */
 .login-section-box {
-  background: white; /* Changed to white */
+  background: $neutral-300; /* Neutral-300: #F5F7FA */
   min-height: 500px; /* Reduced min-height since there is no side-by-side comparison */
 }
 
@@ -84,51 +79,51 @@
 
 /* White Dialog Styles */
 .white-dialog {
-  background: white !important;
+  background: $neutral-100 !important;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }
 
-/* Card Header - Dark Text for white background */
+/* Card Header - Using Neutral Color with Larger Font */
 .welcome-title-dark {
-  color: #333; /* Dark text on white background */
-  font-size: 1.1rem;
+  color: $neutral-900; /* Neutral-900: #212121 */
+  font-size: 1.6rem;
   font-weight: 700;
   letter-spacing: 1px;
   margin-bottom: 0.25rem;
 }
 
 .login-instruction-dark {
-  color: #777; /* Grey text for instruction on white background */
-  font-size: 0.8rem;
+  color: $neutral-700; /* Neutral-700: #717171 */
+  font-size: 1.1rem;
   letter-spacing: 0.3px;
 }
 
-/* App Title - Dark for white background */
+/* App Title - Using Primary Color */
 .app-title-dark {
-  color: #FF9B1B; /* Orange app title: #FF9B1B */
+  color: $primary-500; /* Primary-500: #567EE7 */
   text-shadow: none;
 }
 
 .hospital-logo {
-  height: 332px;
+  height: 180px;
   width: auto;
   filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
 }
 
 .sso-text-dark {
-  color: #555; /* Dark grey for SSO text */
+  color: $neutral-800; /* Dark grey for SSO text */
   font-size: 0.95rem;
   font-weight: 500;
 }
 
-/* Buttons (Orange theme) */
+/* Buttons (Primary theme) */
 .login-btn {
-  background: #FF9B1B !important; /* Solid Orange button: #FF9B1B */
-  color: white !important; /* White text on orange button */
+  background: $primary-500 !important; /* Primary-500: #567EE7 */
+  color: $neutral-100 !important; /* White text on primary button */
   border: none;
   box-shadow:
-    0 8px 25px rgba(255, 155, 27, 0.3), /* Orange shadow: #FF9B1B */
-    0 4px 12px rgba(255, 155, 27, 0.2);
+    0 8px 25px rgba(86, 126, 231, 0.3), /* Primary shadow */
+    0 4px 12px rgba(86, 126, 231, 0.2);
   transition: all 0.3s ease;
   text-transform: none;
   font-size: 1rem;
@@ -137,15 +132,15 @@
 
 .login-btn:hover {
   transform: translateY(-2px);
-  background: #E68A00 !important; /* Slightly darker orange on hover */
+  background: $primary-600 !important; /* Primary-600: #3A61C9 on hover */
   box-shadow:
-    0 12px 30px rgba(255, 155, 27, 0.4),
-    0 6px 15px rgba(255, 155, 27, 0.3);
+    0 12px 30px rgba(86, 126, 231, 0.4),
+    0 6px 15px rgba(86, 126, 231, 0.3);
 }
 
 .register-btn-dark {
-  color: #FF9B1B !important; /* Orange text for register button: #FF9B1B */
-  border: 2px solid #FF9B1B !important; /* Orange border: #FF9B1B */
+  color: $primary-500 !important; /* Primary-500: #567EE7 */
+  border: 2px solid $primary-500 !important; /* Primary border */
   background: transparent !important;
   transition: all 0.3s ease;
   text-transform: none;
@@ -153,39 +148,39 @@
 }
 
 .register-btn-dark:hover {
-  background: rgba(255, 155, 27, 0.05) !important; /* Light orange hover background */
-  border-color: #E68A00 !important; /* Darker orange border on hover */
+  background: rgba(86, 126, 231, 0.05) !important; /* Light primary hover background */
+  border-color: $primary-600 !important; /* Primary-600 border on hover */
   transform: translateY(-1px);
 }
 
 /* Custom Divider - Dark for white background */
 .custom-divider-dark {
-  border-color: rgba(0, 0, 0, 0.1) !important; /* Light grey divider */
+  border-color: $neutral-400 !important; /* Light grey divider */
   opacity: 1 !important;
 }
 
 /* Help Text and Links - Dark for white background */
 .help-text-dark {
-  color: #555; /* Dark grey help text */
+  color: $neutral-800; /* Dark grey help text */
   font-size: 0.9rem;
 }
 
 .contact-link-dark {
-  color: #FF9B1B !important; /* Orange link: #FF9B1B */
+  color: $primary-500 !important; /* Primary-500: #567EE7 */
   text-decoration: underline;
   text-transform: none;
   font-size: 0.9rem;
 }
 
 .help-link-dark {
-  color: #777; /* Grey link */
+  color: $neutral-700; /* Grey link */
   font-size: 0.85rem;
   text-decoration: underline;
   cursor: pointer;
 }
 
 .help-link-dark:hover {
-  color: #FF9B1B; /* Orange on hover: #FF9B1B */
+  color: $primary-500; /* Primary-500 on hover */
 }
 
 /* Transparent Background */
@@ -196,17 +191,17 @@
 /* Dialog Accents */
 .v-card-title .v-icon,
 .v-list-item .v-icon {
-    color: #FF9B1B !important; /* Orange accents: #FF9B1B */
+    color: $primary-500 !important; /* Primary accents */
 }
 
 .v-btn[color="#FF9B1B"] {
-    background-color: #FF9B1B !important;
-    color: white !important;
+    background-color: $primary-500 !important;
+    color: $neutral-100 !important;
 }
 
 .v-alert[color="orange"] {
-    border-left: 8px solid #FF9B1B !important;
-    color: #333 !important;
+    border-left: 8px solid $primary-500 !important;
+    color: $neutral-900 !important;
 }
 
 /* Responsive Design Adjustments for single column */
@@ -232,4 +227,4 @@
   .login-section-box {
     padding: 1.5rem !important;
   }
-}
\ No newline at end of file
+}
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 2b38980..128739a 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -314,83 +314,55 @@
                               <v-card
                                 v-for="(item, index) in paginatedRecentHistory"
                                 :key="index"
-                                variant="outlined"
-                                class="mb-2 history-item-compact"
+                                variant="flat"
+                                elevation="0"
+                                class="mb-1 history-item-compact"
                                 :class="getStatusClass(item.status)"
                               >
-                                <v-card-text class="pa-3">
+                                <v-card-text class="pa-1">
                                   <div class="history-item-content">
-                                    <!-- Top Row: Status, Method & Klinik (Left) + Queue Number (Right) -->
-                                    <div class="d-flex align-center justify-space-between mb-2">
-                                      <div class="d-flex align-center flex-wrap gap-1">
-                                        <v-chip
-                                          :color="getStatusColor(item.status)"
-                                          size="x-small"
-                                          density="compact"
-                                          class="history-status-chip"
-                                        >
-                                          <v-icon start size="12">{{ getStatusIcon(item.status) }}</v-icon>
-                                          {{ getStatusText(item.status) }}
-                                        </v-chip>
-                                        <v-chip
-                                          color="grey-lighten-1"
-                                          size="x-small"
-                                          variant="text"
-                                          density="compact"
-                                          class="history-method-chip"
-                                        >
-                                          {{ item.method }}
-                                        </v-chip>
-                                        <v-chip
-                                          v-if="item.klinik && item.klinik !== 'N/A'"
-                                          size="x-small"
-                                          color="info"
-                                          variant="tonal"
-                                          density="compact"
-                                          class="history-klinik-chip"
-                                        >
-                                          <v-icon start size="12">mdi-hospital-building</v-icon>
-                                          {{ item.klinik }}
-                                        </v-chip>
+                                    <!-- Header Row: Status Badge & Time -->
+                                    <div class="d-flex align-center justify-space-between mb-1">
+                                      <div class="d-flex align-center gap-1">
+                                        <div class="history-status-badge" :class="`status-${getStatusColor(item.status)}`">
+                                          <v-icon size="12">{{ getStatusIcon(item.status) }}</v-icon>
+                                        </div>
+                                        <div>
+                                          <div class="history-status-text" :class="`text-${getStatusColor(item.status)}`">
+                                            {{ getStatusText(item.status) }}
+                                          </div>
+                                          <div class="history-method-text">
+                                            {{ item.method }}
+                                          </div>
+                                        </div>
                                       </div>
-                                      <!-- Queue Number (Right) -->
-                                      <div class="history-queue-number-right">
-                                        <v-icon size="14" class="mr-1" :color="secondaryColor">mdi-ticket</v-icon>
-                                        <span class="text-body-2 font-weight-medium">{{ item.klinikQueueNumber || item.queueNumber || 'N/A' }}</span>
+                                      <div class="history-time-badge">
+                                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
+                                        <span>{{ formatTime(item.checkInTime) }}</span>
                                       </div>
                                     </div>
                                     
-                                    <!-- Bottom Row: Time (Left) + Patient ID & Payment (Right) -->
-                                    <div class="d-flex align-center justify-space-between">
-                                      <!-- Time (Left) -->
-                                      <div class="history-time-left">
-                                        <v-icon size="14" class="mr-1" color="grey-darken-1">mdi-clock-outline</v-icon>
-                                        <span class="text-body-2 text-grey-darken-1">{{ formatTime(item.checkInTime) }}</span>
+                                    <!-- Content Row: Klinik & Queue Number -->
+                                    <div class="d-flex align-center justify-space-between mb-1 flex-wrap gap-1">
+                                      <div v-if="item.klinik && item.klinik !== 'N/A'" class="history-klinik-badge">
+                                        <v-icon size="10" class="mr-1">mdi-hospital-building</v-icon>
+                                        <span>{{ item.klinik }}</span>
                                       </div>
-                                      <!-- Patient ID & Payment (Right) -->
-                                      <div class="d-flex align-center flex-wrap gap-1">
-                                        <v-chip
-                                          v-if="item.patientId"
-                                          size="x-small"
-                                          :color="primaryColor"
-                                          variant="tonal"
-                                          density="compact"
-                                          class="history-patient-chip"
-                                        >
-                                          <v-icon start size="12">mdi-account-circle</v-icon>
-                                          {{ item.patientId }}
-                                        </v-chip>
-                                        <v-chip
-                                          v-if="item.pembayaran && item.pembayaran !== 'N/A'"
-                                          size="x-small"
-                                          :color="primaryColor"
-                                          variant="tonal"
-                                          density="compact"
-                                          class="history-payment-chip"
-                                        >
-                                          <v-icon start size="12">mdi-credit-card</v-icon>
-                                          {{ item.pembayaran }}
-                                        </v-chip>
+                                      <div v-if="item.klinikQueueNumber || item.queueNumber" class="history-queue-badge">
+                                        <v-icon size="10" class="mr-1">mdi-ticket</v-icon>
+                                        <span class="font-weight-semibold">{{ item.klinikQueueNumber || item.queueNumber }}</span>
+                                      </div>
+                                    </div>
+                                    
+                                    <!-- Footer Row: Patient ID & Payment -->
+                                    <div v-if="item.patientId || (item.pembayaran && item.pembayaran !== 'N/A')" class="d-flex align-center flex-wrap gap-1 pt-1 border-top-history">
+                                      <div v-if="item.patientId" class="history-info-badge">
+                                        <v-icon size="10" class="mr-1">mdi-account-circle</v-icon>
+                                        <span>{{ item.patientId }}</span>
+                                      </div>
+                                      <div v-if="item.pembayaran && item.pembayaran !== 'N/A'" class="history-info-badge">
+                                        <v-icon size="10" class="mr-1">mdi-credit-card</v-icon>
+                                        <span>{{ item.pembayaran }}</span>
                                       </div>
                                     </div>
                                   </div>
@@ -702,22 +674,16 @@
       class="blur-dialog"
     >
       <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'warning-header' : 'error-header'">
-          <div class="decorative-circles">
-            <div class="circle circle-1"></div>
-            <div class="circle circle-2"></div>
-            <div class="circle circle-3"></div>
-          </div>
-          
-          <div class="icon-wrapper mb-4">
+        <div class="dialog-header text-center pa-6" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'warning-header' : 'error-header'">
+          <div class="icon-wrapper mb-3">
             <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'icon-bg-warning' : 'icon-bg-error'">
-              <v-icon size="64" color="white" class="dialog-icon">
+              <v-icon size="56" color="white" class="dialog-icon">
                 {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-close-circle' }}
               </v-icon>
             </div>
           </div>
           
-          <h2 class="text-h4 font-weight-bold text-white mb-2">
+          <h2 class="text-h5 font-weight-bold text-white mb-2">
             {{ lastCheckInResult?.success && infoAction === 'checkin' 
               ? 'Check-in Berhasil!' 
               : lastCheckInResult?.status === 'NOT_ALLOWED'
@@ -727,14 +693,14 @@
               : 'Check-in Gagal' }}
           </h2>
           
-          <div class="status-badge mt-3">
+          <div class="status-badge mt-2">
             <v-chip 
               :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
               :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'error'"
               size="small"
               class="font-weight-bold"
             >
-              <v-icon start size="16">
+              <v-icon start size="14">
                 {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-close-circle' }}
               </v-icon>
               {{ lastCheckInResult?.success && infoAction === 'checkin' 
@@ -748,28 +714,22 @@
           </div>
         </div>
         
-        <v-card-text class="pa-8">
+        <v-card-text class="pa-5">
           <div class="message-container">
-            <div class="message-icon mb-4">
-              <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'error'" size="32">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-close-circle' }}
-              </v-icon>
-            </div>
-            
-            <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
+            <div class="text-body-1 font-weight-medium mb-4 text-center" style="white-space: pre-line; color: $neutral-800;">{{ infoMessage }}</div>
             
             <v-divider class="my-4"></v-divider>
             
-            <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'instruction-warning' : 'instruction-warning'">
+            <div v-if="lastCheckInResult" class="instruction-box pa-3 rounded-lg mb-4" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'instruction-warning' : 'instruction-warning'">
               <div class="d-flex align-start">
-                <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'orange'" class="mr-3 mt-1">
+                <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'orange'" class="mr-2 mt-1" size="20">
                   {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
                 </v-icon>
                 <div>
-                  <p class="text-body-1 font-weight-medium mb-1">
+                  <p class="text-body-2 font-weight-medium mb-1">
                     {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
                   </p>
-                  <p class="text-body-2 text-grey-darken-1">
+                  <p class="text-body-2 text-grey-darken-1 mb-0">
                     {{ lastCheckInResult.success && infoAction === 'checkin' 
                       ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
                       : lastCheckInResult.status === 'NOT_ALLOWED'
@@ -783,19 +743,19 @@
             </div>
             
             <!-- Patient Info Card -->
-            <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
+            <v-card variant="outlined" class="patient-info-card" elevation="0">
               <v-card-text class="py-3">
                 <div class="d-flex justify-space-between align-center">
                   <div class="d-flex align-center">
-                    <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
+                    <v-icon color="primary" class="mr-2 patient-info-icon" size="20">mdi-account-circle</v-icon>
                     <div>
                       <p class="text-caption patient-info-label mb-0">ID Pasien</p>
-                      <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
+                      <p class="text-body-2 patient-info-value mb-0 font-weight-medium">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
                     </div>
                   </div>
                   <div class="text-right">
                     <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
-                    <p class="text-body-2 patient-info-value mb-0">{{ getCurrentTime() }}</p>
+                    <p class="text-body-2 patient-info-value mb-0 font-weight-medium">{{ getCurrentTime() }}</p>
                   </div>
                 </div>
               </v-card-text>
@@ -803,18 +763,19 @@
           </div>
         </v-card-text>
         
-        <v-card-actions class="pa-6 pt-0">
+        <v-card-actions class="pa-3 pt-0">
           <v-row dense>
             <v-col v-if="infoAction === 'kembali'" cols="12">
               <v-btn
                 color="grey-darken-1"
-                class="text-white font-weight-bold text-none dialog-button"
-                size="x-large"
+                class="text-white font-weight-semibold text-none dialog-button"
+                size="large"
                 block
                 variant="flat"
                 @click="handleInfoAction"
                 elevation="0"
                 prepend-icon="mdi-arrow-left"
+                rounded="lg"
               >
                 Kembali
               </v-btn>
@@ -823,15 +784,16 @@
               <v-col cols="12">
                 <v-btn
                   :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
-                  class="text-white font-weight-bold text-none dialog-button"
-                  size="x-large"
+                  class="text-white font-weight-semibold text-none dialog-button"
+                  size="large"
                   block
                   variant="flat"
                   @click="handleInfoAction"
-                  elevation="4"
+                  elevation="2"
                   :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
+                  rounded="lg"
                 >
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
+                  Tutup
                 </v-btn>
               </v-col>
             </template>
@@ -871,17 +833,73 @@
       class="blur-dialog"
     >
       <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-          <h2 class="text-h5 font-weight-bold text-white mb-2">
-            <v-icon color="white" class="mr-2">mdi-history</v-icon>
+        <div class="dialog-header text-center pa-5" style="background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);">
+          <h2 class="text-h5 font-weight-bold text-white mb-1">
+            <v-icon color="white" class="mr-2" size="24">mdi-history</v-icon>
             Riwayat Check-in
           </h2>
           <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
         </div>
         
-        <v-card-text class="pa-6">
+        <v-card-text class="pa-3">
+          <!-- Header Stats -->
+          <div class="history-header-stats mb-3">
+            <div class="history-header-title mb-2">
+              <h3 class="text-subtitle-1 font-weight-bold d-flex align-center">
+                <v-icon size="20" class="mr-2" color="primary">mdi-history</v-icon>
+                Riwayat Check-in
+              </h3>
+            </div>
+            <v-row dense>
+              <v-col cols="6" md="3">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-total">
+                    <v-icon size="20">mdi-history</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ checkInHistory.length }}</div>
+                    <div class="stat-label-header">Total</div>
+                  </div>
+                </div>
+              </v-col>
+              <v-col cols="6" md="3">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-success">
+                    <v-icon size="20">mdi-check-circle</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ checkInHistory.filter(item => item.status === 'success' || item.status === 'ALLOWED').length }}</div>
+                    <div class="stat-label-header">Berhasil</div>
+                  </div>
+                </div>
+              </v-col>
+              <v-col cols="6" md="3">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-failed">
+                    <v-icon size="20">mdi-close-circle</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ checkInHistory.filter(item => item.status === 'failed' || item.status === 'NOT_ALLOWED').length }}</div>
+                    <div class="stat-label-header">Gagal</div>
+                  </div>
+                </div>
+              </v-col>
+              <v-col cols="6" md="3">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-filtered">
+                    <v-icon size="20">mdi-filter</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ filteredHistory.length }}</div>
+                    <div class="stat-label-header">Tersaring</div>
+                  </div>
+                </div>
+              </v-col>
+            </v-row>
+          </div>
+
           <!-- Filter dan Search -->
-          <div class="mb-4">
+          <div class="mb-3">
             <v-row dense>
               <v-col cols="12" md="6">
                 <v-text-field
@@ -923,7 +941,7 @@
           <!-- History List -->
           <div v-if="filteredHistory.length > 0">
             <!-- Info jumlah data -->
-            <div class="mb-3 text-body-2 text-grey-darken-1">
+            <div class="mb-2 text-body-2 text-grey-darken-1">
               Menampilkan {{ (historyPage - 1) * historyItemsPerPage + 1 }} - {{ Math.min(historyPage * historyItemsPerPage, filteredHistory.length) }} dari {{ filteredHistory.length }} riwayat
             </div>
             
@@ -931,103 +949,76 @@
               <v-card
                 v-for="(item, index) in paginatedHistory"
                 :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
+                variant="flat"
+                elevation="0"
+                class="mb-1 history-item-dialog"
                 :class="getStatusClass(item.status)"
               >
-              <v-card-text class="pa-4">
+              <v-card-text class="pa-2">
                 <div class="d-flex justify-space-between align-start">
                   <div class="flex-grow-1">
-                    <div class="d-flex align-center mb-2">
-                      <v-chip
-                        :color="getStatusColor(item.status)"
-                        size="small"
-                        class="mr-2"
-                      >
-                        <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
-                        {{ getStatusText(item.status) }}
-                      </v-chip>
-                      <v-chip
-                        color="grey-lighten-1"
-                        size="x-small"
-                        variant="text"
-                      >
-                        {{ item.method }}
-                      </v-chip>
-                    </div>
-                    
-                    <!-- Nomor Antrean Info -->
-                    <div class="mb-3">
-                      <p class="text-body-1 font-weight-bold mb-2">
-                        <v-icon size="18" class="mr-1" :color="secondaryColor">mdi-ticket</v-icon>
-                        {{ item.klinikQueueNumber || item.queueNumber || 'N/A' }}
-                      </p>
-                      
-                      <!-- Patient ID, Klinik & Pembayaran Info Grid -->
-                      <div class="d-flex flex-wrap gap-2 mb-2">
-                        <v-chip
-                          v-if="item.patientId"
-                          size="small"
-                          :color="primaryColor"
-                          variant="tonal"
-                          density="comfortable"
-                        >
-                          <v-icon start size="16">mdi-account-circle</v-icon>
-                          {{ item.patientId }}
-                        </v-chip>
-                        <v-chip
-                          v-if="item.klinik && item.klinik !== 'N/A'"
-                          size="small"
-                          color="info"
-                          variant="tonal"
-                          density="comfortable"
-                        >
-                          <v-icon start size="16">mdi-hospital-building</v-icon>
-                          {{ item.klinik }}
-                        </v-chip>
-                        <v-chip
-                          v-if="item.pembayaran"
-                          size="small"
-                          :color="primaryColor"
-                          variant="tonal"
-                          density="comfortable"
-                        >
-                          <v-icon start size="16">mdi-credit-card</v-icon>
-                          {{ item.pembayaran }}
-                        </v-chip>
+                    <!-- Header: Status & Method -->
+                    <div class="d-flex align-center mb-1 gap-1">
+                      <div class="history-status-badge-dialog" :class="`status-${getStatusColor(item.status)}`">
+                        <v-icon size="14">{{ getStatusIcon(item.status) }}</v-icon>
+                      </div>
+                      <div>
+                        <div class="history-status-text-dialog" :class="`text-${getStatusColor(item.status)}`">
+                          {{ getStatusText(item.status) }}
+                        </div>
+                        <div class="history-method-text-dialog">
+                          {{ item.method }}
+                        </div>
                       </div>
                     </div>
                     
-                    <div class="d-flex flex-wrap gap-2">
-                      <v-chip
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-clock-outline</v-icon>
-                        {{ formatDateTime(item.checkInTime) }}
-                      </v-chip>
-                      <v-chip
-                        v-if="item.checkInDate"
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-calendar</v-icon>
-                        {{ formatDate(item.checkInDate) }}
-                      </v-chip>
+                    <!-- Queue Number -->
+                    <div v-if="item.klinikQueueNumber || item.queueNumber" class="mb-1">
+                      <div class="history-queue-badge-dialog">
+                        <v-icon size="12" class="mr-1">mdi-ticket</v-icon>
+                        <span class="font-weight-semibold">{{ item.klinikQueueNumber || item.queueNumber }}</span>
+                      </div>
+                    </div>
+                    
+                    <!-- Info Badges: Patient ID, Klinik & Pembayaran -->
+                    <div class="d-flex flex-wrap gap-1 mb-1">
+                      <div v-if="item.patientId" class="history-info-badge-dialog">
+                        <v-icon size="12" class="mr-1">mdi-account-circle</v-icon>
+                        <span>{{ item.patientId }}</span>
+                      </div>
+                      <div v-if="item.klinik && item.klinik !== 'N/A'" class="history-klinik-badge-dialog">
+                        <v-icon size="12" class="mr-1">mdi-hospital-building</v-icon>
+                        <span>{{ item.klinik }}</span>
+                      </div>
+                      <div v-if="item.pembayaran" class="history-payment-badge-dialog">
+                        <v-icon size="12" class="mr-1">mdi-credit-card</v-icon>
+                        <span>{{ item.pembayaran }}</span>
+                      </div>
+                    </div>
+                    
+                    <!-- Time Info -->
+                    <div class="d-flex flex-wrap gap-1">
+                      <div class="history-time-badge-dialog">
+                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
+                        <span>{{ formatDateTime(item.checkInTime) }}</span>
+                      </div>
+                      <div v-if="item.checkInDate" class="history-time-badge-dialog">
+                        <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
+                        <span>{{ formatDate(item.checkInDate) }}</span>
+                      </div>
                     </div>
                   </div>
                   
-                  <div class="ml-4">
+                  <div class="ml-2">
                     <v-btn
                       icon
                       size="small"
                       variant="text"
                       color="error"
                       @click="deleteHistoryItem(index)"
+                      class="history-delete-btn"
                     >
-                      <v-icon>mdi-delete-outline</v-icon>
+                      <v-icon size="18">mdi-delete-outline</v-icon>
                     </v-btn>
                   </div>
                 </div>
@@ -1036,7 +1027,7 @@
             </div>
             
             <!-- Pagination -->
-            <div v-if="totalHistoryPages > 1" class="mt-4 d-flex justify-center">
+            <div v-if="totalHistoryPages > 1" class="mt-3 d-flex justify-center">
               <v-pagination
                 v-model="historyPage"
                 :length="totalHistoryPages"
@@ -1048,22 +1039,24 @@
           </div>
 
           <!-- Empty State -->
-          <div v-else class="text-center py-12">
-            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
-            <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
+          <div v-else class="text-center py-6">
+            <v-icon size="48" color="grey-lighten-1" class="mb-2">mdi-history</v-icon>
+            <p class="text-h6 text-grey mb-1">Belum ada riwayat check-in</p>
             <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
           </div>
         </v-card-text>
         
-        <v-card-actions class="pa-6 pt-0">
+        <v-card-actions class="pa-3 pt-0">
           <v-spacer></v-spacer>
           <v-btn
             color="primary"
-            class="text-white font-weight-bold text-none"
+            class="text-white font-weight-semibold text-none"
             size="large"
             variant="flat"
             @click="historyDialog = false"
             prepend-icon="mdi-close"
+            rounded="lg"
+            elevation="2"
           >
             Tutup
           </v-btn>
@@ -1081,19 +1074,66 @@
       class="blur-dialog"
     >
       <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
-          <h2 class="text-h5 font-weight-bold text-white mb-2">
-            <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
+        <div class="dialog-header text-center pa-5" style="background: linear-gradient(135deg, $secondary-500 0%, $secondary-600 100%);">
+          <h2 class="text-h5 font-weight-bold text-white mb-1">
+            <v-icon color="white" class="mr-2" size="24">mdi-qrcode-scan</v-icon>
             Riwayat QR Scan
           </h2>
           <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
         </div>
         
-        <v-card-text class="pa-6">
-          <!-- Filter dan Search -->
-          <div class="mb-4">
+        <v-card-text class="pa-3">
+          <!-- Header Stats -->
+          <div class="history-header-stats mb-3">
+            <div class="history-header-title mb-2">
+              <h3 class="text-subtitle-1 font-weight-bold d-flex align-center">
+                <v-icon size="20" class="mr-2" color="secondary">mdi-qrcode-scan</v-icon>
+                Riwayat QR Scan
+              </h3>
+            </div>
             <v-row dense>
-              <v-col cols="12" md="9">
+              <v-col cols="6" md="4">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-total">
+                    <v-icon size="20">mdi-qrcode-scan</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ scannedQRHistory.length }}</div>
+                    <div class="stat-label-header">Total Scan</div>
+                  </div>
+                </div>
+              </v-col>
+              <v-col cols="6" md="4">
+                <div class="stat-card-header">
+                  <div class="stat-icon-header stat-icon-filtered">
+                    <v-icon size="20">mdi-filter</v-icon>
+                  </div>
+                  <div class="stat-content-header">
+                    <div class="stat-value-header">{{ filteredQRHistory.length }}</div>
+                    <div class="stat-label-header">Tersaring</div>
+                  </div>
+                </div>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-btn
+                  color="error"
+                  variant="outlined"
+                  block
+                  @click="clearQRHistory"
+                  :disabled="scannedQRHistory.length === 0"
+                  class="mt-2 mt-md-0"
+                >
+                  <v-icon start>mdi-delete</v-icon>
+                  Hapus Semua
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- Filter dan Search -->
+          <div class="mb-3">
+            <v-row dense>
+              <v-col cols="12">
                 <v-text-field
                   v-model="historySearch"
                   label="Cari Data QR Code"
@@ -1104,18 +1144,6 @@
                   hide-details
                 ></v-text-field>
               </v-col>
-              <v-col cols="12" md="3">
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  block
-                  @click="clearQRHistory"
-                  :disabled="scannedQRHistory.length === 0"
-                >
-                  <v-icon start>mdi-delete</v-icon>
-                  Hapus Semua
-                </v-btn>
-              </v-col>
             </v-row>
           </div>
 
@@ -1124,48 +1152,44 @@
             <v-card
               v-for="(item, index) in filteredQRHistory"
               :key="index"
-              variant="outlined"
-              class="mb-3 history-item"
+              variant="flat"
+              elevation="0"
+              class="mb-2 history-item-dialog history-item-qr"
             >
-              <v-card-text class="pa-4">
+              <v-card-text class="pa-2">
                 <div class="d-flex justify-space-between align-start">
                   <div class="flex-grow-1">
-                    <div class="mb-2">
-                      <p class="text-body-1 font-weight-bold mb-1">
-                        <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
-                        Data QR: {{ item.data }}
-                      </p>
+                    <!-- QR Data -->
+                    <div class="mb-1">
+                      <div class="history-qr-badge-dialog">
+                        <v-icon size="14" class="mr-1">mdi-qrcode</v-icon>
+                        <span class="font-weight-semibold">{{ item.data }}</span>
+                      </div>
                     </div>
                     
-                    <div class="d-flex flex-wrap gap-2">
-                      <v-chip
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-clock-outline</v-icon>
-                        {{ item.time }}
-                      </v-chip>
-                      <v-chip
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-calendar</v-icon>
-                        {{ item.date }}
-                      </v-chip>
+                    <!-- Time Info -->
+                    <div class="d-flex flex-wrap gap-1">
+                      <div class="history-time-badge-dialog">
+                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
+                        <span>{{ item.time }}</span>
+                      </div>
+                      <div class="history-time-badge-dialog">
+                        <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
+                        <span>{{ item.date }}</span>
+                      </div>
                     </div>
                   </div>
                   
-                  <div class="ml-4">
+                  <div class="ml-2 d-flex gap-1">
                     <v-btn
                       icon
                       size="small"
                       variant="text"
                       color="primary"
                       @click="useQRData(item.data)"
+                      class="history-action-btn"
                     >
-                      <v-icon>mdi-refresh</v-icon>
+                      <v-icon size="18">mdi-refresh</v-icon>
                     </v-btn>
                     <v-btn
                       icon
@@ -1173,8 +1197,9 @@
                       variant="text"
                       color="error"
                       @click="deleteQRHistoryItem(index)"
+                      class="history-delete-btn"
                     >
-                      <v-icon>mdi-delete-outline</v-icon>
+                      <v-icon size="18">mdi-delete-outline</v-icon>
                     </v-btn>
                   </div>
                 </div>
@@ -1183,22 +1208,24 @@
           </div>
 
           <!-- Empty State -->
-          <div v-else class="text-center py-12">
-            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
-            <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
+          <div v-else class="text-center py-6">
+            <v-icon size="48" color="grey-lighten-1" class="mb-2">mdi-qrcode-scan</v-icon>
+            <p class="text-h6 text-grey mb-1">Belum ada riwayat QR scan</p>
             <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
           </div>
         </v-card-text>
         
-        <v-card-actions class="pa-6 pt-0">
+        <v-card-actions class="pa-3 pt-0">
           <v-spacer></v-spacer>
           <v-btn
             color="primary"
-            class="text-white font-weight-bold text-none"
+            class="text-white font-weight-semibold text-none"
             size="large"
             variant="flat"
             @click="qrHistoryDialog = false"
             prepend-icon="mdi-close"
+            rounded="lg"
+            elevation="2"
           >
             Tutup
           </v-btn>
@@ -3377,7 +3404,12 @@ const statsToday = computed(() => {
   return checkInHistory.value.filter(item => {
     const itemDate = new Date(item.checkInDate || item.checkInTime);
     const itemDateStr = itemDate.toISOString().split('T')[0];
-    return itemDateStr === todayAfterReset;
+    
+    // Only count items from today (after reset time consideration)
+    if (itemDateStr !== todayAfterReset) return false;
+    
+    // Only count successful check-ins
+    return item.status === 'success' || item.status === 'ALLOWED';
   }).length;
 });
 
@@ -3435,10 +3467,12 @@ if (typeof window !== 'undefined') {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@use '@/assets/scss/colors' as *;
+
 /* Modern Minimalist Background */
 .bg-modern {
-  background: #ffffff;
+  background: $neutral-100;
   min-height: 100vh;
   max-height: 100vh;
   position: relative;
@@ -3487,7 +3521,7 @@ if (typeof window !== 'undefined') {
 
 /* Main Card dengan Glassmorphism */
 .main-card {
-  background: rgba(255, 255, 255, 0.95) !important;
+  background: rgba($neutral-100, 0.95) !important;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.3);
@@ -3500,7 +3534,7 @@ if (typeof window !== 'undefined') {
 
 /* Header Modern Minimalis */
 .header-modern {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   padding: 8px 20px 6px;
   position: relative;
   overflow: hidden;
@@ -3545,7 +3579,7 @@ if (typeof window !== 'undefined') {
 .title-modern {
   font-size: 18px;
   font-weight: 700;
-  color: white;
+  color: $neutral-100;
   margin: 0;
   letter-spacing: -0.5px;
 }
@@ -3575,18 +3609,18 @@ if (typeof window !== 'undefined') {
 }
 
 .tabs-modern :deep(.v-tab--selected) {
-  color: #FB8C00 !important;
-  background: rgba(251, 140, 0, 0.2);
+  color: $secondary-500 !important;
+  background: rgba($secondary-500, 0.2);
   border-radius: 12px;
   backdrop-filter: blur(10px);
 }
 
 .tabs-modern :deep(.v-tab--selected .v-icon) {
-  color: #FB8C00 !important;
+  color: $secondary-500 !important;
 }
 
 .tabs-modern :deep(.v-tab--selected span) {
-  color: #FB8C00 !important;
+  color: $secondary-500 !important;
 }
 
 .tabs-modern :deep(.v-slider) {
@@ -3605,7 +3639,7 @@ if (typeof window !== 'undefined') {
 
 /* Content Area */
 .content-modern {
-  background: white;
+  background: $neutral-100;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
 }
@@ -3723,10 +3757,13 @@ if (typeof window !== 'undefined') {
 }
 
 .history-item-compact {
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
-  background: white !important;
+  background: $neutral-100 !important;
+  border: 1px solid $neutral-400 !important;
+  border-radius: 8px !important;
+  border-left: 3px solid transparent !important;
 }
 
 .history-item-compact::before {
@@ -3735,9 +3772,10 @@ if (typeof window !== 'undefined') {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 4px;
+  width: 3px;
   background: transparent;
   z-index: 1;
+  border-radius: 8px 0 0 8px;
 }
 
 .history-item-compact :deep(.v-card__underlay) {
@@ -3745,97 +3783,161 @@ if (typeof window !== 'undefined') {
 }
 
 .history-item-compact :deep(.v-card__border) {
-  border-left: none !important;
-}
-
-.history-item-compact :deep(.v-card__border)::before {
-  border-left: none !important;
+  border: none !important;
 }
 
 .history-item-compact:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+  border-color: $neutral-500 !important;
 }
 
 .history-item-compact.history-success::before {
-  background: #4caf50 !important;
+  background: $success-500 !important;
 }
 
 .history-item-compact.history-success {
-  background: rgba(76, 175, 80, 0.03) !important;
+  background: rgba($success-100, 0.5) !important;
+  border-left-color: $success-500 !important;
 }
 
 .history-item-compact.history-success :deep(.v-card-text) {
-  background: rgba(76, 175, 80, 0.03) !important;
+  background: transparent !important;
 }
 
 .history-item-compact.history-failed::before {
-  background: #f44336 !important;
+  background: $danger-500 !important;
 }
 
 .history-item-compact.history-failed {
-  background: rgba(244, 67, 54, 0.08) !important;
+  background: rgba($danger-100, 0.5) !important;
+  border-left-color: $danger-500 !important;
 }
 
 .history-item-compact.history-failed :deep(.v-card-text) {
-  background: rgba(244, 67, 54, 0.08) !important;
+  background: transparent !important;
 }
 
 .history-item-compact.history-pending::before {
-  background: #ff9800 !important;
+  background: $secondary-500 !important;
 }
 
 .history-item-compact.history-pending {
-  background: rgba(255, 152, 0, 0.08) !important;
+  background: rgba($secondary-100, 0.5) !important;
+  border-left-color: $secondary-500 !important;
 }
 
 .history-item-compact.history-pending :deep(.v-card-text) {
-  background: rgba(255, 152, 0, 0.08) !important;
+  background: transparent !important;
 }
 
-.history-status-chip {
+/* Status Badge */
+.history-status-badge {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.history-status-badge.status-success {
+  background: rgba($success-500, 0.15);
+  color: $success-600;
+}
+
+.history-status-badge.status-error,
+.history-status-badge.status-warning {
+  background: rgba($danger-500, 0.15);
+  color: $danger-600;
+}
+
+.history-status-badge.status-warning {
+  background: rgba($secondary-500, 0.15);
+  color: $secondary-600;
+}
+
+.history-status-text {
+  font-size: 12px;
   font-weight: 600;
-  font-size: 11px !important;
+  line-height: 1.2;
+  margin-bottom: 0;
 }
 
-.history-method-chip {
-  font-size: 10px !important;
-  color: #757575 !important;
+.history-status-text.text-success {
+  color: $success-600;
 }
 
-.history-queue-number {
-  font-size: 14px;
-  line-height: 1.5;
-  color: #1a1a1a;
+.history-status-text.text-error {
+  color: $danger-600;
 }
 
-.history-queue-number .v-icon {
-  margin-right: 4px;
+.history-status-text.text-warning {
+  color: $secondary-600;
 }
 
-.history-queue-number-right {
+.history-method-text {
+  font-size: 10px;
+  color: $neutral-600;
+  font-weight: 400;
+}
+
+/* Time Badge */
+.history-time-badge {
   display: flex;
   align-items: center;
+  padding: 2px 6px;
+  background: $neutral-300;
+  border-radius: 4px;
+  font-size: 10px;
+  color: $neutral-700;
   font-weight: 500;
-  color: #1a1a1a;
 }
 
-.history-time-left {
+/* Klinik Badge */
+.history-klinik-badge {
   display: flex;
   align-items: center;
-  color: #424242;
-  font-size: 13px;
+  padding: 2px 6px;
+  background: rgba($primary-500, 0.1);
+  color: $primary-600;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
 }
 
-.history-patient-chip,
-.history-payment-chip {
-  font-size: 10px !important;
+/* Queue Badge */
+.history-queue-badge {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: rgba($secondary-500, 0.1);
+  color: $secondary-600;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
 }
 
-.history-time-chip {
-  font-size: 11px !important;
+/* Info Badge (Patient ID & Payment) */
+.history-info-badge {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: $neutral-300;
+  color: $neutral-700;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 500;
 }
 
+.border-top-history {
+  border-top: 1px solid $neutral-400 !important;
+  margin-top: 2px;
+}
+
+
+
 /* Gap utility untuk flex-wrap */
 .gap-1 {
   gap: 4px;
@@ -3874,7 +3976,7 @@ if (typeof window !== 'undefined') {
   padding: 16px;
   background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
   border-radius: 12px;
-  border: 1px solid rgba(21, 101, 192, 0.1);
+  border: 1px solid rgba($primary-600, 0.1);
   text-align: center;
 }
 
@@ -3882,7 +3984,7 @@ if (typeof window !== 'undefined') {
   width: 40px;
   height: 40px;
   border-radius: 10px;
-  background: white;
+  background: $neutral-100;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3907,7 +4009,7 @@ if (typeof window !== 'undefined') {
 
 .status-subtitle {
   font-size: 13px;
-  color: #6b7280;
+  color: $neutral-700;
   margin: 0;
   line-height: 1.4;
   text-align: center;
@@ -3932,7 +4034,7 @@ if (typeof window !== 'undefined') {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 2px dashed #1565C0;
+  border: 2px dashed $primary-600;
   box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
   margin: 0 auto;
 }
@@ -3986,7 +4088,7 @@ if (typeof window !== 'undefined') {
 
 .qr-reader-wrapper :deep(#qr-reader__scan_region) {
   border-radius: 16px;
-  border: 3px solid rgba(21, 101, 192, 0.8) !important;
+  border: 3px solid rgba($primary-600, 0.8) !important;
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
   position: relative;
 }
@@ -4041,14 +4143,14 @@ if (typeof window !== 'undefined') {
   justify-content: flex-start;
   margin-top: 8px;
   padding: 6px 10px;
-  background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
+  background: linear-gradient(135deg, rgba($primary-600, 0.1) 0%, rgba($primary-700, 0.1) 100%);
   border-radius: 8px;
-  color: #1565C0;
+  color: $primary-600;
   font-weight: 500;
   font-size: 11px;
   line-height: 1.4;
   text-align: left;
-  border: 1px solid rgba(21, 101, 192, 0.2);
+  border: 1px solid rgba($primary-600, 0.2);
   max-width: 320px;
   margin-left: auto;
   margin-right: auto;
@@ -4084,7 +4186,7 @@ if (typeof window !== 'undefined') {
   position: absolute;
   width: 40px;
   height: 40px;
-  border: 3px solid #1565C0;
+  border: 3px solid $primary-600;
 }
 
 .corner-tl {
@@ -4123,10 +4225,10 @@ if (typeof window !== 'undefined') {
   position: absolute;
   width: 100%;
   height: 2px;
-  background: linear-gradient(90deg, transparent, #1565C0, transparent);
+  background: linear-gradient(90deg, transparent, $primary-600, transparent);
   top: 0;
   animation: scan 2s linear infinite;
-  box-shadow: 0 0 10px #1565C0;
+  box-shadow: 0 0 10px $primary-600;
 }
 
 @keyframes scan {
@@ -4148,19 +4250,19 @@ if (typeof window !== 'undefined') {
 /* Modern Buttons */
 .btn-primary-modern {
   background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
-  color: white !important;
+  color: $neutral-100 !important;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0.3px;
   border-radius: 12px !important;
   padding: 14px 28px !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
+  box-shadow: 0 4px 16px rgba($primary-600, 0.3) !important;
 }
 
 .btn-primary-modern:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
+  box-shadow: 0 8px 24px rgba($primary-600, 0.4) !important;
 }
 
 .btn-primary-modern:active {
@@ -4174,19 +4276,19 @@ if (typeof window !== 'undefined') {
 
 .btn-stop-modern {
   background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
-  color: white !important;
+  color: $neutral-100 !important;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0.3px;
   border-radius: 12px !important;
   padding: 14px 28px !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
+  box-shadow: 0 4px 16px rgba($danger-500, 0.3) !important;
 }
 
 .btn-stop-modern:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
+  box-shadow: 0 8px 24px rgba($danger-500, 0.4) !important;
 }
 
 .action-buttons {
@@ -4228,14 +4330,14 @@ if (typeof window !== 'undefined') {
 .input-modern :deep(.v-field) {
   border-radius: 12px;
   font-size: 15px;
-  background: #fafafa;
-  border: 1.5px solid #e5e7eb;
+  background: $neutral-300;
+  border: 1.5px solid $neutral-400;
   transition: all 0.3s ease;
 }
 
 .input-modern :deep(.v-field--focused) {
-  background: white;
-  border-color: #1565C0;
+  background: $neutral-100;
+  border-color: $primary-600;
   box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
 }
 
@@ -4246,7 +4348,7 @@ if (typeof window !== 'undefined') {
 
 .input-modern :deep(.v-label) {
   font-weight: 500;
-  color: #6b7280;
+  color: $neutral-700;
 }
 
 .quick-actions {
@@ -4280,7 +4382,7 @@ if (typeof window !== 'undefined') {
 .quick-actions .v-btn:hover {
   transform: translateY(-2px);
   border-color: #1565C0 !important;
-  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
+  box-shadow: 0 4px 12px rgba($primary-600, 0.15);
 }
 
 .quick-actions .v-btn :deep(.v-icon) {
@@ -4302,7 +4404,7 @@ if (typeof window !== 'undefined') {
   justify-content: center;
   align-items: center;
   padding: 16px;
-  background: white;
+  background: $neutral-100;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
@@ -4323,6 +4425,7 @@ if (typeof window !== 'undefined') {
 .dialog-card {
   overflow: hidden;
   animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border-radius: 16px !important;
 }
 
 @keyframes popIn {
@@ -4339,44 +4442,15 @@ if (typeof window !== 'undefined') {
 .dialog-header {
   position: relative;
   overflow: hidden;
+  border-radius: 16px 16px 0 0;
 }
 
 .dialog-header::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-  animation: rotate 10s linear infinite;
-}
-
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  display: none;
 }
 
 .icon-wrapper {
   display: inline-block;
-  animation: bounceIn 0.6s ease-out 0.2s both;
-}
-
-@keyframes bounceIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  70% {
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
 }
 
 .dialog-icon {
@@ -4384,27 +4458,52 @@ if (typeof window !== 'undefined') {
 }
 
 .success-header {
-  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+  background: linear-gradient(135deg, $success-400 0%, $success-600 100%);
 }
 
 .warning-header {
-  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+  background: linear-gradient(135deg, $secondary-400 0%, $secondary-500 100%);
 }
 
 .error-header {
-  background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+  background: linear-gradient(135deg, $danger-400 0%, $danger-600 100%);
+}
+
+.icon-bg {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
 .icon-bg-success {
-  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+  background: linear-gradient(135deg, $success-400 0%, $success-600 100%);
 }
 
 .icon-bg-warning {
-  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+  background: linear-gradient(135deg, $secondary-400 0%, $secondary-500 100%);
 }
 
 .icon-bg-error {
-  background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+  background: linear-gradient(135deg, $danger-400 0%, $danger-600 100%);
+}
+
+.instruction-box {
+  border: 1px solid transparent;
+}
+
+.instruction-success {
+  background: rgba($success-100, 0.5) !important;
+  border-color: rgba($success-500, 0.2) !important;
+}
+
+.instruction-warning {
+  background: rgba($secondary-100, 0.5) !important;
+  border-color: rgba($secondary-500, 0.2) !important;
 }
 
 .dialog-button {
@@ -4420,18 +4519,18 @@ if (typeof window !== 'undefined') {
 
 /* Patient Info Card Styling */
 .patient-info-card {
-  background: rgba(250, 250, 250, 0.8) !important;
+  background: rgba($neutral-300, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.08) !important;
 }
 
 .patient-info-label {
-  color: #9e9e9e !important;
+  color: $neutral-600 !important;
   font-weight: 500;
   opacity: 0.9;
 }
 
 .patient-info-value {
-  color: #757575 !important;
+  color: $neutral-700 !important;
   font-weight: 500 !important;
   opacity: 0.85;
 }
@@ -4561,7 +4660,7 @@ if (typeof window !== 'undefined') {
   justify-content: center;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  background: #f5f5f5;
+  background: $neutral-300;
   border: 2px solid rgba(0, 0, 0, 0.08);
   overflow: hidden;
 }
@@ -4603,7 +4702,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-primary:hover .stat-icon-discord .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
   transform: scale(1.1) rotate(5deg);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
@@ -4621,7 +4720,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-success:hover .stat-icon-discord .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
   transform: scale(1.1) rotate(-5deg);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
@@ -4639,7 +4738,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-secondary:hover .stat-icon-discord .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
   transform: scale(1.1) rotate(5deg);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
@@ -4669,7 +4768,7 @@ if (typeof window !== 'undefined') {
 
 .stat-label-discord {
   font-size: 9px;
-  color: #6b7280;
+  color: $neutral-700;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -4689,7 +4788,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-card-modern {
-  background: white;
+  background: $neutral-100;
   border-radius: 12px;
   padding: 16px 12px;
   text-align: center;
@@ -4706,7 +4805,7 @@ if (typeof window !== 'undefined') {
   left: 0;
   right: 0;
   height: 3px;
-  background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
+  background: linear-gradient(90deg, $primary-600 0%, $primary-700 100%);
   transform: scaleX(0);
   transition: transform 0.3s ease;
 }
@@ -4714,7 +4813,7 @@ if (typeof window !== 'undefined') {
 .stat-card-modern:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  border-color: #1565C0;
+  border-color: $primary-600;
 }
 
 .stat-card-modern:hover::before {
@@ -4725,7 +4824,7 @@ if (typeof window !== 'undefined') {
   margin-bottom: 12px;
   display: inline-flex;
   padding: 8px;
-  background: #e3f2fd;
+  background: $primary-100;
   border-radius: 10px;
 }
 
@@ -4739,7 +4838,7 @@ if (typeof window !== 'undefined') {
 
 .stat-label {
   font-size: 11px;
-  color: #6b7280;
+  color: $neutral-700;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -4766,17 +4865,17 @@ if (typeof window !== 'undefined') {
 }
 
 .history-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: $neutral-300;
   border-radius: 10px;
 }
 
 .history-list::-webkit-scrollbar-thumb {
-  background: #888;
+  background: $neutral-600;
   border-radius: 10px;
 }
 
 .history-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: $neutral-700;
 }
 
 .history-item {
@@ -4790,18 +4889,302 @@ if (typeof window !== 'undefined') {
 }
 
 .history-success {
-  border-left-color: #4caf50;
-  background: rgba(76, 175, 80, 0.05);
+  border-left-color: $success-500;
+  background: rgba($success-500, 0.05);
 }
 
 .history-failed {
-  border-left-color: #f44336;
-  background: rgba(244, 67, 54, 0.05);
+  border-left-color: $danger-500;
+  background: rgba($danger-500, 0.05);
 }
 
 .history-pending {
-  border-left-color: #ff9800;
-  background: rgba(255, 152, 0, 0.05);
+  border-left-color: $secondary-500;
+  background: rgba($secondary-500, 0.05);
+}
+
+/* History Item Dialog Styling */
+.history-item-dialog {
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+  background: $neutral-100 !important;
+  border: 1px solid $neutral-400 !important;
+  border-radius: 10px !important;
+  border-left: 3px solid transparent !important;
+}
+
+.history-item-dialog::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: transparent;
+  z-index: 1;
+  border-radius: 10px 0 0 10px;
+}
+
+.history-item-dialog:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+  border-color: $neutral-500 !important;
+}
+
+.history-item-dialog.history-success::before {
+  background: $success-500 !important;
+}
+
+.history-item-dialog.history-success {
+  background: rgba($success-100, 0.5) !important;
+  border-left-color: $success-500 !important;
+}
+
+.history-item-dialog.history-failed::before {
+  background: $danger-500 !important;
+}
+
+.history-item-dialog.history-failed {
+  background: rgba($danger-100, 0.5) !important;
+  border-left-color: $danger-500 !important;
+}
+
+.history-item-dialog.history-pending::before {
+  background: $secondary-500 !important;
+}
+
+.history-item-dialog.history-pending {
+  background: rgba($secondary-100, 0.5) !important;
+  border-left-color: $secondary-500 !important;
+}
+
+.history-item-dialog.history-item-qr {
+  border-left-color: $secondary-500 !important;
+  background: rgba($secondary-100, 0.3) !important;
+}
+
+.history-item-dialog.history-item-qr::before {
+  background: $secondary-500 !important;
+}
+
+/* Status Badge Dialog */
+.history-status-badge-dialog {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.history-status-badge-dialog.status-success {
+  background: rgba($success-500, 0.15);
+  color: $success-600;
+}
+
+.history-status-badge-dialog.status-error,
+.history-status-badge-dialog.status-warning {
+  background: rgba($danger-500, 0.15);
+  color: $danger-600;
+}
+
+.history-status-badge-dialog.status-warning {
+  background: rgba($secondary-500, 0.15);
+  color: $secondary-600;
+}
+
+.history-status-text-dialog {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 0;
+}
+
+.history-status-text-dialog.text-success {
+  color: $success-600;
+}
+
+.history-status-text-dialog.text-error {
+  color: $danger-600;
+}
+
+.history-status-text-dialog.text-warning {
+  color: $secondary-600;
+}
+
+.history-method-text-dialog {
+  font-size: 10px;
+  color: $neutral-600;
+  font-weight: 400;
+}
+
+/* Queue Badge Dialog */
+.history-queue-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  background: rgba($secondary-500, 0.1);
+  color: $secondary-600;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Info Badge Dialog */
+.history-info-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: $neutral-300;
+  color: $neutral-700;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.history-klinik-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: rgba($primary-500, 0.1);
+  color: $primary-600;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.history-payment-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: rgba($primary-500, 0.1);
+  color: $primary-600;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.history-qr-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  background: rgba($primary-500, 0.1);
+  color: $primary-600;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Time Badge Dialog */
+.history-time-badge-dialog {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: $neutral-300;
+  border-radius: 4px;
+  font-size: 10px;
+  color: $neutral-700;
+  font-weight: 500;
+}
+
+/* Action Buttons */
+.history-delete-btn,
+.history-action-btn {
+  opacity: 0.7;
+  transition: all 0.2s ease;
+}
+
+.history-item-dialog:hover .history-delete-btn,
+.history-item-dialog:hover .history-action-btn {
+  opacity: 1;
+}
+
+/* History Header Stats */
+.history-header-stats {
+  padding: 12px;
+  background: $neutral-100;
+  border-radius: 12px;
+  border: 1px solid $neutral-400;
+}
+
+.history-header-title {
+  padding-bottom: 6px;
+  border-bottom: 1px solid $neutral-400;
+}
+
+.history-header-title h3 {
+  color: $neutral-900;
+  margin: 0;
+}
+
+.stat-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  background: $neutral-100;
+  border-radius: 8px;
+  border: 1px solid $neutral-400;
+  transition: all 0.2s ease;
+  height: 100%;
+}
+
+.stat-card-header:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.stat-icon-header {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.stat-icon-total {
+  background: rgba($primary-500, 0.15);
+  color: $primary-600;
+}
+
+.stat-icon-success {
+  background: rgba($success-500, 0.15);
+  color: $success-600;
+}
+
+.stat-icon-failed {
+  background: rgba($danger-500, 0.15);
+  color: $danger-600;
+}
+
+.stat-icon-filtered {
+  background: rgba($secondary-500, 0.15);
+  color: $secondary-600;
+}
+
+.stat-content-header {
+  flex: 1;
+  min-width: 0;
+}
+
+.stat-value-header {
+  font-size: 16px;
+  font-weight: 700;
+  color: $neutral-900;
+  line-height: 1.2;
+  margin-bottom: 1px;
+}
+
+.stat-label-header {
+  font-size: 10px;
+  color: $neutral-600;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 /* Mobile Optimization */
@@ -5014,7 +5397,7 @@ if (typeof window !== 'undefined') {
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
-  background: #f5f5f5;
+  background: $neutral-300;
   border: 2px solid rgba(0, 0, 0, 0.08);
   margin-bottom: 6px;
 }
@@ -5031,7 +5414,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-footer-primary:hover .stat-icon-footer .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
 }
 
 .stat-item-footer-success .stat-icon-footer {
@@ -5046,7 +5429,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-footer-success:hover .stat-icon-footer .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
 }
 
 .stat-item-footer-secondary .stat-icon-footer {
@@ -5061,7 +5444,7 @@ if (typeof window !== 'undefined') {
 }
 
 .stat-item-footer-secondary:hover .stat-icon-footer .v-icon {
-  color: white !important;
+  color: $neutral-100 !important;
 }
 
 .stat-content-footer {
@@ -5081,7 +5464,7 @@ if (typeof window !== 'undefined') {
 
 .stat-label-footer {
   font-size: 8px;
-  color: #6b7280;
+  color: $neutral-700;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.8px;
diff --git a/pages/LoginPage.vue b/pages/LoginPage.vue
index 020cdfe..8bddaeb 100644
--- a/pages/LoginPage.vue
+++ b/pages/LoginPage.vue
@@ -31,13 +31,16 @@
                   <p class="login-instruction-dark">MASUK UNTUK MELANJUTKAN</p>
                 </div>
 
-                <div class="d-flex flex-column align-center text-center mb-6">
-                  <span class="text-h5 font-weight-bold app-title-dark">Antrean RSSA</span>
+                <div class="d-flex flex-column align-center text-center mb-10 pt-10 pb-10">
                   <img
-                    src="/AntreanLogobg.png"  
+                    src="/love logo biru.png"
                     alt="Antrean Logo"
                     class="mt-3 hospital-logo"
                   />
+                  <!-- src="/x logo biru.png"  -->
+                  <!-- src="/logo spiral.png"   -->
+                  <!-- src="/logo biru.png"     -->
+                  <!-- src="/love logo biru.png" -->
                 </div>
 
                 <v-alert v-if="errorMessage" type="error" class="mb-4" dismissible @click:close="errorMessage = ''">
@@ -375,4 +378,4 @@ Jam Operasional: Senin - Jumat, 07:00 - 15:00
 }
 </script>
 
-<style scoped src="~/assets/styles/loginpage/login.css"></style>
\ No newline at end of file
+<style scoped src="~/assets/styles/loginpage/login.scss"></style>
\ No newline at end of file
diff --git a/public/logo biru.png b/public/logo biru.png
new file mode 100644
index 0000000..ed42af3
Binary files /dev/null and b/public/logo biru.png differ
diff --git a/public/logo spiral.png b/public/logo spiral.png
new file mode 100644
index 0000000..1cc52cd
Binary files /dev/null and b/public/logo spiral.png differ
diff --git a/public/love logo biru.png b/public/love logo biru.png
new file mode 100644
index 0000000..0a40c37
Binary files /dev/null and b/public/love logo biru.png differ
diff --git a/public/x logo biru.png b/public/x logo biru.png
new file mode 100644
index 0000000..b85927e
Binary files /dev/null and b/public/x logo biru.png differ