diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index 7bbb72107..73b1d3391 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -289,7 +289,7 @@ const getClass = (val: boolean) => {
             </div>
           </div>
 
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -305,7 +305,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -321,7 +321,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -337,7 +337,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
@@ -391,6 +391,7 @@ const getClass = (val: boolean) => {
                     dense
                     lazy-rules
                     :borderless="!edit"
+                    :readonly="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     hide-bottom-space
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index e11ce90f1..552d837e7 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -201,7 +201,7 @@ const getClass = (val: boolean) => {
           <q-img :src="avatar" v-if="avatar !== ''" />
           <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
+        <div class="col-xs-6 col-sm-3 row ">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
             <div class="col-12 text-detail">
@@ -209,7 +209,7 @@ const getClass = (val: boolean) => {
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
+        <div class="col-xs-6 col-sm-3 row ">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
             <div class="col-12 text-detail">
@@ -217,7 +217,7 @@ const getClass = (val: boolean) => {
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
+        <div class="col-xs-6 col-sm-3 row">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
@@ -300,7 +300,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -316,7 +316,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -332,7 +332,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -348,7 +348,7 @@ const getClass = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input
                 :class="getClass(edit)"
@@ -409,6 +409,7 @@ const getClass = (val: boolean) => {
                     :outlined="edit"
                     dense
                     lazy-rules
+                    :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
diff --git a/src/modules/05_placement/components/Receive/information.vue b/src/modules/05_placement/components/Receive/information.vue
index bd6e9cb28..31622d111 100644
--- a/src/modules/05_placement/components/Receive/information.vue
+++ b/src/modules/05_placement/components/Receive/information.vue
@@ -497,9 +497,8 @@ const getClass = (val: boolean) => {
       :addEmployee="statusAdd()"
     />
     <!-- :disable="statusEdit" -->
-    <q-separator />
     <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+      <div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index db988c708..383a3d682 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -585,7 +585,7 @@ const getClass = (val: boolean) => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white">
-          <div class="col-xs-12 row items-center q-col-gutter-md">
+          <div class="col-xs-12 row q-col-gutter-md">
             <div class="col-xs-12">
               <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
             </div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 5b5e78dd7..cac535c14 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -276,7 +276,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -292,7 +292,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -308,7 +308,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -324,7 +324,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
@@ -340,7 +340,7 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -358,7 +358,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -379,6 +379,7 @@ onMounted(async () => {
                     :outlined="edit"
                     dense
                     lazy-rules
+                    :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index b74564665..3ca71c9c2 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -247,81 +247,77 @@
     </div>
     <div class="col-12"><q-separator /></div>
     <q-form ref="myForm">
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-12 row items-center">
-            <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
+      <div class="row q-pa-md">
+        <div class="col-12">
+          <div class="row bg-white q-col-gutter-y-md">
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <div class="text-weight-bold text-grey">
+                  ตำแหน่งและหน่วยงานเดิม
+                </div>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organizationPositionOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
               </div>
             </div>
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <!-- <q-input
+              <div class="row q-col-gutter-x-xs">
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="positionTypeOld"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                    hide-bottom-space
+                    :label="`${'ตำแหน่งประเภท'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="positionLevelOld"
+                    :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                    hide-bottom-space
+                    :label="`${'ระดับ'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="posNo"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                    hide-bottom-space
+                    :label="`${'เลขที่'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -334,18 +330,83 @@
                 :label="`${'เงินเดือน'}`"
                 type="number"
               /> -->
-              <CurrencyInput
-                v-model="salary"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              />
+                  <CurrencyInput
+                    v-model="salary"
+                    :edit="edit"
+                    :options="{
+                      currency: 'THB',
+                    }"
+                    :label="`${'เงินเดือน'}`"
+                  />
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+
+            <div class="col-12"><q-separator /></div>
+
+            <div class="col-12">
+              <div class="row q-col-gutter-x-xs">
+                <div class="col-xs-6 col-sm-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="organization"
+                      :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                      hide-bottom-space
+                      :label="`${'โอนไปสังกัด'}`"
+                    />
+                </div>
+                <div class="col-xs-6 col-sm-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date !== null ? date2Thai(date) : null"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ตั้งแต่วัน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                </div>
+              </div>
+            </div>
+
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -354,72 +415,14 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                v-model="reason"
+                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
                 hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
         </div>
       </div>
     </q-form>
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 56c18d9b1..0ff19a1a9 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -349,7 +349,7 @@ onMounted(async () => {
             </div>
           </div> -->
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 row items-center">
+          <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -365,7 +365,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row items-center">
+          <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -412,7 +412,7 @@ onMounted(async () => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row items-center">
+          <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index f17055842..2e9546b2f 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -133,7 +133,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -149,7 +149,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -165,7 +165,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -181,7 +181,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input
                 :class="getClass(edit)"
@@ -207,7 +207,7 @@
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -223,7 +223,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -244,6 +244,7 @@
                     :outlined="edit"
                     dense
                     lazy-rules
+                    :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index 12fd2a5a0..e56470f40 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -137,7 +137,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -153,7 +153,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -169,7 +169,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -185,7 +185,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input
                 :class="getClass(edit)"
@@ -212,7 +212,7 @@
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -228,7 +228,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index b6dadebf2..fdb778936 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -137,7 +137,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -153,7 +153,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -169,7 +169,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -185,7 +185,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input
                 :class="getClass(edit)"
@@ -212,7 +212,7 @@
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -228,7 +228,7 @@
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -250,6 +250,7 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
+                    :readonly="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     hide-bottom-space
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index a6274309c..7a8691849 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -774,7 +774,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -790,7 +790,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -806,7 +806,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -822,7 +822,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-xs-6 col-sm-3 row ">
             <div class="col-12">
               <!-- <q-input
                 :class="getClass(edit)"
@@ -849,7 +849,7 @@ const statusOrder = (val: boolean) => {
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-4 row items-center">
+          <div class="col-xs-4 row ">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -867,7 +867,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-4 row items-center">
+          <div class="col-xs-4 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -884,6 +884,7 @@ const statusOrder = (val: boolean) => {
                 }}</template>
                 <template #trigger>
                   <q-input
+                  :readonly="!edit"
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -914,7 +915,7 @@ const statusOrder = (val: boolean) => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-4 row items-center">
+          <div class="col-xs-4 row ">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -931,6 +932,7 @@ const statusOrder = (val: boolean) => {
                 }}</template>
                 <template #trigger>
                   <q-input
+                  :readonly="!edit"
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index 964556bf1..5a38b0cb3 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -12,288 +12,295 @@
       :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12 q-pt-md">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            v-model="informaData.cardid"
-            dense
-            @update:model-value="changeCardID"
-            lazy-rules
-            :rules="[
+      <div class="row">
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              v-model="informaData.cardid"
+              dense
+              @update:model-value="changeCardID"
+              lazy-rules
+              :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
               (val:string) =>
                 val.length >= 13 ||
                 `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
             ]"
-            :readonly="!edit"
-            :borderless="!edit"
-            label="เลขบัตรประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
-          <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
+              :readonly="!edit"
+              :borderless="!edit"
+              label="เลขบัตรประจำตัวประชาชน"
+              maxlength="13"
+              mask="#############"
+            />
+            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="informaData.prefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้าชื่อ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                         ) "
-          />
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="informaData.firstname"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="informaData.lastname"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
         </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="calculateMaxDate()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="
-                  informaData.birthDate == null
-                    ? null
-                    : date2Thai(informaData.birthDate)
-                "
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <datepicker
+              v-model="informaData.birthDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+              :max-date="calculateMaxDate()"
+              :disabled="!edit"
+              @update:model-value="handleDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  :class="getClass(edit)"
+                  hide-bottom-space
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  :model-value="
+                    informaData.birthDate == null
+                      ? null
+                      : date2Thai(informaData.birthDate)
+                  "
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                  :label="`${'วัน/เดือน/ปี เกิด'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      :style="
+                        edit
+                          ? 'color: var(--q-primary)'
+                          : 'color: var(--q-grey)'
+                      "
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              dense
+              lazy-rules
+              readonly
+              borderless
+              :style="!edit ? '' : 'padding:0 12px;'"
+              :model-value="informaData.age"
+              :label="`${'อายุ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="informaData.genderId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.genderOps"
+              option-value="id"
+              :label="`${'เพศ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
                         ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="informaData.statusId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.statusOps"
+              option-value="id"
+              :label="`${'สถานภาพ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
                         ) "
-          />
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="informaData.nationality"
+              :label="`${'สัญชาติ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="informaData.ethnicity"
+              :label="`${'เชื้อชาติ'}`"
+            />
+          </div>
         </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.ethnicity"
-            :label="`${'เชื้อชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.religionId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.religionOps"
-            option-value="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="informaData.religionId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.religionOps"
+              option-value="id"
+              :label="`${'ศาสนา'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
                         ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="informaData.bloodId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.bloodOps"
+              option-value="id"
+              :label="`${'หมู่เลือด'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
                         ) "
-            clearable
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            :rules="[
+              clearable
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              type="tel"
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="informaData.tel"
+              :label="`${'เบอร์โทร'}`"
+              :rules="[
               (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
               (val:string) =>
                 val.length >= 10 ||
                 `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
             ]"
-            mask="##########"
-          />
+              mask="##########"
+            />
+          </div>
         </div>
         <div
           class="col-xs-6 col-sm-3 col-md-3"
@@ -1021,13 +1028,13 @@ const fetchDataComponent = async (modelData: Date) => {
   await fetchData();
 };
 const calculateMaxDate = () => {
-      const today = new Date();
-     
-      today.setDate(today.getDate() - 1);
-      return today;
-    }
+  const today = new Date();
+
+  today.setDate(today.getDate() - 1);
+  return today;
+};
 const calRetire = async (birth: Date) => {
-  console.log(birth)
+  console.log(birth);
   const body = {
     birthDate: dateToISO(birth),
   };