diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2b6216e9..e7502ebc 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { getUserId, getRole } from 'src/services/keycloak';
-import { Status } from 'stores/types';
+
+import { calculateAge, dateFormat } from 'src/utils/datetime';
 
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-
-import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
-import PersonCard from 'components/home/PersonCard.vue';
-import StatCardComponent from 'components/StatCardComponent.vue';
-import TooltipComponent from 'components/TooltipComponent.vue';
-import AddButton from 'components/AddButton.vue';
-import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
-import NoData from 'components/NoData.vue';
-import PaginationComponent from 'src/components/PaginationComponent.vue';
-
+import useUtilsStore, { dialog } from 'stores/utils';
+import useFlowStore from 'stores/flow';
+import { Status } from 'stores/types';
 import {
   CustomerStats,
   Customer,
@@ -24,23 +19,49 @@ import {
   CustomerType,
 } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
-import { onMounted } from 'vue';
 
-import useUtilsStore, { dialog } from 'stores/utils';
-import { calculateAge, dateFormat } from 'src/utils/datetime';
-import { useI18n } from 'vue-i18n';
-import useFlowStore from 'stores/flow';
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import PersonCard from 'components/home/PersonCard.vue';
+import StatCardComponent from 'components/StatCardComponent.vue';
+import TooltipComponent from 'components/TooltipComponent.vue';
+import AddButton from 'components/AddButton.vue';
+import NoData from 'components/NoData.vue';
+import PaginationComponent from 'components/PaginationComponent.vue';
+
+import CustomerInfoComponent from './components/CustomerBranch.vue';
 import { columnsCustomer, columnsEmployee } from './constant';
+import { useRoute, useRouter } from 'vue-router';
 
-const $q = useQuasar();
 const { t, locale } = useI18n();
-const utilsStore = useUtilsStore();
-const userCustomer = useCustomerStore();
-const userBranchStore = useMyBranchStore();
-
-const { getStatsCustomer, fetchList, editById } = userCustomer;
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
 const flowStore = useFlowStore();
+const utilsStore = useUtilsStore();
+const customerStore = useCustomerStore();
+const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
+
+async function init() {
+  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');
+  }
+
+  flowStore.rotate();
+}
+watch(() => route.name, init);
+onMounted(init);
+
+const { getStatsCustomer, fetchList, editById } = customerStore;
 const currentTab = ref('employer');
 
 const inputSearch = ref<string>();
@@ -111,8 +132,8 @@ const fieldSelected = ref<
   'action',
 ]);
 
