diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 4f658264..610e79da 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -12,7 +12,7 @@ import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
 const optionStore = useOptionStore();
-
+const prefixNameTh = defineModel<string>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
 const firstNameEN = defineModel<string>('firstNameEN');
@@ -23,6 +23,13 @@ const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+const prefixNameFilter = selectFilterOptionRefMod(
+  ref(optionStore.globalOption.prefix),
+  prefixNameOptions,
+  'label',
+);
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 const genderFilter = selectFilterOptionRefMod(
   ref(optionStore.globalOption.gender),
@@ -48,274 +55,348 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
-    • {{ title || $t('formDialogTitlePersonnel') }}
-  </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-first-name`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputFirstName')"
-      v-model="firstName"
-      :rules="[
-        (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
-      ]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-last-name`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputLastName')"
-      v-model="lastName"
-      :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-first-name-en`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputFirstNameEN')"
-      v-model="firstNameEN"
-      :rules="[
-        (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
-      ]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-last-name-en`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputLastNameEN')"
-      v-model="lastNameEN"
-      :rules="[
-        (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
-      ]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      v-if="!employee"
-      :for="`${prefixId}-input-telephone`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      class="col-6"
-      :label="$t('formDialogInputTelephone')"
-      v-model="telephoneNo"
-      mask="##########"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      v-if="!employee"
-      :for="`${prefixId}-input-email`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :label="$t('formDialogInputEmail')"
-      class="col-6"
-      v-model="email"
-    />
-    <q-select
-      v-if="!employee"
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      v-model="gender"
-      input-debounce="0"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      class="col-md-3 col-6"
-      :dense="dense"
-      :readonly="readonly"
-      :options="genderOptions"
-      :hide-dropdown-icon="readonly"
-      :for="`${prefixId}-select-gender`"
-      :label="$t('formDialogInputGender')"
-      @filter="genderFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-account"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <div class="col-6 row">
+        <q-select
+          outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          v-model="prefixNameTh"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          lazy-rules="ondemand"
+          class="col-2"
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-prefix-name`"
+          :label="$t('formDialogInputPrefixName')"
+          @filter="prefixNameFilter"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('noResults') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
 
-    <VueDatePicker
-      :id="`${prefixId}-input-birth-date`"
-      :for="`${prefixId}-input-birth-date`"
-      utc
-      autoApply
-      v-model="birthDate"
-      :disabled-dates="disabledAfterToday"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
         <q-input
           lazy-rules="ondemand"
-          :for="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          placeholder="DD/MM/YYYY"
-          :label="$t('formDialogInputBirthDate')"
+          :for="`${prefixId}-input-first-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogInputFirstName')"
+          v-model="firstName"
           :rules="[
-            (val: string) =>
-              !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+            (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
           ]"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            birthDate && readonly
-              ? dateFormat(birthDate)
-              : dateFormat(birthDate, false, false, true)
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                const today = new Date();
-                const date = parseAndFormatDate(v, locale);
-                birthDate = date && date > today ? today : date;
+        />
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-last-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogInputLastName')"
+          v-model="lastName"
+          :rules="[
+            (val: string) => !!val || $t('formDialogInputLastNameValidate'),
+          ]"
+        />
+      </div>
+
+      <q-select
+        outlined
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        v-model="prefixNameTh"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-1"
+        :dense="dense"
+        :readonly="readonly"
+        :options="prefixNameOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-prefix-name`"
+        :label="$t('formDialogInputPrefixName')"
+        @filter="prefixNameFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-first-name-en`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-2"
+        :label="$t('formDialogInputFirstNameEN')"
+        v-model="firstNameEN"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
+        ]"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-last-name-en`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-2"
+        :label="$t('formDialogInputLastNameEN')"
+        v-model="lastNameEN"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        v-if="!employee"
+        :for="`${prefixId}-input-telephone`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        class="col-3"
+        :label="$t('formDialogInputTelephone')"
+        v-model="telephoneNo"
+        mask="##########"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        v-if="!employee"
+        :for="`${prefixId}-input-email`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :label="$t('formDialogInputEmail')"
+        class="col-3"
+        v-model="email"
+      />
+
+      <q-select
+        v-if="!employee"
+        outlined
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        v-model="gender"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-1"
+        :dense="dense"
+        :readonly="readonly"
+        :options="genderOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-gender`"
+        :label="$t('formDialogInputGender')"
+        @filter="genderFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <VueDatePicker
+        :id="`${prefixId}-input-birth-date`"
+        :for="`${prefixId}-input-birth-date`"
+        utc
+        autoApply
+        v-model="birthDate"
+        :disabled-dates="disabledAfterToday"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-2"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :for="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            placeholder="DD/MM/YYYY"
+            :label="$t('formDialogInputBirthDate')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            :rules="[
+              (val: string) =>
+                !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+            ]"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              birthDate && readonly
+                ? dateFormat(birthDate)
+                : dateFormat(birthDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  const today = new Date();
+                  const date = parseAndFormatDate(v, locale);
+                  birthDate = date && date > today ? today : date;
+                }
               }
