diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index c3a3553e..dd37a96e 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -56,14 +56,16 @@ import PersonCard from 'src/components/shared/PersonCard.vue';
 import { useRouter } from 'vue-router';
 import ProductServiceForm from './ProductServiceForm.vue';
 
-const flowStore = useFlowStore();
-
 import {
   useCustomerForm,
   useEmployeeForm,
 } from 'src/pages/03_customer-management/form';
 import useCustomerStore from 'stores/customer';
+import { useQuotationStore } from 'src/stores/quotations';
+import QuotationView from './QuotationView.vue';
+import { watch } from 'vue';
 
+const flowStore = useFlowStore();
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   {
     main: [],
@@ -290,13 +292,65 @@ function convertToTree() {
   // NOTE: this is meant to be used inside getService() and getProduct() before return and after return
 }
 
+const quotationStore = useQuotationStore();
+const {
+  data: quotationData,
+  page: quotationPage,
+  pageSize: quotationPageSize,
+  pageMax: quotationPageMax,
+} = storeToRefs(quotationStore);
+
 onMounted(async () => {
-  const ret = await productServiceStore.fetchListProductService({
-    page: 1,
-    pageSize: 9999,
-  });
-  if (ret) productGroup.value = ret.result;
+  {
+    const ret = await productServiceStore.fetchListProductService({
+      page: 1,
+      pageSize: 9999,
+    });
+    if (ret) productGroup.value = ret.result;
+  }
+
+  {
+    const ret = await quotationStore.getQuotationList({
+      page: quotationPage.value,
+      pageSize: quotationPageSize.value,
+    });
+
+    if (ret) {
+      quotationData.value = ret.result;
+      quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
+    }
+  }
+
+  flowStore.rotate();
 });
+
+watch(
+  () => pageState.currentTab,
+  async () => {
+    const ret = await quotationStore.getQuotationList({
+      page: quotationPage.value,
+      pageSize: quotationPageSize.value,
+      payCondition:
+        pageState.currentTab !== 'all'
+          ? (
+              {
+                fullAmountCash: 'Full',
+                installmentsCash: 'Split',
+                fullAmountBill: 'BillFull',
+                installmentsBill: 'BillSplit',
+              } as const
+            )[pageState.currentTab]
+          : undefined,
+    });
+
+    if (ret) {
+      quotationData.value = ret.result;
+      quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
+    }
+
+    flowStore.rotate();
+  },
+);
 </script>
 
 <template>
@@ -536,7 +590,7 @@ onMounted(async () => {
         </nav>
         <!-- SEC: body content -->
         <article
-          v-if="true"
+          v-if="false"
           class="col surface-2 flex items-center justify-center"
         >
           <CreateButton
@@ -547,20 +601,28 @@ onMounted(async () => {
         </article>
         <article v-else class="col q-pa-md surface-2 scroll">
           <div class="row q-col-gutter-md">
-            <div v-for="n in 5" :key="n" class="col-md-4 col-12">
+            <div v-for="n in quotationData" :key="n.id" class="col-md-4 col-12">
               <QuotationCard
                 :type="
                   pageState.currentTab !== 'all'
                     ? pageState.currentTab
-                    : 'fullAmountCash'
+                    : {
+                        Full: 'fullAmountCash',
+                        Split: 'installmentsCash',
+                        BillFull: 'fullAmountBill',
+                        BillSplit: 'installmentsBill',
+                      }[n.payCondition]
                 "
-                code="QT240120S0002"
-                title="ชื่อใบเสนอราคา"
-                date="20/01/2024 16:00:01"
-                :amount="2"
-                customer-name="เลด้า สวนลุม"
-                reporter="สตีเฟ่น สมัคร"
-                :total-price="1500"
+                :code="n.code"
+                :title="n.workName"
+                :date="new Date(n.createdAt).toLocaleString()"
+                :amount="n.workerCount"
+                :customer-name="
+                  n.customerBranch.registerName ||
+                  `${n.customerBranch.firstName || '-'} ${n.customerBranch.lastName}`
+                "
+                :reporter="n.actorName"
+                :total-price="n.totalPrice"
                 @view="console.log('view')"
                 @edit="console.log('edit')"
                 @link="console.log('link')"
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index 1d9f83d9..4f558b70 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -10,6 +10,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
   const data = ref<Quotation[]>([]);
   const page = ref<number>(1);
   const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
 
   async function getQuotation(id: string) {
     const res = await api.get<QuotationFull>(`/quotation/${id}`);
@@ -19,8 +20,20 @@ export const useQuotationStore = defineStore('quotation-store', () => {
     return null;
   }
 
-  async function getQuotationList() {
-    const res = await api.get<PaginationResult<Quotation>>('/quotation');
+  async function getQuotationList(opts?: {
+    page?: number;
+    pageSize?: number;
+    payCondition?: 'Full' | 'Split' | 'BillFull' | 'BillSplit';
+  }) {
+    const params = new URLSearchParams();
+    for (const [k, v] of Object.entries(opts || {})) {
+      if (v !== undefined) params.append(k, v.toString());
+    }
+    const query = params.toString();
+
+    const res = await api.get<PaginationResult<Quotation>>(
+      `/quotation?${query}`,
+    );
     if (res.status < 400) {
       return res.data;
     }
@@ -57,6 +70,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
   return {
     data,
     page,
+    pageSize,
     pageMax,
     getQuotation,
     getQuotationList,
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index a07b6b98..185bfd47 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -1,6 +1,66 @@
 import { Status } from '../types';
 
 export type Quotation = {
+  customerBranch: {
+    customerCode?: string;
+    wageRateText: string;
+    wageRate: number;
+    payDateEN: string;
+    payDate: string;
+    jobDescription: string;
+    jobPosition: string;
+    businessType: string;
+    agent: string;
+    contactName: string;
+    officeTel: string;
+    contactTel: string;
+    email: string;
+    subDistrictId: string;
+    districtId: string;
+    provinceId: string;
+    streetEN: string;
+    street: string;
+    mooEN: string;
+    moo: string;
+    soiEN: string;
+    soi: string;
+    addressEN: string;
+    address: string;
+    employmentOfficeEN: string;
+    employmentOffice: string;
+    homeCode: string;
+    authorizedNameEN: string;
+    authorizedName: string;
+    authorizedCapital: string;
+    registerDate: string | Date | null;
+    registerNameEN: string;
+    registerName: string;
+    legalPersonNo: string;
+    citizenId: string;
+    birthDate: string;
+    gender: string;
+    lastNameEN: string;
+    lastName: string;
+    firstNameEN: string;
+    firstName: string;
+    namePrefix: string;
+    telephoneNo: string;
+    codeCustomer: string;
+    customerName: string;
+    updatedByUserId: string;
+    createdByUserId: string;
+    code: string;
+    statusOrder: 0;
+    customerId: string;
+    id: string;
+
+    status: Status;
+    createdBy: string | null;
+    createdAt: string;
+    updatedBy: string | null;
+    updatedAt: string;
+  };
+
   worker: {
     id: string;
     quotationId: string;