diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 939837f4..d9b21845 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -4,6 +4,7 @@ import { api } from 'src/boot/axios';
 import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
+import { dialog } from 'src/stores/utils';
 
 import {
   UserCreate,
@@ -54,7 +55,7 @@ const defaultFormData = {
   userType: '',
   keycloakId: '',
   profileImage: null,
-  birthDate: null,
+  birthDate: '',
   responsibleArea: '',
 };
 
@@ -189,12 +190,35 @@ async function openDialog(id?: string) {
   await fetchHqOption();
   await fetchRoleOption();
   modal.value = true;
+  age.value = '';
   if (id && userData.value) {
     const foundUser = userData.value.result.find((user) => user.id === id);
 
     if (foundUser) {
       formData.value = {
-        ...foundUser,
+        provinceId: foundUser.provinceId,
+        districtId: foundUser.districtId,
+        subDistrictId: foundUser.subDistrictId,
+        telephoneNo: foundUser.telephoneNo,
+        email: foundUser.email,
+        zipCode: foundUser.zipCode,
+        gender: foundUser.gender,
+        addressEN: foundUser.addressEN,
+        address: foundUser.address,
+        trainingPlace: foundUser.trainingPlace,
+        importNationality: foundUser.importNationality,
+        sourceNationality: foundUser.sourceNationality,
+        licenseNo: foundUser.licenseNo,
+        discountCondition: foundUser.discountCondition,
+        registrationNo: foundUser.registrationNo,
+        lastNameEN: foundUser.lastNameEN,
+        lastName: foundUser.lastName,
+        firstNameEN: foundUser.firstNameEN,
+        firstName: foundUser.firstName,
+        userRole: foundUser.userRole,
+        userType: foundUser.userType,
+        keycloakId: foundUser.keycloakId,
+        responsibleArea: foundUser.responsibleArea,
         licenseExpireDate:
           (foundUser.licenseExpireDate &&
             new Date(foundUser.licenseExpireDate)) ||
@@ -226,8 +250,7 @@ async function openDialog(id?: string) {
 
 function onClose() {
   modal.value = false;
-  Object.assign(formData.value, defaultFormData);
-  mapUserType(selectorLabel.value);
+  age.value = '';
   isEdit.value = false;
   hqId.value = '';
   brId.value = '';
@@ -235,30 +258,65 @@ function onClose() {
   userId.value = '';
   code.value = '';
   urlProfile.value = '';
+  Object.assign(formData.value, defaultFormData);
+  mapUserType(selectorLabel.value);
 }
 
 async function onSubmit() {
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
-    const formDataEdit = { ...formData.value };
-    delete formDataEdit.keycloakId;
-    await userStore.editById(userId.value, formDataEdit);
+    dialog({
+      color: 'primary',
+      icon: 'mdi-pencil-outline',
+      title: 'ยืนยันการแก้ไขข้อมูล',
+      actionText: 'ตกลง',
+      persistent: true,
+      message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
+      action: async () => {
+        const formDataEdit = { ...formData.value };
+        delete formDataEdit.keycloakId;
+        delete formDataEdit.profileImage;
+        await userStore.editById(userId.value, formDataEdit);
+        onClose();
+        userStore.fetchList({ includeBranch: true });
+      },
+    });
   } else {
-    formData.value.keycloakId = await createKeycloak();
-    if (formData.value.keycloakId) {
-      const result = await userStore.create(formData.value);
-      if (result) {
-        await branchStore.addUser(brId.value, result.id);
-      }
-    }
+    dialog({
+      color: 'primary',
+      icon: 'mdi-account',
+      title: 'ยืนยันการเพิ่มบุคลากร',
+      actionText: 'ตกลง',
+      persistent: true,
+      message: 'คุณต้องการเพิ่มบุคลากร ใช่หรือไม่',
+      action: async () => {
+        formData.value.keycloakId = await createKeycloak();
+        if (formData.value.keycloakId) {
+          const result = await userStore.create(formData.value);
+          if (result) {
+            await branchStore.addUser(brId.value, result.id);
+          }
+        }
+        onClose();
+        userStore.fetchList({ includeBranch: true });
+      },
+    });
   }
-  onClose();
-  userStore.fetchList();
 }
 
 async function onDelete(id: string) {
-  await userStore.deleteById(id);
-  await userStore.fetchList();
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: 'ยืนยันการลบข้อมูล',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
+    action: async () => {
+      await userStore.deleteById(id);
+      await userStore.fetchList({ includeBranch: true });
+    },
+  });
 }
 
 function mapUserType(label: string) {
@@ -273,8 +331,8 @@ function mapUserType(label: string) {
   }
 }
 
-function calculateAge(birthDate: Date | null) {
-  if (!birthDate) return null;
+function calculateAge(birthDate: Date | null): string {
+  if (!birthDate) return '';
   const birthDateTimeStamp = new Date(birthDate).getTime();
   const now = new Date();
   const diff = now.getTime() - birthDateTimeStamp;
@@ -284,7 +342,8 @@ function calculateAge(birthDate: Date | null) {
   const months = ageDate.getUTCMonth();
   const days = ageDate.getUTCDate() - 1;
 
-  age.value = `${years} ปี ${months} เดือน ${days} วัน`;
+  age.value = `${years} ปี`;
+  return `${years} ปี`;
 }
 
 async function selectHq(id: string) {
@@ -319,6 +378,8 @@ watch(
   (birthDate) => {
     if (birthDate) {
       calculateAge(birthDate);
+    } else {
+      age.value = '';
     }
   },
 );
@@ -383,6 +444,7 @@ watch(
               { label: 'ตำแหน่ง', value: v.userType },
               { label: 'โทรศัพท์', value: v.telephoneNo },
               { label: 'อีเมล', value: v.email },
+              { label: 'อายุ', value: calculateAge(v.birthDate as Date) },
             ],
             badge: v.code,
             disabled: v.status === 'INACTIVE',
@@ -492,8 +554,8 @@ watch(
         option-value="value"
         v-model="formData.userRole"
         :options="userOption.roleOpts"
+        :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
       />
-      <!--         :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
       <q-input
         dense
         outlined
@@ -609,6 +671,7 @@ watch(
         class="col-3"
         label="เบอร์โทร"
         v-model="formData.telephoneNo"
+        mask="##########"
       />
       <q-select
         dense