diff --git a/src/components/DialogFooter.vue b/src/components/DialogFooter.vue
index 8975b2b..3855e85 100644
--- a/src/components/DialogFooter.vue
+++ b/src/components/DialogFooter.vue
@@ -19,108 +19,110 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
-    <q-btn
-      v-if="!editvisible"
-      flat
-      round
-      :disabled="editvisible"
-      :color="editvisible ? 'grey-7' : 'primary'"
-      @click="edit"
-      icon="mdi-pencil-outline"
-    >
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-    </q-btn>
-    <div v-else>
+    <div v-if="editBtn">
       <q-btn
+        v-if="!editvisible"
         flat
         round
-        :disabled="!editvisible"
-        :outline="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="cancel()"
-        icon="mdi-undo"
-        v-if="modalEdit == true"
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
+        @click="edit"
+        icon="mdi-pencil-outline"
       >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-      <q-btn
-        flat
-        round
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'public'"
-        @click="checkSave"
-        icon="mdi-content-save-outline"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
+      <div v-else>
+        <q-btn
+          flat
+          round
+          :disabled="!editvisible"
+          :outline="!editvisible"
+          :color="!editvisible ? 'grey-7' : 'red'"
+          @click="cancel()"
+          icon="mdi-undo"
+          v-if="modalEdit == true"
+        >
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          :disabled="!editvisible"
+          :color="!editvisible ? 'grey-7' : 'public'"
+          @click="checkSave"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </div>
     </div>
   </q-card-actions>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs } from 'vue'
 
 const props = defineProps({
   editvisible: Boolean,
   next: Boolean,
   previous: Boolean,
   modalEdit: Boolean,
+  editBtn: {
+    type: Boolean,
+    default: true
+  },
   clickNext: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   clickPrevious: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   cancel: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   edit: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   save: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   validate: {
     type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const emit = defineEmits([
-  "update:editvisible",
-  "update:next",
-  "update:previous",
-]);
+    default: () => console.log('not function')
+  }
+})
+const emit = defineEmits(['update:editvisible', 'update:next', 'update:previous'])
 
 const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
+  emit('update:editvisible', value)
+}
 const cancel = async () => {
-  props.cancel();
-};
+  props.cancel()
+}
 const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
+  updateEdit(!props.editvisible)
+  props.edit()
+}
 const checkSave = () => {
-  props.validate();
-  props.save();
+  props.validate()
+  props.save()
   //   if (myForm.value !== null) {
   //     myForm.value.validate().then((success) => {
   //       if (success) {
   //       }
   //     });
   //   }
-};
+}
 
 const clickNext = async () => {
-  await props.clickNext();
-};
+  await props.clickNext()
+}
 
 const clickPrevious = async () => {
-  await props.clickPrevious();
-};
+  await props.clickPrevious()
+}
 </script>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 7620a0a..4329748 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -6,13 +6,14 @@
       :header="name"
       :icon="icon"
       :add="checkAdd"
-      :addData="true"
       :history="false"
       v-if="nameHeader"
     />
-    <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
-      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-    </q-btn>
+    <div class="q-pl-sm">
+      <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus" v-if="addData">
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
     <q-space />
     <div class="items-center" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
