diff --git a/src/modules/01_metadata/components/Calendar.vue b/src/modules/01_metadata/components/Calendar.vue
index c9be4e2ea..b4868aef5 100644
--- a/src/modules/01_metadata/components/Calendar.vue
+++ b/src/modules/01_metadata/components/Calendar.vue
@@ -118,44 +118,40 @@
           <q-btn
             v-if="showEdit && edit"
             flat
-            round
-            outline
             color="red"
             @click="cancelClick()"
-            icon="mdi-undo"
-          >
-            <q-tooltip>ยกเลิก</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="edit"
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            type="submit"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="!edit"
-            flat
-            round
-            color="primary"
-            @click="editClick"
-            icon="mdi-pencil-outline"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            label="ยกเลิกแก้ไข"
+          > <!-- icon="mdi-undo"
+            <q-tooltip>ยกเลิก</q-tooltip> -->
           </q-btn>
           <q-btn
             v-if="showEdit && edit"
-            flat
-            round
-            outline
+            unelevated
             color="red"
             @click="deleteClick()"
-            icon="mdi-delete"
+            label="ลบวันหยุด"
+          > <!-- icon="mdi-delete"
+            <q-tooltip>ลบ</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="edit"
+            unelevated
+            color="public"
+            label="บันทึก"
+            type="submit"
           >
-            <q-tooltip>ลบ</q-tooltip>
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="!edit"
+            outline
+            color="primary"
+            @click="editClick"
+            label="แก้ไขข้อมูล"
+          >
+            <!-- icon="mdi-pencil-outline"
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/01_metadata/components/CalendarList.vue b/src/modules/01_metadata/components/CalendarList.vue
index bf5989b9a..8a700ffd5 100644
--- a/src/modules/01_metadata/components/CalendarList.vue
+++ b/src/modules/01_metadata/components/CalendarList.vue
@@ -157,13 +157,13 @@
         <q-separator />
         <q-card-actions align="right" class="text-primary">
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
-            icon="mdi-content-save-outline"
             type="submit"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+            
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/01_metadata/views/MainCalendar.vue b/src/modules/01_metadata/views/MainCalendar.vue
index 4b5aba21b..1240daf0d 100644
--- a/src/modules/01_metadata/views/MainCalendar.vue
+++ b/src/modules/01_metadata/views/MainCalendar.vue
@@ -218,13 +218,12 @@
         <q-separator />
         <q-card-actions align="right" class="text-primary">
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
-            icon="mdi-content-save-outline"
             type="submit"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
@@ -316,13 +315,12 @@
         <q-separator />
         <q-card-actions align="right" class="text-primary">
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
-            icon="mdi-content-save-outline"
             type="submit"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/02_organizational/components/DialogFooter.vue b/src/modules/02_organizational/components/DialogFooter.vue
index a99ee7515..0c2493149 100644
--- a/src/modules/02_organizational/components/DialogFooter.vue
+++ b/src/modules/02_organizational/components/DialogFooter.vue
@@ -3,14 +3,14 @@
     <q-space />
     <q-btn
       v-if="!editvisible"
-      flat
-      round
+      outline
       :disabled="editvisible"
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit"
-      icon="mdi-pencil-outline"
-    >
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      label="แก้ไขข้อมูล"
+      
+    ><!--  icon="mdi-pencil-outline"
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
     </q-btn>
     <div v-else>
       <!-- <q-btn
@@ -26,14 +26,14 @@
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn> -->
       <q-btn
-        flat
-        round
+        unelevated
+        label="บันทึก"
         :disabled="!editvisible"
         :color="!editvisible ? 'grey-7' : 'public'"
         @click="checkSave"
-        icon="mdi-content-save-outline"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
+        
+      > <!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
     </div>
   </q-card-actions>
diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index a3273ca66..c75566f2f 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -607,14 +607,14 @@
             <q-card-actions align="right" class="text-primary q-py-sm">
               <!-- Save for Add Organizations & Positions -->
               <q-btn
-                flat
-                round
-                dense
+                unelevated
+                label="บันทึก"
                 :color="'public'"
                 @click="addStructure(rowClickTree)"
-                icon="mdi-content-save-outline"
+                
               >
-                <q-tooltip>บันทึก</q-tooltip>
+                <!-- icon="mdi-content-save-outline"
+                <q-tooltip>บันทึก</q-tooltip> -->
               </q-btn>
             </q-card-actions>
           </q-card>
@@ -651,14 +651,12 @@
             <q-card-actions align="right" class="text-primary q-py-sm">
               <!-- save Edit Selected Position -->
               <q-btn
-                flat
-                dense
-                round
+                unelevated
+                label="บันทึก"
                 :color="'public'"
                 @click="editPositionStructure(rowClickTree)"
-                icon="mdi-content-save-outline"
-              >
-                <q-tooltip>บันทึก</q-tooltip>
+              > <!-- icon="mdi-content-save-outline"
+                <q-tooltip>บันทึก</q-tooltip> -->
               </q-btn>
             </q-card-actions>
           </q-card>
@@ -694,14 +692,12 @@
             <q-card-actions align="right" class="text-primary q-py-sm">
               <!-- save Edit Selected Organization -->
               <q-btn
-                flat
-                dense
-                round
+                unelevated
+                label="บันทึก"
                 :color="'public'"
                 @click="editOrgStructure(rowClickTree)"
-                icon="mdi-content-save-outline"
-              >
-                <q-tooltip>บันทึก</q-tooltip>
+              ><!-- icon="mdi-content-save-outline"
+                <q-tooltip>บันทึก</q-tooltip> -->
               </q-btn>
             </q-card-actions>
           </q-card>
