diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 7bf39fd1..37fb8d9f 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { QSelect } from 'quasar';
 import { getRole } from 'src/services/keycloak';
 import { CustomerBranch } from 'src/stores/customer/types';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 const personName = defineModel<string>('personName');
 const customerName = defineModel<string>('customerName');
@@ -16,6 +17,7 @@ const taxNo = defineModel<string | null | undefined>('taxNo');
 
 const employerID = defineModel<string>('employerID');
 const slash = ref<string>('-');
+
 // employee
 const customerBranch = defineModel<{
   id: string;
@@ -44,12 +46,22 @@ defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
 }>();
 
-const branchOptions = ref<Record<string, unknown>[]>([]);
-const branchFilter = selectFilterOptionRefMod(
-  optionsBranch,
-  branchOptions,
-  'name',
+watch(
+  () => optionsBranch.value,
+  () => {
+    branchFilter = selectFilterOptionRefMod(
+      optionsBranch,
+      branchOptions,
+      'name',
+    );
+  },
 );
+
+const branchOptions = ref<Record<string, unknown>[]>([]);
+let branchFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
 </script>
 
 <template>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 74cb192b..85c60e10 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2133,7 +2133,8 @@ watch(isMainPage, () => {
                             round
                             flat
                             @click.stop="
-                              () => {
+                              async () => {
+                                await fetchListOfOptionBranch();
                                 const { branch, ...payload } = props.row;
                                 currentCustomer = payload;
 
@@ -2928,19 +2929,14 @@ watch(isMainPage, () => {
         "
         @viewDetail="
           async (v, i) => {
+            await fetchListOfOptionBranch();
             currentBranchId = v.id;
-
             statusToggle = v.status === 'INACTIVE' ? false : true;
-
             currentBranch = {
               name: v.name,
               code: v.code,
             };
-
             if (currentCustomer) assignFormData(currentCustomer.id, v, i);
-
-            await fetchListOfOptionBranch();
-
             infoDrawerBranch = true;
           }
         "