diff --git a/public/work-image.png b/public/service-image.png
similarity index 100%
rename from public/work-image.png
rename to public/service-image.png
diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 316fd0eb..f8a05bce 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -3,13 +3,13 @@ import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
 
-import { ProductList } from 'src/stores/product-service/types';
+import { ProductList, Service } from 'src/stores/product-service/types';
 
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 withDefaults(
   defineProps<{
-    data: ProductList;
+    data?: ProductList;
     title?: string;
 
     dense?: boolean;
@@ -19,9 +19,13 @@ withDefaults(
     typeProduct?: string;
     status?: boolean;
 
-    index?: number;
     isAddProduct?: boolean;
     isSelected?: boolean;
+
+    code?: string;
+    price?: number;
+    id?: string;
+    process?: number;
   }>(),
   {
     isSelected: false,
@@ -102,13 +106,13 @@ withDefaults(
           size="18px"
           text-color="white"
         >
-          {{ index !== undefined ? index + 1 : 0 }}
+          1
         </q-avatar>
       </div>
-      <div class="app-text-muted">{{ data.code ?? 'code' }}</div>
+      <div class="app-text-muted">{{ code ?? 'code' }}</div>
       <div class="flex justify-start text-bold">
         <div
-          v-if="typeProduct === 'work'"
+          v-if="typeProduct === 'service'"
           class="bordered q-pa-xs row surface-0"
           style="font-size: 12px; border-radius: 5px; width: 80px"
         >
@@ -123,7 +127,7 @@ withDefaults(
         class="flex justify-end text-bold"
         style="color: var(--green-10)"
       >
-        ฿ {{ data.price }}
+        ฿ {{ price }}
       </div>
 
       <div
@@ -131,7 +135,7 @@ withDefaults(
         :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          :src="`${baseUrl}/product/${data.id}/image`"
+          :src="`${baseUrl}/product/${id}/image`"
           style="height: 86px; max-width: 100px"
         >
           <template #error>
@@ -140,7 +144,7 @@ withDefaults(
               :src="
                 typeProduct === 'product'
                   ? '/shop-image.png'
-                  : '/work-image.png'
+                  : '/service-image.png'
               "
               width="100%"
             />
@@ -148,7 +152,7 @@ withDefaults(
         </q-img>
       </div>
       <div class="row justify-between items-center q-mb-xs">
-        <div class="q-pr-md" v-if="typeProduct === 'work'">
+        <div class="q-pr-md" v-if="typeProduct === 'service'">
           <q-icon
             name="mdi-calendar-month"
             class="surface-0 rounded q-pa-xs app-text-muted"
@@ -163,22 +167,7 @@ withDefaults(
             class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
-          {{ data.process }} วัน
-        </div>
-
-        <div v-if="isSelected === false">
-          <q-btn
-            unelevated
-            dense
-            class="q-mr-sm app-text-info"
-            label="รายละเอียด"
-            @click="$emit('viewDetail')"
-            style="
-              background-color: hsl(var(--blue-5-hsl) / 0.2);
-              max-width: 150px;
-            "
-            icon-right="mdi-chevron-right"
-          />
+          {{ process }} วัน
         </div>
       </div>
     </div>