diff --git a/src/modules/02_organizational/views/ManageReport2Add.vue b/src/modules/02_organizational/views/ManageReport2Add.vue
index 43b9bae2b..10cac68e6 100644
--- a/src/modules/02_organizational/views/ManageReport2Add.vue
+++ b/src/modules/02_organizational/views/ManageReport2Add.vue
@@ -557,13 +557,12 @@
       <q-card-actions class="q-py-sm">
         <q-space />
         <q-btn
-          flat
-          round
+          unelevated
           color="public"
-          icon="mdi-content-save-outline"
+          label="บันทึก"
           @click="checkSave"
-        >
-          <q-tooltip>บันทึก</q-tooltip>
+        > <!-- icon="mdi-content-save-outline"
+          <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
     </q-form>
diff --git a/src/modules/03_recruiting/components/DialogFooter.vue b/src/modules/03_recruiting/components/DialogFooter.vue
index 20c8c16c2..ddcd3a56e 100644
--- a/src/modules/03_recruiting/components/DialogFooter.vue
+++ b/src/modules/03_recruiting/components/DialogFooter.vue
@@ -22,25 +22,24 @@
     <div v-if="editData">
       <q-btn
         v-if="!editvisible"
-        flat
-        round
+        outline
         :disabled="editvisible"
         :color="editvisible ? 'grey-7' : 'primary'"
         @click="edit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        label="แก้ไขข้อมูล"
+      > <!-- icon="mdi-pencil-outline"
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
       </q-btn>
       <div v-else>
         <q-btn
-          flat
-          round
+          unelevated
+          label="บันทึก"
           :disabled="!editvisible"
           :color="!editvisible ? 'grey-7' : 'public'"
           @click="checkSave"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึก</q-tooltip>
+          
+        > <!-- icon="mdi-content-save-outline"
+          <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </div>
     </div>
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index e454070d0..55f53c355 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm items-center">
+    <div class="col-12 row q-py-sm  q-gutter-sm items-center">
       <span class="text-subtitle1">{{ titleText }}</span>
       <q-select
         dense
@@ -23,7 +23,6 @@
         use-chips
         multiple
         v-if="statusPayment"
-        class="q-pl-sm"
       >
         <template v-slot:prepend>
           <q-icon name="attach_file" color="blue" />
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index 8b5a2528e..6fb0bfe6e 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -260,13 +260,12 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSave"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
@@ -300,13 +299,12 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSaveScore"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
@@ -340,13 +338,13 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSaveCandidate"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+            
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 61a595875..097beb127 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -260,13 +260,12 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSave"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          ><!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
@@ -300,13 +299,12 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSaveScore"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          > <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
@@ -343,13 +341,12 @@
         <q-card-actions class="text-primary q-py-sm">
           <q-space />
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             color="public"
             @click="checkSaveCandidate"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          ><!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index d9795e581..0112f7120 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -21,18 +21,19 @@
   <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
-        <div class="col-xs-12 col-sm-8 items-top q-pb-md">
+        <div class="col-xs-12 col-sm-8 items-top q-pb-md" v-if="!edit">
           <q-toggle
             v-model="announcementExam"
             :false-value="true"
             :true-value="false"
             color="primary"
+            dense
+            class="text-weight-medium text-dark"
             label="ประกาศข่าวทั่วไป"
-            v-if="!edit"
           />
         </div>
         <div class="col-12 row items-top q-col-gutter-x-sm">
-          <div class="col-xs-12 col-sm-6 col-sm-5">
+          <div class="col-xs-12 col-sm-6 col-sm-8">
             <q-input
               outlined
               v-model="name"
@@ -69,7 +70,7 @@
               ]"
             ></q-input>
           </div>
-          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="yearly"
@@ -104,45 +105,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateExam"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-md"
-                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
-                  :label="`${'วันที่สอบ'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-3 col-md-4">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnouncement"
@@ -163,7 +126,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
@@ -180,7 +143,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateRegister"
@@ -202,7 +165,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
                   clearable
@@ -220,7 +183,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -241,7 +204,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
                   clearable
@@ -259,7 +222,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnounce"
@@ -279,7 +242,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
@@ -299,7 +262,45 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker "
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
+                  :label="`${'วันที่สอบ'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-md-6">
             <selector
               outlined
               v-model="category"
@@ -315,43 +316,41 @@
               :rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
             ></selector>
           </div>
-          <div class="col-12" v-if="announcementExam">
-            <div class="row q-col-gutter-x-sm">
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationShortName"
-                  :options="governmentCodeOption"
-                  label="รหัสส่วนราชการ"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
-                  @update:model-value="(value:any) => selectGovernmentCode(value)"
-                ></selector>
-              </div>
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationName"
-                  :options="organizationNameOptions"
-                  label="หน่วยงาน"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                  @update:model-value="(value:any) => selectOrganization(value)"
-                ></selector>
-              </div>
-            </div>
-            <div class="col-12 q-mb-sm">
-              <q-separator size="5px" color="grey-2" />
-            </div>
-            <q-form ref="myFormPosition">
+          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
+            <selector
+              outlined
+              v-model="organizationShortName"
+              :options="governmentCodeOption"
+              label="รหัสส่วนราชการ"
+              clearable
+              option-value="id"
+              option-label="name"
+              dense
+              lazy-rules
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
+              @update:model-value="(value:any) => selectGovernmentCode(value)"
+            ></selector>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-md-6" v-if="announcementExam">
+            <selector
+              outlined
+              v-model="organizationName"
+              :options="organizationNameOptions"
+              label="หน่วยงาน"
+              clearable
+              option-value="id"
+              option-label="name"
+              dense
+              lazy-rules
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+              @update:model-value="(value:any) => selectOrganization(value)"
+            ></selector>
+          </div>
+          <div class="col-12 q-mb-sm">
+            <q-separator size="5px" color="grey-2" />
+          </div>
+          <div class="col-12 row" v-if="announcementExam">
+            <q-form ref="myFormPosition" class="col-12">
               <ProfileTable
                 :rows="rowsPosition"
                 :columns="columnsPosition"
