diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e7502ebc..710a4b97 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -43,28 +43,57 @@ const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 
 async function init() {
-  if (route.name === 'CustomerManagement') {
-    await fetchListCustomer(true);
-  }
+  utilsStore.currentTitle.title = 'customerManagement';
+  utilsStore.currentTitle.path = [
+    {
+      text: 'customerManagementCaption',
+      handler: () => router.push('/customer-management'),
+    },
+  ];
+
+  gridView.value = $q.screen.lt.md ? true : false;
+
+  if (route.name === 'CustomerManagement') await fetchListCustomer(true);
 
   if (
     route.name === 'CustomerBranchManagement' &&
     typeof route.params.customerId === 'string'
   ) {
     const _data = await customerStore.fetchById(route.params.customerId);
-    if (_data) currentCustomer.value = _data;
-    else router.push('/customer-management');
+
+    if (_data) {
+      currentCustomer.value = _data;
+      utilsStore.currentTitle.path.push({
+        text: currentCustomer.value.customerName,
+      });
+    } else {
+      router.push('/customer-management');
+    }
   }
 
   flowStore.rotate();
 }
-watch(() => route.name, init);
 onMounted(init);
 
-const { getStatsCustomer, fetchList, editById } = customerStore;
-const currentTab = ref('employer');
+const currentTab = ref<'employer' | 'employee'>('employer');
+const inputSearch = ref('');
+const currentStatus = ref<Status | 'All'>('All');
+
+watch(() => route.name, init);
+watch([currentTab, currentStatus, inputSearch], async ([name]) => {
+  if (name === 'employer') {
+    currentPageCustomer.value = 1;
+    await fetchListCustomer(true);
+  }
+  if (name === 'employee') {
+    currentPageEmployee.value = 1;
+    await fetchListEmployee(true);
+  }
+  flowStore.rotate();
+});
+
+const { fetchList } = customerStore;
 
-const inputSearch = ref<string>();
 const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   label: t('all'),
   value: 'all',
@@ -135,24 +164,17 @@ const fieldSelected = ref<
 const splitPercent = ref(15);
 const gridView = ref(false);
 const statsEmployee = ref(0);
-const statsEmployeeGender = ref<{ male: number; female: number }>({
-  male: 0,
-  female: 0,
-});
-
 const hideStat = ref(false);
-const branchOption = ref<{ id: string; name: string }[]>();
+
+const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
+
 const statusToggle = ref<boolean>(false);
-const infoDrawer = ref(false);
-const infoDrawerEdit = ref(false);
-const isMainPage = ref<boolean>(true);
 const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
   PERS: 0,
 });
 const currentCustomerId = ref<string>('');
 const currentCustomer = ref<Customer>();
