diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
new file mode 100644
index 00000000..6f345419
--- /dev/null
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+import { dateFormat } from 'src/utils/datetime';
+
+const userStore = useUserStore();
+
+const userType = defineModel<string>('userType');
+const telephoneNo = defineModel<string>('telephoneNo');
+const gender = defineModel<string>('gender');
+const email = defineModel<string>('email');
+const registrationNo = defineModel<string | null>('registrationNo');
+const startDate = defineModel<Date | null>('startDate');
+const retireDate = defineModel<Date | null>('retireDate');
+const birthDate = defineModel<Date | null>('birthDate');
+const responsibleArea = defineModel<string>('responsibleArea');
+const discountCondition = defineModel<string | null | undefined>(
+  'discountCondition',
+);
+const sourceNationality = defineModel<string | null | undefined>(
+  'sourceNationality',
+);
+const importNationality = defineModel<string | null | undefined>(
+  'importNationality',
+);
+const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
+const checkPoint = defineModel<string>('checkPoint');
+const checkPointEN = defineModel<string>('checkPointEN');
+const idenDoc = defineModel<File>('idenDoc');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+</script>
+<template>
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    class="col-3"
+    label="เบอร์โทร"
+    v-model="telephoneNo"
+    mask="##########"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    label="เพศ"
+    class="col-3"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    v-model="gender"
+    :options="userStore.userOption.genderOpts"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    label="อีเมล"
+    class="col-6"
+    v-model="email"
+  />
+  <div
+    v-if="userType === 'USER' || userType === 'MESSENGER'"
+    class="row col-12 q-col-gutter-md"
+    style="margin-left: 0px; padding-left: 0px"
+  >
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
+      class="col-12"
+      v-model="registrationNo"
+    />
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="startDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันที่เริ่มงาน"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="startDate ? dateFormat(startDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="startDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="startDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="retireDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันที่พ้นสภาพพนักงาน"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="retireDate ? dateFormat(retireDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="retireDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="retireDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="birthDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันเดือนปีเกิด"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="birthDate ? dateFormat(birthDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="birthDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="birthDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="อายุ"
+      class="col-3"
+      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
+    />
+    <q-select
+      v-if="userType === 'MESSENGER'"
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
+      class="col-12"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="responsibleArea"
+      :options="userStore.userOption.responsibleAreaOpts"
+    />
+  </div>
+  <div v-if="userType === 'DELEGATE'" class="row col-12" style="row-gap: 16px">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
+      class="col-12"
+      v-model="discountCondition"
+      type="textarea"
+    />
+  </div>
+  <div
+    v-if="userType === 'AGENCY'"
+    class="row col-12 q-col-gutter-md"
+    style="margin-left: 0px; padding-left: 0px"
+  >
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="สัญชาติต้นทาง"
+      class="col-3"
+      bg-color="white"
+      option-label="label"
+      option-value="label"
+      v-model="sourceNationality"
+      :options="userStore.userOption.nationalityOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="นำเข้าสัญชาติ"
+      class="col-3"
+      option-label="label"
+      option-value="label"
+      v-model="importNationality"
+      :options="userStore.userOption.nationalityOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="สถานที่อบรม"
+      class="col-6"
+      option-label="label"
+      option-value="label"
+      v-model="trainingPlace"
+      :options="userStore.userOption.trainingPlaceOpts"
+    />
+    <q-input dense outlined label="ด่าน" class="col-6" v-model="checkPoint" />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="ด่าน ENG"
+      class="col-6"
+      v-model="checkPointEN"
+    />
+    <q-file
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="แบบเอกสารประจำตัว"
+      class="col-12"
+      v-model="idenDoc"
+      type="textarea"
+    />
+  </div>
+</template>
diff --git a/src/components/02_personnel-management/FormName.vue b/src/components/02_personnel-management/FormName.vue
new file mode 100644
index 00000000..e719f524
--- /dev/null
+++ b/src/components/02_personnel-management/FormName.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const firstName = defineModel<string>('firstName');
+const lastName = defineModel<string>('lastName');
+const firstNameEN = defineModel<string>('firstNameEN');
+const lastNameEN = defineModel<string>('lastNameEN');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+</script>
+<template>
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="ชื่อ ภาษาไทย"
+    v-model="firstName"
+    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="นามสกุล ภาษาไทย"
+    v-model="lastName"
+    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="ชื่อ ภาษาอังกฤษ"
+    v-model="firstNameEN"
+    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="นามสกุล ภาษาอังกฤษ"
+    v-model="lastNameEN"
+    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+  />
+</template>
diff --git a/src/components/02_personnel-management/FormTop.vue b/src/components/02_personnel-management/FormTop.vue
new file mode 100644
index 00000000..da50bd8b
--- /dev/null
+++ b/src/components/02_personnel-management/FormTop.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const userStore = useUserStore();
+
+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 userCode = defineModel<string>('userCode');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userStore.userOption.brOpts = [];
+  await userStore.fetchBrOption(id);
+}
+</script>
+<template>
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-6"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    label="รหัสสำนักงานใหญ่"
+    v-model="hqId"
+    :options="userStore.userOption.hqOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+    @update:model-value="(val: string) => selectHq(val)"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-6"
+    label="รหัสสาขา"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    v-model="brId"
+    :options="userStore.userOption.brOpts"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    option-value="value"
+    option-label="label"
+    label="ประเภทผู้ใช้งาน"
+    v-model="userType"
+    :options="userStore.userOption.userTypeOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    label="สิทธิ์ผู้ใช้งาน"
+    option-label="label"
+    option-value="value"
+    v-model="userRole"
+    :options="userStore.userOption.roleOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+  />
+  <q-input
+    v-if="userName"
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    label="ชื่อผู้ใช้งาน (Username)"
+    v-model="userName"
+    :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    readonly
+    hide-bottom-space
+    :class="userName ? 'col-3' : 'col-6'"
+    bg-color="white"
+    label="รหัสพนักงาน"
+    v-model="userCode"
+  />
+</template>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index d3d3ca38..85ae9fdc 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 
 import { Province, District, SubDistrict } from 'stores/address';