@@ -473,7 +472,7 @@
             <div class="text-bold text-subtitle2 q-pb-md">
               เลือกวีธีการชำระเงิน
             </div>
-            <div class="row col-12 q-gutter-y-md q-mb-md">
+            <div class="row col-12 q-gutter-y-md ">
               <q-list dense bordered class="col-12 rounded-borders">
                 <q-item tag="label" v-ripple class="q-pa-md">
                   <q-radio
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 800c3553b..51f2aadb4 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -34,13 +34,13 @@
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
       <div class="col-12 row">
-        <div class="q-py-md row col-12 no-wrap">
+        <div class="q-pb-md q-pt-sm row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
-          <div class="col-12 row">
-            <div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
-              สรุปจำนวนผู้สมัครคัดเลือก
+          <div class="col-12 row q-px-md ">
+            <div class="row items-center col-12 q-gutter-sm q-pb-sm">
+              <div class="text-weight-medium">สรุปจำนวนผู้สมัครคัดเลือก</div>
               <datepicker
-                class="q-pl-sm"
+                class="col-xs-12 col-sm-5 col-md-4"
                 v-model="dateFilter"
                 :locale="'th'"
                 autoApply
@@ -58,9 +58,9 @@
                   <q-input
                     class="full-width inputgreen cursor-pointer"
                     hide-bottom-space
-                    outlined
                     dense
-                    label="วันที่"
+                    prefix="วันที่"
+                    borderless
                     lazy-rules
                     :model-value="dateThaiRange(dateFilter)"
                   >
@@ -75,8 +75,10 @@
                   </q-input>
                 </template>
               </datepicker>
+              <q-space />
               <q-btn
                 size="md"
+                dense
                 icon="mdi-download"
                 round
                 flat
@@ -110,7 +112,7 @@
                 <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
               </q-btn>
             </div>
-            <div class="row col-12 q-col-gutter-md fit q-pa-md">
+            <div class="row col-12 q-col-gutter-md">
               <div
                 style="width: 25%"
                 v-for="(num, index) in dataNum"
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 8f372fe5e..f1d3a3915 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -493,60 +493,55 @@
         <q-space />
         <q-btn
           v-if="!editvisible"
-          flat
-          round
+          unelevated
+          label="ลบข้อมูล"
           :disabled="editvisible"
           :color="editvisible ? 'grey-7' : 'red'"
           @click="saveDelete()"
-          icon="mdi-delete-outline"
-        >
-          <q-tooltip>ลบข้อมูล</q-tooltip>
+        ><!--  icon="mdi-delete-outline"
+          <q-tooltip>ลบข้อมูล</q-tooltip> -->
         </q-btn>
         <q-btn
           v-if="!editvisible"
-          flat
-          round
+          label="แก้ไขข้อมูล"
+          outline
           :disabled="editvisible"
           :color="editvisible ? 'grey-7' : 'primary'"
           @click="editDialog()"
-          icon="mdi-pencil-outline"
-        >
-          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        ><!-- icon="mdi-pencil-outline"
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
         </q-btn>
         <div v-else>
           <q-btn
             flat
-            round
+            label="ยกเลิกแก้ไข"
             :disabled="!editvisible"
             :outline="!editvisible"
             :color="!editvisible ? 'grey-7' : 'red'"
             @click="editDialog()"
-            icon="mdi-undo"
-          >
-            <q-tooltip>ยกเลิก</q-tooltip>
+          ><!-- icon="mdi-undo"
+            <q-tooltip>ยกเลิก</q-tooltip> -->
           </q-btn>
           <q-btn
-            flat
-            round
+            unelevated
+            label="บันทึก"
             :disabled="!editvisible"
             :color="!editvisible ? 'grey-7' : 'public'"
             @click="saveEdit"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
+          ><!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </div>
       </q-card-actions>
       <q-card-actions class="text-primary q-py-sm" v-else>
         <q-space />
         <q-btn
-          flat
-          round
+          unelevated
+          label="บันทึก"
           color="public"
           @click="saveAdd"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึก</q-tooltip>
+        ><!-- icon="mdi-content-save-outline"
+          <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
     </q-card>
diff --git a/src/modules/04_registry/components/DialogFooter.vue b/src/modules/04_registry/components/DialogFooter.vue
index c7b6623b4..c6f37a46e 100644
--- a/src/modules/04_registry/components/DialogFooter.vue
+++ b/src/modules/04_registry/components/DialogFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card-actions class="text-primary q-py-sm">
+  <q-card-actions class="text-primary q-py-sm q-gutter-sm">
     <q-btn
       flat
       round
@@ -19,51 +19,48 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
-    <q-btn
-      v-if="modalEdit == true"
-      flat
-      round
-      color="red"
-      @click="clickDelete"
-      icon="mdi-delete"
-    >
-      <q-tooltip>ลบข้อมูล</q-tooltip>
-    </q-btn>
+    
     <q-btn
       v-if="!editvisible"
