diff --git a/frontend/src/components/HistogramPanel.jsx b/frontend/src/components/HistogramPanel.jsx
index 190b367..4254cf2 100644
--- a/frontend/src/components/HistogramPanel.jsx
+++ b/frontend/src/components/HistogramPanel.jsx
@@ -15,12 +15,37 @@ function toChartData(original, processed) {
     level,
     original: originalSeries?.[level] ?? 0,
     processed: processedSeries?.[level] ?? 0,
-    r: r[level] ?? 0,
-    g: g[level] ?? 0,
-    b: b[level] ?? 0
+    red: r[level] ?? 0,
+    green: g[level] ?? 0,
+    blue: b[level] ?? 0
   }));
 }
 
+function HistogramTooltip({ active, payload, label }) {
+  if (!active || !payload?.length) return null;
+  const values = Object.fromEntries(payload.map((item) => [item.dataKey, item.value]));
+  const rows = [
+    ["Original", values.original, "text-cyan-300"],
+    ["Active", values.processed, "text-emerald-300"],
+    ["R", values.red, "text-red-300"],
+    ["G", values.green, "text-green-300"],
+    ["B", values.blue, "text-blue-300"]
+  ];
+  return (
+    <div className="border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs shadow-xl">
+      <div className="mb-1 font-semibold text-zinc-100">Level {label}</div>
+      <div className="space-y-1">
+        {rows.map(([name, value, className]) => (
+          <div key={name} className="flex min-w-32 justify-between gap-4">
+            <span className={className}>{name}</span>
+            <span className="tabular-nums text-zinc-100">{Number(value ?? 0).toFixed(8)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function HistogramPanel({ original, processed }) {
   const data = toChartData(original, processed);
   return (
@@ -38,12 +63,12 @@ export default function HistogramPanel({ original, processed }) {
             <CartesianGrid stroke="#27272a" strokeDasharray="3 3" />
             <XAxis dataKey="level" stroke="#71717a" tick={{ fontSize: 10 }} interval={63} />
             <YAxis stroke="#71717a" tick={{ fontSize: 10 }} width={44} />
-            <Tooltip contentStyle={{ background: "#18181b", border: "1px solid #3f3f46", color: "#f4f4f5" }} />
+            <Tooltip content={<HistogramTooltip />} />
             <Area type="monotone" dataKey="original" stroke="#67e8f9" fill="#0891b2" fillOpacity={0.22} dot={false} />
             <Area type="monotone" dataKey="processed" stroke="#6ee7b7" fill="#059669" fillOpacity={0.24} dot={false} />
-            <Area type="monotone" dataKey="r" stroke="#f87171" fill="#ef4444" fillOpacity={0.08} dot={false} />
-            <Area type="monotone" dataKey="g" stroke="#4ade80" fill="#22c55e" fillOpacity={0.08} dot={false} />
-            <Area type="monotone" dataKey="b" stroke="#60a5fa" fill="#3b82f6" fillOpacity={0.08} dot={false} />
+            <Area type="monotone" dataKey="red" stroke="#f87171" fill="#ef4444" fillOpacity={0.08} dot={false} />
+            <Area type="monotone" dataKey="green" stroke="#4ade80" fill="#22c55e" fillOpacity={0.08} dot={false} />
+            <Area type="monotone" dataKey="blue" stroke="#60a5fa" fill="#3b82f6" fillOpacity={0.08} dot={false} />
           </AreaChart>
         </ResponsiveContainer>
       </div>