-const statBranchNo = ref<number>(0);
 
 const currentBranch = ref<{ name: string; code: string }>({
   name: '',
@@ -169,11 +191,6 @@ const currentPageEmployee = ref<number>(1);
 const maxPageEmployee = ref<number>(1);
 
 const currentBranchId = ref<string>('');
-const currentCustomerName = ref<string>('');
-const currentCustomerUrlImage = ref<string | null>(null);
-const genderSelector = ref<string>('');
-
-const currentStatus = ref<Status | 'All'>('All');
 
 const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
 const listEmployee = ref<Employee[]>([]);
@@ -190,7 +207,6 @@ const fieldCustomer = ref([
 ]);
 
 const infoDrawerBranch = ref<boolean>(false);
-const selectorLabel = ref<string>('EMPLOYER');
 const customerType = ref<CustomerType>('CORP');
 const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
@@ -206,10 +222,7 @@ function deleteCustomerById(id: string) {
     action: async () => {
       await customerStore.deleteById(id);
 
-      const resultList = await fetchList({ includeBranch: true });
-
-      if (resultList) listCustomer.value = resultList.result;
-      infoDrawer.value = false;
+      await fetchListCustomer(true);
       flowStore.rotate();
     },
     cancel: () => {},
@@ -217,7 +230,7 @@ function deleteCustomerById(id: string) {
 }
 
 async function fetchListOfOptionBranch() {
-  if (branchOption.value) return;
+  if (registerAbleBranchOption.value) return;
 
   const uid = getUserId();
   const role = getRole();
@@ -226,10 +239,12 @@ async function fetchListOfOptionBranch() {
 
   if (role?.includes('system')) {
     const result = await userBranchStore.fetchListOptionBranch();
-    if (result && result.total > 0) branchOption.value = result.result;
+    if (result && result.total > 0)
+      registerAbleBranchOption.value = result.result;
   } else {
     const result = await userBranchStore.fetchListMyBranch(uid);
-    if (result && result.total > 0) branchOption.value = result.result;
+    if (result && result.total > 0)
+      registerAbleBranchOption.value = result.result;
   }
 
   // TODO: Assign (first) branch of the user as register branch of the data
@@ -256,13 +271,13 @@ async function fetchListCustomer(fetchStats = false) {
   }
 
   if (fetchStats) {
-    statsCustomerType.value = await getStatsCustomer().then((value) =>
-      value ? value : { CORP: 0, PERS: 0 },
-    );
+    statsCustomerType.value = await customerStore
+      .getStatsCustomer()
+      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
   }
 }
 
-async function fetchListEmployee() {
+async function fetchListEmployee(fetchStats = false) {
   const resultListEmployee = await employeeStore.fetchList({
     page: currentPageEmployee.value,
     pageSize: pageSize.value,
@@ -273,7 +288,6 @@ async function fetchListEmployee() {
           ? 'ACTIVE'
           : 'INACTIVE',
     query: inputSearch.value,
-    gender: genderSelector.value,
   });
   if (resultListEmployee) {
     maxPageEmployee.value = Math.ceil(
@@ -281,6 +295,8 @@ async function fetchListEmployee() {
     );
     listEmployee.value = resultListEmployee.result;
   }
+
+  if (fetchStats) statsEmployee.value = await employeeStore.getStatsEmployee();
 }
 
 async function triggerChangeStatus(id: string, status: string) {
@@ -319,8 +335,7 @@ async function toggleStatusEmployee(id: string, status: boolean) {
 }
 
 async function toggleStatusCustomer(id: string, status: boolean) {
-  await editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
-
+  await customerStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
   await fetchListCustomer();
   flowStore.rotate();
 }
@@ -350,62 +365,6 @@ async function openHistory(id: string) {
   employeeHistoryDialog.value = true;
 }
 
-async function fetchListStatsEmployeeGender() {
-  const resultStatsEmployeeGender = await employeeStore.getStatsEmployeeGender({
-    query: inputSearch.value,
-    status:
-      currentStatus.value === 'All'
-        ? undefined
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-  });
-
-  if (resultStatsEmployeeGender) {
-    if (genderSelector.value === 'male') {
-      statsEmployeeGender.value.male = resultStatsEmployeeGender.male;
-      return;
-    }
-    if (genderSelector.value === 'female') {
-      statsEmployeeGender.value.female = resultStatsEmployeeGender.female;
-      return;
-    }
-    statsEmployeeGender.value = resultStatsEmployeeGender;
-  }
-}
-
-onMounted(async () => {
-  utilsStore.currentTitle.title = 'customerManagement';
-  utilsStore.currentTitle.path = [
-    {
-      text: 'customerManagementCaption',
-      handler: () => {
-        isMainPage.value = true;
-        currentCustomerUrlImage.value = null;
-      },
-    },
-  ];
-  gridView.value = $q.screen.lt.md ? true : false;
-
-  const resultStatsEmployee = await employeeStore.getStatsEmployee();
-  if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
-
-  await fetchListStatsEmployeeGender();
-
-  const resultListEmployee = await employeeStore.fetchList({
-    page: 1,
-    pageSize: pageSize.value,
-  });
-
-  if (resultListEmployee) {
-    maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSize.value,
-    );
-    listEmployee.value = resultListEmployee.result;
-  }
-  flowStore.rotate();
-});
-
 watch(locale, () => {
   fieldSelectedCustomer.value = {
     label: `${fieldSelectedCustomer.value.label}`,
@@ -432,64 +391,17 @@ watch(fieldSelectedCustomer, async () => {
 
 // TODO: When in employee form, if select address same as customer then auto fill
 
-watch(genderSelector, async () => {
-  await fetchListEmployee();
-  await fetchListStatsEmployeeGender();
-  flowStore.rotate();
-});
-
-watch(selectorLabel, async () => {
-  if (inputSearch.value) inputSearch.value = undefined;
-  if (selectorLabel.value === 'EMPLOYEE') {
-    await fetchListEmployee();
-    await fetchListStatsEmployeeGender();
-  } else {
-    await fetchListCustomer();
-  }
-});
-
-watch([inputSearch, currentStatus], async () => {
-  if (selectorLabel.value === 'EMPLOYEE') {
-    currentPageEmployee.value = 1;
-    await fetchListEmployee();
-    await fetchListStatsEmployeeGender();
-  } else {
-    currentPageCustomer.value = 1;
-    await fetchListCustomer();
-  }
-  flowStore.rotate();
-});
-
 watch(
   () => $q.screen.lt.md,
   () => $q.screen.lt.md && (gridView.value = true),
 );
-
-watch(isMainPage, () => {
-  const tmp: typeof utilsStore.currentTitle.path = [
-    {
-      text: 'customerManagementCaption',
-      handler: () => {
-        isMainPage.value = true;
-        currentCustomerUrlImage.value = null;
-        // clearForm();
-      },
-    },
-  ];
-
-  if (isMainPage.value === false) {
-    tmp.push({ text: currentCustomerName.value || '' });
-  }
-
-  utilsStore.currentTitle.path = tmp;
-});
 </script>
 
 <template>
   <ButtonAddComponent style="z-index: 999">
-    <div v-if="isMainPage">
+    <div v-if="$route.name === 'CustomerManagement'">
       <q-fab-action
-        v-if="selectorLabel === 'EMPLOYER' || !selectorLabel"
+        v-if="currentTab === 'employer'"
         id="add-customer-legal-entity"
         style="color: white; background-color: hsla(var(--violet-11-hsl))"
         @click=""
@@ -500,7 +412,7 @@ watch(isMainPage, () => {
         label-position="left"
       />
       <q-fab-action
-        v-if="selectorLabel === 'EMPLOYER' || !selectorLabel"
+        v-if="currentTab === 'employer'"
         id="add-customer-natural-person"
         :label="$t('add') + ' ' + $t('customerNaturalPerson')"
         external-label
@@ -511,7 +423,7 @@ watch(isMainPage, () => {
         icon="mdi-account-plus"
       />
       <q-fab-action
-        v-if="selectorLabel === 'EMPLOYEE' || !selectorLabel"
+        v-if="currentTab === 'employee'"
         :label="$t('add') + ' ' + $t('EMPLOYEE')"
         external-label
         id="add-employee"
@@ -556,7 +468,7 @@ watch(isMainPage, () => {
           "
         >
           {{
-            selectorLabel === 'EMPLOYER'
+            currentTab === 'employer'
               ? listCustomer?.length
               : listEmployee.length
           }}
@@ -585,7 +497,7 @@ watch(isMainPage, () => {
                 labelI18n
                 :branch="
                   customerStats &&
-                  (selectorLabel === 'EMPLOYER'
+                  (currentTab === 'employer'
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
@@ -753,8 +665,7 @@ watch(isMainPage, () => {
                 name="employer"
                 id="tab-employer"
                 @click="
-                  async () => {
-                    selectorLabel = 'EMPLOYER';
+                  () => {
                     currentPageCustomer = 1;
                     inputSearch = '';
                     currentStatus = 'All';
@@ -775,8 +686,7 @@ watch(isMainPage, () => {
                 name="employee"
                 id="tab-employee"
                 @click="
-                  async () => {
-                    selectorLabel = 'EMPLOYEE';
+                  () => {
                     currentPageEmployee = 1;
                     inputSearch = '';
                     currentStatus = 'All';
@@ -811,7 +721,7 @@ watch(isMainPage, () => {
               class="column q-pa-md surface-1 full-height full-width"
               style="gap: var(--size-1)"
             >
-              <template v-if="selectorLabel === 'EMPLOYER'">
+              <template v-if="currentTab === 'employer'">
                 <q-item
                   v-close-popup
                   clickable
@@ -852,7 +762,7 @@ watch(isMainPage, () => {
                 v-if="
                   listCustomer &&
                   statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
-                  selectorLabel === 'EMPLOYER'
+                  currentTab === 'employer'
                 "
               >
                 <div
@@ -1045,23 +955,7 @@ watch(isMainPage, () => {
                                   dense
                                   class="row q-py-sm"
                                   style="white-space: nowrap"
-                                  @click="
-                                    () => {
-                                      if (!listCustomer) return;
-
-                                      customerType = props.row.customerType;
-                                      const { branch, ...payload } = props.row;
-                                      currentCustomer = payload;
-
-                                      currentCustomerId = props.row.id;
-
-                                      // assignFormData(props.row.id);
-
-                                      infoDrawerEdit = true;
-
-                                      // openDialogInputForm('INFO', props.row.id);
-                                    }
-                                  "
+                                  @click="() => {}"
                                 >
                                   <q-icon
                                     name="mdi-pencil-outline"
@@ -1181,47 +1075,13 @@ watch(isMainPage, () => {
                           ]"
                           :disabled="props.row.status === 'INACTIVE'"
                           @history="openHistory(props.row.id)"
-                          @update-card="
-                            () => {
-                              if (!listCustomer) return;
-
-                              customerType = props.row.customerType;
-                              const { branch, ...payload } = props.row;
-                              currentCustomer = payload;
-
-                              currentCustomerId = props.row.id;
-
-                              // assignFormData(props.row.id);
-
-                              infoDrawerEdit = true;
-                              // openDialogInputForm('INFO', props.row.id);
-                            }
-                          "
+                          @update-card="() => {}"
                           @enter-card="
-                            () => {
-                              currentCustomerName = props.row.customerName;
-                              customerType = props.row.customerType;
-                              currentCustomerUrlImage = props.row.imageUrl;
-                              currentCustomerId = props.row.id;
-
-                              const { branch, ...payload } = props.row;
-                              currentCustomer = payload;
-                              statBranchNo =
-                                branch[branch.length - 1].branchNo + 1;
-                              isMainPage = false;
-                            }
-                          "
-                          @view-card="
-                            () => {
-                              if (!listCustomer) return;
-                              customerType = props.row.customerType;
-                              const { branch, ...payload } = props.row;
-                              currentCustomer = payload;
-                              currentCustomerId = props.row.id;
-                              // assignFormData(props.row.id);
-                              // openDialogInputForm('INFO', props.row.id);
-                            }
+                            $router.push(
+                              `/customer-management/${props.row.id}/branch`,
+                            )
                           "
+                          @view-card=""
                           @delete-card="deleteCustomerById(props.row.id)"
                           @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)
@@ -1301,9 +1161,7 @@ watch(isMainPage, () => {
               <!-- employee -->
               <template
                 v-if="
-                  listEmployee &&
-                  statsEmployee > 0 &&
-                  selectorLabel === 'EMPLOYEE'
+                  listEmployee && statsEmployee > 0 && currentTab === 'employee'
                 "
               >
                 <div
@@ -1734,19 +1592,19 @@ watch(isMainPage, () => {
               <template
                 v-if="
                   (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
-                    selectorLabel === 'EMPLOYER') ||
-                  (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
+                    currentTab === 'employer') ||
+                  (statsEmployee === 0 && currentTab === 'employee')
                 "
               >
                 <TooltipComponent
                   class="self-end q-ma-md"
                   :title="
-                    selectorLabel === 'EMPLOYER'
+                    currentTab === 'employer'
                       ? 'customerEmployerTooltipTitle'
                       : 'customerEmployeeTooltipTitle'
                   "
                   :caption="
-                    selectorLabel === 'EMPLOYER'
+                    currentTab === 'employer'
                       ? 'customerEmployerTooltipCaption'
                       : 'customerEmployeeTooltipCaption'
                   "
@@ -1759,7 +1617,7 @@ watch(isMainPage, () => {
                 >
                   <AddButton
                     :label="
-                      selectorLabel === 'EMPLOYER'
+                      currentTab === 'employer'
                         ? 'customerEmployerAdd'
                         : 'customerEmployeeAdd'
                     "
@@ -1781,18 +1639,9 @@ watch(isMainPage, () => {
         v-model:mode-view="gridView"
         @back="$router.push('/customer-management')"
         @view-detail="
-          async (v) => {
+          async (value) => {
             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);
-            }
-            infoDrawerBranch = true;
+            // TODO: Assign data to form
           }
         "
         v-model:branch="branch"