diff --git a/resources/js/components/admin/manage/orders/OrderGroupedTable.vue b/resources/js/components/admin/manage/orders/OrderGroupedTable.vue
index ddd8ec3..65f8e64 100644
--- a/resources/js/components/admin/manage/orders/OrderGroupedTable.vue
+++ b/resources/js/components/admin/manage/orders/OrderGroupedTable.vue
@@ -116,15 +116,15 @@ function statusVariant(status: string): 'default' | 'secondary' | 'destructive'
                                 <p>Oleh {{ order.created_by?.profile?.full_name ?? order.created_by?.username }}</p>
                             </div>
                             <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
-                                <span>Tipe Harga <strong class="text-foreground">{{ order.price_type_label
+                                <span>Tipe Harga <strong class="text-primary">{{ order.price_type_label
                                         }}</strong></span>
-                                <span>Pembayaran <strong class="text-foreground">{{ order.payment_type_label
+                                <span>Pembayaran <strong class="text-primary">{{ order.payment_type_label
                                         }}</strong></span>
-                                <span>Subtotal <strong class="text-foreground">{{ order.subtotal_formatted
+                                <span>Subtotal <strong class="text-primary">{{ order.subtotal_formatted
                                         }}</strong></span>
-                                <span>Diskon <strong class="text-foreground">{{ order.discount_formatted
+                                <span>Diskon <strong class="text-primary">{{ order.discount_formatted
                                 }}</strong></span>
-                                <span v-if="order.shipping_cost > 0">Ongkir <strong class="text-foreground">{{
+                                <span v-if="order.shipping_cost > 0">Ongkir <strong class="text-primary">{{
                                     order.shipping_cost_formatted }}</strong></span>
                                 <span>Total <strong class="text-primary">{{ order.total_amount_formatted
                                 }}</strong></span>
diff --git a/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue b/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
index 8551221..dc9cf3a 100644
--- a/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
+++ b/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
@@ -113,11 +113,11 @@ function getGroupedItems(items: any[]): GroupedPurchaseItems[] {
                                 </p>
                             </div>
                             <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
-                                <span>Subtotal <strong class="text-foreground">{{ purchase.subtotal_formatted
+                                <span>Subtotal <strong class="text-primary">{{ purchase.subtotal_formatted
                                 }}</strong></span>
-                                <span>Diskon <strong class="text-foreground">{{ purchase.discount_formatted
+                                <span>Diskon <strong class="text-primary">{{ purchase.discount_formatted
                                 }}</strong></span>
-                                <span v-if="purchase.shipping_cost > 0">Ongkir <strong class="text-foreground">{{
+                                <span v-if="purchase.shipping_cost > 0">Ongkir <strong class="text-primary">{{
                                     purchase.shipping_cost_formatted }}</strong></span>
                                 <span>Total <strong class="text-primary">{{ purchase.total_formatted }}</strong></span>
                             </div>
diff --git a/resources/js/components/admin/master/raw-materials/RawMaterialGroupedTable.vue b/resources/js/components/admin/master/raw-materials/RawMaterialGroupedTable.vue
index 9c95a46..52ddd75 100644
--- a/resources/js/components/admin/master/raw-materials/RawMaterialGroupedTable.vue
+++ b/resources/js/components/admin/master/raw-materials/RawMaterialGroupedTable.vue
@@ -88,18 +88,20 @@ function rowNumber(index: number): number {
                                     {{ material.unit_label }}
                                 </Badge>
                             </div>
-                            <div class="flex flex-wrap items-center gap-2">
-                                <p class="text-xs text-muted-foreground">
-                                    <strong>Total stok:</strong> {{material.prices.reduce((acc, price) => acc +
+                            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+                                <span>
+                                    Total stok <strong class="text-primary"> {{material.prices.reduce((acc, price) => acc +
                                         Number(price.stock), 0)
-                                    }}
-                                    {{ material.unit_abbreviation }}
-                                </p>
-                                <p class="text-xs text-muted-foreground">
-                                    <strong>Total harga:</strong> Rp {{formatRupiah(material.prices.reduce((acc, price) => acc +
+                                        }}
+                                        {{ material.unit_abbreviation }}
+                                    </strong>
+                                </span>
+                                <span>
+                                    Total harga <strong class="text-primary"> Rp {{formatRupiah(material.prices.reduce((acc, price) => acc +
                                         Number(price.stock) * Number(price.price), 0))
-                                    }}
-                                </p>
+                                        }}
+                                    </strong>
+                                </span>
                             </div>
                         </div>
                     </div>