diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index f9c6496..cd5971f 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,16 +1,17 @@
 <template>
-  <q-card class="my-card q-mb-sm" bordered>
-    <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
-      <div class="text-black text-bold col-12" style="font-size: 16px">
-        {{ message(status) }}
-      </div>
-      <div class="text-black col-12" v-if="status === 'rejected'">
-        <li>{{ rejectMessage }}</li>
-      </div>
-      <!-- <q-space /> -->
-    </q-card-actions>
-  </q-card>
-
+  <div>
+    <q-card class="my-card q-mb-sm" bordered>
+      <q-card-actions class="q-pa-md text-left row justify-center" :class="getClass(status)">
+        <div class="text-bold col-12" :class="getFontColor(status)">
+          {{ message(status) }}
+        </div>
+        <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
+          <li>{{ rejectMessage }}</li>
+        </div>
+        <!-- <q-space /> -->
+      </q-card-actions>
+    </q-card>
+  </div>
   <div class="d-flex justify-content-center align-items-center row col-12">
     <!-- <div class="text-center q-pb-lg">
       <q-badge
@@ -101,13 +102,13 @@ const setStatus = (val: string) => {
 const getClass = (val: string) => {
   switch (val) {
     case 'processing':
-      return 'bg-lime-12'
+      return 'bg-yellow-3'
     case 'rejected':
-      return 'bg-deep-orange-11'
+      return 'bg-red-2'
     case 'success':
-      return 'bg-green-12'
+      return 'bg-light-green-3'
     default:
-      return 'bg-blue-4'
+      return 'bg-light-blue-1'
   }
 }
 const message = (val: string) => {
@@ -122,6 +123,19 @@ const message = (val: string) => {
       return 'รออัปโหลดหลักฐานชำระเงิน'
   }
 }
+const getFontColor = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'text-orange'
+    case 'rejected':
+      return 'text-red-12'
+    case 'success':
+      return 'text-green'
+    default:
+      return 'text-blue'
+  }
+}
+console.log(getFontColor)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 3e07f2e..92656ce 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -11,39 +11,7 @@
       :editData="step == 2"
     />
     <div class="row col-12 q-gutter-sm q-pt-sm">
-      <q-card bordered flat class="full-width">
-        <q-list separator>
-          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-            <q-item-section>
-              <q-item-label class="full-width ellipsis">
-                {{ file.name }}
-              </q-item-label>
-
-              <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
-            </q-item-section>
-            <q-item-section top side>
-              <div class="q-gutter-sm">
-                <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
-                </q-btn>
-                <q-btn
-                  size="12px"
-                  flat
-                  dense
-                  round
-                  color="red"
-                  icon="mdi-delete-outline"
-                  v-if="edit"
-                >
-                  <q-tooltip>ลบไฟล์</q-tooltip>
-                </q-btn>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
       <div v-if="edit" class="col-12 q-ma-none">
-        <q-separator class="q-mt-sm" />
         <q-input
           class="q-my-sm"
           hide-bottom-space
@@ -69,6 +37,30 @@
         />
       </div>
     </div>
+    <q-separator class="q-mt-sm" />
+    <q-card bordered flat class="full-width">
+      <q-list separator>
+        <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+          <q-item-section>
+            <q-item-label class="full-width ellipsis">
+              {{ file.name }}
+            </q-item-label>
+
+            <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+          </q-item-section>
+          <q-item-section top side>
+            <div class="q-gutter-sm">
+              <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+              <q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
+                <q-tooltip>ลบไฟล์</q-tooltip>
+              </q-btn>
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card>
   </q-card>
 </template>
 <script setup lang="ts">
@@ -120,6 +112,7 @@ watch(edit, (count: boolean, prevCount: boolean) => {
 onMounted(async () => {})
 
 const fileUpload = async (file: any) => {
+  name.value = file[0].name
   return {
     url: 'http://localhost:4444/upload',
     method: 'POST'