diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index e506a8f23..f81a44e49 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -20,7 +20,7 @@
       <q-card-section class="q-pa-md">
         <div class="col-xs-12 col-sm-8"></div>
         <div class="col-12 row items-center q-col-gutter-x-sm">
-          <div class="col-xs-12 col-sm-8">
+          <div class="col-xs-12 col-sm-6">
             <q-input
               outlined
               v-model="name"
@@ -61,7 +61,6 @@
               <template #trigger>
                 <q-input
                   dense
-                  
                   outlined
                   :model-value="yearly + 543"
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
@@ -79,7 +78,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <q-input
               outlined
               v-model="fee"
@@ -113,7 +112,6 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
@@ -206,7 +204,10 @@
               </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-3"
+            v-if="announcementExam && fee != 0"
+          >
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -228,7 +229,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(datePayment)"
+                  :model-value="
+                    datePayment != null ? dateThaiRange(datePayment) : null
+                  "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 10945c281..f317d94fc 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -378,12 +378,12 @@
                         lazy-rules
                         v-model="props.row.code"
                         :rules="[
-                          (val) =>
-                            val.length >= 3 ||
-                            `${'กรุณากรอกรหัสประจำตำแหน่งที่สอบ'}`,
+                            (val:string) => !!val || `${'กรุณากรอกรหัสประจำตำแหน่งที่สอบ'}`,
+                            (val:any) =>
+                                val.length >= 3 ||
+                                `${'กรุณากรอกรหัสประจำตำแหน่งที่สอบ'}`,
                         ]"
                         :label="`${'รหัสประจำตำแหน่งที่สอบ'}`"
-                        @update:modelValue="clickEditRow"
                         hide-bottom-space
                         mask="###"
                       />