diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index c8d5821e..ab4efa70 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -14,8 +14,8 @@ const branch = ref<CustomerBranch[]>();
 
 const prop = withDefaults(
   defineProps<{
-    color: 'purple' | 'green';
-    customerId: string;
+    color?: 'purple' | 'green';
+    customerId?: string;
   }>(),
   {
     color: 'green',
@@ -123,15 +123,8 @@ onMounted(async () => {
       </div>
     </div>
     <div class="row q-pa-lg q-col-gutter-xl">
-<<<<<<< HEAD
-      <div v-for="i in 2" class="col-4">
-        <BranchCardCustomer
-          @view-detail="$emit('viewDetail')"
-        ></BranchCardCustomer>
-=======
-      <div v-for="(br, i) in branch" class="col-4" :key="i">
-        <BranchCardCustomer :data="br"></BranchCardCustomer>
->>>>>>> 10383c3 (feat: fetchListById และ byค่า)
+      <div v-for="(br, i) in branch" :key="i" class="col-4">
+        <BranchCardCustomer :data="br" @view-detail="$emit('viewDetail')" />
       </div>
     </div>
   </AppBox>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 0535bb40..f9d0b084 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2,6 +2,9 @@
 import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
+import { Pagination } from 'src/stores/types';
+import useCustomerStore from 'src/stores/customer';
+
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
@@ -21,11 +24,11 @@ import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
-import { CustomerCreate } from 'stores/customer/types';
-import useCustomerStore from 'src/stores/customer';
+import { CustomerCreate, CustomerStats, Customer } from 'stores/customer/types';
+import { onMounted } from 'vue';
 
 const userCustomer = useCustomerStore();
-const { create } = userCustomer;
+const { create, getStatsCustomer, fetchList } = userCustomer;
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   customerType: 'CORP',
@@ -57,8 +60,8 @@ const formData = ref<CustomerCreate>({
       jobPositionEN: '',
       jobDescription: '',
       saleEmployee: '',
-      payDate: '',
-      wageDate: '',
+      payDate: new Date(),
+      wageRate: 0,
     },
   ],
   image: new File([''], 'dummy.jpg'),
@@ -72,6 +75,8 @@ const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
 const isMainPage = ref<boolean>(true);
+const statsCustomerType = ref<CustomerStats>();
+const currentCustomerId = ref<string>('');
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -93,6 +98,8 @@ const inputFile = (() => {
   return element;
 })();
 
+const listCustomer = ref<Pagination<Customer[]>>();
+
 const itemCard = [
   {
     icon: 'mdi:office-building',
@@ -125,7 +132,12 @@ const dialogInputForm = ref<boolean>(false);
 
 const selectorLabel = ref<string>('');
 const selectorList = computed(() => [
-  { label: 'EMPLOYER', count: 0 },
+  {
+    label: 'EMPLOYER',
+    count:
+      (statsCustomerType.value?.CORP ?? 0) +
+      (statsCustomerType.value?.PERS ?? 0),
+  },
   { label: 'WORKER', count: 0 },
 ]);
 
@@ -191,8 +203,8 @@ function clearForm() {
         jobPositionEN: '',
         jobDescription: '',
         saleEmployee: '',
-        payDate: '',
-        wageDate: '',
+        payDate: new Date(),
+        wageRate: 0,
       },
     ],
     image: new File([''], 'dummy.jpg'),
@@ -212,6 +224,18 @@ async function onSubmit() {
 function undo() {
   infoDrawerEdit.value = false;
 }
+
+onMounted(async () => {
+  const resultStats = await getStatsCustomer();
+
+  const resultList = await fetchList();
+
+  if (resultStats) statsCustomerType.value = resultStats;
+
+  if (resultList) listCustomer.value = resultList;
+
+  console.log(listCustomer.value);
+});
 </script>
 
 <template>
@@ -251,7 +275,10 @@ function undo() {
               labelI18n
               :branch="
                 customerStats.map((v) => ({
-                  count: v.count,
+                  count:
+                    v.name === 'customerLegalEntity'
+                      ? statsCustomerType?.CORP ?? 0
+                      : statsCustomerType?.PERS ?? 0,
                   label: v.name,
                   color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
                 }))
@@ -293,57 +320,44 @@ function undo() {
           :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
         >
           <UsersDetailCardComponent
-            color="purple"
+            v-for="i in listCustomer?.result"
+            :key="i.id"
+            :color="i.customerType === 'CORP' ? 'purple' : 'green'"
             :metadata="{ id: '1', disabled: false }"
             :list="{
-              id: '1',
-              type: 'customerLegalEntity',
-              name: 'เจมส์ บอน',
-              code: 'HQ007',
+              id: i.id,
+              imageUrl: i.imageUrl,
+              type:
+                i.customerType === 'CORP'
+                  ? 'customerLegalEntity'
+                  : 'customerNaturalPerson',
+              name: i.customerName === '' ? '-' : i.customerName,
+              code: i.code,
+
               detail: [
                 {
-                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                  value: 'บริษัทลับ',
+                  label: 'customerNameTh',
+                  value: i.customerName,
                 },
                 {
-                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                  value: 'บริษัทลับ',
+                  label: 'customerNameEn',
+                  value: i.customerNameEN,
                 },
               ],
             }"
-            @enter-card="isMainPage = false"
-            @view-card="openDialogInputForm"
-          />
-          <UsersDetailCardComponent
-            color="green"
-            :metadata="{ id: '1', disabled: false }"
-            :list="{
-              id: '2',
-              type: 'customerNaturalPerson',
-              name: 'ขอบใจ ขอบใจ',
-              code: 'HQ006',
-              detail: [
-                {
-                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                  value: 'บริษัทเฟรบเป้',
-                },
-                {
-                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                  value: 'บริษัทเฟรบเป้',
-                },
-              ],
-            }"
-            @enter-card="console.log('enter')"
+            @enter-card="
+              () => {
+                currentCustomerId = i.id;
+                isMainPage = false;
+              }
+            "
             @view-card="openDialogInputForm"
           />
         </div>
       </AppBox>
     </div>
     <div v-else>
-      <CustomerInfoComponent
-        @back="isMainPage = true"
-        @viewDetail="console.log('view detail')"
-      />
+      <CustomerInfoComponent @back="isMainPage = true" />
     </div>
   </div>
 
@@ -464,7 +478,7 @@ function undo() {
                 formData.customerBranch[indexTab].saleEmployee
               "
               v-model:pay-date="formData.customerBranch[indexTab].payDate"
-              v-model:wage-date="formData.customerBranch[indexTab].wageDate"
+              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
               separator
               dense
               outlined