@@ -102,6 +103,10 @@ const props = defineProps({
   inputvisible: Array,
   editvisible: Boolean,
   nameHeader: Boolean,
+  addData: {
+    type: Boolean,
+    defualt: true
+  },
   edit: {
     type: Function,
     default: () => console.log('not function')
diff --git a/src/components/top.vue b/src/components/top.vue
index 4d8e9c3..87144c1 100644
--- a/src/components/top.vue
+++ b/src/components/top.vue
@@ -88,6 +88,10 @@ const props = defineProps({
   cancel: {
     type: Function,
     default: () => console.log('not function')
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log('not function')
   }
 })
 
@@ -99,11 +103,13 @@ const updateEdit = (value: any) => {
 
 const ClickEdit = () => {
   updateEdit(!props.edit)
+  props.changeBtn()
 }
 
 const ClickCancel = () => {
   updateEdit(!props.edit)
   props.cancel()
+  props.changeBtn()
 }
 
 const save = () => {
diff --git a/src/modules/01_exam/components/Document.vue b/src/modules/01_exam/components/Document.vue
deleted file mode 100644
index 3f0b923..0000000
--- a/src/modules/01_exam/components/Document.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<!-- tab เอกสาร -->
-<template>
-  <!-- <Image /> -->
-  <OtherFile />
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-// import Image from './Image.vue'
-import OtherFile from './OtherFile.vue'
-</script>
diff --git a/src/modules/01_exam/components/ExamDetail.vue b/src/modules/01_exam/components/ExamDetail.vue
index 4741ff6..171b13a 100644
--- a/src/modules/01_exam/components/ExamDetail.vue
+++ b/src/modules/01_exam/components/ExamDetail.vue
@@ -52,6 +52,10 @@
         จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
       </div>
     </div>
+
+    <div class="row justify-center q-pa-md">
+      <q-btn color="primary" class="q-ml-md" label="สมัครสอบ" @click="applyCandidate" />
+    </div>
   </div>
 </template>
 
@@ -59,6 +63,17 @@
 import { ref } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 const exam = ref<any>({
@@ -78,6 +93,10 @@ const exam = ref<any>({
     }
   ]
 })
+
+const applyCandidate = () => {
+  props.fetchStep()
+}
 </script>
 
 <style scoped></style>
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 8fe7cad..1ab0a06 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -62,14 +62,25 @@
           </q-card-section>
         </q-card-section>
       </q-card>
-      <q-btn size="12px" flat round color="primary" @click="testChangeStatus" icon="mdi-download">
-      </q-btn>
     </div>
+    <!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
 const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
 const examNumber = ref<string>('CDE-004')
 const citizenId = ref<string>('1100700954521')
@@ -78,7 +89,7 @@ const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเท
 const floor = ref<string>('4')
 const examRoom = ref<string>('CB-706')
 const seatNumber = ref<string>('75')
-const status = ref<boolean>(false)
+const status = ref<boolean>(true)
 
 const download = () => {}
 const testChangeStatus = () => {
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 0a7cd2f..241d41a 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -8,6 +8,7 @@
       active-color="primary"
       indicator-color="primary"
       align="justify"
+      @update:model-value="changeTab"
     >
       <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
       <q-tab name="education" label="ประวัติการศีกษา" />
@@ -16,49 +17,127 @@
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="bg-white">
       <!-- ข้อมูลส่วนบุคคล -->
-      <q-tab-panel name="profile"><Profile /></q-tab-panel>
+      <q-tab-panel name="profile">
+        <Profile :loader="loader" v-model:statusEdit="statusEditProfile" :step="step" />
+      </q-tab-panel>
 
       <!-- ประวัติการศีกษา -->
-      <q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
+      <q-tab-panel name="education"><Education :loader="loader" :step="step" /></q-tab-panel>
 
       <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"><Career :loader="loader" /></q-tab-panel>
+      <q-tab-panel name="career"><Career :loader="loader" :step="step" /></q-tab-panel>
 
       <!-- ไฟล์ -->
-      <q-tab-panel name="document"><Document :loader="loader" /> </q-tab-panel>
+      <q-tab-panel name="document">
+        <Document :loader="loader" v-model:statusEdit="statusEditDocument" :step="step" />
+      </q-tab-panel>
     </q-tab-panels>
 
-    <!-- <div>
+    <div>
       <q-checkbox
-        v-if="allowEditProp"
         v-model="acceptTermOfUse"
-        :disable="!allowEdit"
-        :label="formLabel.acceptTermOfUse"
+        :disable="step !== 2"
+        label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
     </div>
 
     <div class="row justify-center q-pa-md">
-      <q-btn color="warning" label="บันทึก" @click="saveForm" :disable="applyState === 3" />
       <q-btn
         color="primary"
         class="q-ml-md"
         label="สมัครสอบ"
-        @click="applyCandidate"
-        :disable="!acceptTermOfUse || applyState === 3"
+        @click="okModalComfirm"
+        v-if="step === 2"
+        :disable="!acceptTermOfUse"
       />
-    </div> -->
+    </div>
   </div>
+  <NotifyConfirm
+    :modal="modalComfirm"
+    :modalTittle="modalComfirmTittle"
+    :modalDetail="modalComfirmDetail"
+    :ok="applyCandidate"
+    :cancel="cancelModalComfirm"
+  />
+  <NotifyError
+    :modalError="modalNoEdit"
+    :modalErrorTittle="modalNoEditTittle"
+    :modalErrorDetail="modalNoEditDetail"
+    :close="closeModalError"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import Profile from './Profile.vue'
-import Education from './Education.vue'
-import Career from './Career.vue'
-import Document from './Document.vue'
+import { onMounted, ref, watch } from 'vue'
+import Profile from '@/modules/01_exam/components/Form/Profile.vue'
+import Education from '@/modules/01_exam/components/Form/Education.vue'
+import Career from '@/modules/01_exam/components/Form/Career.vue'
+import Document from '@/modules/01_exam/components/Form/Document.vue'
+import NotifyError from '@/components/NotifyError.vue'
+import NotifyConfirm from '@/components/NotifyConfirm.vue'
+
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
 
 const tab = ref<string>('profile')
+const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
+const statusEditProfile = ref<boolean>(false)
+const statusEditDocument = ref<boolean>(false)
+const acceptTermOfUse = ref<boolean>(false)
+const modalComfirm = ref<boolean>(false)
+const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
+const modalComfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
+const modalNoEdit = ref<boolean>(false)
+const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
+const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
+
+onMounted(async () => {
+  if (props.step > 2) {
+    acceptTermOfUse.value = true
+  }
+})
+
+const okModalComfirm = () => {
+  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
+    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
+    modalNoEdit.value = true
+  } else {
+    modalComfirm.value = true
+  }
+}
+
+const cancelModalComfirm = () => {
+  modalComfirm.value = false
+}
+
+const closeModalError = () => {
+  modalNoEdit.value = false
+}
+
+const applyCandidate = () => {
+  props.fetchStep()
+}
+
+const changeTab = () => {
+  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+    modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
+    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
+    tab.value = tabRaw.value
+    modalNoEdit.value = true
+  } else {
+    tabRaw.value = tab.value
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 1bf88ac..f9c6496 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
+  <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) }}
@@ -11,63 +11,91 @@
     </q-card-actions>
   </q-card>
 
-  <div class="d-flex justify-content-center align-items-center min-vh-100">
-    <div>
-      <div class="text-center q-pb-lg">
-        <!-- <q-badge
+  <div class="d-flex justify-content-center align-items-center row col-12">
+    <!-- <div class="text-center q-pb-lg">
+      <q-badge
           :outline="badgeOutline"
           :color="badgeColor"
           :label="badgeLabel"
           class="q-pa-nond text-center"
           style="font-size: 16px"
-        /> -->
-      </div>
-
-      <div class="row q-pa-nond text-center">
-        <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
-        <q-uploader
-          ref="uploader"
-          type="file"
-          :factory="uploadImg"
-          class="q-mx-auto col-6"
-          label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
-          flat
-          color="blue"
-          bordered
         />
-      </div>
-      <div class="q-pa-md text-center">
-        <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
-      </div>
-      <div class="text-black text-center q-pb-lg">
-        ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
-      </div>
+    </div> -->
+
+    <!-- <div class="row q-pa-nond text-center col-6"> -->
+    <!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
+      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+    </q-img> -->
+    <q-file
+      borderless
+      v-model="fileData"
+      stack-label
+      @update:model-value="uploadImg"
+      class="col-12"
+    >
+      <!-- <q-img src="@/assets/avatar_user.jpg" class="col-12">
+              <div class="overlay" v-if="edit">
+                <q-icon name="mdi-camera" />
+                <br />อัปเดต
+              </div>
+            </q-img> -->
+      <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
+        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+      </q-img>
+    </q-file>
+    <!-- <q-uploader
+      ref="uploader"
+      type="file"
+      :factory="uploadImg"
+      class="col-6"
+      label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
+      flat
+      color="blue"
+      bordered
+    /> -->
+    <!-- </div> -->
+    <div class="q-pa-md text-center col-12">
+      <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
     </div>
-    <q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
-    <q-btn color="positive" @click="setStatus('success')">Success</q-btn>
+    <div class="text-black text-center q-pb-lg col-12">
+      ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
+    </div>
+    <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
+    <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
+    <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
   </div>
 </template>
 
 <script setup lang="ts">
-import { file } from '@babel/types'
-import { log } from 'console'
-import { defineComponent, ref, Ref } from 'vue'
-import { onMounted } from 'vue'
-import { ComponentRef } from '@vue/runtime-core'
+import { ref } from 'vue'
+
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
 const status = ref<string>('')
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
+const fileData = ref<any>()
 
 const uploadImg = (file: any) => {
+  fileData.value = null
   //   img.value =
   //     'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
   img.value =
     'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
 }
 
-const slide = ref(1)
 const setStatus = (val: string) => {
   status.value = val
+  if (val == 'next') props.fetchStep()
 }
 
 const getClass = (val: string) => {
diff --git a/src/modules/01_exam/components/Career.vue b/src/modules/01_exam/components/Form/Career.vue
similarity index 98%
rename from src/modules/01_exam/components/Career.vue
rename to src/modules/01_exam/components/Form/Career.vue
index 6425109..5d4f63f 100644
--- a/src/modules/01_exam/components/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -11,6 +11,7 @@
         v-model:inputvisible="visibleColumns"
         :add="clickAdd"
         :nameHeader="false"
+        :addData="addData"
       >
         <template #columns="props">
           <q-tr :props="props">
@@ -151,6 +152,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
+          :editBtn="addData"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -188,6 +190,10 @@ const props = defineProps({
     //หน้า main มีการอัพเดทค่าให้ refresh data
     type: Boolean,
     required: true
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
@@ -212,6 +218,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
+const addData = ref<boolean>(true)
 const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
 const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
 const modalErrorTittle = ref<string>('') // tittle modal error
@@ -313,6 +320,9 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 onMounted(async () => {
   //   await fetchData()
   rawHistory.value = rows.value
+  if (props.step !== 2) {
+    addData.value = false
+  }
 })
 
 const fetchData = async () => {}
@@ -389,7 +399,7 @@ const clickEdit = () => {
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = () => {
-  addData()
+  addRow()
 }
 
 /**
@@ -506,7 +516,7 @@ const selectData = (props: DataProps) => {
 /**
  * กดปุ่มเพิ่มบน table
  */
-const addData = () => {
+const addRow = () => {
   modalEdit.value = false
   modal.value = true
   edit.value = true
diff --git a/src/modules/01_exam/components/OtherFile.vue b/src/modules/01_exam/components/Form/Document.vue
similarity index 73%
rename from src/modules/01_exam/components/OtherFile.vue
rename to src/modules/01_exam/components/Form/Document.vue
index 3fad262..816489c 100644
--- a/src/modules/01_exam/components/OtherFile.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -3,7 +3,7 @@
   <q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
     <HeaderTop
       v-model:edit="edit"
-      header="เอกสารหลักฐาน"
+      header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
       icon="mdi-file-document"
       :history="false"
       :addData="addData"
@@ -55,14 +55,35 @@
         class="full-width"
         accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
         bordered
+        label="[ไฟล์ jpg,png,pdf,csv,doc]"
       />
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import HeaderTop from '@/components/top.vue'
 
+const props = defineProps({
+  loader: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
 const edit = ref<boolean>(false)
 const addData = ref<boolean>(true)
 const files = ref<any>([
@@ -79,6 +100,18 @@ const files = ref<any>([
     sizeLabel: '89MB'
   }
 ])
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
+onMounted(async () => {
+  if (props.step !== 2) {
+    addData.value = false
+  }
+})
+
 const fileUpload = async (file: any) => {
   return {
     url: 'http://localhost:4444/upload',
diff --git a/src/modules/01_exam/components/Education.vue b/src/modules/01_exam/components/Form/Education.vue
similarity index 98%
rename from src/modules/01_exam/components/Education.vue
rename to src/modules/01_exam/components/Form/Education.vue
index b4f010b..23d164d 100644
--- a/src/modules/01_exam/components/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -11,6 +11,7 @@
         v-model:inputvisible="visibleColumns"
         :add="clickAdd"
         :nameHeader="false"
+        :addData="addData"
       >
         <template #columns="props">
           <q-tr :props="props">
@@ -152,6 +153,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
+          :editBtn="addData"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -190,6 +192,10 @@ const props = defineProps({
     //หน้า main มีการอัพเดทค่าให้ refresh data
     type: Boolean,
     required: true
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
@@ -216,6 +222,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
+const addData = ref<boolean>(true)
 const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
 const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
 const modalErrorTittle = ref<string>('') // tittle modal error
@@ -228,7 +235,6 @@ const closeModalError = () => {
     // fetchData();
   }
 }
-
 const emit = defineEmits(['update:loader'])
 
 const rows = ref<RequestItemsObject[]>([
@@ -320,6 +326,9 @@ onMounted(async () => {
   //   await fetchData()
   //   await fetchQualification()
   rawHistory.value = rows.value
+  if (props.step !== 2) {
+    addData.value = false
+  }
 })
 
 const fetchQualification = async () => {
@@ -417,7 +426,7 @@ const clickEdit = () => {
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = () => {
-  addData()
+  addRow()
 }
 
 /**
@@ -535,7 +544,7 @@ const selectData = (props: DataProps) => {
 /**
  * กดปุ่มเพิ่มบน table
  */
-const addData = () => {
+const addRow = () => {
   modalEdit.value = false
   modal.value = true
   edit.value = true
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
new file mode 100644
index 0000000..f29f33d
--- /dev/null
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -0,0 +1,86 @@
+<!-- tab ข้อมูลส่วนบุคคล -->
+<template>
+  <Information
+    :prefixOptions="prefixOptions"
+    :genderOptions="genderOptions"
+    :bloodOptions="bloodOptions"
+    :statusOptions="statusOptions"
+    :religionOptions="religionOptions"
+    :provinceOptions="provinceOptions"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :step="step"
+  />
+  <Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
+  <Family
+    :prefixOptions="prefixOptions"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :step="step"
+  />
+  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
+  <NotifyError
+    :modalError="modalNoEdit"
+    :modalErrorTittle="modalNoEditTittle"
+    :modalErrorDetail="modalNoEditDetail"
+    :close="closeModalError"
+  />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import type { DataOption } from '@/modules/01_exam/interface/index/Main'
+import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
+import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
+import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
+import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
+import NotifyError from '@/components/NotifyError.vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const props = defineProps({
+  loader: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
+const loader = ref<boolean>(true)
+const statusEdit = ref<boolean>(false)
+const modalNoEdit = ref<boolean>(false)
+// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
+// const modalNoEditDetail = ref<string>(
+//   'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
+// )
+const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
+const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
+
+const prefixOptions = ref<DataOption[]>([])
+const bloodOptions = ref<DataOption[]>([])
+const genderOptions = ref<DataOption[]>([])
+const statusOptions = ref<DataOption[]>([])
+const religionOptions = ref<DataOption[]>([])
+const provinceOptions = ref<DataOption[]>([])
+
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
+
+watch(statusEdit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
+const closeModalError = () => {
+  modalNoEdit.value = false
+}
+
+const notiNoEdit = () => {
+  modalNoEdit.value = true
+}
+</script>
diff --git a/src/modules/01_exam/components/Address.vue b/src/modules/01_exam/components/Form/Profile/Address.vue
similarity index 96%
rename from src/modules/01_exam/components/Address.vue
rename to src/modules/01_exam/components/Form/Profile/Address.vue
index d8e3842..1a0811c 100644
--- a/src/modules/01_exam/components/Address.vue
+++ b/src/modules/01_exam/components/Form/Profile/Address.vue
@@ -15,6 +15,7 @@
       :history="true"
       :addData="addData"
       :cancel="cancelData"
+      :changeBtn="changeBtn"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -254,19 +255,23 @@ const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
 const emit = defineEmits(['update:statusEdit'])
 
-watch(edit, (count: boolean, prevCount: boolean) => {
-  if (props.statusEdit == true) {
-    edit.value = false
-    emit('update:statusEdit', count)
-  }
-})
-
 onMounted(() => {
+  if (props.step !== 2) {
+    addData.value = false
+  }
   //   fetchProvince()
   //   fetchDistrict(addressData.value.provinceId, '1')
   //   fetchDistrict(addressData.value.provinceIdC, '2')
@@ -280,6 +285,19 @@ const saveData = async () => {
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const selectProvince = (e: string, name: string) => {
   if (name == '1') {
     addressData.value.districtId = ''
diff --git a/src/modules/01_exam/components/Family.vue b/src/modules/01_exam/components/Form/Profile/Family.vue
similarity index 95%
rename from src/modules/01_exam/components/Family.vue
rename to src/modules/01_exam/components/Form/Profile/Family.vue
index 67197d2..e804fb7 100644
--- a/src/modules/01_exam/components/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@@ -8,6 +8,7 @@
       :save="saveData"
       :addData="addData"
       :cancel="cancelData"
+      :changeBtn="changeBtn"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -270,7 +271,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
@@ -300,15 +301,22 @@ const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
 const emit = defineEmits(['update:statusEdit'])
 
-watch(edit, (count: boolean, prevCount: boolean) => {
-  if (props.statusEdit == true) {
-    edit.value = false
-    emit('update:statusEdit', count)
+onMounted(() => {
+  if (props.step !== 2) {
+    addData.value = false
   }
 })
 
@@ -320,6 +328,19 @@ const saveData = async () => {
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const selectRadio = (e: boolean, i: any) => {
   if (!e) {
     familyData.value.prefixIdC = ''
diff --git a/src/modules/01_exam/components/Information.vue b/src/modules/01_exam/components/Form/Profile/Information.vue
similarity index 96%
rename from src/modules/01_exam/components/Information.vue
rename to src/modules/01_exam/components/Form/Profile/Information.vue
index 12fd298..4df08cf 100644
--- a/src/modules/01_exam/components/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@@ -8,6 +8,7 @@
       :save="saveData"
       :addData="addData"
       :cancel="cancelData"
+      :changeBtn="changeBtn"
     />
     <q-form ref="myform" class="col-12 row">
       <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -372,20 +373,23 @@ const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
 const emit = defineEmits(['update:statusEdit'])
 
-watch(edit, (count: boolean, prevCount: boolean) => {
-  if (props.statusEdit == true) {
-    edit.value = false
-    emit('update:statusEdit', count)
-  }
-})
-
 onMounted(() => {
-  //   console.log(props);
+  if (props.step !== 2) {
+    addData.value = false
+  }
   //   fetchProvince()
 })
 
@@ -397,6 +401,19 @@ const saveData = async () => {
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const fetchProvince = async () => {
   //   loader.value = true;
   await http
diff --git a/src/modules/01_exam/components/Occupation.vue b/src/modules/01_exam/components/Form/Profile/Occupation.vue
similarity index 94%
rename from src/modules/01_exam/components/Occupation.vue
rename to src/modules/01_exam/components/Form/Profile/Occupation.vue
index 825b1d6..31b951b 100644
--- a/src/modules/01_exam/components/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Profile/Occupation.vue
@@ -8,6 +8,7 @@
       :save="saveData"
       :addData="addData"
       :cancel="cancelData"
+      :changeBtn="changeBtn"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -245,20 +246,25 @@ const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
   }
 })
 
 const emit = defineEmits(['update:statusEdit'])
 
-watch(edit, (count: boolean, prevCount: boolean) => {
-  if (props.statusEdit == true) {
-    edit.value = false
-    emit('update:statusEdit', count)
+onMounted(() => {
+  if (props.step !== 2) {
+    addData.value = false
   }
 })
 
-onMounted(() => {})
-
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
@@ -267,6 +273,19 @@ const saveData = async () => {
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const cancelData = () => {}
 
 const getClass = (val: boolean) => {
diff --git a/src/modules/01_exam/components/Profile.vue b/src/modules/01_exam/components/Profile.vue
deleted file mode 100644
index 1941104..0000000
--- a/src/modules/01_exam/components/Profile.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- tab ข้อมูลส่วนบุคคล -->
-<template>
-  <!-- xxxxxxxx{{ statusEdit }}xxxxxxxx{{ statusEditx }} -->
-  <Information
-    :prefixOptions="prefixOptions"
-    :genderOptions="genderOptions"
-    :bloodOptions="bloodOptions"
-    :statusOptions="statusOptions"
-    :religionOptions="religionOptions"
-    :provinceOptions="provinceOptions"
-    v-model:statusEdit="statusEdit"
-  />
-  <Address v-model:statusEdit="statusEdit" />
-  <Family :prefixOptions="prefixOptions" v-model:statusEdit="statusEdit" />
-  <Occupation v-model:statusEdit="statusEdit" />
-  <notifyConfirm
-    :modal="modalNoEdit"
-    :modalTittle="modalNoEditTittle"
-    :modalDetail="modalNoEditDetail"
-    :ok="closeModalNoEdit"
-    :cancel="closeModalCancel"
-  />
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import type { DataOption } from '@/modules/01_exam/interface/index/Main'
-import Information from './Information.vue'
-import Address from './Address.vue'
-import Family from './Family.vue'
-import Occupation from './Occupation.vue'
-import NotifyConfirm from '@/components/NotifyConfirm.vue'
-import http from '@/plugins/http'
-import config from '@/app.config'
-
-const loader = ref<boolean>(true)
-const statusEdit = ref<boolean>(false)
-const statusEditx = ref<boolean>(false)
-const modalNoEdit = ref<boolean>(false)
-const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
-const modalNoEditDetail = ref<string>(
-  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
-)
-
-const prefixOptions = ref<DataOption[]>([])
-const bloodOptions = ref<DataOption[]>([])
-const genderOptions = ref<DataOption[]>([])
-const statusOptions = ref<DataOption[]>([])
-const religionOptions = ref<DataOption[]>([])
-const provinceOptions = ref<DataOption[]>([])
-
-const closeModalNoEdit = () => {
-  modalNoEdit.value = false
-}
-const closeModalCancel = () => {
-  modalNoEdit.value = false
-}
-</script>
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index 0620bed..e315967 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -7,42 +7,58 @@
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
+      <!-- done-color="deep-orange"
+        active-color="purple"
+        inactive-color="secondary" -->
       <q-stepper
         v-model="step"
         ref="stepper"
         alternative-labels
         header-nav
-        color="primary"
         animated
+        done-color="positive"
+        active-color="amber-7"
+        inactive-color="positive"
       >
-        <q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
-          <ExamDetail />
+        <q-step
+          :done="step > 1"
+          :disable="stepRaw < 1"
+          :name="1"
+          title="อ่านคำชี้แจง"
+          :icon="stepRaw >= 1 ? 'check' : 'edit'"
+        >
+          <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
-        <q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
-          <ExamForm />
+        <q-step
+          :done="step > 2"
+          :disable="stepRaw < 2"
+          :name="2"
+          title="กรอกข้อมูล"
+          :icon="stepRaw >= 2 ? 'check' : 'edit'"
+        >
+          <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
         <q-step
           :done="step > 3"
+          :disable="stepRaw < 3"
           :name="3"
           title="ชำระค่าธรรมเนียมการสอบ"
-          icon="edit"
-          done-color="positive"
+          :icon="stepRaw >= 3 ? 'check' : 'edit'"
         >
-          <ExamPayment />
+          <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
-        <q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
-          <ExamFinished />
+        <q-step
+          :done="step > 4"
+          :disable="stepRaw < 4"
+          :name="4"
+          title="สำเร็จ"
+          :icon="stepRaw >= 4 ? 'check' : 'edit'"
+        >
+          <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
       </q-stepper>
     </div>
   </q-card>
-  <notifyConfirm
-    :modal="modalConfirm"
-    :modalTittle="modalConfirmTittle"
-    :modalDetail="modalConfirmDetail"
-    :ok="closeModalConfirm"
-    :cancel="closeModalCancel"
-  />
 </template>
 
 <script setup lang="ts">
@@ -51,7 +67,6 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
 import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
 import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
-import NotifyConfirm from '@/components/NotifyConfirm.vue'
 
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
@@ -60,11 +75,6 @@ const examPost = ref<any>()
 const test = ref<any>()
 const loading = ref<boolean>(false)
 const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
-const modalConfirm = ref<boolean>(true)
-const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
-const modalConfirmDetail = ref<string>(
-  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
-)
 
 onMounted(() => {
   loadCandidate()
@@ -104,10 +114,8 @@ const fetchExams = () => {
   //     .finally(() => (this.loading = false))
 }
 
-const closeModalConfirm = () => {
-  modalConfirm.value = false
-}
-const closeModalCancel = () => {
-  modalConfirm.value = false
+const fetchStep = () => {
+  stepRaw.value += 1
+  step.value += 1
 }
 </script>