diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index d9877091..9bbce4a1 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch, reactive } from 'vue';
 import useAddressStore, {
   District,
   Province,
@@ -22,60 +22,44 @@ const addressEN = defineModel('addressEN', { default: '' });
 const provinceId = defineModel<string | null | undefined>('provinceId');
 const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
-const zipCode = defineModel<string>('zipCode', { default: '' });
+const zipCode = defineModel<string | null | undefined>('zipCode');
+const isOpen = defineModel<boolean>('isOpen', { default: false });
 
-const addrOptions = ref<{
-  provinceOps?: Province[];
-  districtOps?: District[];
-  subDistrictOps?: SubDistrict[];
-}>({});
+const addrOptions = reactive<{
+  provinceOps: Province[];
+  districtOps: District[];
+  subDistrictOps: SubDistrict[];
+}>({
+  provinceOps: [],
+  districtOps: [],
+  subDistrictOps: [],
+});
 
 async function fetchProvince() {
   const result = await adrressStore.fetchProvince();
-  if (result) {
-    addrOptions.value.provinceOps = result;
-  }
+
+  if (result) addrOptions.provinceOps = result;
 }
 
-async function fetchDistrict(id: string | undefined) {
-  if (id) {
-    const result = await adrressStore.fetchDistrictByProvinceId(id);
-    if (result) {
-      addrOptions.value.districtOps = result;
-    }
-  }
+async function fetchDistrict() {
+  if (!provinceId.value) return;
+
+  const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
+  if (result) addrOptions.districtOps = result;
 }
 
-async function fetchSubDistrict(id: string | undefined) {
-  if (id) {
-    const result = await adrressStore.fetchSubDistrictByProvinceId(id);
-    if (result) {
-      addrOptions.value.subDistrictOps = result;
-    }
-  }
-}
-
-async function selectProvince(id: string) {
-  if (!id) return;
-  districtId.value = undefined;
-  subDistrictId.value = undefined;
-  addrOptions.value.districtOps = [];
-  addrOptions.value.subDistrictOps = [];
-  zipCode.value = '';
-  await fetchDistrict(id);
-}
-
-async function selectDistrict(id: string) {
-  if (!id) return;
-  subDistrictId.value = undefined;
-  zipCode.value = '';
-  await fetchSubDistrict(id);
+async function fetchSubDistrict() {
+  if (!districtId.value) return;
+  const result = await adrressStore.fetchSubDistrictByProvinceId(
+    districtId.value,
+  );
+  if (result) addrOptions.subDistrictOps = result;
 }
 
 async function selectSubDistrict(id: string) {
   if (!id) return;
   zipCode.value =
-    addrOptions.value.subDistrictOps
+    addrOptions.subDistrictOps
       ?.filter((x) => x.id === id)
       .map((x) => x.zipCode)[0] ?? '';
 }
@@ -83,6 +67,10 @@ async function selectSubDistrict(id: string) {
 onMounted(async () => {
   await fetchProvince();
 });
+
+watch(isOpen, fetchDistrict);
+watch(provinceId, fetchDistrict);
+watch(districtId, fetchSubDistrict);
 </script>
 <template>
   <div class="col-12 app-text-muted">
@@ -123,12 +111,12 @@ onMounted(async () => {
         :label="$t('province')"
         class="col-3"
         :options="addrOptions.provinceOps"
-        @update:model-value="(v: string) => selectProvince(v)"
         lazy-rules
         :rules="[
           (val) =>
             (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
         ]"
+        @update:model-value="districtId = subDistrictId = zipCode = null"
       />
       <q-select
         :dense="dense"
@@ -145,12 +133,12 @@ onMounted(async () => {
         :label="$t('district')"
         class="col-3"
         :options="addrOptions.districtOps"
-        @update:model-value="(v: string) => selectDistrict(v)"
         lazy-rules
         :rules="[
           (val) =>
             (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
         ]"
+        @update:model-value="subDistrictId = zipCode = null"
       />
       <q-select
         :dense="dense"
@@ -161,18 +149,22 @@ onMounted(async () => {
         emit-value
         map-options
         id="select-sub-district"
-        v-model="subDistrictId"
+        :model-value="
+          addrOptions.subDistrictOps.length === 1
+            ? (subDistrictId = addrOptions.subDistrictOps[0].id)
+            : ''
+        "
         option-value="id"
         option-label="name"
         :label="$t('subDistrict')"
         class="col-3"
         :options="addrOptions.subDistrictOps"
-        @update:model-value="(v: string) => selectSubDistrict(v)"
         lazy-rules
         :rules="[
           (val) =>
             (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
         ]"
+        @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
         :dense="dense"
@@ -217,7 +209,6 @@ onMounted(async () => {
         :label="$t('province')"
         class="col-3"
         :options="addrOptions.provinceOps"
-        @update:model-value="(v: string) => selectProvince(v)"
       />
       <q-select
         :dense="dense"
@@ -233,7 +224,6 @@ onMounted(async () => {
         :label="$t('district')"
         class="col-3"
         :options="addrOptions.districtOps"
-        @update:model-value="(v: string) => selectDistrict(v)"
       />
       <q-select
         :dense="dense"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 0987b97b..675adb4b 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -8,7 +8,9 @@ const userType = defineModel<string>('userType');
 const registrationNo = defineModel<string | null>('registrationNo');
 const startDate = defineModel<Date | null>('startDate');
 const retireDate = defineModel<Date | null>('retireDate');
-const responsibleArea = defineModel<string>('responsibleArea');
+const responsibleArea = defineModel<string | null | undefined>(
+  'responsibleArea',
+);
 const discountCondition = defineModel<string | null | undefined>(
   'discountCondition',
 );
@@ -137,7 +139,6 @@ defineProps<{
         options-dense
         label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
         class="col-12"
-        bg-color="white"
         option-label="label"
         option-value="value"
         v-model="responsibleArea"
@@ -174,7 +175,6 @@ defineProps<{
         options-dense
         label="สัญชาติต้นทาง"
         class="col-3"
-        bg-color="white"
         option-label="label"
         option-value="label"
         v-model="sourceNationality"
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index a1a2a644..dd46e92a 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -7,7 +7,7 @@ const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
 const userType = defineModel<string>('userType');
 const userRole = defineModel<string>('userRole');
-const userName = defineModel<string | null | undefined>('userName');
+const username = defineModel<string | null | undefined>('username');
 const userCode = defineModel<string>('userCode');
 
 defineProps<{
@@ -15,6 +15,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  usernameReadonly?: boolean;
 }>();
 
 async function selectHq(id: string) {
@@ -37,7 +38,6 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-6"
-      bg-color="white"
       option-label="label"
       option-value="value"
       label="รหัสสำนักงานใหญ่"
@@ -57,7 +57,6 @@ async function selectHq(id: string) {
       hide-bottom-space
       class="col-6"
       label="รหัสสาขา"
-      bg-color="white"
       option-label="label"
       option-value="value"
       v-model="brId"
@@ -73,7 +72,6 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-3"
-      bg-color="white"
       option-value="value"
       option-label="label"
       label="ประเภทผู้ใช้งาน"
@@ -91,7 +89,6 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-3"
-      bg-color="white"
       label="สิทธิ์ผู้ใช้งาน"
       option-label="label"
       option-value="value"
@@ -102,15 +99,14 @@ async function selectHq(id: string) {
     <q-input
       :dense="dense"
       :outlined="outlined"
-      :readonly="readonly"
+      :readonly="usernameReadonly"
       emit-value
       map-options
       options-dense
       hide-bottom-space
       class="col-3"
-      bg-color="white"
       label="ชื่อผู้ใช้งาน (Username)"
-      v-model="userName"
+      v-model="username"
       :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
     />
     <q-input
@@ -119,7 +115,6 @@ async function selectHq(id: string) {
       readonly
       hide-bottom-space
       class="col-3"
-      bg-color="white"
       label="รหัสพนักงาน"
       v-model="userCode"
     />
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 5a886249..a7f10164 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -89,7 +89,6 @@ defineProps<{
       map-options
       label="เพศ"
       class="col-3"
-      bg-color="white"
       option-label="label"
       option-value="value"
       v-model="gender"
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index e397f785..4c2bcea5 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -31,8 +31,9 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
     >
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
-        <div class="form-header q-py-sm q-pr-lg">
+        <div class="form-header q-py-sm q-px-lg">
           <div class="row items-center">
+            <div style="width: 31.98px"></div>
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
             </div>
@@ -70,10 +71,10 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             bordered
             class="column full-height"
             :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
-            style="padding-right: 0"
+            style="padding-right: 0; padding-bottom: 0"
           >
             <div
-              class="row col-12 q-col-gutter-y-md q-pr-md"
+              class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md"
               :style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
             >
               <slot name="information"></slot>
@@ -83,6 +84,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                   dense
                   outlined
                   :separator="addressSeparator"
+                  v-model:isOpen="modal"
                   v-model:address="address"
                   v-model:addressEN="addressEN"
                   v-model:provinceId="provinceId"