-            }
-          "
-        >
-          <!-- v-model="birthDate" -->
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-age`"
-      :id="`${prefixId}-input-age`"
-      :dense="dense"
-      outlined
-      readonly
-      :label="$t('formDialogInputAge')"
-      class="col-md-3 col-6"
-      :model-value="
-        birthDate?.toString() === 'Invalid Date' ||
-        birthDate?.toString() === undefined
-          ? ''
-          : calculateAge(birthDate)
-      "
-    />
-    <q-select
-      v-if="employee"
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      class="col-md-3 col-6"
-      :dense="dense"
-      v-model="gender"
-      :readonly="readonly"
-      :options="genderOptions"
-      :hide-dropdown-icon="readonly"
-      :for="`${prefixId}-select-gender`"
-      :label="$t('formDialogInputGender')"
-      :rules="[
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogInputGender'),
-      ]"
-      @filter="genderFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      v-if="employee"
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      option-label="label"
-      option-value="label"
-      v-model="nationality"
-      lazy-rules="ondemand"
-      class="col-md-3 col-6"
-      :dense="dense"
-      :readonly="readonly"
-      :options="nationalityOptions"
-      :hide-dropdown-icon="readonly"
-      :for="`${prefixId}-select-nationality`"
-      :label="$t('formDialogInputNationality')"
-      :rules="[
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogInputNationality'),
-      ]"
-      @filter="nationalityFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="positive"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-age`"
+        :id="`${prefixId}-input-age`"
+        :dense="dense"
+        outlined
+        readonly
+        :label="$t('formDialogInputAge')"
+        class="col"
+        :model-value="
+          birthDate?.toString() === 'Invalid Date' ||
+          birthDate?.toString() === undefined
+            ? ''
+            : calculateAge(birthDate)
+        "
+      />
+
+      <q-select
+        v-if="employee"
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-md-3 col-6"
+        :dense="dense"
+        v-model="gender"
+        :readonly="readonly"
+        :options="genderOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-gender`"
+        :label="$t('formDialogInputGender')"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogInputGender'),
+        ]"
+        @filter="genderFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        v-if="employee"
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        option-label="label"
+        option-value="label"
+        v-model="nationality"
+        lazy-rules="ondemand"
+        class="col-md-3 col-6"
+        :dense="dense"
+        :readonly="readonly"
+        :options="nationalityOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-nationality`"
+        :label="$t('formDialogInputNationality')"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogInputNationality'),
+        ]"
+        @filter="nationalityFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index 69f6e458..bd21fbef 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -145,9 +145,10 @@ onMounted(() => {
           @click.stop="
             () => {
               if (v.statusSave) {
-                $emit('remove',  index , v.id );
+                $emit('remove', index, v.id);
+              } else {
+                close(index);
               }
-              close(index);
             }
           "
         />
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 21bd3969..c508b79a 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -32,7 +32,8 @@ import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useOptionStore from 'src/stores/options';
-status;
+import ProfileBanner from 'src/components/ProfileBanner.vue';
+import SideMenu from 'src/components/SideMenu.vue';
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -109,9 +110,29 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   },
 ]);
 
