diff --git a/public/blank-image.png b/public/blank-image.png
new file mode 100644
index 00000000..08bb3fc5
Binary files /dev/null and b/public/blank-image.png differ
diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
new file mode 100644
index 00000000..70ba2036
--- /dev/null
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import AppBox from 'components/app/AppBox.vue';
+</script>
+
+<template>
+  <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
+    <div class="row q-pa-sm q-col-gutter-md">
+      <div class="col-4">
+        <div
+          class="rounded q-pa-md"
+          style="
+            border: 1px solid var(--green-10);
+            background-color: var(--surface-2);
+          "
+        >
+          <q-img src="blank-image.png"></q-img>
+        </div>
+      </div>
+      <div class="col-8">
+        <div class="q-pr-sm q-mb-sm">
+          {{ 'ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า' }}
+        </div>
+        <div class="row justify-between q-mb-xs">
+          <div
+            class="q-px-sm row items-center justify-between rounded hover-item text-white"
+            style="background-color: var(--blue-6)"
+            @click.stop="$emit('viewDetail')"
+          >
+            {{ 'AC103' }}
+          </div>
+          <div class="text-bold" style="color: var(--green-9)">
+            {{ '฿1,200.00' }}
+          </div>
+        </div>
+        <div class="row justify-between app-text-muted">
+          <div>ระยะเวลาในการดำเนินการ</div>
+          <div>14 วัน</div>
+        </div>
+      </div>
+    </div>
+  </AppBox>
+</template>
+
+<style scoped></style>
diff --git a/src/components/04_product-service/TotalProductComponent.vue b/src/components/04_product-service/TotalProductComponent.vue
new file mode 100644
index 00000000..836a2aac
--- /dev/null
+++ b/src/components/04_product-service/TotalProductComponent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
+</script>
+<template>
+  <AppBox
+    class="row"
+    bordered
+    style="
+      width: 75vw;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--size-3);
+    "
+  >
+    <div v-for="i in 12" :key="i">
+      <TotalProductCardComponent />
+    </div>
+  </AppBox>
+</template>
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index c60abaf8..05b96579 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -5,6 +5,7 @@ defineProps<{
   icon: string;
   text: string;
   color: string;
+  changeColor?: boolean;
 }>();
 </script>
 
@@ -26,6 +27,7 @@ defineProps<{
           :icon="icon"
           width="64px"
           :class="`${$q.dark.isActive ? '' : 'app-text-muted'}`"
+          :color="changeColor ? color : ''"
         />
       </div>
       <div