diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index d8f231cf..4786554d 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,9 +1,20 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
+import { productTreeDecoration } from './constants';
+import useProductServiceStore from 'src/stores/product-service';
+
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+
 import QuotationForm from './QuotationForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 
-const isOpen = ref(true);
+const dialog = ref(true);
+
 const nodes = ref([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
@@ -50,33 +61,53 @@ const nodes = ref([
     ],
   },
 ]);
+const productServiceStore = useProductServiceStore();
+
+type ProductGroupId = string;
+
+const productGroup = ref<ProductGroup[]>([]);
+const productList = ref<Partial<Record<ProductGroupId, ProductList[]>>>({});
+const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
+
+onMounted(async () => {
+  const ret = await productServiceStore.fetchListProductService({
+    page: 1,
+    pageSize: 9999,
+  });
+  if (ret) productGroup.value = ret.result;
+});
+
+async function getAllProduct(
+  groupId: string,
+  opts?: { force?: false; page?: number; pageSize?: number },
+) {
+  if (!opts?.force && productList.value[groupId] !== undefined) return;
+  const ret = await productServiceStore.fetchListProduct({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+  });
+  if (ret) productList.value[groupId] = ret.result;
+}
+
+async function getAllService(
+  groupId: string,
+  opts?: { force?: false; page?: number; pageSize?: number },
+) {
+  if (!opts?.force && serviceList.value[groupId] !== undefined) return;
+  const ret = await productServiceStore.fetchListService({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+  });
+  if (ret) serviceList.value[groupId] = ret.result;
+}
 </script>
 
 <template>
   <div class="surface-1 rounded full-height q-pa-md">
     <TreeView
+      :decoration="productTreeDecoration"
       v-model:nodes="nodes"
       expandable
-      :decoration="[
-        {
-          level: 0,
-          icon: 'mdi-folder-outline',
-          bg: 'hsla(var(--pink-6-hsl)/0.1)',
-          fg: 'var(--pink-6)',
-        },
-        {
-          level: 1,
-          icon: 'mdi-server-outline',
-          bg: 'hsla(var(--orange-5-hsl)/0.1)',
-          fg: 'var(--orange-5)',
-        },
-        {
-          level: 2,
-          icon: 'mdi-shopping-outline',
-          bg: 'hsla(var(--teal-10-hsl)/0.1)',
-          fg: 'var(--teal-10)',
-        },
-      ]"
     />
   </div>
   <!-- <ImageUploadDialog
@@ -124,7 +155,7 @@ const nodes = ref([
   >
     My Menu
   </div> -->
-  <QuotationForm v-model:dialog-state="isOpen" readonly />
+  <QuotationForm v-model:dialog-state="dialog" readonly />
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/constants.ts b/src/pages/05_quotation/constants.ts
new file mode 100644
index 00000000..61634565
--- /dev/null
+++ b/src/pages/05_quotation/constants.ts
@@ -0,0 +1,20 @@
+export const productTreeDecoration = [
+  {
+    level: 0,
+    icon: 'mdi-folder-outline',
+    bg: 'hsla(var(--pink-6-hsl)/0.1)',
+    fg: 'var(--pink-6)',
+  },
+  {
+    level: 1,
+    icon: 'mdi-server-outline',
+    bg: 'hsla(var(--orange-5-hsl)/0.1)',
+    fg: 'var(--orange-5)',
+  },
+  {
+    level: 2,
+    icon: 'mdi-shopping-outline',
+    bg: 'hsla(var(--teal-10-hsl)/0.1)',
+    fg: 'var(--teal-10)',
+  },
+];