diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index ba80b404..9b75fed2 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -3,32 +3,47 @@ import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
 
+import { ProductList } from 'src/stores/product-service/types';
+
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
-defineProps<{
-  title?: string;
-  code?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  typeProduct?: string;
-  price?: number;
-  process?: number;
-  id?: string;
-  status?: boolean;
-}>();
+
+withDefaults(
+  defineProps<{
+    data: ProductList;
+    title?: string;
+
+    dense?: boolean;
+    outlined?: boolean;
+    readonly?: boolean;
+    separator?: boolean;
+    typeProduct?: string;
+    status?: boolean;
+
+    isAddProduct?: boolean;
+    isSelected?: boolean;
+  }>(),
+  {
+    isSelected: false,
+  },
+);
 </script>
 
 <template>
   <AppBox
     no-padding
     bordered
+    :class="{ 'is-add-product': isAddProduct }"
     style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
+    @click="$emit('select', data)"
   >
     <div class="q-pa-sm" :class="{ inactive: status }">
       <div class="row flex justify-between text-bold">
         <div class="col-9">{{ title ?? 'title' }}</div>
-        <div class="col-3 relative-position" style="left: 10px; bottom: 10px">
+        <div
+          v-if="isSelected === false"
+          class="col-3 relative-position"
+          style="left: 10px; bottom: 10px"
+        >
           <q-btn
             flat
             round
@@ -79,8 +94,17 @@ defineProps<{
             </q-menu>
           </q-btn>
         </div>
+
+        <q-avatar
+          v-if="isAddProduct"
+          :style="`background-color: var(${typeProduct === 'product' ? '--green-10' : '--orange-8'})`"
+          size="18px"
+          text-color="white"
+        >
+          1
+        </q-avatar>
       </div>
-      <div class="app-text-muted">{{ code ?? 'code' }}</div>
+      <div class="app-text-muted">{{ data.code ?? 'code' }}</div>
       <div class="flex justify-start text-bold">
         <div
           v-if="typeProduct === 'work'"
@@ -98,7 +122,7 @@ defineProps<{
         class="flex justify-end text-bold"
         style="color: var(--green-10)"
       >
-        ฿ {{ price }}
+        ฿ {{ data.price }}
       </div>
 
       <div
@@ -106,7 +130,7 @@ defineProps<{
         :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          :src="`${baseUrl}/product/${id}/image`"
+          :src="`${baseUrl}/product/${data.id}/image`"
           style="height: 86px; max-width: 100px"
         >
           <template #error>
@@ -138,20 +162,11 @@ defineProps<{
             class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
-          {{ process }} วัน
+          {{ data.process }} วัน
         </div>
 
-        <div>
+        <div v-if="isSelected === false">
           <q-btn
-            v-if="addedProduct"
-            unelevated
-            class="q-mr-sm text-white"
-            label="เพิ่มสินค้าแล้ว (1)"
-            @click="addedProduct = false"
-            style="background-color: var(--green-10)"
-          />
-          <q-btn
-            v-else
             unelevated
             dense
             class="q-mr-sm app-text-info"
@@ -173,4 +188,8 @@ defineProps<{
 .inactive {
   opacity: 0.4;
 }
+
+.is-add-product {
+  border-color: var(--green-10);
+}
 </style>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ebf2cb2f..d99a8cf4 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -155,6 +155,8 @@ const serviceTab = [
 const currentServiceTab = ref('serviceInformation');
 const propertiesDialog = ref<boolean>(false);
 
+const selectProduct = ref<ProductList[]>([]);
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
@@ -418,8 +420,6 @@ async function assignFormDataProductService(id: string) {
 }
 
 function assignFormDataProduct(data: ProductList) {
-  console.log(data.detail);
-
   statusToggle.value = data.status === 'INACTIVE' ? false : true;
 
   formDataProduct.value = {
@@ -1032,12 +1032,9 @@ watch(currentStatus, async () => {
         >
           <div v-for="i in product" :key="i.id">
             <TotalProductCardComponent
+              :data="i"
               typeProduct="product"
               :title="i.name"
-              :code="i.code"
-              :price="i.price"
-              :process="i.process"
-              :id="i.id"
               :status="i.status === 'INACTIVE' ? true : false"
               @menuViewDetail="
                 () => {
@@ -1178,7 +1175,63 @@ watch(currentStatus, async () => {
           </template>
         </q-input>
       </div>
-      <TotalProductComponent />
+
+      <AppBox
+        class="row full-width"
+        no-padding
+        style="
+          width: 75vw;
+          display: grid;
+          background: none;
+          grid-template-columns: repeat(4, 1fr);
+          gap: var(--size-3);
+        "
+      >
+        <div v-for="i in product" :key="i.id">
+          <TotalProductCardComponent
+            :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
+            :isSelected="true"
+            :data="i"
+            typeProduct="product"
+            :title="i.name"
+            :status="i.status === 'INACTIVE' ? true : false"
+            @menuViewDetail="
+              () => {
+                currentIdProduct = i.id;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @menuEdit="
+              () => {
+                currentIdProduct = i.id;
+                infoProductEdit = true;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @viewDetail="
+              () => {
+                currentIdProduct = i.id;
+                infoProductEdit = false;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @select="
+              (data) => {
+                const tempValue = selectProduct.find((v) => v.id === i.id);
+
+                if (tempValue) {
+                  selectProduct = selectProduct.filter((v) => v.id !== i.id);
+                } else {
+                  selectProduct.push(data);
+                }
+              }
+            "
+          />
+        </div>
+      </AppBox>
     </div>
   </FormDialog>