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/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/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 2877cb921..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">
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b4250883a..5bbc0a5c0 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -60,7 +60,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         เลขที่ประจำตัวประชาชน
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         วัน/เดือน/ปีเกิด
                                     </div>
                                 </div>
@@ -68,7 +68,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.profileID }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.dateOfBirth }}
                                     </div>
                                 </div>
@@ -76,7 +76,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         ชื่อ-นามสกุล
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         เพศ
                                     </div>
                                 </div>
@@ -84,7 +84,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.fullName }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.gender }}
                                     </div>
                                 </div>
@@ -116,7 +116,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         สถานศึกษา
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         สาขาวิชาเอก
                                     </div>
                                 </div>
@@ -124,7 +124,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.university }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.major }}
                                     </div>
                                 </div>
@@ -132,7 +132,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         วุฒิการศึกษา
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         อื่นๆ
                                     </div>
                                 </div>
@@ -140,7 +140,7 @@ const clickSave = async () => {
                                     <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>