diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index b9101f9..6afbd41 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -1,56 +1,57 @@
 <template>
-  <div>
     <div class="q-pa-md row items-center justify-center">
-      <q-card style="max-width: 40%; width: 100%" bordered>
-        <q-card-actions class="q-pa-md" :class="getClass(status)">
-          <div v-if="status != 'done'" class="text-black text-bold">
-            เจ้าหน้าที่กำลังตรวจสถานที่สอบ
+      <div  class="col-xs-12 col-sm-8 col-md-6">
+        <q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
+          <div v-if="status != 'done'" class="text-orange-6 text-bold">
+            <q-icon name="mdi-timer-sand" size="22px" color="orange-5" class="q-mr-sm" />เจ้าหน้าที่กำลังตรวจสถานที่สอบ
           </div>
-          <div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
-          <q-space />
-          <q-btn size="12px" flat round color="primary" @click="download" icon="mdi-download">
-            <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+          <div v-else class="text-green-6 text-bold">
+            <q-icon name="mdi-checkbox-marked-circle-outline" size="22px" color="green" class="q-mr-sm" />สมัครสอบสำเร็จ
+          </div>
+        </q-card>
 
-        <q-separator />
-
-        <q-card-section horizontal>
-          <q-card-section class="col-8 q-pt-xs">
-            <div class="text-bold">บัตรประจำตัวผู้สอบ</div>
+        <q-card bordered flat class="col-12 row">
+          <div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
+            บัตรประจำตัวผู้สอบ
+            <q-space />
+            <q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
+              <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col-8  q-pa-md">
             <div class="q-pt-xs row">
               <div class="">ชื่อ :</div>
-              <div class="text-black text-bold">{{ fullName }}</div>
+              <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">เลขประจำตัวสอบ :</div>
-              <div class="text-black text-bold">{{ examNumber }}</div>
+              <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">เลขประจำตัวประชาชน :</div>
-              <div class="">{{ citizenId }}</div>
+              <div class="text-black q-pl-sm">{{ citizenId }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">เวลาสอบ :</div>
-              <div class="">{{ examTime }}</div>
+              <div class="text-black q-pl-sm">{{ examTime }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">สถานที่สอบ :</div>
-              <div class="">{{ examLocation }}</div>
+              <div class="text-black q-pl-sm">{{ examLocation }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">ชั้นที่ :</div>
-              <div class="">{{ floor }}</div>
+              <div class="text-black q-pl-sm">{{ floor }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">ห้องสอบ :</div>
-              <div class="">{{ examRoom }}</div>
+              <div class="text-black q-pl-sm">{{ examRoom }}</div>
             </div>
             <div class="q-pt-xs row">
               <div class="">เลขที่นั่ง :</div>
-              <div class="">{{ seatNumber }}</div>
+              <div class="text-black q-pl-sm">{{ seatNumber }}</div>
             </div>
-          </q-card-section>
+          </div>
 
           <q-card-section class="col-4 flex flex-center">
             <q-img
@@ -60,8 +61,7 @@
               style="max-width: 300px; max-height: 300px"
             />
           </q-card-section>
-        </q-card-section>
-      </q-card>
+        </q-card>
     </div>
     <!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
   </div>
@@ -92,7 +92,7 @@ const seatNumber = ref<string>('75')
 
 const download = () => {}
 const getClass = (val: string) => {
-  return val == 'done' ? 'bg-green-4' : 'bg-yellow-3'
+  return val == 'done' ? 'bg-green-1' : 'bg-yellow-2'
 }
 </script>
 
diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 99da053..f3e5949 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -2,14 +2,14 @@
   <div class="col-12">
     <div class="row justify-center q-pa-md">
       <div class="col-4">
-        <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
+        <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
           <div class="text-bold col-12" :class="getFontColor(status)">
             {{ message(status) }}
           </div>
           <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
             <li>{{ rejectMessage }}</li>
           </div>
-        </q-card-actions>
+        </q-card>
         <q-file
           borderless
           v-model="fileData"
@@ -23,16 +23,16 @@
         </q-file>
       </div>
     </div>
-    <div class="q-pa-md text-center col-12">
+    <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
       <q-btn
-        v-if="status == 'payment' || status == 'rejectPayment'"
+        
         color="primary"
         @click="clickPayment"
         label="ส่งหลักฐานการชำระเงิน"
       />
     </div>
-    <div class="text-black text-center q-pb-lg col-12">
-      ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
+    <div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
+      <q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
     </div>
   </div>
 </template>
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index 1a0b7fe..9bd01bf 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -92,8 +92,8 @@ const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 
 onMounted(async () => {
-  //   stepRaw.value = 2
-  //   step.value = 2
+  // stepRaw.value = 4
+  // step.value = 4
   await fetchPeriodExam()
   await candidateCheck()
 })