+const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
+  {
+    icon: 'mdi-account',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+
+  {
+    icon: 'mdi-map-marker-radius',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-briefcase',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+]);
+
 const fieldSelected = ref<
   ('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
 >(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
+
 const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
@@ -175,20 +196,22 @@ const formData = ref<UserCreate>({
   status: 'CREATED',
 });
 
-const profileUrl = ref<string | null>('');
-const profileFile = ref<File | undefined>(undefined);
+const isImageEdit = ref<boolean>(false);
+const imageUrl = ref<string | null>('');
+const profileFileImg = ref<File | null>(null);
+const imageDialog = ref(false);
 
-const inputFile = (() => {
+const inputFileImg = (() => {
   const element = document.createElement('input');
   element.type = 'file';
   element.accept = 'image/*';
 
   const reader = new FileReader();
   reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') profileUrl.value = reader.result;
+    if (typeof reader.result === 'string') imageUrl.value = reader.result;
 
     if (infoDrawerEdit.value && currentUser.value)
-      currentUser.value.profileImageUrl = profileUrl.value as string;
+      currentUser.value.profileImageUrl = imageUrl.value as string;
     // profileUrl.value = currentUser.value?.profileImageUrl as string;
 
     // if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
@@ -196,9 +219,9 @@ const inputFile = (() => {
   });
 
   element.addEventListener('change', () => {
-    profileFile.value = element.files?.[0];
-    if (profileFile.value) {
-      reader.readAsDataURL(profileFile.value);
+    profileFileImg.value = element.files?.[0];
+    if (profileFileImg.value) {
+      reader.readAsDataURL(profileFileImg.value);
     }
   });
 
@@ -259,12 +282,12 @@ reader.addEventListener('load', () => {
   if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
 });
 
-watch(profileFile, () => {
-  if (profileFile.value) reader.readAsDataURL(profileFile.value);
+watch(profileFileImg, () => {
+  if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
 });
 
-inputFile.addEventListener('change', (e) => {
-  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
+inputFileImg.addEventListener('change', (e) => {
+  profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
 });
 
 const selectorList = computed(() => [
@@ -360,7 +383,7 @@ function onClose() {
   userId.value = '';
   userCode.value = '';
   urlProfile.value = undefined;
-  profileFile.value = undefined;
+  profileFileImg.value = null;
   infoDrawerEdit.value = false;
   agencyFile.value = [];
   modal.value = false;
@@ -375,7 +398,7 @@ function onClose() {
 
 async function onSubmit() {
   if (profileSubmit.value) {
-    formData.value.profileImage = profileFile.value as File;
+    formData.value.profileImage = profileFileImg.value as File;
   } else {
     formData.value.profileImage = null;
   }
@@ -520,7 +543,7 @@ async function assignFormData(idEdit: string) {
   if (foundUser) {
     currentUser.value = foundUser;
     infoPersonId.value = currentUser.value.id;
-    profileUrl.value = currentUser.value.profileImageUrl;
+    imageUrl.value = currentUser.value.profileImageUrl;
     formData.value = {
       branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
@@ -568,7 +591,7 @@ async function assignFormData(idEdit: string) {
     userId.value = foundUser.id;
 
     if (foundUser.branch) {
-      if (foundUser.branch[0].isHeadOffice) {
+      if (foundUser.branch?.[0].isHeadOffice) {
         hqId.value = foundUser.branch[0].id as string;
       } else {
         hqId.value = foundUser.branch[0].headOfficeId as string;
@@ -593,6 +616,12 @@ async function assignFormData(idEdit: string) {
   }
 }
 
+function openImageDialog(isEdit?: boolean) {
+  if (isEdit) isImageEdit.value = true;
+  else isImageEdit.value = false;
+  imageDialog.value = true;
+}
+
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
   utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
@@ -1472,11 +1501,111 @@ watch(
       v-model:subDistrictId="formData.subDistrictId"
       v-model:zipCode="formData.zipCode"
     >
+      <div class="q-mx-lg q-mt-lg">
+        <ProfileBanner
+          active
+          hideFade
+          :img="
+            imageUrl ||
+            {
+              male: '/no-img-man.png',
+              female: '/no-img-female.png',
+            }[formData.gender]
+          "
+          :cover="imageUrl || null"
+          :title="`${formData.firstName} ${formData.lastName}`"
+          :caption="`${formData.firstNameEN} ${formData.lastNameEN}`"
+          color="hsla(var(--pink-6-hsl)/1)"
+          bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          @view="openImageDialog"
+          @edit="inputFileImg.click()"
+          :readonly="!infoDrawerEdit"
+          :menu="formMenuIcon"
+        />
+      </div>
+      <!-- ย้อนกลับ -->
+
       <div
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
+        id="personnel-form"
+      >
+        <div class="col">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('formDialogTitleInformation'),
+                  anchor: 'form-information',
+                },
+                {
+                  name: $t('formDialogTitlePersonal'),
+                  anchor: 'form-personal',
+                },
+                {
+                  name: $t('formDialogTitleAddressPersonnel'),
+                  anchor: 'form-address',
+                },
+                {
+                  name: $t('formDialogTitleByType'),
+                  anchor: 'form-work',
+                },
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#personnel-form"
+            />
+          </div>
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl">
+          <FormInformation
+            id="form-information"
+            v-model:hq-id="hqId"
+            v-model:br-id="brId"
+            v-model:user-type="formData.userType"
+            v-model:user-role="formData.userRole"
+            v-model:username="formData.username"
+            v-model:user-code="userCode"
+            dense
+            outlined
+            separator
+            :title="$t('formDialogTitleInformation')"
+            :readonly="!infoDrawerEdit"
+            :usernameReadonly="isEdit"
+          />
+
+          <FormPerson
+            id="form-personal"
+            v-model:first-name="formData.firstName"
+            v-model:last-name="formData.lastName"
+            v-model:first-name-en="formData.firstNameEN"
+            v-model:last-name-en="formData.lastNameEN"
+            v-model:telephone-no="formData.telephoneNo"
+            v-model:email="formData.email"
+            v-model:gender="formData.gender"
+            v-model:birth-date="formData.birthDate"
+            :title="$t('formDialogTitlePersonal')"
+            prefix-id="drawer-info-personnel"
+            dense
+            outlined
+            separator
+            :readonly="!infoDrawerEdit"
+          />
+        </div>
+      </div>
+
+      <!-- <div
         class="col surface-1 q-ma-lg rounded bordered scroll row"
         id="branch-info"
       >
+     
         <div class="col-10 q-pa-md q-gutter-y-xl">
+
+    
+
           <ProfileUpload
             prefix-id="drawer-info-personnel"
             v-model:url-profile="profileUrl"
@@ -1485,7 +1614,7 @@ watch(
             @input-file="inputFile.click()"
             @cancel-file="inputFile.value = ''"
           />
-          <!-- <AppBox class="surface-1" style="padding: 0">
+          <AppBox class="surface-1" style="padding: 0">
               <PersonCard
                 :can-edit-profile="infoDrawerEdit"
                 :data="{
@@ -1503,7 +1632,7 @@ watch(
                 no-bg
                 @edit-profile="inputFile.click()"
               />
-            </AppBox> -->
+            </AppBox>
           <FormInformation
             dense
             outlined
@@ -1553,7 +1682,7 @@ watch(
             v-model:userId="userId"
           />
         </div>
-      </div>
+      </div>  -->
     </InfoForm>
   </DrawerInfo>
 
@@ -1581,8 +1710,8 @@ watch(
         v-model:url-profile="urlProfile"
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"
-        @input-file="inputFile.click()"
-        @cancel-file="inputFile.value = ''"
+        @input-file="inputFileImg.click()"
+        @cancel-file="inputFileImg.value = ''"
       />
     </template>