-      flat
-      round
+      outline
       :disabled="editvisible"
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit"
-      icon="mdi-pencil-outline"
-    >
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      label="แก้ไขข้อมูล"
+    ><!-- icon="mdi-pencil-outline"
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+    </q-btn>
+    <q-btn
+      v-show="editvisible"
+      flat
+      :disabled="!editvisible"
+      :outline="!editvisible"
+      :color="!editvisible ? 'grey-7' : 'red'"
+      @click="cancel()"
+      label="ยกเลิกแก้ไข"
+      v-if="modalEdit == true"
+    > <!-- icon="mdi-undo"
+      <q-tooltip>ยกเลิก</q-tooltip> -->
+    </q-btn>
+    <q-btn
+      v-if="modalEdit == true"
+      unelevated
+      color="red"
+      @click="clickDelete"
+      label="ลบข้อมูล"
+    ><!-- icon="mdi-delete"
+      <q-tooltip>ลบข้อมูล</q-tooltip> -->
+    </q-btn>
+    <q-btn
+      v-if="editvisible"
+      unelevated
+      label="บันทึก"
+      :disabled="!editvisible"
+      :color="!editvisible ? 'grey-7' : 'public'"
+      @click="checkSave"
+    ><!-- icon="mdi-content-save-outline"
+      <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>
   </q-card-actions>
 </template>
 <script setup lang="ts">
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index fc4d1ae29..aef5b92aa 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -251,50 +251,48 @@
       <q-form ref="myForm">
         <DialogHeader tittle="การลา" :close="clickClose" />
         <q-separator />
-        <q-card-section>
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <data-table
-              :rows="rowsTotal"
-              :columns="columnsTotal"
-              :filter="filterTotal"
-              :visible-columns="visibleColumnsTotal"
-              v-model:inputfilter="filterTotal"
-              v-model:inputvisible="visibleColumnsTotal"
-              :nornmalData="true"
-            >
-              <template #columns="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <data-table
+            :rows="rowsTotal"
+            :columns="columnsTotal"
+            :filter="filterTotal"
+            :visible-columns="visibleColumnsTotal"
+            v-model:inputfilter="filterTotal"
+            v-model:inputvisible="visibleColumnsTotal"
+            :nornmalData="true"
+          >
+            <template #columns="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div
+                    v-else-if="
+                      col.name == 'numLeave' ||
+                      col.name == 'sumLeave' ||
+                      col.name == 'totalLeave'
+                    "
+                    class="table_ellipsis"
                   >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div
-                      v-else-if="
-                        col.name == 'numLeave' ||
-                        col.name == 'sumLeave' ||
-                        col.name == 'totalLeave'
-                      "
-                      class="table_ellipsis"
-                    >
-                      {{
-                        col.value == null
-                          ? ""
-                          : col.value.toLocaleString("en-US")
-                      }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-            </data-table>
-          </div>
-        </q-card-section>
+                    {{
+                      col.value == null
+                        ? ""
+                        : col.value.toLocaleString("en-US")
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </data-table>
+        </div>
         <q-separator />
       </q-form>
     </q-card>
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index a048be498..4a06fdaff 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information">
+      <div id="information" name="1" class="row col-12 information q-mt-sm">
         <!-- <Informationvue
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
@@ -11,16 +11,16 @@
           :fetchDataProfile="fetchData"
         />
       </div>
-      <div id="government" name="16" class="row col-12 q-mt-md">
+      <div id="government" name="16" class="row col-12">
         <Government v-model:statusEdit="statusEdit" />
       </div>
-      <div id="address" name="17" class="row col-12 q-mt-md">
+      <div id="address" name="17" class="row col-12">
         <Address v-model:statusEdit="statusEdit" />
       </div>
-      <div id="family" name="18" class="row col-12 q-mt-md">
+      <div id="family" name="18" class="row col-12">
         <Family v-model:statusEdit="statusEdit" />
       </div>
-      <div id="certicate" name="15" class="row col-12 q-mt-md">
+      <div id="certicate" name="15" class="row col-12">
         <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="education" name="2" class="row col-12 q-mt-md">
@@ -487,13 +487,12 @@
       <q-separator />
       <q-card-actions align="right">
         <q-btn
-          flat
-          round
+          unelevated
+          label="บันทึก"
           color="public"
           @click="Retire"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึก</q-tooltip>
+        ><!-- icon="mdi-content-save-outline"
+          <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
     </q-card>
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index ac3d0a81e..5220c7f45 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -119,7 +119,7 @@
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-md">
                 <div class="row col-12 q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-3">
+                  <div :class=" $q.screen.lt.md ? ' row col-12 q-col-gutter-xs' : 'no-wrap row col-12 q-col-gutter-xs'">
                     <selector
                       hide-bottom-space
                       :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
@@ -137,11 +137,9 @@
                       input-debounce="0"
                       @update:model-value="updateEmployeeClass"
                     />
-                  </div>
                   <!-- @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
                       ) " -->
-                  <div class="col-xs-12 col-sm-2">
                     <q-input
                       clearable
                       dense
@@ -153,8 +151,6 @@
                       @update:model-value="updateProfileId"
                       type="number"
                     />
-                  </div>
-                  <div class="col-xs-12 col-sm-3">
                     <q-input
                       clearable
                       dense
@@ -165,8 +161,6 @@
                       label="ชื่อ-นามสกุล"
                       @update:model-value="updateFullname"
                     />
-                  </div>
-                  <div class="col-xs-12 col-sm-2">
                     <datepicker
                       menu-class-name="modalfix"
                       :model-value="retireYear"
@@ -207,8 +201,6 @@
                         </q-input>
                       </template>
                     </datepicker>
-                  </div>
-                  <div class="col-xs-12 col-sm-2">
                     <q-input
                       clearable
                       dense
@@ -221,12 +213,13 @@
                       @update:model-value="updateGovAge"
                     />
                   </div>
-                  <div class="col-12 row items-center q-col-gutter-md">
+                  <div class="col-12 row items-center">
                     <q-toggle
                       dense
                       :model-value="isShowRetire"
                       color="primary"
                       @update:model-value="updateIsShowRetire"
+                      class="q-pr-md"
                     >
                       แสดงข้อมูลผู้พ้นจากราชการ
                     </q-toggle>
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 876bdd835..984579088 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-md">
+        <div class="row col-12 q-col-gutter-sm">
           <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
             v-model="fiscalyear"
             label="ปีงบประมาณ"
             dense
@@ -21,26 +22,27 @@
             :hide-dropdown-icon="false"
             @update:model-value="searchfiscalyear"
           />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-6">
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 100px">
-                <q-item clickable v-close-popup disable>
-                  <q-item-section
-                    >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
-                  >
-                </q-item>
-                <q-item clickable @click="clickAdd">
-                  <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
+          <div>
+            <q-btn size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+              <q-menu>
+                <q-list style="min-width: 100px">
+                  <q-item clickable v-close-popup disable>
+                    <q-item-section
+                      >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
+                    >
+                  </q-item>
+                  <q-item clickable @click="clickAdd">
+                    <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+          <q-space/>
+        
           <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -48,7 +50,6 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -60,8 +61,7 @@
               />
             </template>
           </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
+        
           <q-select
             v-model="visibleColumns"
             multiple
@@ -75,15 +75,14 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
-            class="gt-xs q-ml-sm"
+            class="col-xs-12 col-sm-3 col-md-2"
           />
         </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
               <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderType"
                 label="ประเภท"
                 dense
@@ -100,9 +99,8 @@
                 :hide-dropdown-icon="false"
                 @update:model-value="searchFilterTable"
               />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
               <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderStatus"
                 label="สถานะ"
                 dense
@@ -120,117 +118,118 @@
                 @update:model-value="searchFilterTable"
               />
             </div>
-          </div>
         </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="UpdataData"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td
-                key="Order"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Order }}
-              </q-td>
-              <q-td
-                key="OrderNum"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderNum }}
-              </q-td>
-              <q-td
-                key="OrderDate"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderDate }}
-              </q-td>
-              <q-td
-                key="OrderBy"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderBy }}
-              </q-td>
-              <q-td
-                key="Signer"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Signer }}
-              </q-td>
-              <q-td
-                key="OrderStatus"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
-                  name="hourglass_top"
-                  color="orange"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </q-td>
-
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.id)"
-                  icon="mdi-delete"
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="Order"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
                 >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td
