diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index e5d576db..8bb8258e 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -60,7 +60,11 @@ const status = ref(false);
           <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
             <q-menu :offset="[0, 10]" style="width: 130px">
               <q-list>
-                <q-item clickable v-close-popup>
+                <q-item
+                  clickable
+                  @click="$emit('updateCard', v.id)"
+                  v-close-popup
+                >
                   <q-item-section class="col-4">
                     <q-icon
                       class="full-width"
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b2ddaa53..03e786af 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -2,10 +2,11 @@
 import { ref, onMounted, watch } from 'vue';
 import { api } from 'src/boot/axios';
 import { storeToRefs } from 'pinia';
+import { dialog } from 'src/stores/utils';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
 
-import { UserCreate, UserTypeStats } from 'src/stores/user/types';
+import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
 // import { dateFormat } from 'src/utils/datetime';
 
@@ -16,10 +17,9 @@ import SelectorList from 'components/SelectorList.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
-import GlobalDialog from 'components/GlobalDialog.vue';
 
-const branchStore = useBranchStore();
 const userStore = useUserStore();
+const branchStore = useBranchStore();
 const { data: userData } = storeToRefs(userStore);
 
 const defaultFormData = {
@@ -53,26 +53,51 @@ const defaultFormData = {
   birthDate: null,
   responsibleArea: '',
 };
-const userId = ref('');
+
+const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
+const userId = ref('');
+const code = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
-const formData = ref<UserCreate>(structuredClone(defaultFormData));
+const formData = ref<UserCreate>({
+  provinceId: null,
+  districtId: null,
+  subDistrictId: null,
+  telephoneNo: '',
+  email: '',
+  zipCode: '',
+  gender: '',
+  addressEN: '',
+  address: '',
+  trainingPlace: null,
+  importNationality: null,
+  sourceNationality: null,
+  licenseExpireDate: null,
+  licenseIssueDate: null,
+  licenseNo: null,
+  discountCondition: '',
+  retireDate: null,
+  startDate: null,
+  registrationNo: null,
+  lastNameEN: '',
+  lastName: '',
+  firstNameEN: '',
+  firstName: '',
+  userRole: '',
+  userType: '',
+  keycloakId: '',
+  profileImage: null,
+  birthDate: null,
+  responsibleArea: '',
+});
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
 const age = ref<number>();
 
-const confirmData = ref({
-  modal: false,
-  title: '',
-  message: '',
-  icon: '',
-  action: () => {},
-});
-
 const userTypeOpts = [
   { label: 'พนักงาน', value: 'USER' },
   { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
@@ -83,10 +108,12 @@ const genderOpts = [
   { label: 'ชาย', value: 'male' },
   { label: 'หญิง', value: 'female' },
 ];
-const hqOpts = ref([
-  { label: '0000000001', value: '1' },
-  { label: '0000000002', value: '2' },
-]);
+
+const userOption = ref<UserOption>({
+  hqOpts: [],
+  brOpts: [],
+});
+
 const brOpts = ref([
   { label: '0000000001-1', value: '1' },
   { label: '0000000001-2', value: '2' },
@@ -109,13 +136,91 @@ async function createKeycloak() {
   return res.data;
 }
 
-// function selectFile() {
-//   const fileInput = this.$refs.file;
-//   fileInput.pickFiles();
-// }
+function selectFile() {
+  // const fileInput = this.$refs.file;
+  // fileInput.pickFiles();
+}
 
-function openDialog() {
+async function fetchHqOption() {
+  if (userOption.value.hqOpts.length === 0) {
+    const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
+    if (res) {
+      res.result.map((item) => {
+        userOption.value.hqOpts.push({
+          label: item.code,
+          value: item.id,
+        });
+      });
+    }
+  }
+}
+
+async function fetchBrOption(id: string) {
+  const res = await branchStore.fetchById(id, {
+    includeSubBranch: true,
+  });
+  if (res) {
+    res.branch.map((item) => {
+      userOption.value.brOpts.push({
+        label: item.code,
+        value: item.id,
+      });
+    });
+  }
+}
+
+async function openDialog(id?: string) {
+  await fetchHqOption();
   modal.value = true;
+  if (id && userData.value) {
+    const foundUser = userData.value.result.find((user) => user.id === id);
+    if (foundUser) {
+      formData.value.provinceId = foundUser.provinceId;
+      formData.value.districtId = foundUser.districtId;
+      formData.value.subDistrictId = foundUser.subDistrictId;
+      formData.value.telephoneNo = foundUser.telephoneNo;
+      formData.value.email = foundUser.email;
+      formData.value.zipCode = foundUser.zipCode;
+      formData.value.gender = foundUser.gender;
+      formData.value.addressEN = foundUser.addressEN;
+      formData.value.address = foundUser.address;
+      formData.value.trainingPlace = foundUser.trainingPlace;
+      formData.value.importNationality = foundUser.importNationality;
+      formData.value.sourceNationality = foundUser.sourceNationality;
+      formData.value.licenseExpireDate = foundUser.licenseExpireDate
+        ? new Date(foundUser.licenseExpireDate)
+        : null;
+      formData.value.licenseIssueDate = foundUser.licenseIssueDate
+        ? new Date(foundUser.licenseIssueDate)
+        : null;
+      formData.value.licenseNo = foundUser.licenseNo;
+      formData.value.discountCondition = foundUser.discountCondition;
+      formData.value.retireDate = foundUser.retireDate
+        ? new Date(foundUser.retireDate)
+        : null;
+      formData.value.startDate = foundUser.startDate
+        ? new Date(foundUser.startDate)
+        : null;
+      formData.value.registrationNo = foundUser.registrationNo;
+      formData.value.lastNameEN = foundUser.lastNameEN;
+      formData.value.lastName = foundUser.lastName;
+      formData.value.firstNameEN = foundUser.firstNameEN;
+      formData.value.firstName = foundUser.firstName;
+      formData.value.userRole = foundUser.userRole;
+      formData.value.userType = foundUser.userType;
+      formData.value.keycloakId = foundUser.keycloakId;
+      formData.value.profileImage = new File([], foundUser.profileImageUrl);
+      formData.value.birthDate = foundUser.birthDate
+        ? new Date(foundUser.birthDate)
+        : null;
+      formData.value.responsibleArea = foundUser.responsibleArea;
+      userId.value = foundUser.id;
+      hqId.value = foundUser.branch[0].id;
+      brId.value = foundUser.branch;
+      code.value = foundUser.code;
+      isEdit.value = true;
+    }
+  }
 }
 
 function onClose() {
@@ -125,17 +230,14 @@ function onClose() {
   brId.value = '';
   username.value = '';
   userId.value = '';
+  code.value = '';
   mapUserType(selectorLabel.value);
 }
 
-function submitConfirm() {
-  confirmData.value.modal = true;
-}
-
-async function onSubmit(id?: string) {
+async function onSubmit() {
   try {
-    if (id) {
-      await userStore.editById(id, formData.value);
+    if (isEdit.value === true && userId.value) {
+      await userStore.editById(userId.value, formData.value);
     } else {
       formData.value.keycloakId = await createKeycloak();
       await userStore.create(formData.value);
@@ -164,7 +266,7 @@ function mapUserType(label: string) {
 }
 
 onMounted(async () => {
-  await userStore.fetchList();
+  await userStore.fetchList({ includeBranch: true });
   typeStats.value = await userStore.typeStats();
   if ((await branchStore.userStats(formData.value.userType)) !== false) {
     userStats.value = await branchStore.userStats(formData.value.userType);
@@ -180,6 +282,15 @@ watch(
     }
   },
 );
+
+watch(
+  () => hqId.value,
+  async (id) => {
+    fetchBrOption(id);
+    brId.value = '';
+    userOption.value.brOpts = [];
+  },
+);
 </script>
 
 <template>
@@ -207,7 +318,7 @@ watch(
             unelevated
             label="+ เพิ่มบุคลากร"
             padding="4px 16px"
-            @click="openDialog"
+            @click="openDialog()"
             style="background-color: var(--cyan-6); color: white"
           />
         </div>
@@ -245,6 +356,7 @@ watch(
             disabled: v.status === 'INACTIVE',
           })) || []
         "
+        @updateCard="openDialog"
         @deleteCard="onDelete"
       />
       <div
@@ -284,7 +396,7 @@ watch(
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
     addressENTitle="ที่อยู่พนักงาน ENG"
-    :submit="() => submitConfirm()"
+    :submit="() => onSubmit()"
     :close="() => onClose()"
   >
     <template #top>
@@ -293,13 +405,14 @@ watch(
         outlined
         emit-value
         map-options
+        options-dense
         class="col-6"
         bg-color="white"
         option-label="label"
         option-value="value"
         label="รหัสสำนักงานใหญ่"
         v-model="hqId"
-        :options="hqOpts"
+        :options="userOption.hqOpts"
         :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
       />
       <q-select
@@ -307,13 +420,14 @@ watch(
         outlined
         emit-value
         map-options
+        options-dense
         class="col-6"
         label="รหัสสาขา"
         bg-color="white"
         option-label="label"
         option-value="value"
         v-model="brId"
-        :options="brOpts"
+        :options="userOption.brOpts"
         :rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
       />
       <q-select
@@ -321,6 +435,7 @@ watch(
         outlined
         emit-value
         map-options
+        options-dense
         class="col-3"
         bg-color="white"
         option-value="value"
@@ -335,6 +450,7 @@ watch(
         outlined
         emit-value
         map-options
+        options-dense
         class="col-3"
         bg-color="white"
         label="สิทธิ์ผู้ใช้งาน"
@@ -360,7 +476,7 @@ watch(
         class="col-3"
         bg-color="white"
         label="รหัสพนักงาน"
-        v-model="userId"
+        v-model="code"
       />
       <!--         :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
  -->
@@ -690,15 +806,6 @@ watch(
       </div>
     </template>
   </FormDialog>
-
-  <GlobalDialog
-    :v-model="confirmData.modal"
-    :title="confirmData.title"
-    :message="confirmData.message"
-    :icon="confirmData.icon"
-    :persistent="true"
-    :action="() => onSubmit()"
-  />
 </template>
 <style>
 .bg-white {
diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts
index e2c90d44..abdc182c 100644
--- a/src/stores/branch/types.ts
+++ b/src/stores/branch/types.ts
@@ -27,6 +27,7 @@ export type Branch = {
   taxNo: string;
   id: string;
   code: string;
+  branch: Branch[];
 };
 
 export type BranchWithChildren = Branch & { branch: Branch[] };
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index cbb68d6e..d449a677 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -124,6 +124,7 @@ const useUserStore = defineStore('api-user', () => {
       pageSize?: number;
       zipCode?: string;
       query?: string;
+      includeBranch?: boolean;
     },
     flow?: {
       sessionId: string;
@@ -139,6 +140,7 @@ const useUserStore = defineStore('api-user', () => {
     if (opts?.page && opts.page > 0) params.append('page', `${opts.page}`);
     if (opts?.zipCode) params.append('zipCode', opts.zipCode);
     if (opts?.query) params.append('query', opts.query);
+    if (opts?.includeBranch) params.append('includeBranch', 'true');
 
     const query = params.toString();
 
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 3e3a895e..044d389a 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -1,4 +1,5 @@
 import { District, Province, SubDistrict } from '../address';
+import { Branch } from '../branch/types';
 import { Status } from '../types';
 
 export type User = {
@@ -39,6 +40,9 @@ export type User = {
   id: string;
   profileImageUrl: string;
   code: string;
+  birthDate?: Date | null;
+  responsibleArea: string,
+  branch: Branch[]
 };
 
 export type UserCreate = {
@@ -57,7 +61,7 @@ export type UserCreate = {
   licenseExpireDate?: Date | null;
   licenseIssueDate?: Date | null;
   licenseNo?: string | null;
-  discountCondition?: string;
+  discountCondition?: string | null;
   retireDate?: Date | null;
   startDate?: Date | null;
   registrationNo?: string | null;
@@ -92,3 +96,13 @@ export type UserTypeStats = {
   DELEGATE: number;
   AGENCY: number;
 }
+
+export type UserOption = {
+  hqOpts: Option[]
+  brOpts: Option[]
+}
+
+export type Option = {
+  label: string;
+  value: string;
+}