@@ -22,9 +22,9 @@ const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
 const addressEN = defineModel('addressEN', { default: '' });
-const provinceId = defineModel<string>('provinceId');
-const districtId = defineModel<string>('districtId');
-const subDistrictId = defineModel<string>('subDistrictId');
+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 addrOptions = ref<{
@@ -88,7 +88,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-dialog full-width v-model="modal">
+  <q-dialog full-width v-model="modal" @hide="close">
     <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index d590e29e..80261e3b 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -109,12 +109,14 @@ const status = ref(false);
                       dense
                       color="primary"
                       size="xs"
-                      v-model="status"
+                      :model-value="!v.disabled"
                       val="xs"
                       padding="none"
                     />
                   </q-item-section>
-                  <q-item-section class="text-caption">ปิดสถานะ</q-item-section>
+                  <q-item-section class="text-caption">
+                    {{ v.disabled ? 'เปิดสถานะ' : 'ปิดสถานะ' }}
+                  </q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
diff --git a/src/css/app.scss b/src/css/app.scss
index 18c9a709..126a7c4d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -28,7 +28,8 @@ html {
 
   --shadow-color: 220 3% 15%;
   --shadow-strength: 5%;
-  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067);
+  --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff,
+    inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067);
 
   color: var(--foreground);
   background-color: var(--background);
