diff --git a/web-dashboard/src/pages/PerformanceDashboard.tsx b/web-dashboard/src/pages/PerformanceDashboard.tsx
index 942aaed55..9ce7565b9 100644
--- a/web-dashboard/src/pages/PerformanceDashboard.tsx
+++ b/web-dashboard/src/pages/PerformanceDashboard.tsx
@@ -3,6 +3,11 @@ import { MetricCard } from '../components/charts/MetricCard';
 import { useApiQuery } from '../hooks/useApi';
 import type { PerformanceMetrics } from '../lib/types';
 
+interface PnLPoint {
+  date: string;
+  pnl: number;
+}
+
 export function PerformanceDashboard() {
   const metrics = useApiQuery<PerformanceMetrics>(
     ['performance-metrics'],
@@ -10,6 +15,12 @@ export function PerformanceDashboard() {
     { refetchInterval: 10000 },
   );
 
+  const pnlData = useApiQuery<PnLPoint[]>(
+    ['performance-pnl'],
+    '/performance/pnl',
+    { refetchInterval: 30000 },
+  );
+
   const m = metrics.data;
 
   return (
@@ -43,13 +54,13 @@ export function PerformanceDashboard() {
 
       {/* Middle: P&L Chart */}
       <div className="h-64 rounded border border-[var(--color-border)] bg-[var(--color-bg-card)]">
-        <PnLChart title="Cumulative P&L" />
+        <PnLChart title="Cumulative P&L" data={pnlData.data} />
       </div>
 
       {/* Bottom: Daily returns + Heatmap */}
       <div className="grid grid-cols-2 gap-4">
         <div className="h-48 rounded border border-[var(--color-border)] bg-[var(--color-bg-card)]">
-          <PnLChart title="Daily Returns" />
+          <PnLChart title="Daily Returns" data={pnlData.data} />
         </div>
         <div className="h-48 rounded border border-[var(--color-border)] bg-[var(--color-bg-card)]">
           <div className="px-3 py-1.5 border-b border-[var(--color-border)]">