diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 464e419a..fc86f14a 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -212,6 +212,12 @@ watch(districtId, fetchSubDistrict);
         :label="$t('province')"
         class="col-3"
         :options="addrOptions.provinceOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
+        ]"
+        @update:model-value="districtId = subDistrictId = zipCode = null"
       />
       <q-select
         id="select-district-en"
@@ -228,6 +234,12 @@ watch(districtId, fetchSubDistrict);
         :label="$t('district')"
         class="col-3"
         :options="addrOptions.districtOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
+        ]"
+        @update:model-value="subDistrictId = zipCode = null"
       />
       <q-select
         id="select-sub-district-en"
@@ -244,6 +256,11 @@ watch(districtId, fetchSubDistrict);
         :label="$t('subDistrict')"
         class="col-3"
         :options="addrOptions.subDistrictOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
+        ]"
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index d2a2e31a..4db2767a 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -24,8 +24,8 @@ 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 checkpoint = defineModel<string | null | undefined>('checkPoint');
+const checkpointEN = defineModel<string | null | undefined>('checkPointEN');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
   defineModel<{ name: string; url: string }[]>('agencyFileList');
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index da020667..be5764cc 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -44,7 +44,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-6"
+      class="col-4"
       v-model="hqId"
       option-label="label"
       option-value="value"
@@ -65,13 +65,31 @@ async function selectHq(id: string) {
       options-dense
       clearable
       hide-bottom-space
-      class="col-6"
+      class="col-4"
       v-model="brId"
       :label="$t('formDialogInputBrId')"
       option-label="label"
       option-value="value"
       :options="userStore.userOption.brOpts"
     />
+    <q-input
+      id="input-username"
+      :dense="dense"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
+      :readonly="usernameReadonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-4"
+      :label="$t('formDialogInputUsername')"
+      v-model="username"
+      :rules="[
+        (val: string) =>
+          val.length > 2 || $t('formDialogInputUsernameValidate'),
+      ]"
+    />
     <q-select
       id="select-user-type"
       :dense="dense"
@@ -83,7 +101,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-3"
+      class="col-6"
       option-value="value"
       option-label="label"
       :label="$t('formDialogInputUserType')"
@@ -102,7 +120,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-3"
+      class="col-6"
       :label="$t('formDialogInputUserRole')"
       option-label="label"
       option-value="value"