-const splitterModel = ref(15);
-const modeView = ref(false);
+const splitPercent = ref(15);
+const gridView = ref(false);
 const statsEmployee = ref(0);
 const statsEmployeeGender = ref<{ male: number; female: number }>({
   male: 0,
@@ -121,7 +142,6 @@ const statsEmployeeGender = ref<{ male: number; female: number }>({
 
 const hideStat = ref(false);
 const branchOption = ref<{ id: string; name: string }[]>();
-const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
@@ -131,7 +151,6 @@ const statsCustomerType = ref<CustomerStats>({
   PERS: 0,
 });
 const currentCustomerId = ref<string>('');
-const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
 const statBranchNo = ref<number>(0);
 
@@ -171,18 +190,11 @@ 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[]>();
 
-async function triggerCreate(type: CustomerType) {
-  // TODO: Create customer of type
-}
-
 function deleteCustomerById(id: string) {
   dialog({
     color: 'negative',
@@ -192,7 +204,7 @@ function deleteCustomerById(id: string) {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
-      await userCustomer.deleteById(id);
+      await customerStore.deleteById(id);
 
       const resultList = await fetchList({ includeBranch: true });
 
@@ -223,7 +235,7 @@ async function fetchListOfOptionBranch() {
   // TODO: Assign (first) branch of the user as register branch of the data
 }
 
-async function fetchListCustomer() {
+async function fetchListCustomer(fetchStats = false) {
   const resultList = await fetchList({
     includeBranch: true,
     page: currentPageCustomer.value,
@@ -240,9 +252,14 @@ async function fetchListCustomer() {
   if (resultList) {
     currentPageCustomer.value = resultList.page;
     maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-
     listCustomer.value = resultList.result;
   }
+
+  if (fetchStats) {
+    statsCustomerType.value = await getStatsCustomer().then((value) =>
+      value ? value : { CORP: 0, PERS: 0 },
+    );
+  }
 }
 
 async function fetchListEmployee() {
@@ -308,7 +325,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   flowStore.rotate();
 }
 
-async function onDelete(id: string) {
+async function deleteEmployeeById(id: string) {
   if (!id) return;
   dialog({
     color: 'negative',
@@ -368,32 +385,7 @@ onMounted(async () => {
       },
     },
   ];
-  modeView.value = $q.screen.lt.md ? true : false;
-
-  const resultStats = await getStatsCustomer();
-
-  const resultList = await fetchList({
-    includeBranch: true,
-    page: 1,
-    pageSize: pageSize.value,
-  });
-
-  if (resultStats) statsCustomerType.value = resultStats;
-  if (resultList) listCustomer.value = resultList.result;
-
-  if (
-    (statsCustomerType.value?.CORP ?? 0) +
-      (statsCustomerType.value?.PERS ?? 0) >
-    0
-  ) {
-    selectorLabel.value = 'EMPLOYER';
-  }
-
-  if (resultList) {
-    currentPageCustomer.value = resultList.page;
-    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-    listCustomer.value = resultList.result;
-  }
+  gridView.value = $q.screen.lt.md ? true : false;
 
   const resultStatsEmployee = await employeeStore.getStatsEmployee();
   if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
@@ -470,7 +462,7 @@ watch([inputSearch, currentStatus], async () => {
 
 watch(
   () => $q.screen.lt.md,
-  () => $q.screen.lt.md && (modeView.value = true),
+  () => $q.screen.lt.md && (gridView.value = true),
 );
 
 watch(isMainPage, () => {
@@ -500,7 +492,7 @@ watch(isMainPage, () => {
         v-if="selectorLabel === 'EMPLOYER' || !selectorLabel"
         id="add-customer-legal-entity"
         style="color: white; background-color: hsla(var(--violet-11-hsl))"
-        @click="triggerCreate('CORP')"
+        @click=""
         padding="xs"
         icon="mdi-office-building"
         :label="$t('add') + ' ' + $t('customerLegalEntity')"
@@ -513,7 +505,7 @@ watch(isMainPage, () => {
         :label="$t('add') + ' ' + $t('customerNaturalPerson')"
         external-label
         label-position="left"
-        @click="triggerCreate('PERS')"
+        @click=""
         style="color: white; background-color: hsla(var(--teal-10-hsl))"
         padding="xs"
         icon="mdi-account-plus"
@@ -533,16 +525,14 @@ watch(isMainPage, () => {
     <div v-else>
       <q-fab-action
         id="add-branch"
-        :style="`color: white; background-color: ${customerType === 'CORP' ? 'hsla(var(--violet-11-hsl))' : 'hsla(var(--pink-6-hsl))'}`"
-        @click="
-          () => {
-            indexTab = 0;
-
-            console.log(statBranchNo);
-
-            dialogInputCustomerBranchForm = true;
-          }
-        "
+        :style="{
+          color: 'white',
+          'background-color':
+            customerType === 'CORP'
+              ? 'hsla(var(--violet-11-hsl))'
+              : 'hsla(var(--pink-6-hsl))',
+        }"
+        @click=""
         padding="xs"
         icon="mdi-office-building"
         :label="$t('formDialogTitleCreateSubBranch')"
@@ -553,7 +543,7 @@ watch(isMainPage, () => {
   </ButtonAddComponent>
 
   <div class="column full-height no-wrap">
-    <div v-if="isMainPage" class="column full-height">
+    <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
       <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
         {{ $t('dataSum') }}
         <q-badge
@@ -668,7 +658,7 @@ watch(isMainPage, () => {
                 option-value="value"
                 option-label="label"
                 class="col"
-                :class="{ 'offset-md-5': modeView }"
+                :class="{ 'offset-md-5': gridView }"
                 map-options
                 emit-value
                 :hide-dropdown-icon="$q.screen.lt.sm"
@@ -681,7 +671,7 @@ watch(isMainPage, () => {
               <q-select
                 lazy-rules="ondemand"
                 id="select-field"
-                v-if="modeView === false"
+                v-if="gridView === false"
                 for="select-field"
                 class="q-ml-sm col"
                 :options="
@@ -703,7 +693,7 @@ watch(isMainPage, () => {
 
               <q-btn-toggle
                 id="btn-mode"
-                v-model="modeView"
+                v-model="gridView"
                 dense
                 class="no-shadow bordered rounded surface-1 q-ml-sm"
                 :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
@@ -721,10 +711,10 @@ watch(isMainPage, () => {
                     class="q-px-sm q-py-xs rounded"
                     :style="{
                       color: $q.dark.isActive
-                        ? modeView
+                        ? gridView
                           ? '#C9D3DB '
                           : '#787B7C'
-                        : modeView
+                        : gridView
                           ? '#787B7C'
                           : '#C9D3DB',
                     }"
@@ -738,10 +728,10 @@ watch(isMainPage, () => {
                     size="16px"
                     :style="{
                       color: $q.dark.isActive
-                        ? modeView === false
+                        ? gridView === false
                           ? '#C9D3DB'
                           : '#787B7C'
-                        : modeView === false
+                        : gridView === false
                           ? '#787B7C'
                           : '#C9D3DB',
                     }"
@@ -810,7 +800,7 @@ watch(isMainPage, () => {
         <!-- body -->
 
         <q-splitter
-          v-model="splitterModel"
+          v-model="splitPercent"
           :limits="[0, 100]"
           class="col full-width"
           before-class="overflow-hidden"
@@ -880,7 +870,7 @@ watch(isMainPage, () => {
                   <q-table
                     flat
                     bordered
-                    :grid="modeView"
+                    :grid="gridView"
                     :rows="listCustomer"
                     :columns="columnsCustomer"
                     class="full-width"
@@ -916,19 +906,9 @@ watch(isMainPage, () => {
                         :id="`row-table-${props.row.customerName}`"
                         :props="props"
                         @click="
-                          () => {
-                            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;
-                          }
+                          $router.push(
+                            `/customer-management/${props.row.id}/branch`,
+                          )
                         "
                       >
                         <q-td v-if="fieldSelected.includes('customerName')">
@@ -1341,7 +1321,7 @@ watch(isMainPage, () => {
                   <q-table
                     flat
                     bordered
-                    :grid="modeView"
+                    :grid="gridView"
                     :rows="listEmployee"
                     :columns="columnsEmployee"
                     class="full-width"
@@ -1586,7 +1566,7 @@ watch(isMainPage, () => {
                                       props.row.status !== 'CREATED',
                                   }"
                                   style="white-space: nowrap"
-                                  @click="onDelete(props.row.id)"
+                                  @click="deleteEmployeeById(props.row.id)"
                                 >
                                   <q-icon
                                     name="mdi-trash-can-outline"
@@ -1676,7 +1656,7 @@ watch(isMainPage, () => {
                           @history="openHistory(props.row.id)"
                           @update-card=""
                           @enter-card=""
-                          @delete-card="onDelete(props.row.id)"
+                          @delete-card="deleteEmployeeById(props.row.id)"
                           @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)
                           "
@@ -1792,21 +1772,15 @@ watch(isMainPage, () => {
         </q-splitter>
       </div>
     </div>
-    <div class="col column" v-else>
+
+    <div class="col column" v-if="$route.name === 'CustomerBranchManagement'">
       <CustomerInfoComponent
-        :customer-type="customerType"
-        :customer-id="currentCustomerId"
-        v-model:mode-view="modeView"
-        @back="
-          () => {
-            isMainPage = true;
-            statBranchNo = 1;
-            indexTab = 0;
-            currentCustomerUrlImage = null;
-            // clearForm();
-          }
-        "
-        @viewDetail="
+        v-if="currentCustomer"
+        :customer-id="currentCustomer.id"
+        :customer-type="currentCustomer.customerType"
+        v-model:mode-view="gridView"
+        @back="$router.push('/customer-management')"
+        @view-detail="
           async (v) => {
             await fetchListOfOptionBranch();
             currentBranchId = v.id;
@@ -1822,8 +1796,8 @@ watch(isMainPage, () => {
           }
         "
         v-model:branch="branch"
-        v-model:currentCustomerName="currentCustomerName"
-        v-model:currentCustomerUrlImage="currentCustomerUrlImage"
+        v-model:current-customer-name="currentCustomer.customerName"
+        v-model:current-customer-url-image="currentCustomer.imageUrl"
       />
     </div>
   </div>
diff --git a/src/pages/03_customer-management/components/Customer.vue b/src/pages/03_customer-management/components/Customer.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/pages/03_customer-management/components/CustomerBranch.vue
similarity index 97%
rename from src/components/03_customer-management/CustomerInfoComponent.vue
rename to src/pages/03_customer-management/components/CustomerBranch.vue
index b7e4b7df..68b048b4 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/pages/03_customer-management/components/CustomerBranch.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 
-import useCustomerStore from 'src/stores/customer';
-import useFlowStore from 'src/stores/flow';
-import useOptionStore from 'src/stores/options';
+import useCustomerStore from 'stores/customer';
+import useFlowStore from 'stores/flow';
+import useOptionStore from 'stores/options';
 
-import { Status } from 'src/stores/types';
-import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
+import { Status } from 'stores/types';
+import { CustomerBranch, CustomerType } from 'stores/customer/types';
 
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
-import PaginationComponent from 'src/components/PaginationComponent.vue';
+import PaginationComponent from 'components/PaginationComponent.vue';
 import NoData from 'components/NoData.vue';
 import { QTableProps } from 'quasar';
 
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index f34ca625..bd159bb8 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -53,7 +53,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
   const currentFormData = ref<CustomerCreate>(structuredClone(defaultFormData));
   const state = ref<{
-    dialogType: 'info' | 'edit';
+    dialogType: 'info' | 'create' | 'edit';
     dialogOpen: boolean;
     branchIndex: number;
     customerType: 'CORP' | "PERS"
@@ -123,6 +123,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
     currentFormData.value = structuredClone(resetCustomerData);
   }
 
+  // TODO: Submit function
+
   return {
     state,
     currentFormData,
@@ -135,3 +137,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
 export const useEmployeeForm = defineStore('form-employee', () => {
   return {};
 });
+
+export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
+
+})
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index e19c223d..6daa897c 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,12 +1,62 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import QuatationForm from './QuatationForm.vue';
+import SideMenu from 'src/components/SideMenu.vue';
+import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import { watch } from 'vue';
 
 const isOpen = ref(true);
+const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
+const file = ref<File | null>(null);
 </script>
 
 <template>
-  <QuatationForm v-model:dialogState="isOpen" />
+  <ImageUploadDialog
+    v-model:dialog-state="isOpen"
+    v-model:file="file"
+    ref="imageUploadDialog"
+    clear-button
+  >
+    <template #error>
+      <div style="display: flex; align-items: center; justify-content: center">
+        <h1>Fallback</h1>
+      </div>
+    </template>
+  </ImageUploadDialog>
+
+  <button @click="isOpen = !isOpen">Open</button>
+  <button @click="imageUploadDialog?.browse()">Click Me</button>
+  <div
+    style="
+      height: 100vh;
+      background: green;
+      width: 100%;
+      color: white;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    "
+    id="aaa"
+  >
+    My AAA
+  </div>
+  <div
+    style="
+      height: 100vh;
+      background: red;
+      width: 100%;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+    "
+    id="my-anchor"
+  >
+    My Menu
+  </div>
+  <QuatationForm v-model:dialog-state="isOpen" />
 </template>
 
 <style scoped></style>