+                  key="OrderNum"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td
+                  key="OrderDate"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td
+                  key="OrderBy"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td
+                  key="Signer"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td
+                  key="OrderStatus"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+                    name="mdi-timer-sand"
+                    color="orange"
+                    size="20px"
+                  />
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+                    name="mdi-check"
+                    color="positive"
+                    size="20px"
+                  />
+                </q-td>
+
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
       </div>
     </q-card>
   </div>
@@ -329,7 +328,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "left",
+    align: "center",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -703,7 +702,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #ededed;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 88e3853a4..167648ab2 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -18,6 +18,7 @@
       ref="stepper"
       color="primary"
       animated
+      class="step"
       header-class="bg-grey-1"
     >
       <q-step
@@ -96,4 +97,11 @@ const previousStep = () => {
 .q-stepper--horizontal .q-stepper__step-inner {
   padding: 0px;
 }
+.step .q-stepper__tab--done .q-stepper__title,.step .q-stepper__tab--active .q-stepper__title{
+  color: #35473C !important;
+  font-weight: 500 ;
+}
+.step .q-stepper__header--standard-labels .q-stepper__tab{
+  min-height: 60px;
+}
 </style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index 5e88ddb64..e272fa47f 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+    <div class="q-pa-md" style="max-height: 68vh; overflow-y: scroll">
       <q-form ref="myForm">
         <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
           <div class="col-xs-12 col-md-6">
@@ -369,15 +369,14 @@
       </q-form>
     </div>
     <q-separator />
-    <div class="flex justify-end q-px-md q-gutter-sm">
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
       <q-btn
-        flat
-        round
+        unelevated
+        label="บันทึก"
         color="public"
-        icon="mdi-content-save-outline"
         @click="next"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
+      ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
         <q-tooltip>ย้อนกลับ</q-tooltip>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index de1fab70a..11c86c3d4 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
+    <div class="q-pa-sm" style="max-height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-pb-sm items-center">
         <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
           <q-tooltip>อัปเดตข้อมูล</q-tooltip>
         </q-btn>
@@ -20,9 +20,9 @@
             class="q-ml-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon v-if="filter == ''" name="search" />
               <q-icon
-                v-if="inputfilter !== ''"
+                v-if="filter !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
@@ -62,13 +62,19 @@
         v-model:pagination="pagination"
       >
         <template v-slot:header-selection="scope">
-          <q-checkbox keep-color color="primary" v-model="scope.selected" />
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            v-model="scope.selected"
+          />
         </template>
 
         <template v-slot:body-selection="scope">
           <q-checkbox
             keep-color
             color="primary"
+            dense
             :model-value="scope.selected"
             @update:model-value="
               (val, evt) => {
@@ -80,6 +86,7 @@
             "
           />
         </template>
+
         <template v-slot:body-cell="props">
           <q-td :props="props">
             <div v-if="props.col.name == 'no'">
@@ -96,7 +103,7 @@
                 :readonly="!true"
                 :borderless="!true"
                 v-model="props.value"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกเลือกวุฒิการศึกษา'}`]"
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
                 :label="`${'เลือกวุฒิการศึกษา'}`"
                 emit-value
                 map-options
@@ -123,25 +130,43 @@
             </div>
           </q-td>
         </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="pagination.page"
+            color="primary"
+            :max="scope.pagesNumber"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
       </q-table>
     </div>
     <q-separator />
-    <div class="flex justify-end q-px-md q-gutter-sm">
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn 
+        dense 
+        outline 
+        color="primary" 
+        icon="chevron_left" 
+        @click="previous" 
+        class="q-pr-md"
+        label="กรอกรายละเอียด">
+      </q-btn>
       <q-btn
-        flat
-        round
+        dense
+        unelevated
+        label="บันทึก"
         color="public"
-        icon="mdi-content-save-outline"
         @click="next"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
+        class="q-px-md"
+      ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
-      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
-        <q-tooltip>ย้อนกลับ</q-tooltip>
-      </q-btn>
-      <q-btn flat round color="primary" icon="chevron_right" @click="next">
+      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
         <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn>
+      </q-btn> -->
     </div>
   </div>
 </template>
@@ -303,7 +328,6 @@ const getClass = (val: boolean) => {
   color: #4154b3;
 }
 .custom-header-table {
-  max-height: 64vh;
   .q-table tr:nth-child(odd) td {
     background: white;
   }
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 6afc19031..707ac202f 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -2,18 +2,9 @@
   <div>
     <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
       <div class="col-12 row q-py-sm items-center">
-        <q-btn
-          size="12px"
-          flat
-          round
-          color="add"
-          @click="clickAdd"
-          icon="mdi-plus"
-        >
+        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
         </q-btn>
-        <!-- การ์ดเพิ่มข้อมูล-->
-        <q-form ref="myForm"> </q-form>
         <q-space />
         <div class="items-center" style="display: flex">
           <!-- ค้นหาข้อความใน table -->
@@ -29,9 +20,9 @@
             class="q-ml-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon v-if="filter == ''" name="search" />
               <q-icon
-                v-if="inputfilter !== ''"
+                v-if="filter !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
@@ -55,101 +46,297 @@
           />
         </div>
       </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="name"
-          v-model:selected="selected"
-          class="custom-header-table"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:body-cell="props">
-            <q-td :props="props">
-              <div v-if="props.col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="props.col.name == 'notification'">
-                <q-select
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  multiple
-                  :outlined="true"
-                  dense
-                  use-chips
-                  lazy-rules
-                  :readonly="!true"
-                  :borderless="!true"
-                  v-model="props.value"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
-                  :label="`${'เลือกช่องทาง'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="notificationOption"
-                  option-value="id"
-                  input-debounce="0"
-                  color="primary"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-black">
-                        ไม่พบข้อมูลที่ค้นหา
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div v-else @click="click(props)">
-                {{ props.value }}
-              </div>
+      <q-table
+        flat
+        bordered
+        dense
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+        class="custom-header-table"
+        :pagination-label="paginationLabel"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
             </q-td>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
+            <q-td key="idcard" :props="props">
+              {{ props.row.idcard }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="agency" :props="props">
+              {{ props.row.agency }}
+            </q-td>
+            <q-td key="send" :props="props">
+              <q-select
+                :class="getClass(true)"
+                hide-bottom-space
+                multiple
+                :outlined="true"
+                dense
+                lazy-rules
+                v-model="filter"
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="optionSelect"
+                option-value="id"
+                input-debounce="0"
+                color="primary"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-black">
+                      ไม่พบข้อมูลที่ค้นหา
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="pagination.page"
+            color="primary"
+            :max="scope.pagesNumber"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </q-table>
     </div>
     <q-separator />
-    <div class="flex justify-end q-px-md q-gutter-sm">
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
       <q-btn
-        flat
-        round
-        color="public"
-        icon="mdi-content-save-outline"
-        @click="next"
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
       >
-        <q-tooltip>บันทึก</q-tooltip>
       </q-btn>
-      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
-        <q-tooltip>ย้อนกลับ</q-tooltip>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="next"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
-      <q-btn flat round color="primary" icon="chevron_right" @click="next">
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
         <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn>
+      </q-btn> -->
     </div>
   </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <div class="col-12 row q-py-sm items-center">
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-input
+                    standout
+                    dense
+                    v-model="filterModal"
+                    ref="filterRef"
+                    outlined
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    style="max-width: 200px"
+                    class="q-ml-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="filterModal == ''" name="search" />
+                      <q-icon
+                        v-if="filterModal !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="resetFilter"
+                      />
+                    </template>
+                  </q-input>
+
+                  <q-select
+                    v-model="visibleColumnsModal"
+                    :display-value="$q.lang.table.columns"
+                    multiple
+                    outlined
+                    dense
+                    :options="columnsModal"
+                    options-dense
+                    option-value="name"
+                    map-options
+                    emit-value
+                    style="min-width: 150px"
+                    class="gt-xs q-ml-sm"
+                  />
+                </div>
+              </div>
+              <q-table
+                flat
+                bordered
+                dense
+                :rows="rowsModal"
+                :columns="columnsModal"
+                :visible-columns="visibleColumnsModal"
+                :filter="filterModal"
+                row-key="name"
+                selection="multiple"
+                v-model:selected="selectedModal"
+                class="custom-header-table"
+                :pagination-label="paginationLabel"
+                v-model:pagination="paginationModal"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  />
+                </template>
+
+                <template v-slot:body-cell="props">
+                  <q-td :props="props">
+                    <div v-if="props.col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="paginationModal.page"
+                    color="primary"
+                    :max="scope.pagesNumber"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </q-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="next"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import { useQuasar, QInput, QForm } from "quasar";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import router from "@/router";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main.ts";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   next: {
@@ -166,16 +353,133 @@ const next = () => props.next();
 const previous = () => props.previous();
 
 const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
 
+const myForm = ref<QForm>();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+
+const selectedModal = ref([]);
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const columnsModal = [
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+];
+
+const rowsModal = [
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    educate: "",
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    educate: "",
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    educate: "",
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    educate: "",
+  },
+];
+
+const paginationModal = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "แจ้งเตือน" },
+]);
+
 const visibleColumns = ref<String[]>([
   "no",
   "idcard",
   "name",
   "position",
-  "department",
-  "notification",
+  "agency",
+  "send",
 ]);
 const columns = [
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
@@ -201,17 +505,17 @@ const columns = [
     sortable: true,
   },
   {
-    name: "department",
+    name: "agency",
     align: "left",
     label: "หน่วยงาน",
-    field: "department",
+    field: "agency",
     sortable: true,
   },
   {
-    name: "notification",
+    name: "send",
     align: "left",
     label: "ช่องทางการส่งสำเนา",
-    field: "notification",
+    field: "send",
     sortable: true,
   },
 ];
