diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 68066556..41fa36dd 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -30,6 +30,7 @@ withDefaults(
     id?: string;
     process?: number;
     createdAt?: string;
+    index?: number;
   }>(),
   {
     isSelected: false,
@@ -45,9 +46,11 @@ withDefaults(
     style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
     @click="$emit('select', data)"
   >
-    <div class="q-pa-sm" :class="{ inactive: status }">
+    <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
-        <div class="col-9">{{ title ?? 'title' }}</div>
+        <div class="col-9" :class="{ inactive: status }">
+          {{ title ?? 'title' }}
+        </div>
         <div
           v-if="isSelected === false"
           class="col-3 relative-position"
@@ -57,7 +60,7 @@ withDefaults(
             flat
             round
             padding="sm"
-            class="absolute-top-right dots-btn app-text-muted"
+            class="absolute-top-right dots-btn"
             icon="mdi-dots-vertical"
             size="sm"
             @click.stop=""
@@ -110,69 +113,72 @@ withDefaults(
           size="18px"
           text-color="white"
         >
-          1
+          {{ (index ?? 0) + 1 }}
         </q-avatar>
       </div>
-      <div class="app-text-muted">{{ code ?? 'code' }}</div>
-      <div class="flex justify-start text-bold">
+
+      <div :class="{ inactive: status }">
+        <div class="app-text-muted">{{ code ?? 'code' }}</div>
+        <div class="flex justify-start text-bold">
+          <div
+            v-if="typeProduct === 'service'"
+            class="bordered q-pa-xs row surface-0"
+            style="font-size: 12px; border-radius: 5px; width: 80px"
+          >
+            <div class="col">งาน</div>
+            <q-space />
+            <div class="col text-center">0</div>
+          </div>
+        </div>
+
         <div
-          v-if="typeProduct === 'service'"
-          class="bordered q-pa-xs row surface-0"
-          style="font-size: 12px; border-radius: 5px; width: 80px"
+          v-if="typeProduct === 'product'"
+          class="flex justify-end text-bold"
+          style="color: var(--green-10)"
         >
-          <div class="col">งาน</div>
-          <q-space />
-          <div class="col text-center">0</div>
+          ฿ {{ price }}
         </div>
-      </div>
 
-      <div
-        v-if="typeProduct === 'product'"
-        class="flex justify-end text-bold"
-        style="color: var(--green-10)"
-      >
-        ฿ {{ price }}
-      </div>
-
-      <div
-        class="flex justify-center rounded items-center q-my-md q-py-lg"
-        :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
-      >
-        <q-img
-          loading="lazy"
-          :src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`"
-          style="height: 86px; max-width: 100px"
+        <div
+          class="flex justify-center rounded items-center q-my-md q-py-lg"
+          :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
         >
-          <template #error>
-            <q-img
-              style="background: none; height: 86px; max-width: 100px"
-              :src="
-                typeProduct === 'product'
-                  ? '/shop-image.png'
-                  : '/service-image.png'
-              "
-              width="100%"
+          <q-img
+            loading="lazy"
+            :src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`"
+            style="height: 86px; max-width: 100px"
+          >
+            <template #error>
+              <q-img
+                style="background: none; height: 86px; max-width: 100px"
+                :src="
+                  typeProduct === 'product'
+                    ? '/shop-image.png'
+                    : '/service-image.png'
+                "
+                width="100%"
+              />
+            </template>
+          </q-img>
+        </div>
+        <div class="row justify-between items-center q-mb-xs">
+          <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"
+              size="20px"
             />
-          </template>
-        </q-img>
-      </div>
-      <div class="row justify-between items-center q-mb-xs">
-        <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"
-            size="20px"
-          />
-          {{ dateFormat(createdAt) }}
-        </div>
+            {{ dateFormat(createdAt) }}
+          </div>
 
-        <div class="q-pr-md" v-if="typeProduct === 'product'">
-          <q-icon
-            name="mdi-clock-outline"
-            class="surface-0 rounded q-pa-xs app-text-muted"
-            size="20px"
-          />
-          {{ process }} วัน
+          <div class="q-pr-md" v-if="typeProduct === 'product'">
+            <q-icon
+              name="mdi-clock-outline"
+              class="surface-0 rounded q-pa-xs app-text-muted"
+              size="20px"
+            />
+            {{ process }} วัน
+          </div>
         </div>
       </div>
     </div>