diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 20f76756..ae455545 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
 import { selectFilterOptionRefMod } from 'stores/utils';
-import { onMounted, ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isRoleInclude } from 'src/stores/utils';
+import SelectBranch from '../shared/select/SelectBranch.vue';
 
 const userStore = useUserStore();
 const { t } = useI18n();
@@ -15,7 +16,7 @@ const userRole = defineModel<string>('userRole');
 const username = defineModel<string | null | undefined>('username');
 const userCode = defineModel<string>('userCode');
 
-const props = defineProps<{
+defineProps<{
   title?: string;
   dense?: boolean;
   outlined?: boolean;
@@ -24,35 +25,6 @@ const props = defineProps<{
   usernameReadonly?: boolean;
 }>();
 
-async function selectHq(id: string) {
-  if (!id) return;
-  brId.value = '';
-  userStore.userOption.brOpts = [];
-  await userStore.fetchBrOption(id);
-  if (userStore.userOption.brOpts.length === 1) {
-    brId.value = userStore.userOption.brOpts[0].value;
-  }
-  brFilter = selectFilterOptionRefMod(
-    ref(userStore.userOption.brOpts),
-    brOptions,
-    'label',
-  );
-}
-
-const hqOptions = ref<Record<string, unknown>[]>([]);
-const hqFilter = selectFilterOptionRefMod(
-  ref(userStore.userOption.hqOpts),
-  hqOptions,
-  'label',
-);
-
-const brOptions = ref<Record<string, unknown>[]>([]);
-let brFilter = selectFilterOptionRefMod(
-  ref(userStore.userOption.brOpts),
-  brOptions,
-  'label',
-);
-
 const userTypeOptions = ref<Record<string, unknown>[]>([]);
 const userTypeFilter = selectFilterOptionRefMod(
   ref(
@@ -71,35 +43,6 @@ const roleFilter = selectFilterOptionRefMod(
   roleOptions,
   'label',
 );
-
-onMounted(async () => {
-  if (userStore.userOption.hqOpts[0].value && !props.readonly) {
-    await userStore.fetchBrOption(userStore.userOption.hqOpts[0].value);
-    if (userStore.userOption.brOpts.length === 1) {
-      brId.value = userStore.userOption.brOpts[0].value;
-    }
-    brFilter = selectFilterOptionRefMod(
-      ref(userStore.userOption.brOpts),
-      brOptions,
-      'label',
-    );
-  }
-});
-
-watch(
-  () => hqId.value,
-  async (v) => {
-    if (v) {
-      userStore.userOption.brOpts = [];
-      await userStore.fetchBrOption(v);
-      brFilter = selectFilterOptionRefMod(
-        ref(userStore.userOption.brOpts),
-        brOptions,
-        'label',
-      );
-    }
-  },
-);
 </script>
 <template>
   <div class="row col-12">
@@ -116,83 +59,35 @@ watch(
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        :disable="isRoleInclude(['branch_manager']) && !readonly"
-        v-model="hqId"
-        for="select-hq-id"
-        autocomplete="off"
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
+      <SelectBranch
+        id="select-hq-id"
         class="col-md-2 col-12"
-        :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
+        :readonly
+        :disabled="isRoleInclude(['branch_manager']) && !readonly"
+        :params="{
+          filter: 'head',
+        }"
         :label="$t('branch.form.code')"
-        :options="hqOptions"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', { field: $t('branch.form.code') }),
-        ]"
-        @update:model-value="(val: string) => selectHq(val)"
-        @filter="hqFilter"
-        @clear="
-          () => {
-            (hqId = ''), (brId = '');
-          }
-        "
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <q-select
-        outlined
+        code-only
         clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        for="select-br-id"
-        autocomplete="off"
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
+        v-model:value="hqId"
+        @update:value="() => (brId = '')"
+        required
+      />
+      <SelectBranch
+        id="select-br-id"
         class="col-md-2 col-12"
-        :disable="isRoleInclude(['branch_manager']) && !readonly"
-        :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
+        :key="hqId ?? undefined"
+        :readonly
+        :disabled="(isRoleInclude(['branch_manager']) && !readonly) || !hqId"
+        :params="{
+          headOfficeId: hqId ?? undefined,
+        }"
         :label="$t('branch.form.codeBranch')"
-        :options="brOptions"
-        @filter="brFilter"
-        :model-value="readonly ? brId || '-' : brId"
-        @update:model-value="(v) => (typeof v === 'string' ? (brId = v) : '')"
-        @clear="brId = ''"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
+        code-only
+        clearable
+        v-model:value="brId"
+      />
       <q-input
         for="input-username"
         :dense="dense"
diff --git a/src/components/shared/select/SelectBranch.vue b/src/components/shared/select/SelectBranch.vue
index f6687084..c0725941 100644
--- a/src/components/shared/select/SelectBranch.vue
+++ b/src/components/shared/select/SelectBranch.vue
@@ -98,8 +98,8 @@ function setDefaultValue() {
         return ret;
       })
     "
-    :hide-selected="false"
-    :fill-input="false"
+    hide-selected
+    fill-input
     :rules="[
       (v: string) =>
         checkRole?.some((v) => getRole()?.includes(v)) ||
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index de93aeaf..db8a5b25 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -38,6 +38,7 @@ const useBranchStore = defineStore('api-branch', () => {
       filter?: 'head' | 'sub';
       withHead?: boolean;
       activeOnly?: boolean;
+      headOfficeId?: string;
     },
     Data extends Pagination<Branch[]>,
   >(opts?: Options): Promise<Data | false> {