diff --git a/src/components/umkm/produk-unggulan.tsx b/src/components/umkm/produk-unggulan.tsx
index ddf0db6..a1a2da2 100644
--- a/src/components/umkm/produk-unggulan.tsx
+++ b/src/components/umkm/produk-unggulan.tsx
@@ -15,11 +15,11 @@ const MetricCard = ({ title, value, trend }: MetricCardProps) => {
 
 	return (
 		<Group justify="space-between" align="center">
-			<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+			<Text size="sm" c={dark ? "white" : "dimmed"} fw={500}>
 				{title}
 			</Text>
 			<Stack gap={0} align="flex-end">
-				<Text size="lg" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+				<Text size="lg" fw={700} c={dark ? "white" : "#1e3a5f"}>
 					{value}
 				</Text>
 				{trend && (
diff --git a/src/components/umkm/sales-table.tsx b/src/components/umkm/sales-table.tsx
index 6b625d5..2aa8428 100644
--- a/src/components/umkm/sales-table.tsx
+++ b/src/components/umkm/sales-table.tsx
@@ -209,7 +209,7 @@ export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
 									</Text>
 								</Table.Td>
 								<Table.Td>
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									<Text size="sm" c={dark ? "white" : "dimmed"}>
 										{formatCurrency(product.bulanLalu)}
 									</Text>
 								</Table.Td>
diff --git a/src/components/umkm/summary-cards.tsx b/src/components/umkm/summary-cards.tsx
index 95ae4dd..7a89905 100644
--- a/src/components/umkm/summary-cards.tsx
+++ b/src/components/umkm/summary-cards.tsx
@@ -55,7 +55,11 @@ const KpiCard = ({
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Group justify="space-between" align="center">
 				<Stack gap={2}>
diff --git a/src/components/umkm/top-products.tsx b/src/components/umkm/top-products.tsx
index bf50659..d3994ee 100644
--- a/src/components/umkm/top-products.tsx
+++ b/src/components/umkm/top-products.tsx
@@ -105,20 +105,20 @@ export const TopProducts = ({ products }: TopProductsProps) => {
 								{product.rank}
 							</Badge>
 							<Stack gap={0}>
-								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+								<Text fw={600} c={dark ? "white" : "#1e3a5f"}>
 									{product.name}
 								</Text>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+								<Text size="sm" c={dark ? "white" : "dimmed"}>
 									{product.umkmName}
 								</Text>
 								<Group gap="xs" mt={2}>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										Rp {formatCurrency(product.revenue)}
 									</Text>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										•
 									</Text>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										{formatNumber(product.quantitySold)} terjual
 									</Text>
 								</Group>