diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 3b5a3aae..939837f4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -5,7 +5,12 @@ import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
 
-import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types';
+import {
+  UserCreate,
+  UserTypeStats,
+  UserOption,
+  RoleData,
+} from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
 
 import PersonCard from 'components/home/PersonCard.vue';
@@ -53,6 +58,7 @@ const defaultFormData = {
   responsibleArea: '',
 };
 
+const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
@@ -62,6 +68,10 @@ const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
+const age = ref<string>();
+const formDialogRef = ref();
+const userStats = ref<BranchUserStats[]>();
+const typeStats = ref<UserTypeStats>();
 const formData = ref<UserCreate>({
   provinceId: null,
   districtId: null,
@@ -93,9 +103,6 @@ const formData = ref<UserCreate>({
   birthDate: null,
   responsibleArea: '',
 });
-const userStats = ref<BranchUserStats[]>();
-const typeStats = ref<UserTypeStats>();
-const age = ref<number>();
 
 const profileFile = ref<File | undefined>(undefined);
 const inputFile = document.createElement('input');
@@ -120,6 +127,7 @@ const genderOpts = [
 const userOption = ref<UserOption>({
   hqOpts: [],
   brOpts: [],
+  roleOpts: [],
 });
 
 const selectorList = [
@@ -139,6 +147,16 @@ async function createKeycloak() {
   return res.data;
 }
 
+async function fetchRoleOption() {
+  const res = await api.get<RoleData[]>('/keycloak/role');
+  res.data.map((item) => {
+    userOption.value.roleOpts.push({
+      label: item.name,
+      value: item.id,
+    });
+  });
+}
+
 async function fetchHqOption() {
   if (userOption.value.hqOpts.length === 0) {
     const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
@@ -169,6 +187,7 @@ async function fetchBrOption(id: string) {
 
 async function openDialog(id?: string) {
   await fetchHqOption();
+  await fetchRoleOption();
   modal.value = true;
   if (id && userData.value) {
     const foundUser = userData.value.result.find((user) => user.id === id);
@@ -196,7 +215,11 @@ async function openDialog(id?: string) {
       hqId.value = foundUser.branch[0].headOfficeId as string;
       brId.value = foundUser.branch[0].id;
       code.value = foundUser.code;
+      urlProfile.value = foundUser.profileImageUrl;
       isEdit.value = true;
+      await fetchBrOption(hqId.value);
+      await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
+      await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
   }
 }
@@ -204,31 +227,28 @@ async function openDialog(id?: string) {
 function onClose() {
   modal.value = false;
   Object.assign(formData.value, defaultFormData);
+  mapUserType(selectorLabel.value);
+  isEdit.value = false;
   hqId.value = '';
   brId.value = '';
   username.value = '';
   userId.value = '';
   code.value = '';
-  mapUserType(selectorLabel.value);
+  urlProfile.value = '';
 }
 
 async function onSubmit() {
-  console.log('enter');
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
-    console.log('edit');
-    await userStore.editById(userId.value, formData.value);
+    const formDataEdit = { ...formData.value };
+    delete formDataEdit.keycloakId;
+    await userStore.editById(userId.value, formDataEdit);
   } else {
-    console.log('post');
     formData.value.keycloakId = await createKeycloak();
-    if (formData.value.keycloakId !== '') {
-      console.log('keycloakOk');
+    if (formData.value.keycloakId) {
       const result = await userStore.create(formData.value);
-      console.log('Result after create:', result);
       if (result) {
-        console.log('hi3');
-        console.log(result.id);
-        // await branchStore.addUser(result.id, userId.value);
+        await branchStore.addUser(brId.value, result.id);
       }
     }
   }
@@ -253,6 +273,27 @@ function mapUserType(label: string) {
   }
 }
 
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+
+  age.value = `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userOption.value.brOpts = [];
+  await fetchBrOption(id);
+}
+
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
   typeStats.value = await userStore.typeStats();
@@ -274,11 +315,11 @@ watch(
 );
 
 watch(
-  () => hqId.value,
-  async (id) => {
-    fetchBrOption(id);
-    brId.value = '';
-    userOption.value.brOpts = [];
+  () => formData.value.birthDate,
+  (birthDate) => {
+    if (birthDate) {
+      calculateAge(birthDate);
+    }
   },
 );
 </script>
@@ -377,6 +418,7 @@ watch(
 
   <!-- form -->
   <FormDialog
+    ref="formDialogRef"
     v-model:modal="modal"
     v-model:address="formData.address"
     v-model:addressEN="formData.addressEN"
@@ -405,6 +447,7 @@ watch(
         v-model="hqId"
         :options="userOption.hqOpts"
         :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+        @update:model-value="(val: string) => selectHq(val)"
       />
       <q-select
         dense
@@ -448,7 +491,7 @@ watch(
         option-label="label"
         option-value="value"
         v-model="formData.userRole"
-        :options="genderOpts"
+        :options="userOption.roleOpts"
       />
       <!--         :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
       <q-input
@@ -476,13 +519,31 @@ watch(
     <template #prepend>
       <div class="q-pl-md text-center">
         <div class="upload-img-preview">
+          <q-img
+            v-if="urlProfile"
+            :src="urlProfile"
+            style="object-fit: cover; width: 100%; height: 100%"
+          />
           <q-icon
+            v-else
             name="mdi-account full-height"
             size="3vw"
             style="color: var(--border-color)"
           />
         </div>
         <q-btn
+          v-if="urlProfile"
+          dense
+          unelevated
+          outlined
+          padding="8px"
+          icon="mdi-pencil-outline"
+          class="edit-img-btn q-my-md full-width"
+          label="แก้ไขโปรไฟล์"
+          @click="inputFile.click()"
+        />
+        <q-btn
+          v-else
           dense
           unelevated
           outlined
@@ -503,13 +564,6 @@ watch(
           />
           <span>สถานะผู้ใช้งาน</span>
         </div>
-        <q-file
-          dense
-          outlined
-          ref="file"
-          style="visibility: hidden"
-          v-model="formData.profileImage"
-        />
       </div>
     </template>
 
@@ -669,7 +723,7 @@ watch(
         <VueDatePicker
           utc
           autoApply
-          v-model="formData.retireDate"
+          v-model="formData.birthDate"
           :locale="'th'"
           :enableTimePicker="false"
           class="col-3"
@@ -681,7 +735,7 @@ watch(
             <q-input
               dense
               outlined
-              label="วันที่พ้นสภาพพนักงาน"
+              label="วันเดือนปีเกิด"
               :model-value="dateFormat(formData.birthDate)"
             >
               <template v-slot:prepend>
@@ -694,17 +748,24 @@ watch(
               </template>
               <template v-slot:append>
                 <q-icon
-                  v-if="formData.retireDate"
+                  v-if="formData.birthDate"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-                  @click="formData.retireDate = undefined"
+                  @click="formData.birthDate = undefined"
                 />
               </template>
             </q-input>
           </template>
         </VueDatePicker>
-        <q-input dense outlined label="อายุ" class="col-3" v-model="age" />
+        <q-input
+          dense
+          outlined
+          readonly
+          label="อายุ"
+          class="col-3"
+          v-model="age"
+        />
         <q-select
           v-if="formData.userType === 'MESSENGER'"
           dense
@@ -819,4 +880,11 @@ watch(
     background-color: transparent;
   }
 }
+
+.edit-img-btn {
+  color: hsl(var(--info-bg));
+  border: 1px solid hsl(var(--info-bg));
+  background-color: transparent;
+  border-radius: var(--radius-2);
+}
 </style>