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"
diff --git a/src/css/app.scss b/src/css/app.scss
index 126a7c4d..f6b08f3f 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -23,6 +23,9 @@ html {
   --negative-fg: 0 0% 100%;
   --negative-bg: var(--red-9-hsl);
 
+  --positive-fg: 0 0% 100%;
+  --positive-bg: var(--teal-7-hsl);
+
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
 
@@ -133,3 +136,12 @@ html {
   color: hsl(var(--negative-fg));
   background-color: hsl(var(--negative-bg));
 }
+
+.app-text-positive {
+  color: hsl(var(--positive-bg)) !important;
+}
+
+.app-bg-positive {
+  color: hsl(var(--positive-fg));
+  background-color: hsl(var(--positive-bg));
+}
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 764c7315..338aadb9 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -42,7 +42,7 @@ const defaultFormData = {
   licenseExpireDate: null,
   licenseIssueDate: null,
   licenseNo: null,
-  discountCondition: '',
+  discountCondition: null,
   retireDate: null,
   startDate: null,
   registrationNo: null,
@@ -54,9 +54,11 @@ const defaultFormData = {
   userType: '',
   profileImage: null,
   birthDate: null,
-  responsibleArea: '',
+  responsibleArea: null,
+  username: '',
 };
 
+const profileSubmit = ref(false);
 const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
@@ -65,7 +67,6 @@ const userId = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
-const username = ref('');
 const code = ref('');
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
@@ -98,7 +99,10 @@ const formData = ref<UserCreate>({
   userType: '',
   profileImage: null,
   birthDate: null,
-  responsibleArea: '',
+  responsibleArea: null,
+  checkpoint: null,
+  checkpointEN: null,
+  username: '',
 });
 
 const profileFile = ref<File | undefined>(undefined);
@@ -131,6 +135,7 @@ const selectorList = computed(() => [
 
 async function openDialog(idEdit?: string) {
   modal.value = true;
+  profileSubmit.value = false;
   userStore.userOption.brOpts = [];
 
   userStore.userOption.hqOpts.length === 0
@@ -166,6 +171,7 @@ async function openDialog(idEdit?: string) {
         firstName: foundUser.firstName,
         userRole: foundUser.userRole,
         userType: foundUser.userType,
+        username: foundUser.username,
         responsibleArea: foundUser.responsibleArea,
         licenseExpireDate:
           (foundUser.licenseExpireDate &&
@@ -192,9 +198,10 @@ async function openDialog(idEdit?: string) {
       code.value = foundUser.code;
       urlProfile.value = foundUser.profileImageUrl;
       isEdit.value = true;
+      profileSubmit.value = true;
       await userStore.fetchBrOption(hqId.value);
-      await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
-      await formDialogRef.value.fetchDistrict(formData.value.provinceId);
+      // await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
+      // await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
   }
 }
@@ -204,13 +211,13 @@ function onClose() {
   hqId.value = '';
   brId.value = '';
   userId.value = '';
-  username.value = '';
   urlProfile.value = '';
+  profileSubmit.value = false;
   modal.value = false;
   status.value = false;
   isEdit.value = false;
-  mapUserType(selectorLabel.value);
   Object.assign(formData.value, defaultFormData);
+  mapUserType(selectorLabel.value);
 }
 
 async function onSubmit() {
@@ -270,15 +277,14 @@ function cardClick(id: string) {
 }
 
 function mapUserType(label: string) {
-  if (label === 'personnelSelector1') {
-    formData.value.userType = 'USER';
-  } else if (label === 'personnelSelector2') {
-    formData.value.userType = 'MESSENGER';
-  } else if (label === 'personnelSelector3') {
-    formData.value.userType = 'DELEGATE';
-  } else if (label === 'personnelSelector4') {
-    formData.value.userType = 'AGENCY';
-  }
+  const userTypeMap: { [key: string]: string } = {
+    USER: 'USER',
+    MESSENGER: 'MESSENGER',
+    DELEGATE: 'DELEGATE',
+    AGENCY: 'AGENCY',
+  };
+
+  formData.value.userType = userTypeMap[label];
 }
 
 onMounted(async () => {
@@ -377,14 +383,6 @@ watch(
             female: v.gender === 'female',
             detail: [
               { label: 'ประเภท', value: $t(v.userType) },
-              {
-                label: 'ตำแหน่ง',
-                value: v.userRole
-                  ? userStore.userOption.roleOpts.find(
-                      (r) => r.value === v.userRole,
-                    )?.label || ''
-                  : '',
-              },
               { label: 'โทรศัพท์', value: v.telephoneNo },
               {
                 label: 'อายุ',
@@ -427,15 +425,17 @@ watch(
   <!-- form -->
   <FormDialog
     ref="formDialogRef"
-    v-model:formData="formData"
-    v-model:modal="modal"
-    v-model:hqId="hqId"
-    v-model:brId="brId"
-    v-model:username="username"
-    v-model:code="code"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
     addressENTitle="ที่อยู่พนักงาน ENG"
+    v-model:modal="modal"
+    v-model:address="formData.address"
+    v-model:addressEN="formData.addressEN"
+    v-model:provinceId="formData.provinceId"
+    v-model:districtId="formData.districtId"
+    v-model:subDistrictId="formData.subDistrictId"
+    v-model:zipCode="formData.zipCode"
+    :addressSeparator="formData.userType !== ''"
     :submit="() => onSubmit()"
     :close="() => onClose()"
   >
@@ -454,33 +454,61 @@ watch(
             style="color: var(--border-color)"
           />
         </div>
+        <div
+          v-if="urlProfile && !profileSubmit"
+          class="col-12 row q-mt-md q-col-gutter-x-md"
+        >
+          <div class="col-6">
+            <q-btn
+              dense
+              unelevated
+              outlined
+              padding="8px"
+              class="cancel-img-btn full-width"
+              label="ยกเลิก"
+              @click="urlProfile = ''"
+            />
+          </div>
+          <div class="col-6">
+            <q-btn
+              dense
+              unelevated
+              outlined
+              padding="8px"
+              class="submit-img-btn full-width"
+              label="บันทึก"
+              @click="profileSubmit = true"
+            />
+          </div>
+        </div>
         <q-btn
-          v-if="urlProfile"
+          v-else-if="urlProfile && profileSubmit"
           dense
           unelevated
           outlined
           padding="8px"
           icon="mdi-pencil-outline"
-          class="edit-img-btn q-my-md full-width"
+          class="edit-img-btn q-mt-md full-width"
           label="แก้ไขโปรไฟล์"
-          @click="inputFile.click()"
+          @click.prevent="inputFile.click(), (profileSubmit = false)"
         />
+
         <q-btn
           v-else
           dense
           unelevated
           outlined
           padding="8px"
-          class="upload-img-btn q-my-md full-width"
+          class="upload-img-btn q-mt-md full-width"
           label="อัปโหลดรูปภาพ"
           :class="{ dark: $q.dark.isActive }"
           @click="inputFile.click()"
         />
-        <div class="text-left">
+        <q-separator class="col-12 q-my-md" />
+        <div class="text-left q-pt-md">
           <q-toggle
             dense
             size="md"
-            color="primary"
             v-model="status"
             padding="none"
             class="q-pr-md"
@@ -495,12 +523,12 @@ watch(
         dense
         outlined
         separator
-        :addressSeparator="formData.userType"
+        :usernameReadonly="isEdit"
         v-model:hqId="hqId"
         v-model:brId="brId"
         v-model:userType="formData.userType"
         v-model:userRole="formData.userRole"
-        v-model:userName="username"
+        v-model:username="formData.username"
         v-model:userCode="code"
       />
     </template>
@@ -538,14 +566,11 @@ watch(
   </FormDialog>
 </template>
 <style>
-.bg-white {
-  background-color: var(--surface-1) !important;
-}
-
 .upload-img-preview {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
   height: 12vw;
+  background-color: var(--surface-1);
 }
 
 .upload-img-btn {
@@ -565,4 +590,18 @@ watch(
   background-color: transparent;
   border-radius: var(--radius-2);
 }
+
+.cancel-img-btn {
+  color: hsl(var(--negative-bg));
+  border: 1px solid hsl(var(--negative-bg));
+  background-color: transparent;
+  border-radius: var(--radius-2);
+}
+
+.submit-img-btn {
+  color: var(--surface-1);
+  border: 1px solid hsl(var(--positive-bg));
+  background-color: hsl(var(--positive-bg));
+  border-radius: var(--radius-2);
+}
 </style>
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index ec036312..137be587 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -21,6 +21,7 @@ export type User = {
   gender: string;
   userRole: string;
   userType: string;
+  username: string;
   retireDate: Date | null;
   startDate: Date | null;
   registrationNo: string | null;
@@ -41,6 +42,8 @@ export type User = {
   code: string;
   birthDate?: Date | null;
   responsibleArea: string;
+  checkpoint?: string | null;
+  checkpointEN?: string | null;
   branch: Branch[];
 };
 
@@ -70,9 +73,12 @@ export type UserCreate = {
   firstName: string;
   userRole: string;
   userType: string;
+  username: string;
   profileImage?: File | null; // required but not strict
   birthDate?: Date | null;
-  responsibleArea: string;
+  responsibleArea?: string | null;
+  checkpoint?: string | null;
+  checkpointEN?: string | null;
 };
 
 export type UserAttachment = {