diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 9bbce4a1..04521b92 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -23,7 +23,6 @@ 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 | null | undefined>('zipCode');
-const isOpen = defineModel<boolean>('isOpen', { default: false });
 
 const addrOptions = reactive<{
   provinceOps: Province[];
@@ -66,9 +65,10 @@ async function selectSubDistrict(id: string) {
 
 onMounted(async () => {
   await fetchProvince();
+  await fetchDistrict();
+  await fetchSubDistrict();
 });
 
-watch(isOpen, fetchDistrict);
 watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 </script>
@@ -149,11 +149,7 @@ watch(districtId, fetchSubDistrict);
         emit-value
         map-options
         id="select-sub-district"
-        :model-value="
-          addrOptions.subDistrictOps.length === 1
-            ? (subDistrictId = addrOptions.subDistrictOps[0].id)
-            : ''
-        "
+        v-model="subDistrictId"
         option-value="id"
         option-label="name"
         :label="$t('subDistrict')"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 675adb4b..7c2bc5a1 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -140,7 +140,7 @@ defineProps<{
         label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
         class="col-12"
         option-label="label"
-        option-value="value"
+        option-value="label"
         v-model="responsibleArea"
         :options="userStore.userOption.responsibleAreaOpts"
       />
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index dd46e92a..8517b04c 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import useUserStore from 'src/stores/user';
+import { watch } from 'vue';
 
 const userStore = useUserStore();
+const { userOption } = storeToRefs(userStore);
 
 const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
@@ -23,6 +26,9 @@ async function selectHq(id: string) {
   brId.value = '';
   userStore.userOption.brOpts = [];
   await userStore.fetchBrOption(id);
+  if (userStore.userOption.brOpts.length === 1) {
+    brId.value = userStore.userOption.brOpts[0].value;
+  }
 }
 </script>
 <template>
@@ -38,10 +44,10 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-6"
+      v-model="hqId"
       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)"
@@ -54,12 +60,13 @@ async function selectHq(id: string) {
       emit-value
       map-options
       options-dense
+      clearable
       hide-bottom-space
       class="col-6"
+      v-model="brId"
       label="รหัสสาขา"
       option-label="label"
       option-value="value"
-      v-model="brId"
       :options="userStore.userOption.brOpts"
     />
     <q-select
diff --git a/src/components/02_personnel-management/infoForm.vue b/src/components/02_personnel-management/infoForm.vue
new file mode 100644
index 00000000..117dfc92
--- /dev/null
+++ b/src/components/02_personnel-management/infoForm.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AppBox from '../app/AppBox.vue';
+import FormAddress from './FormAddress.vue';
+
+defineProps<{
+  addressTitle?: string;
+  addressTitleEN?: string;
+}>();
+
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const zipCode = defineModel<string>('zipCode', { default: '' });
+</script>
+<template>
+  <div class="row items-stretch" style="position: absolute; inset: 0">
+    <div class="col-3">
+      <slot name="person-card"></slot>
+    </div>
+    <div class="col-9" style="position: relative">
+      <AppBox
+        bordered
+        class="q-my-md q-mr-md"
+        style="position: absolute; overflow-y: auto; inset: 0"
+      >
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address">
+            <FormAddress
+              dense
+              outlined
+              separator
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
+      </AppBox>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
new file mode 100644
index 00000000..6f8f3729
--- /dev/null
+++ b/src/components/DrawerInfo.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  editData?: (...args: unknown[]) => void;
+  deleteData?: (...args: unknown[]) => void;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
+}>();
+
+const drawerOpen = defineModel<boolean>('drawerOpen', {
+  default: false,
+});
+</script>
+<template>
+  <q-drawer
+    @hide="close"
+    :width="1100"
+    :breakpoint="500"
+    v-model="drawerOpen"
+    behavior="mobile"
+    side="right"
+    show-if-above
+  >
+    <AppBox
+      class="column justify-between full-height"
+      style="padding: 0; border-radius: var(--radius-2)"
+    >
+      <div class="form-header col q-px-lg row items-center">
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-pencil-outline"
+          padding="xs"
+          class="q-mr-md"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: var(--brand-1)"
+          @click="editData"
+        />
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-trash-can-outline"
+          padding="xs"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: hsl(var(--negative-bg))"
+          @click="deleteData"
+        />
+
+        <div class="col text-subtitle1 text-weight-bold text-center">
+          {{ title }}
+        </div>
+
+        <div style="width: 31.98px"></div>
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-close"
+          padding="xs"
+          class="close-btn"
+          :class="{ dark: $q.dark.isActive }"
+          @click="close"
+        />
+      </div>
+
+      <div
+        class="col-10 form-body"
+        style="position: relative"
+        :class="{ dark: $q.dark.isActive }"
+        :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+      >
+        <slot name="info"></slot>
+      </div>
+
+      <div
+        class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+      >
+        <q-btn
+          dense
+          outline
+          unelevated
+          id="cancelBtn"
+          class="q-px-md app-text-negative"
+          :label="$t('cancel')"
+          @click="close"
+        />
+        <q-btn
+          dense
+          unelevated
+          id="submitBtn"
+          type="submit"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+        />
+      </div>
+    </AppBox>
+  </q-drawer>
+</template>
+
+<style scoped lang="scss">
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+
+.form-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.form-body {
+  --_body-bg: var(--sand-0);
+  background-color: var(--_body-bg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  &.dark {
+    --_body-bg: var(--gray-10);
+  }
+}
+
+.form-footer {
+  border-top: 1px solid var(--border-color);
+}
+</style>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 2472e98e..d341bd68 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -21,7 +21,7 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
 </script>
 <template>
-  <q-dialog full-width v-model="modal" @hide="close">
+  <q-dialog v-model="modal" @hide="close">
     <AppBox
       style="
         padding: 0;
@@ -86,7 +86,6 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                   outlined
                   :title="titleFormAddress"
                   :separator="addressSeparator"
-                  v-model:isOpen="modal"
                   v-model:address="address"
                   v-model:addressEN="addressEN"
                   v-model:provinceId="provinceId"
diff --git a/src/components/SelectorList.vue b/src/components/SelectorList.vue
index 7fb48291..20ef6823 100644
--- a/src/components/SelectorList.vue
+++ b/src/components/SelectorList.vue
@@ -16,7 +16,8 @@ defineProps<{
       <q-item
         v-for="v in list"
         :key="v.label"
-        clickable
+        :class="v.count === 0 ? 'disable-item' : ''"
+        :clickable="v.count > 0"
         :active="selector === v.label"
         :active-class="
           selector === v.label
@@ -27,8 +28,12 @@ defineProps<{
         "
         @click="selector = v.label"
       >
-        <q-item-section>{{ $t(v.label) }}</q-item-section>
-        <div class="dot text-weight-bold">{{ v.count }}</div>
+        <div class="row full-width justify-between">
+          <div>
+            {{ $t(v.label) }}
+          </div>
+          <div class="dot text-weight-bold">{{ v.count }}</div>
+        </div>
       </q-item>
     </q-list>
   </AppBox>
@@ -41,8 +46,9 @@ defineProps<{
   border-radius: var(--radius-3);
 
   .dot {
-    color: var(--blue-6);
-    background-color: white;
+    background-color: hsla(var(--info-bg));
+    border: 1px solid hsl(var(--info-bg));
+    color: white;
   }
 
   &.dark {
@@ -54,15 +60,28 @@ defineProps<{
 .q-item {
   align-items: center;
   border-radius: var(--radius-3);
-  color: hsl(var(--stone-4-hsl));
   border: 1px solid transparent;
+  padding: 6px 16px;
+  min-height: 0;
+  margin-bottom: 8px;
+}
+
+.disable-item {
+  color: hsl(var(--text-mute));
+
+  .dot {
+    color: hsl(var(--text-mute));
+    border: 1px solid transparent;
+    background-color: hsla(var(--text-mute) / 0.1);
+  }
 }
 
 .dot {
   height: 25px;
   width: 25px;
-  background-color: hsl(var(--stone-4-hsl));
-  color: white;
+  background-color: hsla(var(--info-bg) / 0.1);
+  border: 1px solid transparent;
+  color: hsl(var(--info-bg));
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 0c894014..84a96a79 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -8,7 +8,7 @@ defineProps<{
   list: {
     id: string;
     name: string;
-    detail: { label: string; value: string }[];
+    detail?: { label: string; value: string }[];
     male?: boolean;
     female?: boolean;
     disabled?: boolean;
@@ -18,6 +18,8 @@ defineProps<{
   gridColumns?: number;
   noHover?: boolean;
   noAction?: boolean;
+  noDetail?: boolean;
+  noBg?: boolean;
   detailColumnCount?: number;
 }>();
 
@@ -48,9 +50,10 @@ defineEmits<{
       :class="{
         'person-box__disabled': v.disabled,
         'person-box__no-hover': noHover,
+        'person-box__no-detail': noDetail,
+        'person-box__no-bg': noBg,
       }"
-      @click="$emit('enterCard', v.id)"
-      style="padding: 0"
+      @click="$emit('enterCard', 'INFO', v.id)"
       v-for="(v, i) in list"
       :key="i"
     >
@@ -69,7 +72,7 @@ defineEmits<{
               <q-list>
                 <q-item
                   clickable
-                  @click="$emit('updateCard', v.id)"
+                  @click="$emit('updateCard', 'FORM', v.id)"
                   v-close-popup
                 >
                   <q-item-section class="col-4">
@@ -173,8 +176,9 @@ defineEmits<{
       </div>
 
       <!-- detail -->
-      <q-separator />
+      <q-separator v-if="!noDetail" />
       <div
+        v-if="!noDetail"
         class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
         :class="{
           'bg-gender': v.male || v.female,
@@ -210,6 +214,7 @@ defineEmits<{
   background-color: var(--surface-2);
   border-radius: var(--radius-2) !important;
   transition: 100ms ease-in-out;
+  padding: 0;
 
   &.person-box__disabled {
     opacity: 0.4;
@@ -223,6 +228,14 @@ defineEmits<{
     }
   }
 
+  &.person-box__no-detail {
+    padding-block: 2rem;
+  }
+
+  &.person-box__no-bg {
+    background-color: transparent;
+  }
+
   & .bg-gender {
     color: hsla(var(--_fg));
     background-color: hsl(var(--_bg));
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 4b1fb9d9..c248cb28 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -55,3 +55,7 @@ $separator-dark-color: var(--border-color);
 .q-field__inner {
   font-family: 'Noto Sans Thai', sans-serif;
 }
+
+div.fullscreen.q-drawer__backdrop {
+  background-color: hsla(0 0% 60% / 0.4) !important;
+}
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 16998e94..8f7ab65f 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -6,8 +6,9 @@ import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
 import { dialog } from 'src/stores/utils';
 
-import { UserCreate, UserTypeStats } from 'src/stores/user/types';
+import { User, UserCreate, UserTypeStats } from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
+import useAddressStore from 'src/stores/address';
 
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
@@ -19,11 +20,16 @@ import FormDialog from 'src/components/FormDialog.vue';
 import FormInformation from 'src/components/02_personnel-management/FormInformation.vue';
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import infoForm from 'src/components/02_personnel-management/infoForm.vue';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const router = useRouter();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
+const adrressStore = useAddressStore();
 const { data: userData } = storeToRefs(userStore);
 
 const defaultFormData = {
@@ -56,20 +62,24 @@ const defaultFormData = {
   birthDate: null,
   responsibleArea: null,
   username: '',
+  status: 'CREATED',
 };
 
+const currentUser = ref<User>();
+const infoPersonCard = ref();
+const infoDrawer = ref(false);
 const profileSubmit = ref(false);
 const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
-const status = ref(false);
+const statusToggle = ref(true);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const inputSearch = ref('');
-const userId = ref('');
-const selectorLabel = ref('');
-const hqId = ref('');
-const brId = ref('');
-const code = ref('');
+const userId = ref<string>();
+const selectorLabel = ref<string>('');
+const hqId = ref<string>();
+const brId = ref<string>();
+const code = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
@@ -89,7 +99,7 @@ const formData = ref<UserCreate>({
   licenseExpireDate: null,
   licenseIssueDate: null,
   licenseNo: null,
-  discountCondition: '',
+  discountCondition: null,
   retireDate: null,
   startDate: null,
   registrationNo: null,
@@ -105,6 +115,7 @@ const formData = ref<UserCreate>({
   checkpoint: null,
   checkpointEN: null,
   username: '',
+  status: 'CREATED',
 });
 
 const profileFile = ref<File | undefined>(undefined);
@@ -135,76 +146,49 @@ const selectorList = computed(() => [
   { label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
 ]);
 
-async function openDialog(idEdit?: string) {
-  modal.value = true;
+async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
+  if (action === 'FORM') {
+    modal.value = true;
+  } else if (action === 'INFO') {
+    infoDrawer.value = true;
+    if (!userData.value) return;
+    const user = userData.value.result.find((x) => x.id === idEdit);
+    infoPersonCard.value = user
+      ? [
+          {
+            id: user.id,
+            img: `${user.profileImageUrl}`,
+            name:
+              locale.value === 'en-US'
+                ? `${user.firstNameEN} ${user.lastNameEN}`
+                : `${user.firstName} ${user.lastName}`,
+            male: user.gender === 'male',
+            female: user.gender === 'female',
+            badge: user.code,
+            disabled: user.status === 'INACTIVE',
+          },
+        ]
+      : [];
+  }
+
+  statusToggle.value = true;
   profileSubmit.value = false;
   userStore.userOption.brOpts = [];
 
-  userStore.userOption.hqOpts.length === 0
-    ? await userStore.fetchHqOption()
-    : '';
-  userStore.userOption.roleOpts.length === 0
-    ? await userStore.fetchRoleOption()
-    : '';
+  if (userStore.userOption.hqOpts.length === 0) {
+    await userStore.fetchHqOption();
+  }
+
+  if (userStore.userOption.hqOpts.length === 1) {
+    hqId.value = userStore.userOption.hqOpts[0].value;
+  }
+
+  if (userStore.userOption.roleOpts.length === 0) {
+    await userStore.fetchRoleOption();
+  }
 
   if (idEdit && userData.value) {
-    const foundUser = userData.value.result.find((user) => user.id === idEdit);
-
-    if (foundUser) {
-      formData.value = {
-        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,
-        username: foundUser.username,
-        responsibleArea: foundUser.responsibleArea,
-        licenseExpireDate:
-          (foundUser.licenseExpireDate &&
-            new Date(foundUser.licenseExpireDate)) ||
-          null,
-        licenseIssueDate:
-          (foundUser.licenseIssueDate &&
-            new Date(foundUser.licenseIssueDate)) ||
-          null,
-        retireDate:
-          (foundUser.retireDate && new Date(foundUser.retireDate)) || null,
-        startDate:
-          (foundUser.startDate && new Date(foundUser.startDate)) || null,
-        birthDate:
-          (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;
-      profileSubmit.value = true;
-      await userStore.fetchBrOption(hqId.value);
-      // await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
-      // await formDialogRef.value.fetchDistrict(formData.value.provinceId);
-    }
+    assignFormData(idEdit);
   }
 }
 
@@ -216,8 +200,9 @@ function onClose() {
   urlProfile.value = '';
   profileSubmit.value = false;
   modal.value = false;
-  status.value = false;
+  infoDrawer.value = false;
   isEdit.value = false;
+  statusToggle.value = true;
   Object.assign(formData.value, defaultFormData);
   mapUserType(selectorLabel.value);
 }
@@ -233,16 +218,33 @@ async function onSubmit() {
       persistent: true,
       message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
       action: async () => {
+        if (!userId.value) return;
+
         const formDataEdit = {
           ...formData.value,
-          status:
-            formData.value.status !== 'CREATED'
-              ? formData.value.status
-              : undefined,
-        };
+          status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
+        } as const;
         await userStore.editById(userId.value, formDataEdit);
         onClose();
-        userStore.fetchList({ includeBranch: true });
+
+        if (
+          hqId.value &&
+          currentUser.value?.branch[0] &&
+          hqId.value !== currentUser.value.branch[0].id &&
+          brId.value !== currentUser.value.branch[0].id
+        ) {
+          userStore.removeBranch(userId.value, currentUser.value.branch[0].id);
+          await branchStore.addUser(
+            !!brId.value ? brId.value : hqId.value,
+            userId.value,
+          );
+        }
+
+        userStore.fetchList({
+          includeBranch: true,
+          userType: selectorLabel.value ?? undefined,
+        });
+        typeStats.value = await userStore.typeStats();
       },
     });
   } else {
@@ -254,6 +256,12 @@ async function onSubmit() {
       persistent: true,
       message: 'คุณต้องการเพิ่มบุคลากร ใช่หรือไม่',
       action: async () => {
+        if (!hqId.value) return;
+
+        statusToggle.value
+          ? (formData.value.status = 'CREATED')
+          : (formData.value.status = 'INACTIVE');
+
         const result = await userStore.create(formData.value);
         if (result) {
           await branchStore.addUser(
@@ -262,7 +270,11 @@ async function onSubmit() {
           );
         }
         onClose();
-        userStore.fetchList({ includeBranch: true });
+        userStore.fetchList({
+          includeBranch: true,
+          userType: selectorLabel.value ?? undefined,
+        });
+        typeStats.value = await userStore.typeStats();
       },
     });
   }
@@ -278,15 +290,15 @@ async function onDelete(id: string) {
     message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
     action: async () => {
       await userStore.deleteById(id);
-      await userStore.fetchList({ includeBranch: true });
+      await userStore.fetchList({
+        includeBranch: true,
+        userType: selectorLabel.value ?? undefined,
+      });
+      typeStats.value = await userStore.typeStats();
     },
   });
 }
 
-function cardClick(id: string) {
-  router.push({ name: 'PersonnelInfo', params: { id } });
-}
-
 function mapUserType(label: string) {
   const userTypeMap: { [key: string]: string } = {
     USER: 'USER',
@@ -309,8 +321,78 @@ async function toggleStatus(id: string) {
   if (res) record.status = res.status;
 }
 
+async function assignFormData(idEdit: string) {
+  if (!userData.value) return;
+  const foundUser = userData.value.result.find((user) => user.id === idEdit);
+  if (foundUser) {
+    currentUser.value = foundUser;
+
+    formData.value = {
+      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,
+      username: foundUser.username,
+      responsibleArea: foundUser.responsibleArea,
+      status: foundUser.status,
+      licenseExpireDate:
+        (foundUser.licenseExpireDate &&
+          new Date(foundUser.licenseExpireDate)) ||
+        null,
+      licenseIssueDate:
+        (foundUser.licenseIssueDate && new Date(foundUser.licenseIssueDate)) ||
+        null,
+      retireDate:
+        (foundUser.retireDate && new Date(foundUser.retireDate)) || null,
+      startDate: (foundUser.startDate && new Date(foundUser.startDate)) || null,
+      birthDate: (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
+    };
+
+    formData.value.status === 'ACTIVE' || 'CREATED'
+      ? (statusToggle.value = true)
+      : (statusToggle.value = false);
+    userId.value = foundUser.id;
+    if (foundUser.branch[0].isHeadOffice) {
+      hqId.value = foundUser.branch[0].id as string;
+    } else {
+      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;
+    profileSubmit.value = true;
+    await userStore.fetchBrOption(hqId.value);
+    if (formData.value.districtId) {
+      await adrressStore.fetchSubDistrictByProvinceId(
+        formData.value.districtId,
+      );
+    }
+  }
+}
+
 onMounted(async () => {
-  await userStore.fetchList({ includeBranch: true });
+  await userStore.fetchList({
+    includeBranch: true,
+    userType: selectorLabel.value ?? undefined,
+  });
   userStore.userOption.roleOpts.length === 0
     ? await userStore.fetchRoleOption()
     : '';
@@ -370,7 +452,7 @@ watch(
             unelevated
             label="+ เพิ่มบุคลากร"
             padding="4px 16px"
-            @click="openDialog()"
+            @click="openDialog('FORM')"
             style="background-color: var(--cyan-6); color: white"
           />
         </div>
@@ -478,7 +560,7 @@ watch(
         "
         @update-card="openDialog"
         @delete-card="onDelete"
-        @enter-card="cardClick"
+        @enter-card="openDialog"
         @toggle-status="toggleStatus"
       />
       <div
@@ -499,15 +581,97 @@ watch(
           <AddButton
             :label="'personnelAdd'"
             :cyanOn="true"
-            @trigger="openDialog"
+            @trigger="openDialog('FORM')"
           />
         </div>
       </div>
     </AppBox>
   </div>
 
+  <DrawerInfo
+    :title="
+      $i18n.locale === 'en-US'
+        ? `${formData.firstNameEN} ${formData.lastNameEN}`
+        : `${formData.firstName} ${formData.lastName}`
+    "
+    v-model:drawerOpen="infoDrawer"
+    :close="() => onClose()"
+  >
+    <template #info>
+      <infoForm
+        v-model:address="formData.address"
+        v-model:addressEN="formData.addressEN"
+        v-model:provinceId="formData.provinceId"
+        v-model:districtId="formData.districtId"
+        v-model:subDistrictId="formData.subDistrictId"
+        v-model:zipCode="formData.zipCode"
+      >
+        <template #person-card>
+          <div class="q-ma-md">
+            <AppBox class="surface-1" style="padding: 0">
+              <PersonCard
+                noHover
+                noAction
+                noDetail
+                no-bg
+                :list="infoPersonCard"
+                :gridColumns="1"
+              />
+            </AppBox>
+          </div>
+        </template>
+        <template #information>
+          <FormInformation
+            dense
+            outlined
+            separator
+            :usernameReadonly="isEdit"
+            v-model:hqId="hqId"
+            v-model:brId="brId"
+            v-model:userType="formData.userType"
+            v-model:userRole="formData.userRole"
+            v-model:username="formData.username"
+            v-model:userCode="code"
+          />
+        </template>
+        <template #person>
+          <FormPerson
+            dense
+            outlined
+            separator
+            v-model:firstName="formData.firstName"
+            v-model:lastName="formData.lastName"
+            v-model:firstNameEN="formData.firstNameEN"
+            v-model:lastNameEN="formData.lastNameEN"
+            v-model:telephoneNo="formData.telephoneNo"
+            v-model:email="formData.email"
+            v-model:gender="formData.gender"
+            v-model:birthDate="formData.birthDate"
+          />
+        </template>
+        <template #by-type>
+          <FormByType
+            dense
+            outlined
+            separator
+            v-model:userType="formData.userType"
+            v-model:registrationNo="formData.registrationNo"
+            v-model:startDate="formData.startDate"
+            v-model:retireDate="formData.retireDate"
+            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"
+          />
+        </template>
+      </infoForm>
+    </template>
+  </DrawerInfo>
+
   <!-- form -->
   <FormDialog
+    removeDialog
     ref="formDialogRef"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
@@ -593,7 +757,7 @@ watch(
           <q-toggle
             dense
             size="md"
-            v-model="status"
+            v-model="statusToggle"
             padding="none"
             class="q-pr-md"
           />
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index 2a5e39dc..ce102803 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -121,7 +121,7 @@ const useUserStore = defineStore('api-user', () => {
         .join(' ');
       userOption.value.roleOpts.push({
         label: formattedName,
-        value: item.id,
+        value: item.name,
       });
     });
   }