@@ -49,7 +50,8 @@ html {
 
   --shadow-color: 220 0% 100%;
   --shadow-strength: 25%;
-  --inner-shadow-highlight: inset 0 -.5px 0 0 hsla(0, 0%, 100%, .067), inset 0 .5px 0 0 rgba(0, 0, 0, .467);
+  --inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067),
+    inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467);
 }
 
 ::-webkit-scrollbar {
@@ -111,7 +113,7 @@ html {
 }
 
 .app-text-muted {
-  color: hsl(var(--text-mute))
+  color: hsl(var(--text-mute));
 }
 
 .app-text-info {
diff --git a/src/i18n/en-US/personnel-main-page.ts b/src/i18n/en-US/personnel-main-page.ts
index 449c5947..c329c60d 100644
--- a/src/i18n/en-US/personnel-main-page.ts
+++ b/src/i18n/en-US/personnel-main-page.ts
@@ -4,10 +4,10 @@ export default {
   personnelTooltipCaption: 'Click + to add a personnel',
   personnelAdd: 'Add personnel',
 
-  personnelSelector1: 'Employee',
-  personnelSelector2: 'Courier',
-  personnelSelector3: 'Agent',
-  personnelSelector4: 'Agency',
+  USER: 'Employee',
+  MESSENGER: 'Courier',
+  DELEGATE: 'Delegate',
+  AGENCY: 'Agency',
 
   personnelStatTitle: 'Summary data of '
 };
diff --git a/src/i18n/th-th/personnel-main-page.ts b/src/i18n/th-th/personnel-main-page.ts
index 246be1ea..8bf9fe41 100644
--- a/src/i18n/th-th/personnel-main-page.ts
+++ b/src/i18n/th-th/personnel-main-page.ts
@@ -4,10 +4,10 @@ export default {
   personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
   personnelAdd: 'เพิ่มข้อมูลบุคลากร',
 
-  personnelSelector1: 'พนักงาน',
-  personnelSelector2: 'พนักงานส่งเอกสาร',
-  personnelSelector3: 'ตัวแทน',
-  personnelSelector4: 'เอเจนซี่',
+  USER: 'พนักงาน',
+  MESSENGER: 'พนักงานส่งเอกสาร',
+  DELEGATE: 'ตัวแทน',
+  AGENCY: 'เอเจนซี่',
 
   personnelStatTitle: 'สรุปจำนวนข้อมูล',
 };
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 71ef3cdd..ddd0144c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -17,7 +17,9 @@ import SelectorList from 'components/SelectorList.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
-import { dateFormat } from 'src/utils/datetime';
+import FormTop from 'src/components/02_personnel-management/FormTop.vue';
+import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -52,7 +54,7 @@ const defaultFormData = {
   userType: '',
   keycloakId: '',
   profileImage: null,
-  birthDate: '',
+  birthDate: null,
   responsibleArea: '',
 };
 
@@ -66,7 +68,6 @@ 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>();
@@ -112,10 +113,10 @@ inputFile.addEventListener('change', (e) => {
 });
 
 const selectorList = [
-  { label: 'personnelSelector1', count: 0 },
-  { label: 'personnelSelector2', count: 0 },
-  { label: 'personnelSelector3', count: 0 },
-  { label: 'personnelSelector4', count: 0 },
+  { label: 'USER', count: 0 },
+  { label: 'MESSENGER', count: 0 },
+  { label: 'DELEGATE', count: 0 },
+  { label: 'AGENCY', count: 0 },
 ];
 
 async function createKeycloak() {
@@ -128,43 +129,17 @@ async function createKeycloak() {
   return res.data;
 }
 
-async function fetchHqOption() {
-  if (userStore.userOption.hqOpts.length === 0) {
-    const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
-    if (res) {
-      res.result.map((item) => {
-        userStore.userOption.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) {
-    res.branch.map((item) => {
-      userStore.userOption.brOpts.push({
-        label: item.code,
-        value: item.id,
-      });
-    });
-  }
-}
-
 async function openDialog(idEdit?: string) {
   modal.value = true;
-  age.value = '';
-  if (userStore.userOption.hqOpts.length === 0) {
-    await fetchHqOption();
-  }
-  if (userStore.userOption.roleOpts.length === 0) {
-    await userStore.fetchRoleOption();
-  }
+  userStore.userOption.brOpts = [];
+
+  userStore.userOption.hqOpts.length === 0
+    ? await userStore.fetchHqOption()
+    : '';
+  userStore.userOption.roleOpts.length === 0
+    ? await userStore.fetchRoleOption()
+    : '';
+
   if (idEdit && userData.value) {
     const foundUser = userData.value.result.find((user) => user.id === idEdit);
 
@@ -209,15 +184,16 @@ async function openDialog(idEdit?: string) {
           (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
       };
 
+      foundUser.status === 'ACTIVE'
+        ? (status.value = true)
+        : (status.value = false);
       userId.value = foundUser.id;
       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;
-      if (userStore.userOption.brOpts.length === 0) {
-        await fetchBrOption(hqId.value);
-      }
+      await userStore.fetchBrOption(hqId.value);
       await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
       await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
@@ -225,17 +201,17 @@ async function openDialog(idEdit?: string) {
 }
 
 function onClose() {
-  modal.value = false;
-  age.value = '';
-  isEdit.value = false;
+  code.value = '';
   hqId.value = '';
   brId.value = '';
-  username.value = '';
   userId.value = '';
-  code.value = '';
+  username.value = '';
   urlProfile.value = '';
-  Object.assign(formData.value, defaultFormData);
+  modal.value = false;
+  status.value = false;
+  isEdit.value = false;
   mapUserType(selectorLabel.value);
+  Object.assign(formData.value, defaultFormData);
 }
 
 async function onSubmit() {
@@ -251,7 +227,6 @@ async function onSubmit() {
       action: async () => {
         const formDataEdit = { ...formData.value };
         delete formDataEdit.keycloakId;
-        // delete formDataEdit.profileImage;
         await userStore.editById(userId.value, formDataEdit);
         onClose();
         userStore.fetchList({ includeBranch: true });
@@ -311,30 +286,11 @@ function mapUserType(label: string) {
   }
 }
 
-function calculateAge(birthDate: Date | null): string {
-  if (!birthDate) return '';
-  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} ปี`;
-  return `${years} ปี`;
-}
-
-async function selectHq(id: string) {
-  if (!id) return;
-  brId.value = '';
-  userStore.userOption.brOpts = [];
-  await fetchBrOption(id);
-}
-
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
+  userStore.userOption.roleOpts.length === 0
+    ? await userStore.fetchRoleOption()
+    : '';
   typeStats.value = await userStore.typeStats();
   const res = await branchStore.userStats(formData.value.userType);
   if (res) {
@@ -352,17 +308,6 @@ watch(
     }
   },
 );
-
-watch(
-  () => formData.value.birthDate,
-  (birthDate) => {
-    if (birthDate) {
-      calculateAge(birthDate);
-    } else {
-      age.value = '';
-    }
-  },
-);
 </script>
 
 <template>
@@ -425,10 +370,20 @@ watch(
             male: v.gender === 'male',
             female: v.gender === 'female',
             detail: [
-              { label: 'ตำแหน่ง', value: v.userType },
+              { label: 'ประเภท', value: $t(v.userType) },
+              {
+                label: 'ตำแหน่ง',
+                value: v.userRole
+                  ? userStore.userOption.roleOpts.find(
+                      (r) => r.value === v.userRole,
+                    )?.label || ''
+                  : '',
+              },
               { label: 'โทรศัพท์', value: v.telephoneNo },
-              { label: 'อีเมล', value: v.email },
-              { label: 'อายุ', value: calculateAge(v.birthDate as Date) },
+              {
+                label: 'อายุ',
+                value: userStore.calculateAge(v.birthDate as Date),
+              },
             ],
             badge: v.code,
             disabled: v.status === 'INACTIVE',
@@ -469,9 +424,9 @@ watch(
     v-model:modal="modal"
     v-model:address="formData.address"
     v-model:addressEN="formData.addressEN"
-    v-model:provinceId="formData.provinceId as string"
-    v-model:districtId="formData.districtId as string"
-    v-model:subDistrictId="formData.subDistrictId as string"
+    v-model:provinceId="formData.provinceId"
+    v-model:districtId="formData.districtId"
+    v-model:subDistrictId="formData.subDistrictId"
     v-model:zipCode="formData.zipCode"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
@@ -480,93 +435,16 @@ watch(
     :close="() => onClose()"
   >
     <template #top>
-      <q-select
+      <FormTop
         dense
         outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-6"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        label="รหัสสำนักงานใหญ่"
-        v-model="hqId"
-        :options="userStore.userOption.hqOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
-        @update:model-value="(val: string) => selectHq(val)"
+        v-model:hqId="hqId"
+        v-model:brId="brId"
+        v-model:userType="formData.userType"
+        v-model:userRole="formData.userRole"
+        v-model:userName="username"
+        v-model:userCode="code"
       />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-6"
-        label="รหัสสาขา"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        v-model="brId"
-        :options="userStore.userOption.brOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
-      />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        option-value="value"
-        option-label="label"
-        label="ประเภทผู้ใช้งาน"
-        v-model="formData.userType"
-        :options="userStore.userOption.userTypeOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
-      />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="สิทธิ์ผู้ใช้งาน"
-        option-label="label"
-        option-value="value"
-        v-model="formData.userRole"
-        :options="userStore.userOption.roleOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="ชื่อผู้ใช้งาน (Username)"
-        v-model="username"
-        :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
-      />
-      <q-input
-        dense
-        outlined
-        readonly
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="รหัสพนักงาน"
-        v-model="code"
-      />
-      <!--         :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
- -->
     </template>
 
     <template #prepend>
@@ -621,301 +499,34 @@ watch(
     </template>
 
     <template #midTop>
-      <q-input
+      <FormName
         dense
         outlined
-        hide-bottom-space
-        class="col-3"
-        label="ชื่อ ภาษาไทย"
-        v-model="formData.firstName"
-        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="นามสกุล ภาษาไทย"
-        v-model="formData.lastName"
-        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="ชื่อ ภาษาอังกฤษ"
-        v-model="formData.firstNameEN"
-        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="นามสกุล ภาษาอังกฤษ"
-        v-model="formData.lastNameEN"
-        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+        v-model:firstName="formData.firstName"
+        v-model:lastName="formData.lastName"
+        v-model:firstNameEN="formData.firstNameEN"
+        v-model:lastNameEN="formData.lastNameEN"
       />
     </template>
 
-    <template #midBottom>
-      <q-input
+    <template #midBottom v-if="formData.userType">
+      <FormByType
         dense
         outlined
-        class="col-3"
-        label="เบอร์โทร"
-        v-model="formData.telephoneNo"
-        mask="##########"
+        v-model:userType="formData.userType"
+        v-model:telephoneNo="formData.telephoneNo"
+        v-model:gender="formData.gender"
+        v-model:email="formData.email"
+        v-model:registrationNo="formData.registrationNo"
+        v-model:startDate="formData.startDate"
+        v-model:retireDate="formData.retireDate"
+        v-model:birthDate="formData.birthDate"
+        v-model:responsibleArea="formData.responsibleArea"
+        v-model:discountCondition="formData.discountCondition"
+        v-model:sourceNationality="formData.sourceNationality"
+        v-model:importNationality="formData.importNationality"
+        v-model:trainingPlace="formData.trainingPlace"
       />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        label="เพศ"
-        class="col-3"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        v-model="formData.gender"
-        :options="userStore.userOption.genderOpts"
-      />
-      <q-input
-        dense
-        outlined
-        label="อีเมล"
-        class="col-6"
-        v-model="formData.email"
-      />
-      <div
-        v-if="formData.userType === 'USER' || formData.userType === 'MESSENGER'"
-        class="row col-12 q-col-gutter-md"
-        style="margin-left: 0px; padding-left: 0px"
-      >
-        <q-input
-          dense
-          outlined
-          label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
-          class="col-12"
-          v-model="formData.registrationNo"
-        />
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.startDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันที่เริ่มงาน"
-              :model-value="
-                formData.startDate ? dateFormat(formData.startDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.startDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.startDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.retireDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันที่พ้นสภาพพนักงาน"
-              :model-value="
-                formData.retireDate ? dateFormat(formData.retireDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.retireDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.retireDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.birthDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-3"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันเดือนปีเกิด"
-              :model-value="
-                formData.birthDate ? dateFormat(formData.birthDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.birthDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.birthDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-        <q-input
-          dense
-          outlined
-          readonly
-          label="อายุ"
-          class="col-3"
-          v-model="age"
-        />
-        <q-select
-          v-if="formData.userType === 'MESSENGER'"
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
-          class="col-12"
-          bg-color="white"
-          option-label="label"
-          option-value="value"
-          v-model="formData.responsibleArea"
-          :options="userStore.userOption.responsibleAreaOpts"
-        />
-      </div>
-      <div
-        v-if="formData.userType === 'DELEGATE'"
-        class="row col-12"
-        style="row-gap: 16px"
-      >
-        <q-input
-          dense
-          outlined
-          label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
-          class="col-12"
-          v-model="formData.discountCondition"
-          type="textarea"
-        />
-      </div>
-      <div
-        v-if="formData.userType === 'AGENCY'"
-        class="row col-12 q-col-gutter-md"
-        style="margin-left: 0px; padding-left: 0px"
-      >
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="สัญชาติต้นทาง"
-          class="col-3"
-          bg-color="white"
-          option-label="label"
-          option-value="label"
-          v-model="formData.sourceNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="นำเข้าสัญชาติ"
-          class="col-3"
-          option-label="label"
-          option-value="label"
-          v-model="formData.importNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="สถานที่อบรม"
-          class="col-6"
-          option-label="label"
-          option-value="label"
-          v-model="formData.trainingPlace"
-          :options="userStore.userOption.trainingPlaceOpts"
-        />
-        <q-input dense outlined label="ด่าน" class="col-6" />
-        <q-input dense outlined label="ด่าน ENG" class="col-6" />
-        <q-input
-          dense
-          outlined
-          label="แบบเอกสารประจำตัว"
-          class="col-12"
-          v-model="formData.discountCondition"
-          type="textarea"
-        />
-      </div>
     </template>
   </FormDialog>
 </template>
diff --git a/src/pages/02_personnel-management/person-info/MainPage.vue b/src/pages/02_personnel-management/person-info/MainPage.vue
index c59aedb2..8b777282 100644
--- a/src/pages/02_personnel-management/person-info/MainPage.vue
+++ b/src/pages/02_personnel-management/person-info/MainPage.vue
@@ -8,10 +8,14 @@ import useUserStore from 'stores/user';
 import useBranchStore from 'stores/branch';
 
 import { User } from 'stores/user/types';
-import { Branch, BranchWithChildren } from 'stores/branch/types';
+import { Branch } from 'stores/branch/types';
+import { dialog } from 'src/stores/utils';
 
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
+import FormTop from 'src/components/02_personnel-management/FormTop.vue';
+import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 import useAddressStore, {
   District,
   Province,
@@ -32,9 +36,8 @@ const currentUser = ref<User>();
 const currentUserBranch = ref<Branch[]>([]);
 const currentHQ = ref<string | null>();
 const currentBR = ref<string | null>();
-
-const hq = ref<Branch[]>([]);
-const br = ref<Branch[]>([]);
+const isEdit = ref(false);
+const formRef = ref();
 
 async function getCurrentUser() {
   if (typeof route.params.id !== 'string') return;
@@ -67,23 +70,6 @@ async function getUserBranch() {
   }
 }
 
-async function getHQ() {
-  const res = await branchStore.fetchList({
-    filter: 'head',
-    pageSize: 9999,
-  });
-  if (res) hq.value = res.result;
-}
-
-async function getBR() {
-  if (!currentHQ.value) return;
-
-  const res = await branchStore.fetchById<BranchWithChildren>(currentHQ.value, {
-    includeSubBranch: true,
-  });
-  if (res) br.value = res.branch;
-}
-
 const opts = reactive<{
   province: Province[];
   district: District[];
@@ -113,18 +99,55 @@ async function getSubDistrict() {
   if (result) opts.subDistrict = result;
 }
 
+function triggerEdit(id?: string) {
+  if (!id) return;
+  isEdit.value = true;
+  console.log('Edit!');
+}
+
+function onSubmit() {
+  dialog({
+    color: 'primary',
+    icon: 'mdi-pencil-outline',
+    title: 'ยืนยันการแก้ไขข้อมูล',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
+    action: async () => {
+      console.log('Submit!');
+    },
+  });
+}
+
+function onDelete(id?: string) {
+  if (!id) return;
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: 'ยืนยันการลบข้อมูล',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
+    action: async () => {
+      console.log('Delete!');
+    },
+  });
+}
+
 onMounted(async () => {
-  getCurrentUser();
-  getHQ();
-  getProvince();
+  await getCurrentUser();
+  await getUserBranch();
+  await userStore.fetchHqOption();
+  if (!currentHQ.value) return;
+  await userStore.fetchBrOption(currentHQ.value);
+  await getProvince();
+
   if (userStore.userOption.roleOpts.length === 0) {
     userStore.fetchRoleOption();
   }
 });
 
 watch(() => route.params.id, getCurrentUser);
-watch(currentUser, getUserBranch);
-watch(currentHQ, getBR);
 watch(() => currentUser.value?.provinceId, getDistrict);
 watch(() => currentUser.value?.districtId, getSubDistrict);
 </script>
@@ -149,339 +172,303 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
     class="q-pa-md info-bg"
     :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
   >
-    <div
-      class="info-container"
-      :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
+    <q-form
+      greedy
+      ref="formRef"
+      id="formId"
+      @submit.prevent
+      @validation-success="onSubmit"
     >
-      <div>
-        <PersonCard
-          :list="[
-            {
-              id: currentUser.id,
-              img: `${currentUser.profileImageUrl}`,
-              name:
-                $i18n.locale === 'en-US'
-                  ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-                  : `${currentUser.firstName} ${currentUser.lastName}`,
-              male: currentUser.gender === 'male',
-              female: currentUser.gender === 'female',
-              detail: [
-                { label: 'ตำแหน่ง', value: currentUser.userType },
-                { label: 'โทรศัพท์', value: currentUser.telephoneNo },
-                { label: 'อีเมล', value: currentUser.email },
-              ],
-              badge: currentUser.code,
-              disabled: currentUser.status === 'INACTIVE',
-            },
-          ]"
-          v-if="currentUser"
-          :grid-columns="1"
-          no-hover
-          no-action
-          style="box-shadow: var(--shadow-2)"
-        />
-        <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
-          <div class="col-6">
-            <q-btn class="btn-edt full-width" padding="8px 8px">
-              <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
-              <span class="text-caption">แก้ไขข้อมูล</span>
-            </q-btn>
-          </div>
-          <div class="col-6">
-            <q-btn class="btn-delete full-width" padding="8px 8px">
-              <q-icon
-                size="16px"
-                name="mdi-trash-can-outline"
-                class="q-pr-xs"
-              />
-              <span class="text-caption">ลบข้อมูล</span>
-            </q-btn>
-          </div>
-        </div>
-      </div>
-
-      <AppBox
-        class="surface-1"
-        rounded
-        bordered
-        v-if="currentUser"
-        style="box-shadow: var(--shadow-2); overflow-y: auto; max-height: 50vw"
+      <div
+        class="info-container"
+        :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
       >
-        <div class="row q-col-gutter-md">
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            class="col-6"
-            option-value="id"
-            option-label="code"
-            id="selectHQ"
-            v-model="currentHQ"
-            @update:model-value="currentBR = null"
-            :label="$t('branchHQLabel')"
-            :options="hq"
-          />
-          <q-select
-            v-model="currentBR"
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            class="col-6"
-            id="selectBR"
-            option-value="id"
-            option-label="code"
-            :label="$t('branchLabel')"
-            :options="br"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            options-dense
-            hide-bottom-space
-            readonly
-            hide-dropdown-icon
-            class="col-3"
-            option-value="value"
-            option-label="label"
-            :label="$t('userType')"
-            v-model="currentUser.userType"
-            :options="userStore.userOption.userTypeOpts"
-            :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            options-dense
-            hide-bottom-space
-            readonly
-            hide-dropdown-icon
-            class="col-3"
-            :label="$t('userRole')"
-            option-label="label"
-            option-value="value"
-            v-model="currentUser.userRole"
-            :options="userStore.userOption.roleOpts"
-            :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            :label="$t('userCode')"
-            class="col-6"
-            v-model="currentUser.code"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="ชื่อ ภาษาไทย"
-            v-model="currentUser.firstName"
-            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="นามสกุล ภาษาไทย"
-            v-model="currentUser.lastName"
-            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="ชื่อ ภาษาอังกฤษ"
-            v-model="currentUser.firstNameEN"
-            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="นามสกุล ภาษาอังกฤษ"
-            v-model="currentUser.lastNameEN"
-            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            label="เบอร์โทร"
-            class="col-6"
-            v-model="currentUser.zipCode"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            label="อีเมล"
-            class="col-6"
-            v-model="currentUser.zipCode"
+        <div>
+          <PersonCard
+            :list="[
+              {
+                id: currentUser.id,
+                img: `${currentUser.profileImageUrl}`,
+                name:
+                  $i18n.locale === 'en-US'
+                    ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+                    : `${currentUser.firstName} ${currentUser.lastName}`,
+                male: currentUser.gender === 'male',
+                female: currentUser.gender === 'female',
+                detail: [
+                  { label: 'ประเภท', value: $t(currentUser.userType) },
+                  {
+                    label: 'ตำแหน่ง',
+                    value: currentUser.userRole
+                      ? userStore.userOption.roleOpts.find(
+                          (r) => r.value === currentUser?.userRole,
+                        )?.label || ''
+                      : '',
+                  },
+                  { label: 'โทรศัพท์', value: currentUser.telephoneNo },
+                  {
+                    label: 'อายุ',
+                    value: userStore.calculateAge(
+                      currentUser.birthDate as Date,
+                    ),
+                  },
+                ],
+                badge: currentUser.code,
+                disabled: currentUser.status === 'INACTIVE',
+              },
+            ]"
+            v-if="currentUser"
+            :grid-columns="1"
+            no-hover
+            no-action
+            style="box-shadow: var(--shadow-2)"
           />
+          <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
+            <div class="col-6">
+              <q-btn
+                v-if="!isEdit"
+                dense
+                class="btn-edit full-width"
+                @click="triggerEdit(currentUser?.id)"
+              >
+                <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
+                <span>แก้ไขข้อมูล</span>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-edit full-width"
+                label="บันทึกข้อมูล"
+                type="submit"
+              />
+            </div>
 
-          <div class="col-12 group-label">{{ $t('address') }}</div>
-
-          <q-input
-            dense
-            borderless
-            readonly
-            id="address"
-            label="ที่อยู่"
-            class="col-12"
-            v-model="currentUser.addressEN"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            id="selectProvince"
-            v-model="currentUser.provinceId"
-            option-value="id"
-            option-label="name"
-            :label="$t('province')"
-            class="col-3"
-            @update:model-value="
-              (currentUser.districtId = null),
-                (currentUser.subDistrictId = null)
-            "
-            :options="opts.province"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            id="selectDistrict"
-            v-model="currentUser.districtId"
-            option-value="id"
-            option-label="name"
-            :label="$t('district')"
-            class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
-            :options="opts.district"
-          />
-          <q-select
-            dense
-            borderless
-            readonly
-            emit-value
-            map-options
-            hide-dropdown-icon
-            id="SelectSubDistrict"
-            v-model="currentUser.subDistrictId"
-            option-value="id"
-            option-label="name"
-            :label="$t('subDistrict')"
-            class="col-3"
-            :options="opts.subDistrict"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            :label="$t('zipCode')"
-            class="col-3"
-            v-model="currentUser.zipCode"
-          />
-
-          <div class="col-12 group-label">{{ $t('address') }} EN</div>
-
-          <q-input
-            dense
-            borderless
-            hide-dropdown-icon
-            readonly
-            id="addressEN"
-            label="ที่อยู่"
-            class="col-12"
-            v-model="currentUser.addressEN"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            hide-dropdown-icon
-            readonly
-            id="selectProvinceEN"
-            v-model="currentUser.provinceId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('province')"
-            class="col-3"
-            @update:model-value="
-              (currentUser.districtId = null),
-                (currentUser.subDistrictId = null)
-            "
-            :options="opts.province"
-          />
-          <q-select
-            dense
-            emit-value
-            map-options
-            borderless
-            readonly
-            hide-dropdown-icon
-            id="selectDistrictEN"
-            v-model="currentUser.districtId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('district')"
-            class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
-            :options="opts.district"
-          />
-          <q-select
-            dense
-            borderless
-            readonly
-            hide-dropdown-icon
-            emit-value
-            map-options
-            id="SelectSubDistrictEN"
-            v-model="currentUser.subDistrictId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('subDistrict')"
-            class="col-3"
-            :options="opts.subDistrict"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            zip="zipEN"
-            :label="$t('zipCode')"
-            class="col-3"
-            v-model="currentUser.zipCode"
-          />
+            <div class="col-6">
+              <q-btn
+                v-if="!isEdit"
+                dense
+                class="btn-delete full-width"
+                @click="onDelete(currentUser?.id)"
+              >
+                <q-icon
+                  size="16px"
+                  name="mdi-trash-can-outline"
+                  class="q-pr-xs"
+                />
+                <span>ลบข้อมูล</span>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-delete full-width"
+                label="ยกเลิก"
+                type="reset"
+                @click="isEdit = false"
+              />
+            </div>
+          </div>
         </div>
-      </AppBox>
-    </div>
+
+        <AppBox
+          class="surface-1"
+          rounded
+          bordered
+          v-if="currentUser"
+          style="
+            box-shadow: var(--shadow-2);
+            overflow-y: auto;
+            max-height: 50vw;
+          "
+        >
+          <div class="row q-col-gutter-md">
+            <FormTop
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:hqId="currentHQ"
+              v-model:brId="currentBR"
+              v-model:userType="currentUser.userType"
+              v-model:userRole="currentUser.userRole"
+              v-model:userCode="currentUser.code"
+            />
+            <FormName
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:firstName="currentUser.firstName"
+              v-model:lastName="currentUser.lastName"
+              v-model:firstNameEN="currentUser.firstNameEN"
+              v-model:lastNameEN="currentUser.lastNameEN"
+            />
+            <div class="col-12 group-label">{{ $t('address') }}</div>
+
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              id="address"
+              label="ที่อยู่"
+              class="col-12"
+              v-model="currentUser.address"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectProvince"
+              v-model="currentUser.provinceId"
+              option-value="id"
+              option-label="name"
+              :label="$t('province')"
+              class="col-3"
+              @update:model-value="
+                currentUser
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
+              "
+              :options="opts.province"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectDistrict"
+              v-model="currentUser.districtId"
+              option-value="id"
+              option-label="name"
+              :label="$t('district')"
+              class="col-3"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
+              :options="opts.district"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="SelectSubDistrict"
+              v-model="currentUser.subDistrictId"
+              option-value="id"
+              option-label="name"
+              :label="$t('subDistrict')"
+              class="col-3"
+              :options="opts.subDistrict"
+            />
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              :label="$t('zipCode')"
+              class="col-3"
+              v-model="currentUser.zipCode"
+            />
+
+            <div class="col-12 group-label">{{ $t('address') }} EN</div>
+
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              hide-dropdown-icon
+              id="addressEN"
+              label="ที่อยู่"
+              class="col-12"
+              v-model="currentUser.addressEN"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectProvinceEN"
+              v-model="currentUser.provinceId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('province')"
+              class="col-3"
+              @update:model-value="
+                currentUser
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
+              "
+              :options="opts.province"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectDistrictEN"
+              v-model="currentUser.districtId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('district')"
+              class="col-3"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
+              :options="opts.district"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              hide-dropdown-icon
+              emit-value
+              map-options
+              id="SelectSubDistrictEN"
+              v-model="currentUser.subDistrictId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('subDistrict')"
+              class="col-3"
+              :options="opts.subDistrict"
+            />
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              zip="zipEN"
+              :label="$t('zipCode')"
+              class="col-3"
+              v-model="currentUser.zipCode"
+            />
+            <FormByType
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:userType="currentUser.userType"
+              v-model:telephoneNo="currentUser.telephoneNo"
+              v-model:gender="currentUser.gender"
+              v-model:email="currentUser.email"
+              v-model:registrationNo="currentUser.registrationNo"
+              v-model:startDate="currentUser.startDate"
+              v-model:retireDate="currentUser.retireDate"
+              v-model:birthDate="currentUser.birthDate"
+              v-model:responsibleArea="currentUser.responsibleArea"
+              v-model:discountCondition="currentUser.discountCondition"
+              v-model:sourceNationality="currentUser.sourceNationality"
+              v-model:importNationality="currentUser.importNationality"
+              v-model:trainingPlace="currentUser.trainingPlace"
+            />
+          </div>
+        </AppBox>
+      </div>
+    </q-form>
   </div>
 </template>
 
@@ -512,7 +499,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
   background-size: cover;
 }
 
-.btn-edt {
+.btn-edit {
   color: white;
   background-color: hsl(var(--info-bg));
   border-radius: var(--radius-2);
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index f47e3f1c..2338671e 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -12,8 +12,11 @@ import {
   UserOption,
 } from './types';
 import axios from 'axios';
+import useBranchStore from '../branch';
 import { Branch } from '../branch/types';
 
+const branchStore = useBranchStore()
+
 const useUserStore = defineStore('api-user', () => {
   const userOption = ref<UserOption>({
     hqOpts: [],
@@ -56,8 +59,50 @@ const useUserStore = defineStore('api-user', () => {
       { label: 'สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุร' },
     ],
   });
+
   const data = ref<Pagination<User[]>>();
 
+  function calculateAge(birthDate: Date | null): string {
+    if (!birthDate) return '';
+    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 result = `${years} ปี`
+    return result;
+  }
+
+  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) {
+      res.branch.map((item) => {
+        userOption.value.brOpts.push({
+          label: item.code,
+          value: item.id,
+        });
+      });
+    }
+  }
+
   async function fetchRoleOption() {
     const res = await api.get<RoleData[]>('/keycloak/role');
     res.data.map((item) => {
@@ -429,6 +474,10 @@ const useUserStore = defineStore('api-user', () => {
   return {
     data,
     userOption,
+    calculateAge,
+
+    fetchHqOption,
+    fetchBrOption,
     fetchRoleOption,
 
     fetchList,
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index c0a8bb5d..19f3381a 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -14,15 +14,15 @@ export type User = {
   trainingPlace: string | null;
   importNationality: string | null;
   sourceNationality: string | null;
-  licenseExpireDate: string | null;
-  licenseIssueDate: string | null;
+  licenseExpireDate: Date | null;
+  licenseIssueDate: Date | null;
   licenseNo: string | null;
   discountCondition: string | null;
   gender: string;
   userRole: string;
   userType: string;
-  retireDate: string | null;
-  startDate: string | null;
+  retireDate: Date | null;
+  startDate: Date | null;
   registrationNo: string | null;
   telephoneNo: string;
   email: string;