diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index c2f4f249a..fa157646b 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -108,31 +108,21 @@ watch(
           :close="close"
         />
         <q-separator color="grey-4" />
-        <q-card-section style="max-height: 50vh" class="scroll q-pa-none">
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div>
-              <q-card class="my-card bg-primary text-white">
-                <div>
-                  <q-card-section class="border-primary">
-                    <div class="text center">เวลาที่กรอก</div>
-                  </q-card-section>
-                </div>
-                <q-separator dark />
-                <div>
-                  <q-card-actions
-                    class="my-card bg-white text-black border-primary"
-                  >
-                    {{ props.date }}
-                  </q-card-actions>
-                </div>
-              </q-card>
-            </div>
+        <q-card-section style="max-height: 60vh" class="scroll q-pa-none">
+          <div class="col q-ma-md q-pa-sm bg-white border-custom">
+            <q-card bordered class="border-primary text-center">
+              <q-card-section class="bg-primary q-pa-sm">
+                <div class="text-white text-bold">เวลาที่กรอก</div>
+              </q-card-section>
+
+              <q-card-section class="q-pa-sm bg-white text-black">
+                {{ props.date }}
+              </q-card-section>
+            </q-card>
           </div>
 
           <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+            class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <datepicker
               menu-class-name="modalfix"
@@ -226,7 +216,7 @@ watch(
             </div>
           </div>
           <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+            class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะเข้างาน</p>
             <div class="row justify-between q-my-sm items-start">
@@ -249,7 +239,7 @@ watch(
           </div>
 
           <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+            class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะออกงาน</p>
             <div class="row justify-between q-my-sm items-start">
@@ -306,7 +296,7 @@ watch(
 .mt {
   margin-top: 10px;
 }
-.border_custom {
+.border-custom {
   border-radius: 6px !important;
   border: 1px solid #e1e1e1;
 }
@@ -373,4 +363,8 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
     }
   }
 }
+
+.border-primary {
+  border: 1px solid var(--q-primary);
+}
 </style>