diff --git a/public/product-group.png b/public/product-group.png
new file mode 100644
index 00000000..f2def1eb
Binary files /dev/null and b/public/product-group.png differ
diff --git a/public/product-type.png b/public/product-type.png
new file mode 100644
index 00000000..4cd5af5d
Binary files /dev/null and b/public/product-type.png differ
diff --git a/src/components/04_product-service/NewProductCardComponent.vue b/src/components/04_product-service/NewProductCardComponent.vue
new file mode 100644
index 00000000..4e287db0
--- /dev/null
+++ b/src/components/04_product-service/NewProductCardComponent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+import { onMounted } from 'vue';
+
+withDefaults(
+  defineProps<{
+    label: string;
+    color?: string;
+    isType?: boolean;
+  }>(),
+  {
+    color: 'var(--brand-1)',
+    isType: false,
+  },
+);
+</script>
+
+<template>
+  <div
+    class="q-pa-lg full-width rounded column items-center hover-card"
+    :style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
+    @click="console.log('clicked!')"
+  >
+    <q-img
+      style="height: 140px; max-width: 170px"
+      :src="isType ? 'product-type.png' : 'product-group.png'"
+    />
+
+    <div
+      class="items-center rounded q-px-lg q-mt-md"
+      :style="`border:1px solid  ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};background-color: ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
+    >
+      <div class="text-white">+ {{ $t(label) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hover-card:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index c350916a..f2a6fa31 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -12,7 +12,7 @@ withDefaults(
     date?: Date;
   }>(),
   {
-    color: 'var(--brand-2)',
+    color: 'var(--brand-1)',
   },
 );
 </script>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index c32b785a..fd741438 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3,11 +3,11 @@ 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';
-
+import NewProductCardCompoent from 'components/04_product-service/NewProductCardComponent.vue';
 const cardData = ref({
   title: 'งาน MCU',
   subtitle: 'G00000000001',
-  color: 'var(--brand-2)',
+  color: 'var(--pink-6)',
   status: true,
   date: new Date(),
 });
@@ -95,6 +95,12 @@ const inputSearch = ref<string>('');
             :color="cardData.color"
           />
         </div>
+        <div class="col-3">
+          <NewProductCardCompoent
+            :label="'กลุ่มสินค้าและบริการ'"
+            :isType="false"
+          />
+        </div>
       </div>
     </AppBox>
   </div>