@@ -221,120 +525,101 @@ const rows = [
     no: "0ac56905-1a74-4606-a120-233340adde95",
     name: "นางนัทธ์ เหล่าสกุล",
     idcard: "9158455632145",
+    send: "",
     position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Email ",
+    agency: "กลุ่มงานช่วยบริหาร",
   },
   {
     no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
     name: "นางขรรค์ จันทรสมบัติ",
     idcard: "8558455632126",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
   },
   {
     no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
     name: "นางโอภาส จรัสวงศ์",
     idcard: "8158455635425",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Notification",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
   },
   {
     no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
     name: "นางธิญา หงษ์ทอง",
     idcard: "4558455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Notification",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางธนวิทย์ พิกุลเทพ",
     idcard: "5542455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางหนึ่ง สตาภิรมย์",
     idcard: "7448455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางสัจพร คมคาย",
     idcard: "1236455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางตุลยากร ปรีดาศิริกุล",
     idcard: "1523455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางบัลลังค์ จิรวาณิชย์",
     idcard: "1258455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางคมคาย เรืองรังสรรค์",
     idcard: "8548455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
   {
     no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
     name: "นางพรทิพา คมคาย",
     idcard: "6598455632145",
-    position: "ผู้อำนวยการ",
-    department: "กลุ่มงานช่วยบริหาร",
-    notification: "Inbox ",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
   },
 ];