@@ -110,25 +128,7 @@ async function selectHq(id: string) {
       :options="userStore.userOption.roleOpts"
       :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
     />
-    <q-input
-      id="input-username"
-      :dense="dense"
-      :outlined="readonly ? false : outlined"
-      :borderless="readonly"
-      :readonly="usernameReadonly"
-      emit-value
-      map-options
-      options-dense
-      hide-bottom-space
-      class="col-3"
-      :label="$t('formDialogInputUsername')"
-      v-model="username"
-      :rules="[
-        (val: string) =>
-          val.length > 2 || $t('formDialogInputUsernameValidate'),
-      ]"
-    />
-    <q-input
+    <!-- <q-input
       id="input-user-code"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -138,7 +138,7 @@ async function selectHq(id: string) {
       class="col-3"
       :label="$t('formDialogInputUserCode')"
       v-model="userCode"
-    />
+    /> -->
   </div>
   <q-separator
     v-if="separator"
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index a582799d..43f11ae5 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import AppBox from './app/AppBox.vue';
 
 defineProps<{
   title: string;
   isEdit?: boolean;
   bgOn?: boolean;
   statusBranch?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   editData?: (...args: unknown[]) => void;
   deleteData?: (...args: unknown[]) => void;
   submit?: (...args: unknown[]) => void;
@@ -103,6 +106,13 @@ function reset() {
                   : $t('statusACTIVE')
               }}
             </text>
+            <text
+              v-if="badgeLabel"
+              class="badge-label q-px-sm text-caption"
+              :class="badgeClass"
+            >
+              {{ badgeLabel }}
+            </text>
           </div>
 
           <div style="width: 31.98px"></div>
@@ -214,4 +224,11 @@ function reset() {
     background-color: hsla(var(--_branch-badge-bg) / 0.1);
   }
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 0dc12681..f194940d 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -9,6 +9,8 @@ defineProps<{
   addressTitleEN?: string;
   addressSeparator?: boolean;
   branchStatus?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -27,7 +29,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
       style="
         padding: 0;
         border-radius: var(--radius-2);
-        max-width: 80%;
+        max-width: 85%;
         max-height: 100%;
       "
     >
@@ -39,7 +41,14 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
 
-              <div>{{ branchStatus ? `(${branchStatus})` : '' }}</div>
+              <text>{{ branchStatus ? `(${branchStatus})` : '' }}</text>
+              <text
+                v-if="badgeLabel"
+                class="badge-label q-px-sm text-caption"
+                :class="badgeClass"
+              >
+                {{ badgeLabel }}
+              </text>
             </div>
             <q-btn
               round
@@ -169,4 +178,11 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
 .form-footer {
   border-top: 1px solid var(--border-color);
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index e8f38c54..1488da86 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -147,3 +147,21 @@ html {
   color: hsl(var(--positive-fg));
   background-color: hsl(var(--positive-bg));
 }
+
+.app-text-male {
+  color: hsl(var(--gender-male));
+}
+
+.app-bg-male {
+  color: hsl(var(--positive-fg));
+  background-color: hsl(var(--gender-male)) !important;
+}
+
+.app-text-female {
+  color: hsl(var(--gender-female));
+}
+
+.app-bg-female {
+  color: hsl(var(--positive-fg));
+  background-color: hsl(var(--gender-female)) !important;
+}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 7bac0065..ed99eaa9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -13,8 +13,9 @@ import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
-import GlobalDialog from 'components/GlobalDialog.vue';
 import useUserStore from 'src/stores/user';
+import { Option } from 'src/stores/user/types';
+import { dialog } from 'src/stores/utils';
 
 interface NotificationButton {
   item: string;
@@ -34,11 +35,12 @@ const loaderStore = useLoader();
 
 const { visible } = storeToRefs(loaderStore);
 const { locale } = useI18n({ useScope: 'global' });
+const userStore = useUserStore();
 
-const logoutModal = ref(false);
 const leftDrawerOpen = ref(false);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
+const filterRole = ref<string[]>();
 
 const currentLanguage = ref<string>('ไทย');
 const language: {
@@ -100,21 +102,46 @@ function setActive(button: NotificationButton) {
   }
 }
 
-function doLogout(confirm: boolean = false) {
-  logoutModal.value = true;
-  if (confirm) {
-    logoutModal.value = false;
-    logout();
-  }
+function doLogout() {
+  dialog({
+    icon: 'mdi-logout-variant',
+    title: 'ยืนยันการออกจากระบบ',
+    persistent: true,
+    message: 'คุณต้องการออกจากระบบ ใช่หรือไม่',
+    action: async () => {
+      logout();
+    },
+  });
+}
+
+function getRoleName(userRoleValue?: string[], roleOptions: Option[]) {
+  if (!userRoleValue || !roleOptions) return;
+
+  const matchingRole: string | undefined = roleOptions.find(
+    (role) => role.value === userRoleValue[0],
+  )?.label;
+
+  return matchingRole ? matchingRole : '';
 }
 
 onMounted(async () => {
   const user = getUsername();
   const uid = getUserId();
 
+  const userRoles = getRole();
+  if (userRoles) {
+    console.log(userRoles);
+    filterRole.value = userRoles.filter(
+      (role) =>
+        role !== 'default-roles-dev' &&
+        role !== 'offline_access' &&
+        role !== 'uma_authorization',
+    );
+  }
+
   if (user === 'admin') return;
   if (uid) {
-    const res = await useUserStore().fetchById(uid);
+    const res = await userStore.fetchById(uid);
 
     if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
   }
@@ -260,7 +287,9 @@ onMounted(async () => {
                       {{ getName() }}
                     </span>
                     <div style="font-size: 11px; color: var(--surface)">
-                      {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
+                      {{
+                        getRoleName(filterRole, userStore.userOption.roleOpts)
+                      }}
                     </div>
                   </q-item-label>
                 </q-item-section>
@@ -347,14 +376,6 @@ onMounted(async () => {
 
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
-    <GlobalDialog
-      v-model="logoutModal"
-      title="ยืนยันการออกจากระบบ"
-      message="คุณต้องการออกจากระบบ ใช่หรือไม่"
-      icon="mdi-logout-variant"
-      :persistent="true"
-      :action="() => doLogout(true)"
-    />
     <global-loading :visibility="visible" />
   </q-layout>
 </template>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 30830668..f8e86cd1 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -70,6 +70,7 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const userCode = ref<string>();
 const currentUser = ref<User>();
 const infoPersonCardEdit = ref(false);
 const infoPersonId = ref<string>('');
@@ -86,7 +87,6 @@ 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>();
@@ -156,12 +156,33 @@ const selectorList = computed(() => [
 ]);
 
 async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
+  if (userStore.userOption.hqOpts.length === 0) {
+    await userStore.fetchHqOption();
+  }
+
+  if (userStore.userOption.roleOpts.length === 0) {
+    await userStore.fetchRoleOption();
+  }
+
+  if (idEdit && userData.value) {
+    assignFormData(idEdit);
+    isEdit.value = true;
+
+    if (formData.value.userType === 'AGENCY') {
+      const result = await userStore.fetchAttachment(idEdit);
+
+      if (result) {
+        agencyFileList.value = result;
+      }
+    }
+  }
+
   if (action === 'FORM') {
     modal.value = true;
   } else if (action === 'INFO') {
+    if (!userData.value) return;
     infoDrawer.value = true;
     infoPersonCardEdit.value = false;
-    if (!userData.value) return;
     const user = userData.value.result.find((x) => x.id === idEdit);
     infoPersonCard.value = user
       ? [
@@ -182,33 +203,8 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   }
 
   statusToggle.value = true;
-  profileSubmit.value = false;
   userStore.userOption.brOpts = [];
-
-  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) {
-    isEdit.value = true;
-    assignFormData(idEdit);
-
-    if (formData.value.userType === 'AGENCY') {
-      const result = await userStore.fetchAttachment(idEdit);
-
-      if (result) {
-        agencyFileList.value = result;
-      }
-    }
-  }
+  hqId.value = userStore.userOption.hqOpts[0].value;
 }
 
 function undo() {
@@ -218,16 +214,16 @@ function undo() {
 }
 
 function onClose() {
-  code.value = '';
   hqId.value = '';
   brId.value = '';
   userId.value = '';
+  userCode.value = '';
   urlProfile.value = '';
   agencyFile.value = [];
-  profileSubmit.value = false;
   modal.value = false;
-  infoDrawer.value = false;
   isEdit.value = false;
+  infoDrawer.value = false;
+  profileSubmit.value = false;
   statusToggle.value = true;
   Object.assign(formData.value, defaultFormData);
   mapUserType(selectorLabel.value);
@@ -300,7 +296,10 @@ async function onSubmit() {
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
-
+        const res = await branchStore.userStats(formData.value.userType);
+        if (res) {
+          userStats.value = res;
+        }
         onClose();
       },
     });
@@ -346,7 +345,10 @@ async function onSubmit() {
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
-
+        const res = await branchStore.userStats(formData.value.userType);
+        if (res) {
+          userStats.value = res;
+        }
         onClose();
       },
     });
@@ -380,7 +382,6 @@ function mapUserType(label: string) {
     DELEGATE: 'DELEGATE',
     AGENCY: 'AGENCY',
   };
-
   formData.value.userType = userTypeMap[label];
 }
 
@@ -398,6 +399,7 @@ async function toggleStatus(id: string) {
 async function assignFormData(idEdit: string) {
   if (!userData.value) return;
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
+
   if (foundUser) {
     currentUser.value = foundUser;
     infoPersonId.value = currentUser.value.id;
@@ -456,7 +458,7 @@ async function assignFormData(idEdit: string) {
       }
     }
 
-    code.value = foundUser.code;
+    userCode.value = foundUser.code;
     urlProfile.value = foundUser.profileImageUrl;
     isEdit.value = true;
     profileSubmit.value = true;
@@ -701,6 +703,8 @@ watch(
   <DrawerInfo
     v-if="currentUser"
     bg-on
+    :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
+    :badgeLabel="userCode"
     :isEdit="infoPersonCardEdit"
     :title="
       $i18n.locale === 'en-US'
@@ -752,7 +756,7 @@ watch(
             v-model:userType="formData.userType"
             v-model:userRole="formData.userRole"
             v-model:username="formData.username"
-            v-model:userCode="code"
+            v-model:userCode="userCode"
           />
         </template>
         <template #person>
@@ -801,6 +805,8 @@ watch(
   <FormDialog
     removeDialog
     ref="formDialogRef"
+    :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
+    :badgeLabel="userCode"
     :title="$t('personnelAdd')"
     :addressTitle="$t('formDialogTitleAddressPure')"
     :addressTitleEN="$t('formDialogTitleAddressPure') + ' ENG'"
@@ -909,7 +915,7 @@ watch(
         v-model:userType="formData.userType"
         v-model:userRole="formData.userRole"
         v-model:username="formData.username"
-        v-model:userCode="code"
+        v-model:userCode="userCode"
       />
     </template>
     <template #person>