diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
new file mode 100644
index 00000000..c350916a
--- /dev/null
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+import AllAroundBtn from '../AllAroundBtn.vue';
+import { dateFormat } from 'src/utils/datetime';
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    subtitle?: string;
+    color?: string;
+    status?: boolean;
+    date?: Date;
+  }>(),
+  {
+    color: 'var(--brand-2)',
+  },
+);
+</script>
+
+<template>
+  <div class="full-width rounded" :style="`border:1px solid ${color}`">
+    <div class="q-pa-md row justify-between items-center">
+      <q-btn
+        round
+        icon="mdi-folder"
+        size="12px"
+        flat
+        :style="`color:${color};background-color:var(--surface-0)`"
+      />
+      <AllAroundBtn :label="'viewDetail'" :color="color" />
+    </div>
+    <div class="q-px-md">
+      <div class="text-subtitle1 text-bold">{{ title }}</div>
+      <div class="text-subtitle3">{{ subtitle }}</div>
+    </div>
+    <div class="q-pa-md q-mt-lg sub-card">
+      <div>
+        <div class="row justify-between q-mb-sm">
+          <div class="app-text-muted">{{ $t('status') }}</div>
+
+          <q-badge
+            v-if="status"
+            class="q-px-md q-py-xs rounded"
+            style="background-color: var(--teal-0); color: var(--teal-6)"
+          >
+            {{ $t('statusACTIVE') }}
+          </q-badge>
+          <q-badge
+            v-else
+            text-color="orange"
+            class="q-px-md q-py-xs rounded"
+            style="background-color: var(--red-1); color: var(--orange-4)"
+          >
+            {{ $t('statusINACTIVE') }}
+          </q-badge>
+        </div>
+        <div class="row justify-between">
+          <div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
+          <div>{{ dateFormat(date) }}</div>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sub-card {
+  background-color: var(--surface-0);
+  border-radius: 0 0 var(--radius-2) var(--radius-2);
+  font-size: 16px;
+}
+</style>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
new file mode 100644
index 00000000..c32b785a
--- /dev/null
+++ b/src/pages/04_product-service/MainPage.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import AppBox from 'components/app/AppBox.vue';
+import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue';
+import StatCard from 'components/StatCardComponent.vue';
+
+const cardData = ref({
+  title: 'งาน MCU',
+  subtitle: 'G00000000001',
+  color: 'var(--brand-2)',
+  status: true,
+  date: new Date(),
+});
+
+const stat = ref<
+  {
+    count: number;
+    label: string;
+    color: 'pink' | 'purple' | 'green';
+  }[]
+>([
+  { count: 5, label: 'branchHQLabel', color: 'pink' },
+  { count: 4, label: 'branchLabel', color: 'purple' },
+  { count: 12, label: 'branchLabel', color: 'green' },
+]);
+
+const inputSearch = ref<string>('');
+</script>
+
+<template>
+  <div class="column q-pb-lg">
+    <div class="text-h6 text-weight-bold q-mb-md">กลุ่มสินค้าและบริการ</div>
+    <AppBox bordered class="q-mb-md">
+      <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
+    </AppBox>
+    <AppBox bordered style="min-height: 80vh">
+      <div class="row justify-between">
+        <div class="text-h6 text-weight-bold q-mb-md">
+          กลุ่มสินค้าและบริการทั้งหมด
+        </div>
+        <div class="row q-px-md q-pb-md">
+          <q-input
+            style="width: 250px"
+            outlined
+            dense
+            :label="$t('search')"
+            class="q-mr-lg"
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+            v-model="inputSearch"
+            debounce="500"
+          ></q-input>
+          <q-btn
+            icon="mdi-tune-vertical-variant"
+            size="sm"
+            :color="$q.dark.isActive ? 'dark' : 'white'"
+            :text-color="$q.dark.isActive ? 'white' : 'dark'"
+            class="bordered rounded"
+            unelevated
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup dense>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('all') }}
+                </q-item>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('statusACTIVE') }}
+                </q-item>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('statusINACTIVE') }}
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+      <div class="row q-col-gutter-lg">
+        <div class="col-3" v-for="i in 6" :key="i">
+          <ProductCardComponent
+            :title="cardData.title"
+            :subtitle="cardData.subtitle"
+            :date="cardData.date"
+            :status="cardData.status"
+            :color="cardData.color"
+          />
+        </div>
+      </div>
+    </AppBox>
+  </div>
+</template>
+
+<style scoped></style>