diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 0a7ee1ac..2ebbde06 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -23,6 +23,9 @@ const {
   createProductService,
 } = productServiceStore;
 
+import ItemCard from 'src/components/ItemCard.vue';
+import TotalProductComponent from 'src/components/04_product-service/TotalProductComponent.vue';
+
 const cardData = ref({
   title: 'งาน MCU',
   subtitle: 'G00000000001',
@@ -62,7 +65,9 @@ const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 const isType = ref<boolean>(false);
 const groupName = ref<string>('test');
-
+const dialogProductServiceType = ref<boolean>(false);
+const dialogTotalProduct = ref<boolean>(false);
+const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 const productGroup = ref<ProductGroup[]>();
 
 const formData = ref<ProductGroupCreate>({
@@ -76,6 +81,19 @@ async function submitType() {
   console.log(formData.value);
 }
 
+const itemCard = [
+  {
+    icon: 'mdi:server-network',
+    text: 'บริการ',
+    color: 'var(--orange-5)',
+  },
+  {
+    icon: 'mdi:shopping',
+    text: 'สินค้า',
+    color: 'var(--green-9)',
+  },
+];
+
 async function deleteProductById() {
   dialog({
     color: 'negative',
@@ -134,17 +152,36 @@ onMounted(async () => {
         @click="isType = false"
         class="q-mr-md"
       />
-      <div class="text-h6 text-weight-bold">
-        {{ $t('ProductAndServiceType') }}
+      <div class="text-h6 app-text-muted q-mr-sm">
+        {{ groupName }}
       </div>
       <div class="text-h6 app-text-muted q-mx-sm">/</div>
-      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
-        {{ groupName }}
+      <div class="text-h6 text-weight-bold">
+        {{ $t('ProductAndServiceType') }}
       </div>
     </div>
     <div v-else class="text-h6 text-weight-bold q-mb-md">
       {{ $t('ProductAndService') }}
+      // ปุ่มเลือกสร้าง
+      <q-btn
+        unelevated
+        @click="dialogProductServiceType = true"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+      // ปุ่มรวมสินค้าทั้งหมด
+      <q-btn
+        unelevated
+        @click="dialogTotalProduct = true"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
     </div>
+
     <AppBox bordered class="q-mb-md">
       <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
     </AppBox>
@@ -305,6 +342,49 @@ onMounted(async () => {
       </AppBox>
     </template>
   </DrawerInfo>
+
+  <FormDialog
+    v-model:modal="dialogProductServiceType"
+    :title="'สร้างสินค้าและบริการ'"
+    no-footer
+    no-app-box
+    :max-width="80"
+  >
+    <template #body>
+      <div class="row q-gutter-xl q-pa-sm">
+        <ItemCard
+          class="col"
+          v-for="i in itemCard"
+          changeColor
+          :key="i.text"
+          :icon="i.icon"
+          :text="i.text"
+          :color="i.color"
+          @trigger="
+            () => {
+              dialogProductServiceType = false;
+              console.log('test');
+            }
+          "
+        />
+      </div>
+    </template>
+  </FormDialog>
+
+  <FormDialog
+    v-model:modal="dialogTotalProduct"
+    noAddress
+    noAppBox
+    title="รวมสินค้าทั้งหมด (2 ชิ้น)"
+    :submit="
+      () => {
+        console.log('submit');
+      }
+    "
+    :close="() => {}"
+  >
+    <TotalProductComponent />
+  </FormDialog>
 </template>
 
 <style scoped>