diff --git a/web/src/components/Awam.tsx b/web/src/components/Awam.tsx
index 5abcc43..c7be57f 100644
--- a/web/src/components/Awam.tsx
+++ b/web/src/components/Awam.tsx
@@ -16,28 +16,31 @@ export function Term(props: { kata: string }) {
   );
 }
 
+// Verdict selalu hijau (Dilirik) / merah (Dilepas) / abu (Netral) —
+// arti warna konsisten di seluruh app: hijau = kabar baik, merah = waspada.
 export function VerdictBadge(props: { verdict: Verdict }) {
-  const warna: Record<Verdict, "default" | "error" | "secondary"> = {
-    "Dilirik": "default",
+  const warna: Record<Verdict, "success" | "error" | "secondary"> = {
+    "Dilirik": "success",
     "Dilepas": "error",
     "Netral": "secondary",
   };
   return <Badge variant={warna[props.verdict]}>{props.verdict}</Badge>;
 }
 
-// Bar alasan: seberapa kuat sinyal asing vs broker (0-100).
+// Bar alasan: porsi bukti asing (biru, netral-informatif) vs broker (ungu).
+// BUKAN hijau/merah — bar ini soal "bukti dari mana", bukan "baik/buruk".
 export function AlasanBar(props: { asing: number; broker: number }) {
   const total = Math.abs(props.asing) + Math.abs(props.broker) || 1;
   const pAsing = Math.round((Math.abs(props.asing) / total) * 100);
   return (
     <div>
       <div class="flex h-2 w-full overflow-hidden rounded-full bg-muted">
-        <div class="bg-blue-500" style={{ width: `${pAsing}%` }} />
-        <div class="bg-emerald-500" style={{ width: `${100 - pAsing}%` }} />
+        <div class="bg-sky-500" style={{ width: `${pAsing}%` }} />
+        <div class="bg-violet-500" style={{ width: `${100 - pAsing}%` }} />
       </div>
       <div class="mt-1 flex justify-between text-xs text-muted-foreground">
-        <span><span class="text-blue-500">■</span> Asing {props.asing >= 0 ? "masuk" : "keluar"}</span>
-        <span><span class="text-emerald-500">■</span> Broker {props.broker >= 0 ? "borong" : "jualan"}</span>
+        <span><span class="text-sky-500">■</span> Bukti asing {props.asing >= 0 ? "masuk" : "keluar"}</span>
+        <span><span class="text-violet-500">■</span> Bukti broker {props.broker >= 0 ? "borong" : "jualan"}</span>
       </div>
     </div>
   );
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index f61c5b5..7779b5e 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -87,7 +87,7 @@ export default function Dashboard() {
                 const b = (s.row.breakdown || {}) as Record<string, unknown>;
                 const cx = closeMap()[s.row.symbol];
                 return (
-                  <Card class={s.verdict === "Dilirik" ? "border-l-4 border-l-emerald-500" : s.verdict === "Dilepas" ? "border-l-4 border-l-red-500" : ""}>
+                  <Card class={s.verdict === "Dilirik" ? "border-emerald-500/50" : s.verdict === "Dilepas" ? "border-red-500/50" : ""}>
                     <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
                       <CardTitle class="text-xl font-bold">
                         {s.row.symbol}