-// const clickAdd = () => {
-//   router.push({ name: "OrderplacementDetail" });
-// };
-const selected = ref([]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+
+onMounted(async () => {
+  await nodeTree();
 });
-const notificationOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 
-const click = (e: any) => {
-  console.log(e);
-};
-
-const myForm = ref<QForm | null>(null);
-const clickAdd = async () => {
-  await myForm.value!.validate().then(async (result: boolean) => {
-    // console.log(result);
-  });
-};
-
-const selectData = (row: any) => {};
-
-const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
+  //   if (props.paging == true)
+  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  //   else
+  return start + "-" + end + " ใน " + total;
 };
 
 const resetFilter = () => {
@@ -349,6 +634,67 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+const clickClose = async () => {
+  //   if (editRow.value == true) {
+  //   dialogMessage(
+  //     $q,
+  //     "ข้อมูลมีการแก้ไข",
+  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+  //     "mdi-help-circle-outline",
+  //     "ตกลง",
+  //     "orange",
+  //     () => (modal.value = false),
+  //     undefined
+  //   );
+  //   } else {
+  modal.value = false;
+  //     next.value = false;
+  //     previous.value = false;
+  //   }
+};
+
+const clickAdd = () => {
+  modal.value = true;
+};
+
+const clickDelete = (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const onSelected = async (id: string) => {
+  //   await fetchPositionNumber(id);
+};
+
+const deleteData = async (id: string) => {};
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index a77a1f601..3eaed9475 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -51,7 +51,10 @@
               </q-btn>
             </div>
           </div>
-          <div class="card-pdf q-ma-md q-pa-md">asd</div>
+          <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
+            คำสั่ง
+          </div>
+          <div class="card-pdf q-ma-md q-pa-md" v-else>เอกสารแนบท้าย</div>
         </template>
 
         <template v-slot:separator>
@@ -93,19 +96,25 @@
       </q-splitter>
     </div>
     <q-separator />
-    <div class="flex justify-end q-px-md q-gutter-sm">
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn 
+        dense 
+        outline 
+        color="primary" 
+        icon="chevron_left" 
+        @click="previous" 
+        class="q-pr-md"
+        label="เลือกรายชื่อส่งสำเนา">
+      </q-btn>
       <q-btn
-        flat
-        round
+        unelevated
+        label="บันทึก"
         color="public"
-        icon="mdi-content-save-outline"
         @click="next"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
-      </q-btn>
-      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
-        <q-tooltip>ย้อนกลับ</q-tooltip>
+      > <!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
+     
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
         <q-tooltip>ต่อไป</q-tooltip>
       </q-btn> -->
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
index 9bfa25774..ff597bd8f 100644
--- a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
@@ -67,27 +67,61 @@ const clickPrevious = async () => {
 </script>
 <template>
   <q-card-actions class="text-primary q-py-sm">
-    <q-btn flat round icon="mdi-menu-left" @click="clickPrevious" v-if="modalEdit == true" :disable="previous == false"
+    <q-btn 
+      flat round 
+      icon="mdi-menu-left" 
+      @click="clickPrevious" 
+      v-if="modalEdit == true" 
+      :disable="previous == false"
       :color="!previous ? 'grey-7' : 'public'" />
-    <q-btn flat round icon="mdi-menu-right" @click="clickNext" v-if="modalEdit == true" :disable="next == false"
+    <q-btn 
+      flat round 
+      icon="mdi-menu-right" 
+      @click="clickNext" 
+      v-if="modalEdit == true" :disable="next == false"
       :color="!next ? 'grey-7' : 'public'" />
     <q-space />
-    <q-btn v-if="modalEdit == true" flat round color="red" @click="clickDelete" icon="mdi-delete">
-      <q-tooltip>ลบข้อมูล</q-tooltip>
+    <q-btn 
+      v-if="modalEdit == true" 
+      unelevated
+      label="ลบข้อมูล"
+      color="red" 
+      @click="clickDelete" 
+      ><!-- icon="mdi-delete"
+      <q-tooltip>ลบข้อมูล</q-tooltip> -->
     </q-btn>
-    <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 
+      v-show="editvisible"
+      flat 
+      :disabled="!editvisible" 
+      :outline="!editvisible" 
+      :color="!editvisible ? 'grey-7' : 'red'"
+      @click="cancel()" 
+      label="ยกเลิกแก้ไข"
+      v-if="modalEdit == true">
+      <!-- icon="mdi-undo"
+      <q-tooltip>ยกเลิก</q-tooltip> -->
+    </q-btn>
+    <q-btn 
+      v-if="!editvisible" 
+      outline
+      label="แก้ไขข้อมูล"
+      :disabled="editvisible" 
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"> 
+      <!-- icon="mdi-pencil-outline"
+      <q-tooltip></q-tooltip> -->
+    </q-btn>
+    
+    <q-btn 
+      v-if="editvisible"
+      unelevated
+      :disabled="!editvisible" 
+      :color="!editvisible ? 'grey-7' : 'public'" 
+      @click="checkSave"
+      label="บันทึก"
+      ><!-- icon="mdi-content-save-outline"
+      <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>
   </q-card-actions>
 </template>
diff --git a/src/modules/05_placement/components/pass/DialogFooter.vue b/src/modules/05_placement/components/pass/DialogFooter.vue
index a5382c694..dab4dfa0c 100644
--- a/src/modules/05_placement/components/pass/DialogFooter.vue
+++ b/src/modules/05_placement/components/pass/DialogFooter.vue
@@ -45,15 +45,25 @@ const checkSave = () => {
 <template>
   <q-card-actions class="text-primary">
     <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 
+      v-if="!editvisible" 
+      outline
+      :disabled="editvisible" 
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" 
+      ><!-- icon="mdi-pencil-outline"
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
     </q-btn>
     <div v-else>
-      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
-        icon="mdi-content-save-outline">
-        <q-tooltip>บันทึก</q-tooltip>
-      </q-btn>
+      <q-btn 
+        unelevated
+        label="บันทึก"
+        :disabled="!editvisible" 
+        :color="!editvisible ? 'grey-7' : 'public'" 
+        @click="checkSave"
+      >
+      </q-btn><!-- icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip> -->
     </div>
   </q-card-actions>
 </template>
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index d9d36723b..ef8e26281 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
-import { useQuasar } from 'quasar'
+import { useQuasar } from "quasar";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const modal = ref<boolean>();
-  const { success } = mixin;
+const { success } = mixin;
 const save = ref<boolean>(true);
 const props = defineProps({
   Modal: Boolean,
@@ -72,7 +72,7 @@ const checkboxItems: CheckboxItem[] = [
       "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
   },
 ];
-const $q = useQuasar()
+const $q = useQuasar();
 function isRequired(val: any): boolean | string {
   return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
 }
@@ -129,25 +129,25 @@ const close = async () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
                   <div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
-                  <div class="q-pb-md">วัน/เดือน/ปีเกิด</div>
+                  <div>วัน/เดือน/ปีเกิด</div>
                 </div>
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
                     {{ props.getdetail.profileID }}
                   </div>
-                  <div class="q-pb-md">
+                  <div>
                     {{ props.getdetail.dateOfBirth }}
                   </div>
                 </div>
                 <div class="col-2 header-sub-text">
                   <div class="q-pb-md">ชื่อ-นามสกุล</div>
-                  <div class="q-pb-md">เพศ</div>
+                  <div>เพศ</div>
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
                     {{ props.getdetail.fullName }}
                   </div>
-                  <div class="q-pb-md">
+                  <div>
                     {{ props.getdetail.gender }}
                   </div>
                 </div>
@@ -171,25 +171,25 @@ const close = async () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
                   <div class="q-pb-md">สถานศึกษา</div>
-                  <div class="q-pb-md">สาขาวิชาเอก</div>
+                  <div>สาขาวิชาเอก</div>
                 </div>
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
                     {{ props.getdetail.university }}
                   </div>
-                  <div class="q-pb-md">
+                  <div>
                     {{ props.getdetail.major }}
                   </div>
                 </div>
                 <div class="col-2 header-sub-text">
                   <div class="q-pb-md">วุฒิการศึกษา</div>
-                  <div class="q-pb-md">อื่นๆ</div>
+                  <div>อื่นๆ</div>
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
                     {{ props.getdetail.degree ? props.getdetail.degree : "-" }}
                   </div>
-                  <div class="q-pb-md">
+                  <div>
                     {{ props.getdetail.remark ? props.getdetail.remark : "-" }}
                   </div>
                 </div>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 048ca3047..f3794c327 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1004,4 +1004,8 @@ if (keycloak.tokenParsed != null) {
 ::-webkit-scrollbar-thumb:hover {
   background-color: #a8bbbf;
 }
+
+.q-card__actions .q-btn--rectangle{
+  padding: 0 14px !important;
+}
 </style>