diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 53c6d51f..95867f30 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
-
 import { dateFormat } from 'src/utils/datetime';
 
+import { formatNumberDecimal } from 'src/stores/utils';
+
 const addedProduct = ref<boolean>(false);
 
 import {
@@ -149,61 +150,45 @@ withDefaults(
             class="bordered q-pa-xs row surface-0"
             style="font-size: 12px; border-radius: 5px; width: 80px"
           >
-            <div class="col">งาน</div>
+            <div class="col ellipsis-2-lines">งาน</div>
             <q-space />
             <div class="col text-center">0</div>
           </div>
         </div>
 
-        <div
-          v-if="data?.type === 'product'"
-          class="row q-gutter-x-md flex justify-end"
-        >
-          <div class="column text-right" style="height: 25px">
-            <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
-            >
-              ราคาขาย
-            </div>
-            <div
-              class="col text-weight-bold"
-              style="font-size: 16px; color: hsl(var(--orange-5-hsl))"
-            >
-              ฿{{ data?.price }}.00
-            </div>
+        <div v-if="data?.type === 'product'" class="flex">
+          <div
+            class="row full-width text-right"
+            style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
+          >
+            <div class="col-4">ราคาขาย</div>
+            <div class="col-4">ราคาตัวแทน</div>
+            <div class="col-4">ราคาค่าดำเนินการ</div>
           </div>
 
-          <div class="column text-right" style="height: 25px">
+          <div
+            class="row full-width text-right items-center"
+            style="margin-top: -5px"
+          >
             <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
+              class="col-4 text-weight-bold"
+              style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
             >
-              ราคาตัวแทน
+              ฿{{ formatNumberDecimal(data?.price, 2) }}
             </div>
             <div
-              class="col text-weight-bold"
-              style="font-size: 16px; color: hsl(var(--purple-9-hsl))"
+              class="col-4 text-weight-bold"
+              style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
             >
-              ฿{{ data?.agentPrice }}.00
+              ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
+            </div>
+            <div
+              class="col-4"
+              style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
+            >
+              ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
             </div>
           </div>
-          <div class="column text-right" style="height: 25px">
-            <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
-            >
-              ราคาค่าดำเนินการ
-            </div>
-            <div
-              class="col"
-              style="font-size: 16px; color: hsl(var(--pink-7-hsl))"
-            >
-              ฿{{ data?.serviceCharge }}.00
-            </div>
-          </div>
-
-          <!-- ฿ {{ data?.price }} -->
         </div>
 
         <div