demeter

Autonomous Hydroponic Intelligence
git clone https://github.com/maydayv7/demeter
commit 18a65ee66e3ba8766ea5d2204df95ab4697de04a
parent fd991066bf8c2045fa41aedce5b2400c9d662fa5
Author: maydayv7 <maydayv7@gmail.com>
Date:   Fri, 20 Mar 2026 21:46:09 +0530

Improve Frontend

- Settings Page
- Light Mode
- Mock Data
- Agent Widgets

Diffstat:

Mfrontend/src/App.js | 29+++++++++++++++++------------


Mfrontend/src/api/agentApi.js | 45+++++++++++++++++++++++++++++++++++++++++++++


Mfrontend/src/api/farmApi.jsx | 21+++++++++++++++++++++


Afrontend/src/components/AgentWidgets.jsx | 307+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Mfrontend/src/components/Sidebar.jsx | 40++++++++++++++++++++--------------------


Afrontend/src/data/mockData.js | 235+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Afrontend/src/hooks/useSettings.js | 49+++++++++++++++++++++++++++++++++++++++++++++++++


Mfrontend/src/index.css | 336+++++++++++++++++++++++++++++++++++++++++++++++--------------------------------


Mfrontend/src/pages/AgentControl.jsx | 319+++++++++++++++++++------------------------------------------------------------


Mfrontend/src/pages/Analytics.jsx | 582++++++++++++++++++++++++++++++++++++-------------------------------------------


Mfrontend/src/pages/CropDetails.jsx | 449++++++++++++++++++++++++++++++++++---------------------------------------------


Mfrontend/src/pages/Dashboard.jsx | 259+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------


Afrontend/src/pages/Settings.jsx | 527+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Mfrontend/src/utils/dataUtils.js | 117++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------


14 files changed, 2210 insertions(+), 1105 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { FarmDataProvider } from "./hooks/useFarmData";
+import { SettingsProvider } from "./hooks/useSettings";
 
 import LandingPage from "./pages/LandingPage";
 import Dashboard from "./pages/Dashboard";
@@ -7,21 +8,25 @@ import CropDetails from "./pages/CropDetails";
 import AgentControl from "./pages/AgentControl";
 import Analytics from "./pages/Analytics";
 import Alerts from "./pages/Alerts";
+import SettingsPage from "./pages/Settings";
 
 function App() {
   return (
-    <FarmDataProvider>
-      <Router>
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/control" element={<AgentControl />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="/crop/:cropId" element={<CropDetails />} />
-          <Route path="/analytics" element={<Analytics />} />
-          <Route path="/alerts" element={<Alerts />} />
-        </Routes>
-      </Router>
-    </FarmDataProvider>
+    <SettingsProvider>
+      <FarmDataProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/control" element={<AgentControl />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/crop/:cropId" element={<CropDetails />} />
+            <Route path="/analytics" element={<Analytics />} />
+            <Route path="/alerts" element={<Alerts />} />
+            <Route path="/settings" element={<SettingsPage />} />
+          </Routes>
+        </Router>
+      </FarmDataProvider>
+    </SettingsProvider>
   );
 }
 
diff --git a/frontend/src/api/agentApi.js b/frontend/src/api/agentApi.js
@@ -1,3 +1,9 @@
+import {
+  USE_MOCK_DATA,
+  MOCK_SEARCH_RESULT,
+  MOCK_DASHBOARD,
+} from "../data/mockData";
+
 const API_URL = "http://localhost:8000";
 
 export const agentService = {
@@ -5,6 +11,11 @@ export const agentService = {
    * Uploads an image + sensors to create a new FMU (Functional Memory Unit)
    */
   async uploadFMU(file, sensors) {
+    if (USE_MOCK_DATA) {
+      await new Promise((r) => setTimeout(r, 500));
+      return { status: "success", fmu_id: "mock-fmu-ingest-001" };
+    }
+
     const formData = new FormData();
     formData.append("file", file);
     formData.append(
@@ -37,6 +48,11 @@ export const agentService = {
    * Searches for similar memories and gets an Agent Decision
    */
   async searchFMU(file, sensors) {
+    if (USE_MOCK_DATA) {
+      await new Promise((r) => setTimeout(r, 1200));
+      return MOCK_SEARCH_RESULT;
+    }
+
     const formData = new FormData();
     formData.append("file", file);
     formData.append(
@@ -63,6 +79,24 @@ export const agentService = {
    * Queries the RAG/Agent via Text
    */
   async queryText(text) {
+    if (USE_MOCK_DATA) {
+      await new Promise((r) => setTimeout(r, 400));
+      const q = text.toLowerCase();
+      const filtered = MOCK_DASHBOARD.filter(
+        (d) =>
+          d.payload.crop?.toLowerCase().includes(q) ||
+          d.payload.stage?.toLowerCase().includes(q) ||
+          d.payload.crop_id?.toLowerCase().includes(q),
+      );
+      return {
+        status: "success",
+        results: (filtered.length ? filtered : MOCK_DASHBOARD).map((d) => ({
+          id: d.id,
+          payload: d.payload,
+        })),
+      };
+    }
+
     const formData = new FormData();
     formData.append("query", text);
     const res = await fetch(`${API_URL}/query-text`, {
@@ -76,6 +110,17 @@ export const agentService = {
    * Queries the RAG/Agent via Audio
    */
   async queryAudio(audioBlob) {
+    if (USE_MOCK_DATA) {
+      await new Promise((r) => setTimeout(r, 800));
+      return {
+        status: "success",
+        transcription: "show all lettuce crops",
+        results: MOCK_DASHBOARD.filter((d) => d.payload.crop === "Lettuce").map(
+          (d) => ({ id: d.id, score: 1, payload: d.payload }),
+        ),
+      };
+    }
+
     const formData = new FormData();
     formData.append("file", audioBlob, "recording.webm");
     const res = await fetch(`${API_URL}/query-audio`, {
diff --git a/frontend/src/api/farmApi.jsx b/frontend/src/api/farmApi.jsx
@@ -1,9 +1,16 @@
+import { USE_MOCK_DATA, MOCK_DASHBOARD, MOCK_HISTORY } from "../data/mockData";
+
 const API_BASE_URL = "http://localhost:3001/api";
 
 /**
  * Fetches the latest state of all unique crops for the Dashboard.
  */
 export const fetchDashboardData = async () => {
+  if (USE_MOCK_DATA) {
+    await new Promise((r) => setTimeout(r, 300)); // simulate latency
+    return MOCK_DASHBOARD;
+  }
+
   try {
     const res = await fetch(`${API_BASE_URL}/dashboard`);
     if (!res.ok) throw new Error("Network error");
@@ -17,6 +24,11 @@ export const fetchDashboardData = async () => {
  * Fetches the full history (logs, charts) for a specific crop ID.
  */
 export const fetchCropDetails = async (cropId) => {
+  if (USE_MOCK_DATA) {
+    await new Promise((r) => setTimeout(r, 200));
+    return MOCK_HISTORY.filter((h) => h.payload?.crop_id === cropId);
+  }
+
   try {
     const res = await fetch(`${API_BASE_URL}/crop/${cropId}`);
     if (!res.ok) throw new Error("Network error");
@@ -31,6 +43,15 @@ export const fetchCropDetails = async (cropId) => {
  * Returns a flat array of all point objects sorted oldest → newest by timestamp.
  */
 export const fetchAllCropHistories = async (dashboardItems) => {
+  if (USE_MOCK_DATA) {
+    await new Promise((r) => setTimeout(r, 200));
+    return MOCK_HISTORY.sort((a, b) => {
+      const ta = new Date(a.payload?.timestamp || 0).getTime();
+      const tb = new Date(b.payload?.timestamp || 0).getTime();
+      return ta - tb;
+    });
+  }
+
   if (!dashboardItems?.length) return [];
   const cropIds = [
     ...new Set(dashboardItems.map((i) => i.payload?.crop_id).filter(Boolean)),
diff --git a/frontend/src/components/AgentWidgets.jsx b/frontend/src/components/AgentWidgets.jsx
@@ -0,0 +1,307 @@
+import { Fan, FlaskConical, Sprout, Waves } from "lucide-react";
+
+// Shared action metadata
+const ACTION_META = {
+  acid_dosage_ml: {
+    label: "Acid Dosage",
+    icon: FlaskConical,
+    unit: "ml",
+    color: "var(--red)",
+    bg: "rgba(248,113,113,0.1)",
+    desc: "pH Down",
+  },
+  base_dosage_ml: {
+    label: "Base Dosage",
+    icon: FlaskConical,
+    unit: "ml",
+    color: "#a78bfa",
+    bg: "rgba(167,139,250,0.1)",
+    desc: "pH Up",
+  },
+  nutrient_dosage_ml: {
+    label: "Nutrients",
+    icon: Sprout,
+    unit: "ml",
+    color: "var(--green)",
+    bg: "rgba(74,222,128,0.1)",
+    desc: "EC Boost",
+  },
+  fan_speed_pct: {
+    label: "Fan Speed",
+    icon: Fan,
+    unit: "%",
+    color: "var(--blue)",
+    bg: "rgba(96,165,250,0.1)",
+    desc: "Airflow",
+  },
+  water_refill_l: {
+    label: "Water Refill",
+    icon: Waves,
+    unit: "L",
+    color: "#22d3ee",
+    bg: "rgba(34,211,238,0.1)",
+    desc: "Dilution",
+  },
+};
+
+// Parse action JSON safely
+function parseAction(raw) {
+  if (!raw || raw === "PENDING_ACTION") return null;
+  if (typeof raw === "object") return raw;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    try {
+      return JSON.parse(
+        raw
+          .replace(/'/g, '"')
+          .replace(/\bNone\b/g, "null")
+          .replace(/\bTrue\b/g, "true")
+          .replace(/\bFalse\b/g, "false"),
+      );
+    } catch {
+      return null;
+    }
+  }
+}
+
+// Show actuator commands as cards
+export function AgentActionWidget({ actionTaken, compact = false }) {
+  const action = parseAction(actionTaken);
+  if (!action) return null;
+
+  const entries = Object.entries(ACTION_META).map(([key, meta]) => ({
+    key,
+    meta,
+    value: action[key] ?? 0,
+  }));
+
+  const active = entries.filter((e) => parseFloat(e.value) > 0);
+  const display = active.length > 0 ? active : entries;
+
+  if (compact) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 6,
+        }}
+      >
+        {display.map(({ key, meta, value }) => {
+          const Icon = meta.icon;
+          return (
+            <div
+              key={key}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 5,
+                padding: "4px 10px",
+                borderRadius: 20,
+                background: meta.bg,
+                border: `1px solid ${meta.color}40`,
+              }}
+            >
+              <Icon size={11} style={{ color: meta.color }} />
+              <span
+                style={{
+                  fontSize: 12,
+                  fontFamily: "DM Mono, monospace",
+                  color: meta.color,
+                  fontWeight: 600,
+                }}
+              >
+                {value}
+                {meta.unit}
+              </span>
+              <span
+                style={{
+                  fontSize: 10,
+                  fontFamily: "DM Mono, monospace",
+                  color: "var(--text-3)",
+                }}
+              >
+                {meta.desc}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+        gap: 10,
+      }}
+    >
+      {entries.map(({ key, meta, value }) => {
+        const Icon = meta.icon;
+        const isActive = parseFloat(value) > 0;
+        return (
+          <div
+            key={key}
+            style={{
+              borderRadius: 12,
+              padding: "14px 12px",
+              textAlign: "center",
+              background: isActive ? meta.bg : "var(--bg-3)",
+              border: `1px solid ${isActive ? meta.color + "40" : "var(--border)"}`,
+              transition: "all 0.2s",
+            }}
+          >
+            <div
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                background: isActive ? meta.bg : "var(--border)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                margin: "0 auto 8px",
+              }}
+            >
+              <Icon
+                size={14}
+                style={{ color: isActive ? meta.color : "var(--text-3)" }}
+              />
+            </div>
+            <div
+              style={{
+                fontWeight: 700,
+                fontFamily: "DM Mono, monospace",
+                fontSize: 22,
+                color: isActive ? meta.color : "var(--text-3)",
+                lineHeight: 1,
+              }}
+            >
+              {value}
+            </div>
+            <div
+              style={{
+                fontSize: 10,
+                fontFamily: "DM Mono, monospace",
+                color: "var(--text-3)",
+                marginTop: 2,
+              }}
+            >
+              {meta.unit}
+            </div>
+            <div
+              style={{
+                fontSize: 11,
+                color: isActive ? "var(--text-2)" : "var(--text-3)",
+                marginTop: 4,
+                fontWeight: isActive ? 600 : 400,
+              }}
+            >
+              {meta.label}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Agent Outcome
+export function AgentOutcomeWidget({ outcome, rewardScore, strategicIntent }) {
+  if (!outcome || outcome === "PENDING_OBSERVATION") return null;
+
+  const raw = outcome.split("| Reward:")[0].trim();
+  const reward =
+    rewardScore != null
+      ? parseFloat(rewardScore)
+      : outcome.includes("Reward:")
+        ? parseFloat(outcome.split("Reward:")[1])
+        : null;
+
+  const isPositive = raw === "IMPROVED" || (reward != null && reward > 0.3);
+  const isNegative =
+    raw === "DETERIORATED" || (reward != null && reward < -0.1);
+
+  const color = isNegative
+    ? "var(--red)"
+    : isPositive
+      ? "var(--green)"
+      : "var(--amber)";
+  const bg = isNegative
+    ? "rgba(248,113,113,0.08)"
+    : isPositive
+      ? "rgba(74,222,128,0.08)"
+      : "rgba(245,158,11,0.08)";
+  const border = isNegative
+    ? "rgba(248,113,113,0.25)"
+    : isPositive
+      ? "rgba(74,222,128,0.25)"
+      : "rgba(245,158,11,0.25)";
+
+  const emoji = isNegative ? "▼" : isPositive ? "▲" : "●";
+
+  return (
+    <div
+      style={{
+        borderRadius: 12,
+        padding: "12px 16px",
+        background: bg,
+        border: `1px solid ${border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        flexWrap: "wrap",
+      }}
+    >
+      <span
+        style={{
+          fontSize: 18,
+          fontFamily: "DM Mono, monospace",
+          color,
+          fontWeight: 700,
+          flexShrink: 0,
+        }}
+      >
+        {emoji} {raw}
+      </span>
+
+      {reward != null && (
+        <span
+          style={{
+            fontSize: 13,
+            fontFamily: "DM Mono, monospace",
+            padding: "2px 10px",
+            borderRadius: 20,
+            background: `${color}20`,
+            color,
+            border: `1px solid ${color}40`,
+            flexShrink: 0,
+          }}
+        >
+          Reward: {reward > 0 ? "+" : ""}
+          {reward.toFixed(2)}
+        </span>
+      )}
+
+      {strategicIntent && (
+        <span
+          style={{
+            fontSize: 11,
+            fontFamily: "DM Mono, monospace",
+            padding: "2px 10px",
+            borderRadius: 20,
+            background: "var(--bg-3)",
+            color: "var(--text-3)",
+            border: "1px solid var(--border)",
+            flexShrink: 0,
+          }}
+        >
+          {strategicIntent.replace(/_/g, " ")}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
@@ -12,11 +12,13 @@ import {
 } from "lucide-react";
 import { useFarmData } from "../hooks/useFarmData";
 import { deriveCropStatus } from "../utils/dataUtils";
+import { useSettings } from "../hooks/useSettings";
 
 export default function Sidebar() {
   const [collapsed, setCollapsed] = useState(false);
   const loc = useLocation();
   const { dashboard } = useFarmData();
+  const { settings } = useSettings();
 
   const alertCount = useMemo(() => {
     if (!dashboard?.length) return 0;
@@ -31,9 +33,18 @@ export default function Sidebar() {
     { label: "Analytics", icon: BarChart3, path: "/analytics" },
     { label: "Alerts", icon: Bell, path: "/alerts", badge: alertCount || null },
     { label: "Agent AI", icon: Brain, path: "/control" },
-    { label: "Settings", icon: Settings, path: "#" },
+    { label: "Settings", icon: Settings, path: "/settings" },
   ];
 
+  const initials =
+    settings.userInitials ||
+    (settings.userName || "?")
+      .split(" ")
+      .map((w) => w[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+
   return (
     <aside
       style={{
@@ -80,7 +91,7 @@ export default function Sidebar() {
             <div
               style={{
                 fontWeight: 700,
-                fontSize: 14,
+                fontSize: 15,
                 color: "var(--text)",
                 lineHeight: 1.2,
               }}
@@ -119,13 +130,7 @@ export default function Sidebar() {
           justifyContent: "center",
           cursor: "pointer",
           zIndex: 10,
-          transition: "background 0.15s",
         }}
-        onMouseEnter={(e) =>
-          (e.currentTarget.style.background = "var(--surface-2)")
-        }
-        onMouseLeave={(e) => (e.currentTarget.style.background = "var(--bg-3)")}
-        title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
       >
         {collapsed ? <ChevronRight size={11} /> : <ChevronLeft size={11} />}
       </button>
@@ -241,7 +246,7 @@ export default function Sidebar() {
         })}
       </nav>
 
-      {/* Alert count summary */}
+      {/* Alert status summary */}
       {!collapsed && (
         <div style={{ padding: "0 12px 12px" }}>
           <div
@@ -253,13 +258,8 @@ export default function Sidebar() {
             }}
           >
             <div
-              style={{
-                fontSize: 9,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-3)",
-                marginBottom: 6,
-                letterSpacing: "0.05em",
-              }}
+              className="section-label"
+              style={{ margin: 0, marginBottom: 6, fontSize: 9 }}
             >
               ALERT STATUS
             </div>
@@ -328,7 +328,7 @@ export default function Sidebar() {
             width: 28,
             height: 28,
             borderRadius: "50%",
-            background: "var(--amber-dim)",
+            background: "rgba(245,158,11,0.15)",
             color: "var(--amber)",
             display: "flex",
             alignItems: "center",
@@ -338,17 +338,17 @@ export default function Sidebar() {
             flexShrink: 0,
           }}
         >
-          R
+          {initials}
         </div>
         {!collapsed && (
           <div>
             <div
               style={{ fontSize: 12, fontWeight: 600, color: "var(--text)" }}
             >
-              Rajesh Rai
+              {settings.userName}
             </div>
             <div style={{ fontSize: 10, color: "var(--text-3)" }}>
-              Farm Owner
+              {settings.userDesignation}
             </div>
           </div>
         )}
diff --git a/frontend/src/data/mockData.js b/frontend/src/data/mockData.js
@@ -0,0 +1,235 @@
+// ============================================================
+// DEMETER MOCK DATA
+// Set USE_MOCK_DATA = true to use local test data
+// Set USE_MOCK_DATA = false to connect to the real backend API
+// ============================================================
+export const USE_MOCK_DATA = true;
+
+// HELPERS
+const ts = (daysAgo, hour = 10, min = 0) => {
+  const d = new Date();
+  d.setDate(d.getDate() - daysAgo);
+  d.setHours(hour, min, 0, 0);
+  return d.toISOString();
+};
+
+// Dashboard snapshots (latest per crop)
+export const MOCK_DASHBOARD = [
+  {
+    id: "pt-001",
+    payload: {
+      crop_id: "Batch_Lettuce_2025A",
+      crop: "Lettuce",
+      stage: "Vegetative",
+      sequence_number: 14,
+      timestamp: ts(0, 9, 30),
+      sensors: { pH: 6.1, EC: 1.4, temp: 23.5, humidity: 68 },
+      action_taken: JSON.stringify({
+        acid_dosage_ml: 0,
+        base_dosage_ml: 0,
+        nutrient_dosage_ml: 2.5,
+        fan_speed_pct: 45,
+        water_refill_l: 0,
+      }),
+      outcome: "IMPROVED | Reward: 0.8",
+      strategic_intent: "MAINTAIN_CURRENT",
+      bandit_action_id: 0,
+      reward_score: 0.8,
+    },
+  },
+  {
+    id: "pt-002",
+    payload: {
+      crop_id: "Batch_Tomato_2025B",
+      crop: "Tomato",
+      stage: "Flowering",
+      sequence_number: 22,
+      timestamp: ts(0, 8, 15),
+      sensors: { pH: 5.8, EC: 2.1, temp: 26.0, humidity: 58 },
+      action_taken: JSON.stringify({
+        acid_dosage_ml: 1.5,
+        base_dosage_ml: 0,
+        nutrient_dosage_ml: 4.0,
+        fan_speed_pct: 60,
+        water_refill_l: 0,
+      }),
+      outcome: "STABLE | Reward: 0.4",
+      strategic_intent: "INCREASE_EC_BLOOM",
+      bandit_action_id: 6,
+      reward_score: 0.4,
+    },
+  },
+  {
+    id: "pt-003",
+    payload: {
+      crop_id: "Batch_Basil_2025C",
+      crop: "Basil",
+      stage: "Seedling",
+      sequence_number: 5,
+      timestamp: ts(0, 11, 0),
+      sensors: { pH: 7.8, EC: 0.6, temp: 29.5, humidity: 82 },
+      action_taken: JSON.stringify({
+        acid_dosage_ml: 8.0,
+        base_dosage_ml: 0,
+        nutrient_dosage_ml: 3.0,
+        fan_speed_pct: 80,
+        water_refill_l: 0,
+      }),
+      outcome: "DETERIORATED | Reward: -0.6",
+      strategic_intent: "AGGRESSIVE_PH_DOWN",
+      bandit_action_id: 2,
+      reward_score: -0.6,
+    },
+  },
+  {
+    id: "pt-004",
+    payload: {
+      crop_id: "Batch_Spinach_2025D",
+      crop: "Spinach",
+      stage: "Vegetative",
+      sequence_number: 9,
+      timestamp: ts(1, 14, 45),
+      sensors: { pH: 6.3, EC: 1.6, temp: 21.0, humidity: 72 },
+      action_taken: JSON.stringify({
+        acid_dosage_ml: 0,
+        base_dosage_ml: 0,
+        nutrient_dosage_ml: 1.0,
+        fan_speed_pct: 35,
+        water_refill_l: 2.0,
+      }),
+      outcome: "IMPROVED | Reward: 0.7",
+      strategic_intent: "GENTLE_PH_BALANCING",
+      bandit_action_id: 4,
+      reward_score: 0.7,
+    },
+  },
+  {
+    id: "pt-005",
+    payload: {
+      crop_id: "Batch_Cucumber_2025E",
+      crop: "Cucumber",
+      stage: "Fruiting",
+      sequence_number: 31,
+      timestamp: ts(0, 7, 0),
+      sensors: { pH: 5.5, EC: 2.8, temp: 27.5, humidity: 55 },
+      action_taken: JSON.stringify({
+        acid_dosage_ml: 0,
+        base_dosage_ml: 2.0,
+        nutrient_dosage_ml: 0,
+        fan_speed_pct: 70,
+        water_refill_l: 5.0,
+      }),
+      outcome: "STABLE | Reward: 0.3",
+      strategic_intent: "LOWER_EC_FLUSH",
+      bandit_action_id: 7,
+      reward_score: 0.3,
+    },
+  },
+];
+
+// Detailed history per crop (multiple snapshots)
+function makeHistory(cropId, cropName, stage, n, baseVals) {
+  return Array.from({ length: n }, (_, i) => {
+    const jitter = (range) => (Math.random() - 0.5) * range;
+    return {
+      id: `${cropId}-seq-${i + 1}`,
+      payload: {
+        crop_id: cropId,
+        crop: cropName,
+        stage,
+        sequence_number: i + 1,
+        timestamp: ts(Math.floor((n - i) / 3), (i * 2) % 24, (i * 7) % 60),
+        sensors: {
+          pH: +(baseVals.ph + jitter(0.4)).toFixed(2),
+          EC: +(baseVals.ec + jitter(0.3)).toFixed(2),
+          temp: +(baseVals.temp + jitter(2)).toFixed(1),
+          humidity: +(baseVals.humidity + jitter(8)).toFixed(1),
+        },
+        action_taken: JSON.stringify({
+          acid_dosage_ml: +(Math.random() * 3).toFixed(1),
+          base_dosage_ml: +(Math.random() * 2).toFixed(1),
+          nutrient_dosage_ml: +(Math.random() * 5).toFixed(1),
+          fan_speed_pct: +(30 + Math.random() * 50).toFixed(0),
+          water_refill_l: +(Math.random() * 4).toFixed(1),
+        }),
+        outcome:
+          i % 5 === 0
+            ? "DETERIORATED | Reward: -0.4"
+            : i % 3 === 0
+              ? "STABLE | Reward: 0.3"
+              : "IMPROVED | Reward: 0.75",
+        strategic_intent: [
+          "MAINTAIN_CURRENT",
+          "GENTLE_PH_BALANCING",
+          "INCREASE_EC_VEG",
+          "RAISE_TEMP_HUMIDITY",
+          "MAX_AIR_CIRCULATION",
+        ][i % 5],
+        reward_score: i % 5 === 0 ? -0.4 : i % 3 === 0 ? 0.3 : 0.75,
+      },
+    };
+  });
+}
+
+export const MOCK_HISTORY = [
+  ...makeHistory("Batch_Lettuce_2025A", "Lettuce", "Vegetative", 14, {
+    ph: 6.1,
+    ec: 1.4,
+    temp: 23.5,
+    humidity: 68,
+  }),
+  ...makeHistory("Batch_Tomato_2025B", "Tomato", "Flowering", 22, {
+    ph: 5.9,
+    ec: 2.0,
+    temp: 26.0,
+    humidity: 58,
+  }),
+  ...makeHistory("Batch_Basil_2025C", "Basil", "Seedling", 5, {
+    ph: 7.2,
+    ec: 0.7,
+    temp: 29.0,
+    humidity: 80,
+  }),
+  ...makeHistory("Batch_Spinach_2025D", "Spinach", "Vegetative", 9, {
+    ph: 6.3,
+    ec: 1.6,
+    temp: 21.5,
+    humidity: 72,
+  }),
+  ...makeHistory("Batch_Cucumber_2025E", "Cucumber", "Fruiting", 31, {
+    ph: 5.6,
+    ec: 2.7,
+    temp: 27.0,
+    humidity: 56,
+  }),
+];
+
+// Mock search / agent response
+export const MOCK_SEARCH_RESULT = {
+  status: "success",
+  new_fmu_id: "mock-fmu-001",
+  agent_decision: {
+    acid_dosage_ml: 2.5,
+    base_dosage_ml: 0,
+    nutrient_dosage_ml: 3.0,
+    fan_speed_pct: 55,
+    water_refill_l: 1.5,
+  },
+  explanation: `1. **Observation**: Sensors show pH 6.2, EC 1.4 dS/m, Temp 23.5°C, Humidity 68%.
+    All parameters are within acceptable range for Vegetative Lettuce.
+
+2. **Precedent**: 3 similar past states found. In 2 of those cases, a slight EC boost
+   improved growth rate. No disease was detected in the last 5 cycles.
+
+3. **Logic**: EC at 1.4 is slightly below the 1.5–1.8 target for late vegetative.
+   A small nutrient dosage increase will push it into the optimal window.
+   Fan speed is adequate; no VPD concerns.
+
+4. **Conclusion**: Dosing 3.0ml nutrients is the safest, most targeted intervention.
+   No pH correction needed. Maintain current atmospheric settings.`,
+  search_results: MOCK_DASHBOARD.slice(0, 3).map((d, i) => ({
+    id: d.id,
+    score: 0.95 - i * 0.08,
+    payload: d.payload,
+  })),
+};
diff --git a/frontend/src/hooks/useSettings.js b/frontend/src/hooks/useSettings.js
@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const DEFAULTS = {
+  userName: "Rajesh Rai",
+  userDesignation: "Farm Owner",
+  userInitials: "R",
+  theme: "dark",
+  maxResultsPerPage: 12,
+  alertsShowAcked: false,
+  compactMode: false,
+};
+
+const SettingsContext = createContext();
+
+const STORAGE_KEY = "demeter_settings";
+
+export function SettingsProvider({ children }) {
+  const [settings, setSettings] = useState(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? { ...DEFAULTS, ...JSON.parse(stored) } : DEFAULTS;
+    } catch {
+      return DEFAULTS;
+    }
+  });
+
+  // Persist on change
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  }, [settings]);
+
+  // Apply theme to <html>
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", settings.theme);
+  }, [settings.theme]);
+
+  const update = (key, value) =>
+    setSettings((prev) => ({ ...prev, [key]: value }));
+
+  const reset = () => setSettings(DEFAULTS);
+
+  return (
+    <SettingsContext.Provider value={{ settings, update, reset }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export const useSettings = () => useContext(SettingsContext);
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -4,7 +4,9 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* Dark Theme */
+:root,
+[data-theme="dark"] {
   --bg: #0c1a0e;
   --bg-2: #111f13;
   --bg-3: #162018;
@@ -23,8 +25,42 @@
   --red-dim: #7f1d1d;
   --blue: #60a5fa;
   --blue-dim: #1e3a5f;
+
+  /* Component tokens */
+  --input-bg: #162018;
+  --scrollbar-thumb: #3d6040;
+  --tooltip-bg: #1a2b1c;
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Light Theme */
+[data-theme="light"] {
+  --bg: #f0f7f1;
+  --bg-2: #ffffff;
+  --bg-3: #e8f2ea;
+  --surface: #ffffff;
+  --surface-2: #f4faf5;
+  --border: #c8deca;
+  --border-bright: #7db688;
+  --text: #1a2e1c;
+  --text-2: #3d5e42;
+  --text-3: #6a8a6d;
+  --green: #1a7c3a;
+  --green-dim: #c8e6d0;
+  --amber: #b45309;
+  --amber-dim: #fde68a;
+  --red: #dc2626;
+  --red-dim: #fecaca;
+  --blue: #1d4ed8;
+  --blue-dim: #bfdbfe;
+
+  --input-bg: #f4faf5;
+  --scrollbar-thumb: #7db688;
+  --tooltip-bg: #ffffff;
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
 }
 
+/* Reset */
 * {
   box-sizing: border-box;
 }
@@ -36,6 +72,9 @@ body {
   font-family: "Syne", sans-serif;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
+  transition:
+    background 0.25s ease,
+    color 0.25s ease;
 }
 
 /* Scrollbar */
@@ -47,11 +86,101 @@ body {
   background: var(--bg-2);
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--border-bright);
+  background: var(--scrollbar-thumb);
   border-radius: 3px;
 }
 
-/* Utility classes */
+/* TYPOGRAPHY */
+/* Section headings (// COMMENT style) */
+.section-label {
+  font-size: 11px;
+  font-family: "DM Mono", monospace;
+  color: var(--text-3);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+.section-label::before {
+  content: "//";
+  color: var(--green);
+  opacity: 0.6;
+  font-weight: 700;
+}
+
+/* Sensor value */
+.sensor-value {
+  font-size: 28px;
+  font-weight: 700;
+  font-family: "DM Mono", monospace;
+  line-height: 1;
+}
+.sensor-value-sm {
+  font-size: 20px;
+  font-weight: 700;
+  font-family: "DM Mono", monospace;
+  line-height: 1;
+}
+.sensor-value-xs {
+  font-size: 15px;
+  font-weight: 600;
+  font-family: "DM Mono", monospace;
+}
+.sensor-label {
+  font-size: 11px;
+  font-family: "DM Mono", monospace;
+  color: var(--text-3);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+.sensor-unit {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-3);
+  margin-left: 3px;
+}
+
+/* Page heading */
+.page-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+.page-subtitle {
+  font-size: 12px;
+  font-family: "DM Mono", monospace;
+  color: var(--text-3);
+  margin: 2px 0 0;
+}
+
+/* Table */
+.data-table th {
+  font-size: 11px;
+  font-family: "DM Mono", monospace;
+  color: var(--text-3);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  text-align: left;
+  background: var(--bg-3);
+  border-bottom: 1px solid var(--border);
+}
+.data-table td {
+  padding: 11px 20px;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-2);
+}
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* UTILITIES */
 .font-mono {
   font-family: "DM Mono", monospace;
 }
@@ -59,34 +188,13 @@ body {
   font-family: "Instrument Serif", serif;
 }
 
-/* Noise texture overlay */
-.noise::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Glow effects */
 .glow-green {
   box-shadow:
     0 0 20px rgba(74, 222, 128, 0.15),
     0 0 60px rgba(74, 222, 128, 0.05);
 }
-.glow-amber {
-  box-shadow:
-    0 0 20px rgba(245, 158, 11, 0.2),
-    0 0 60px rgba(245, 158, 11, 0.08);
-}
-.glow-red {
-  box-shadow:
-    0 0 20px rgba(248, 113, 113, 0.2),
-    0 0 60px rgba(248, 113, 113, 0.08);
-}
 
-/* Scan line animation */
+/* Scan line */
 @keyframes scanline {
   0% {
     transform: translateY(-100%);
@@ -95,7 +203,6 @@ body {
     transform: translateY(100vh);
   }
 }
-
 .scanline {
   position: fixed;
   top: 0;
@@ -112,8 +219,11 @@ body {
   pointer-events: none;
   z-index: 9999;
 }
+[data-theme="light"] .scanline {
+  display: none;
+}
 
-/* Fade in animation */
+/* Animations */
 @keyframes fadeUp {
   from {
     opacity: 0;
@@ -124,7 +234,6 @@ body {
     transform: translateY(0);
   }
 }
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -133,34 +242,6 @@ body {
     opacity: 1;
   }
 }
-
-@keyframes pulse-border {
-  0%,
-  100% {
-    border-color: rgba(74, 222, 128, 0.3);
-  }
-  50% {
-    border-color: rgba(74, 222, 128, 0.8);
-  }
-}
-
-@keyframes ticker {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-.animate-fade-up {
-  animation: fadeUp 0.5s ease forwards;
-}
-.animate-fade-in {
-  animation: fadeIn 0.3s ease forwards;
-}
-
-/* Status dot pulse */
 @keyframes statusPulse {
   0%,
   100% {
@@ -172,59 +253,28 @@ body {
     transform: scale(0.8);
   }
 }
-
-.status-dot {
-  animation: statusPulse 2s ease-in-out infinite;
-}
-
-/* Card hover effect */
-.card-hover {
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease;
+@keyframes alertPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(248, 113, 113, 0);
+  }
 }
-.card-hover:hover {
-  transform: translateY(-2px);
-  border-color: var(--border-bright);
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
-
-/* Progress bar animation */
 @keyframes progressFill {
   from {
     width: 0;
   }
 }
-
-.progress-fill {
-  animation: progressFill 1s ease forwards;
-}
-
-/* Number counter */
-@keyframes countUp {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.count-up {
-  animation: countUp 0.6s ease forwards;
-}
-
-/* Grid line background */
-.grid-bg {
-  background-image:
-    linear-gradient(rgba(74, 222, 128, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px);
-  background-size: 40px 40px;
-}
-
-/* Terminal cursor blink */
 @keyframes blink {
   0%,
   100% {
@@ -235,22 +285,27 @@ body {
   }
 }
 
+.animate-fade-up {
+  animation: fadeUp 0.5s ease forwards;
+}
+.animate-fade-in {
+  animation: fadeIn 0.3s ease forwards;
+}
+.status-dot {
+  animation: statusPulse 2s ease-in-out infinite;
+}
+.alert-pulse {
+  animation: alertPulse 2s ease infinite;
+}
+.progress-fill {
+  animation: progressFill 1s ease forwards;
+}
 .cursor-blink::after {
   content: "|";
   animation: blink 1s step-end infinite;
   color: var(--green);
 }
 
-/* Shimmer loading */
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
 .shimmer {
   background: linear-gradient(
     90deg,
@@ -262,33 +317,42 @@ body {
   animation: shimmer 1.5s infinite;
 }
 
-/* Alert badge pulse */
-@keyframes alertPulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 8px rgba(248, 113, 113, 0);
-  }
+.card-hover {
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
 }
-
-.alert-pulse {
-  animation: alertPulse 2s ease infinite;
+.card-hover:hover {
+  transform: translateY(-2px);
+  border-color: var(--border-bright);
+  box-shadow: var(--shadow);
 }
 
-/* Rotating ring */
-@keyframes spin-slow {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.grid-bg {
+  background-image:
+    linear-gradient(rgba(74, 222, 128, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
 }
-.spin-slow {
-  animation: spin-slow 20s linear infinite;
+[data-theme="light"] .grid-bg {
+  background-image:
+    linear-gradient(rgba(26, 124, 58, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(26, 124, 58, 0.05) 1px, transparent 1px);
+}
+
+/* Input fields */
+input,
+select,
+textarea {
+  background: var(--input-bg);
+  color: var(--text);
+  border-color: var(--border);
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
 }
-.spin-slow-reverse {
-  animation: spin-slow 15s linear infinite reverse;
+input::placeholder {
+  color: var(--text-3);
 }
diff --git a/frontend/src/pages/AgentControl.jsx b/frontend/src/pages/AgentControl.jsx
@@ -8,20 +8,19 @@ import {
   Wind,
   Sprout,
   Calendar,
-  Leaf,
   Database,
   Mic,
   Square,
-  Zap,
-  Fan,
-  FlaskConical,
-  Waves,
   Brain,
   ChevronDown,
   Eye,
 } from "lucide-react";
 import { agentService } from "../api/agentApi";
-import { extractSensors, formatOutcome } from "../utils/dataUtils";
+import { extractSensors } from "../utils/dataUtils";
+import {
+  AgentActionWidget,
+  AgentOutcomeWidget,
+} from "../components/AgentWidgets";
 import Sidebar from "../components/Sidebar";
 
 const INPUT_FIELDS = [
@@ -79,39 +78,6 @@ const INPUT_FIELDS = [
   },
 ];
 
-const ACTION_MAP = {
-  acid_dosage_ml: {
-    label: "Acid Dosage",
-    icon: FlaskConical,
-    unit: "ml",
-    color: "var(--red)",
-  },
-  base_dosage_ml: {
-    label: "Base Dosage",
-    icon: FlaskConical,
-    unit: "ml",
-    color: "#a78bfa",
-  },
-  nutrient_dosage_ml: {
-    label: "Nutrients",
-    icon: Sprout,
-    unit: "ml",
-    color: "var(--green)",
-  },
-  fan_speed_pct: {
-    label: "Fan Speed",
-    icon: Fan,
-    unit: "%",
-    color: "var(--blue)",
-  },
-  water_refill_l: {
-    label: "Water Refill",
-    icon: Waves,
-    unit: "L",
-    color: "var(--blue)",
-  },
-};
-
 export default function AgentControl() {
   const [file, setFile] = useState(null);
   const [preview, setPreview] = useState(null);
@@ -122,8 +88,8 @@ export default function AgentControl() {
   const [searchResults, setSearchResults] = useState([]);
   const [textQuery, setTextQuery] = useState("");
 
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [explanationText, setExplanationText] = useState("");
+  const [showExplain, setShowExplain] = useState(false);
+  const [explanation, setExplanation] = useState("");
 
   const [isRecording, setIsRecording] = useState(false);
   const mediaRecorderRef = useRef(null);
@@ -174,7 +140,7 @@ export default function AgentControl() {
     setDecision(null);
     try {
       const res = await agentService.searchFMU(file, sensors);
-      if (res.explanation) setExplanationText(res.explanation);
+      if (res.explanation) setExplanation(res.explanation);
       if (res.agent_decision) setDecision(res.agent_decision);
       setSearchResults(res.search_results || []);
     } catch {
@@ -267,7 +233,7 @@ export default function AgentControl() {
             zIndex: 50,
             padding: "10px 16px",
             borderRadius: 12,
-            fontSize: 12,
+            fontSize: 13,
             fontFamily: "DM Mono, monospace",
             background:
               toast.type === "error"
@@ -317,24 +283,8 @@ export default function AgentControl() {
             <Brain size={15} style={{ color: "var(--green)" }} />
           </div>
           <div>
-            <h1
-              style={{
-                fontWeight: 700,
-                fontSize: 15,
-                color: "var(--text)",
-                margin: 0,
-              }}
-            >
-              Agent Control
-            </h1>
-            <p
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-3)",
-                margin: 0,
-              }}
-            >
+            <h1 className="page-title">Agent Control</h1>
+            <p className="page-subtitle">
               Ingest memories · Query the Supervisor · Run analysis
             </p>
           </div>
@@ -391,7 +341,7 @@ export default function AgentControl() {
                 background: "transparent",
                 border: "none",
                 outline: "none",
-                fontSize: 13,
+                fontSize: 14,
                 fontFamily: "DM Mono, monospace",
                 color: "var(--text)",
                 caretColor: "var(--green)",
@@ -400,7 +350,7 @@ export default function AgentControl() {
             <button
               onClick={handleTextQuery}
               style={{
-                padding: "6px 16px",
+                padding: "6px 18px",
                 borderRadius: 8,
                 fontSize: 13,
                 fontWeight: 600,
@@ -493,7 +443,7 @@ export default function AgentControl() {
                       <div
                         style={{
                           fontWeight: 600,
-                          fontSize: 13,
+                          fontSize: 14,
                           color: "var(--text-2)",
                         }}
                       >
@@ -501,7 +451,7 @@ export default function AgentControl() {
                       </div>
                       <div
                         style={{
-                          fontSize: 11,
+                          fontSize: 12,
                           marginTop: 4,
                           color: "var(--text-3)",
                         }}
@@ -586,16 +536,7 @@ export default function AgentControl() {
                 border: "1px solid var(--border)",
               }}
             >
-              <div
-                style={{
-                  fontSize: 10,
-                  fontFamily: "DM Mono, monospace",
-                  color: "var(--text-3)",
-                  marginBottom: 16,
-                }}
-              >
-                // SENSOR PARAMETERS
-              </div>
+              <div className="section-label">SENSOR PARAMETERS</div>
               <div
                 style={{
                   display: "grid",
@@ -614,17 +555,12 @@ export default function AgentControl() {
                     placeholder,
                   }) => (
                     <div key={name}>
-                      <label
-                        style={{
-                          fontSize: 10,
-                          fontFamily: "DM Mono, monospace",
-                          display: "block",
-                          marginBottom: 5,
-                          color,
-                        }}
+                      <div
+                        className="sensor-label"
+                        style={{ color, marginBottom: 5 }}
                       >
                         {label.toUpperCase()}
-                      </label>
+                      </div>
                       <div style={{ position: "relative" }}>
                         <Icon
                           size={12}
@@ -652,10 +588,10 @@ export default function AgentControl() {
                                 appearance: "none",
                                 paddingLeft: 30,
                                 paddingRight: 28,
-                                paddingTop: 8,
-                                paddingBottom: 8,
+                                paddingTop: 9,
+                                paddingBottom: 9,
                                 borderRadius: 8,
-                                fontSize: 12,
+                                fontSize: 13,
                                 fontFamily: "DM Mono, monospace",
                                 background: "var(--bg-3)",
                                 border: "1px solid var(--border)",
@@ -695,10 +631,10 @@ export default function AgentControl() {
                               width: "100%",
                               paddingLeft: 30,
                               paddingRight: 10,
-                              paddingTop: 8,
-                              paddingBottom: 8,
+                              paddingTop: 9,
+                              paddingBottom: 9,
                               borderRadius: 8,
-                              fontSize: 12,
+                              fontSize: 13,
                               fontFamily: "DM Mono, monospace",
                               background: "var(--bg-3)",
                               border: "1px solid var(--border)",
@@ -741,8 +677,8 @@ export default function AgentControl() {
                   <Brain size={15} style={{ color: "var(--green)" }} />
                   <span
                     style={{
-                      fontWeight: 600,
-                      fontSize: 13,
+                      fontWeight: 700,
+                      fontSize: 15,
                       color: "var(--text)",
                     }}
                   >
@@ -750,14 +686,14 @@ export default function AgentControl() {
                   </span>
                 </div>
                 <button
-                  onClick={() => setShowExplanation(!showExplanation)}
+                  onClick={() => setShowExplain(!showExplain)}
                   style={{
                     display: "flex",
                     alignItems: "center",
                     gap: 6,
-                    fontSize: 11,
+                    fontSize: 12,
                     fontFamily: "DM Mono, monospace",
-                    padding: "5px 10px",
+                    padding: "5px 12px",
                     borderRadius: 8,
                     cursor: "pointer",
                     background: "var(--surface-2)",
@@ -765,86 +701,15 @@ export default function AgentControl() {
                     color: "var(--text-3)",
                   }}
                 >
-                  <Eye size={11} /> {showExplanation ? "Hide" : "View"} logic
+                  <Eye size={11} /> {showExplain ? "Hide" : "View"} logic
                 </button>
               </div>
 
-              <div
-                style={{
-                  padding: 20,
-                  display: "grid",
-                  gridTemplateColumns: "repeat(5, 1fr)",
-                  gap: 12,
-                }}
-              >
-                {Object.entries(decision).map(([key, value]) => {
-                  const meta = ACTION_MAP[key] || {
-                    label: key,
-                    icon: Zap,
-                    unit: "",
-                    color: "var(--text-3)",
-                  };
-                  const Icon = meta.icon;
-                  return (
-                    <div
-                      key={key}
-                      style={{
-                        borderRadius: 12,
-                        padding: 14,
-                        textAlign: "center",
-                        background: "var(--bg-3)",
-                        border: "1px solid var(--border)",
-                      }}
-                    >
-                      <div
-                        style={{
-                          width: 30,
-                          height: 30,
-                          borderRadius: 8,
-                          background: `${meta.color}15`,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          margin: "0 auto 8px",
-                        }}
-                      >
-                        <Icon size={13} style={{ color: meta.color }} />
-                      </div>
-                      <div
-                        style={{
-                          fontWeight: 700,
-                          fontFamily: "DM Mono, monospace",
-                          fontSize: 20,
-                          color: meta.color,
-                        }}
-                      >
-                        {value}
-                      </div>
-                      <div
-                        style={{
-                          fontSize: 9,
-                          fontFamily: "DM Mono, monospace",
-                          marginTop: 2,
-                          color: "var(--text-3)",
-                        }}
-                      >
-                        {meta.unit}
-                      </div>
-                      <div
-                        style={{
-                          fontSize: 10,
-                          marginTop: 4,
-                          color: "var(--text-3)",
-                        }}
-                      >
-                        {meta.label}
-                      </div>
-                    </div>
-                  );
-                })}
+              <div style={{ padding: 20 }}>
+                <AgentActionWidget actionTaken={decision} compact={false} />
               </div>
 
-              {showExplanation && explanationText && (
+              {showExplain && explanation && (
                 <div
                   style={{
                     borderTop: "1px solid var(--border)",
@@ -852,27 +717,18 @@ export default function AgentControl() {
                     background: "var(--bg-3)",
                   }}
                 >
-                  <div
-                    style={{
-                      fontSize: 10,
-                      fontFamily: "DM Mono, monospace",
-                      color: "var(--text-3)",
-                      marginBottom: 8,
-                    }}
-                  >
-                    // SUPERVISOR REASONING
-                  </div>
+                  <div className="section-label">SUPERVISOR REASONING</div>
                   <pre
                     style={{
-                      fontSize: 11,
+                      fontSize: 12,
                       fontFamily: "DM Mono, monospace",
-                      lineHeight: 1.7,
+                      lineHeight: 1.8,
                       whiteSpace: "pre-wrap",
                       color: "var(--text-2)",
                       margin: 0,
                     }}
                   >
-                    {explanationText}
+                    {explanation}
                   </pre>
                 </div>
               )}
@@ -882,29 +738,13 @@ export default function AgentControl() {
           {/* Search results */}
           {searchResults.length > 0 && (
             <div>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  marginBottom: 14,
-                }}
-              >
-                <Database size={13} style={{ color: "var(--text-3)" }} />
-                <span
-                  style={{
-                    fontSize: 11,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                  }}
-                >
-                  MEMORY MATCHES · {searchResults.length} FOUND
-                </span>
+              <div className="section-label">
+                MEMORY MATCHES · {searchResults.length} FOUND
               </div>
               <div
                 style={{
                   display: "grid",
-                  gridTemplateColumns: "repeat(3, 1fr)",
+                  gridTemplateColumns: "repeat(3,1fr)",
                   gap: 14,
                 }}
               >
@@ -915,8 +755,8 @@ export default function AgentControl() {
                       key={res.id}
                       className="card-hover"
                       style={{
-                        borderRadius: 12,
-                        padding: 14,
+                        borderRadius: 14,
+                        padding: 16,
                         background: "var(--surface)",
                         border: "1px solid var(--border)",
                       }}
@@ -926,32 +766,23 @@ export default function AgentControl() {
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "space-between",
-                          marginBottom: 10,
+                          marginBottom: 12,
                         }}
                       >
-                        <div
+                        <span
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 6,
+                            fontWeight: 600,
+                            fontSize: 14,
+                            color: "var(--text)",
                           }}
                         >
-                          <Leaf size={13} style={{ color: "var(--green)" }} />
-                          <span
-                            style={{
-                              fontWeight: 600,
-                              fontSize: 13,
-                              color: "var(--text)",
-                            }}
-                          >
-                            {res.payload.crop || "Unknown"}
-                          </span>
-                        </div>
+                          {res.payload.crop || "Unknown"}
+                        </span>
                         <span
                           style={{
-                            fontSize: 10,
+                            fontSize: 11,
                             fontFamily: "DM Mono, monospace",
-                            padding: "2px 6px",
+                            padding: "2px 7px",
                             borderRadius: 4,
                             background: "rgba(74,222,128,0.1)",
                             color: "var(--green)",
@@ -960,16 +791,28 @@ export default function AgentControl() {
                           {((res.score || 1) * 100).toFixed(0)}%
                         </span>
                       </div>
+
                       <div
                         style={{
                           display: "grid",
                           gridTemplateColumns: "1fr 1fr",
                           gap: 8,
+                          marginBottom: 12,
                         }}
                       >
                         {[
                           { label: "pH", value: s.ph, color: "var(--green)" },
                           { label: "EC", value: s.ec, color: "var(--amber)" },
+                          {
+                            label: "Temp",
+                            value: s.temp + "°",
+                            color: "var(--blue)",
+                          },
+                          {
+                            label: "RH",
+                            value: s.humidity + "%",
+                            color: "#a78bfa",
+                          },
                         ].map(({ label, value, color }) => (
                           <div
                             key={label}
@@ -981,38 +824,24 @@ export default function AgentControl() {
                             }}
                           >
                             <div
-                              style={{
-                                fontSize: 9,
-                                fontFamily: "DM Mono, monospace",
-                                color: "var(--text-3)",
-                              }}
+                              className="sensor-label"
+                              style={{ marginBottom: 2 }}
                             >
                               {label}
                             </div>
-                            <div
-                              style={{
-                                fontWeight: 700,
-                                fontFamily: "DM Mono, monospace",
-                                fontSize: 14,
-                                color,
-                              }}
-                            >
+                            <div className="sensor-value-sm" style={{ color }}>
                               {value}
                             </div>
                           </div>
                         ))}
                       </div>
+
+                      {/* Outcome badge */}
                       {res.payload.outcome && (
-                        <div
-                          style={{
-                            marginTop: 8,
-                            fontSize: 11,
-                            color: "var(--text-3)",
-                          }}
-                        >
-                          {formatOutcome(res.payload.outcome)?.substring(0, 80)}
-                          …
-                        </div>
+                        <AgentOutcomeWidget
+                          outcome={res.payload.outcome}
+                          rewardScore={res.payload.reward_score}
+                        />
                       )}
                     </div>
                   );
diff --git a/frontend/src/pages/Analytics.jsx b/frontend/src/pages/Analytics.jsx
@@ -37,17 +37,18 @@ const CustomTooltip = ({ active, payload, label }) => {
       style={{
         padding: "8px 12px",
         borderRadius: 8,
-        fontSize: 11,
+        fontSize: 12,
         fontFamily: "DM Mono, monospace",
-        background: "var(--surface-2)",
+        background: "var(--tooltip-bg)",
         border: "1px solid var(--border)",
         color: "var(--text)",
+        boxShadow: "var(--shadow)",
       }}
     >
       <div style={{ color: "var(--text-3)", marginBottom: 4 }}>{label}</div>
       {payload.map((p) => (
-        <div key={p.dataKey} style={{ color: p.color }}>
-          {p.name}: {p.value}
+        <div key={p.dataKey} style={{ color: p.color, marginTop: 2 }}>
+          {p.name}: <strong>{p.value}</strong>
         </div>
       ))}
     </div>
@@ -62,47 +63,34 @@ function MetricCard({ label, value, unit, change, color, loading }) {
     <div
       className="card-hover"
       style={{
-        borderRadius: 12,
-        padding: 20,
+        borderRadius: 14,
+        padding: "20px 22px",
         background: "var(--surface)",
         border: "1px solid var(--border)",
       }}
     >
-      <div
-        style={{
-          fontSize: 10,
-          fontFamily: "DM Mono, monospace",
-          color: "var(--text-3)",
-          marginBottom: 10,
-        }}
-      >
-        {label}
-      </div>
+      <div className="sensor-label">{label}</div>
       {loading ? (
         <div
           className="shimmer"
-          style={{ height: 32, width: 96, borderRadius: 6 }}
+          style={{ height: 36, width: 100, borderRadius: 6 }}
         />
       ) : (
         <div
           style={{
-            fontSize: 28,
-            fontWeight: 700,
-            fontFamily: "DM Mono, monospace",
-            color: color || "var(--text)",
+            display: "flex",
+            alignItems: "baseline",
+            gap: 4,
+            marginTop: 6,
           }}
         >
-          {value}
           <span
-            style={{
-              fontSize: 14,
-              fontWeight: 400,
-              marginLeft: 4,
-              color: "var(--text-3)",
-            }}
+            className="sensor-value"
+            style={{ color: color || "var(--text)" }}
           >
-            {unit}
+            {value}
           </span>
+          {unit && <span className="sensor-unit">{unit}</span>}
         </div>
       )}
       <div
@@ -110,8 +98,8 @@ function MetricCard({ label, value, unit, change, color, loading }) {
           display: "flex",
           alignItems: "center",
           gap: 4,
-          marginTop: 8,
-          fontSize: 11,
+          marginTop: 10,
+          fontSize: 12,
           fontFamily: "DM Mono, monospace",
         }}
       >
@@ -127,34 +115,26 @@ function MetricCard({ label, value, unit, change, color, loading }) {
             color: flat ? "var(--text-3)" : up ? "var(--green)" : "var(--red)",
           }}
         >
-          {Math.abs(change)}% vs prior period
+          {Math.abs(change)}% vs prior
         </span>
       </div>
     </div>
   );
 }
 
-function SectionTitle({ children, sub }) {
+function SectionHead({ label, title }) {
   return (
     <div style={{ marginBottom: 16 }}>
-      <div
-        style={{
-          fontSize: 10,
-          fontFamily: "DM Mono, monospace",
-          color: "var(--text-3)",
-        }}
-      >
-        // {sub}
-      </div>
+      <div className="section-label">{label}</div>
       <h2
         style={{
           fontWeight: 700,
-          fontSize: 15,
+          fontSize: 16,
           color: "var(--text)",
           margin: "4px 0 0",
         }}
       >
-        {children}
+        {title}
       </h2>
     </div>
   );
@@ -175,7 +155,7 @@ function EmptyChart({ height = 180, message = "No data yet" }) {
     >
       <span
         style={{
-          fontSize: 11,
+          fontSize: 12,
           fontFamily: "DM Mono, monospace",
           color: "var(--text-3)",
         }}
@@ -200,13 +180,11 @@ export default function Analytics() {
   // Latest fleet-wide averages
   const latestSensors = useMemo(() => {
     if (!dashboard.length) return { ph: 0, ec: 0, temp: 0 };
-    const sensors = dashboard.map((d) => extractSensors(d.payload));
+    const s = dashboard.map((d) => extractSensors(d.payload));
     return {
-      ph: parseFloat(avg(sensors.map((s) => parseFloat(s.ph) || 0)).toFixed(2)),
-      ec: parseFloat(avg(sensors.map((s) => parseFloat(s.ec) || 0)).toFixed(2)),
-      temp: parseFloat(
-        avg(sensors.map((s) => parseFloat(s.temp) || 0)).toFixed(1),
-      ),
+      ph: parseFloat(avg(s.map((x) => parseFloat(x.ph) || 0)).toFixed(2)),
+      ec: parseFloat(avg(s.map((x) => parseFloat(x.ec) || 0)).toFixed(2)),
+      temp: parseFloat(avg(s.map((x) => parseFloat(x.temp) || 0)).toFixed(1)),
     };
   }, [dashboard]);
 
@@ -217,10 +195,10 @@ export default function Analytics() {
       .slice(0, Math.floor(allPoints.length / 2))
       .map((p) => extractSensors(p.payload));
     return {
-      ph: parseFloat(avg(older.map((s) => parseFloat(s.ph) || 0)).toFixed(2)),
-      ec: parseFloat(avg(older.map((s) => parseFloat(s.ec) || 0)).toFixed(2)),
+      ph: parseFloat(avg(older.map((x) => parseFloat(x.ph) || 0)).toFixed(2)),
+      ec: parseFloat(avg(older.map((x) => parseFloat(x.ec) || 0)).toFixed(2)),
       temp: parseFloat(
-        avg(older.map((s) => parseFloat(s.temp) || 0)).toFixed(1),
+        avg(older.map((x) => parseFloat(x.temp) || 0)).toFixed(1),
       ),
     };
   }, [allPoints, latestSensors]);
@@ -228,8 +206,17 @@ export default function Analytics() {
   const activityData = useMemo(() => dailyCropActivity(allPoints), [allPoints]);
   const radarData = useMemo(() => buildRadar(allPoints), [allPoints]);
   const agentStats = useMemo(() => buildAgentStats(allPoints), [allPoints]);
+  const cropSummaryRows = useMemo(() => {
+    if (!dashboard?.length) return [];
+    return dashboard.map((item) => {
+      const p = item.payload || {};
+      const s = extractSensors(p);
+      return { p, s, key: p.crop_id || item.id };
+    });
+  }, [dashboard]);
+
+  const agentRows = agentStats;
 
-  // CSV export
   const handleExport = () => {
     if (!buckets.length) return;
     const header = "time,ph,ec,temp,humidity,entries";
@@ -276,24 +263,8 @@ export default function Analytics() {
           }}
         >
           <div>
-            <h1
-              style={{
-                fontWeight: 700,
-                fontSize: 18,
-                color: "var(--text)",
-                margin: 0,
-              }}
-            >
-              Analytics
-            </h1>
-            <p
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-3)",
-                margin: 0,
-              }}
-            >
+            <h1 className="page-title">Analytics</h1>
+            <p className="page-subtitle">
               {loading
                 ? "Loading…"
                 : `${allPoints.length} data points across ${dashboard.length} crops`}
@@ -314,14 +285,13 @@ export default function Analytics() {
                 style={{
                   padding: "5px 12px",
                   borderRadius: 8,
-                  fontSize: 11,
+                  fontSize: 12,
                   fontFamily: "DM Mono, monospace",
                   cursor: "pointer",
                   background:
                     range === r ? "rgba(74,222,128,0.12)" : "var(--surface)",
                   border: `1px solid ${range === r ? "rgba(74,222,128,0.3)" : "var(--border)"}`,
                   color: range === r ? "var(--green)" : "var(--text-3)",
-                  transition: "all 0.15s",
                 }}
               >
                 {r}
@@ -335,7 +305,7 @@ export default function Analytics() {
                 gap: 6,
                 padding: "5px 12px",
                 borderRadius: 8,
-                fontSize: 11,
+                fontSize: 12,
                 fontFamily: "DM Mono, monospace",
                 background: "var(--surface)",
                 border: "1px solid var(--border)",
@@ -359,11 +329,11 @@ export default function Analytics() {
             gap: 28,
           }}
         >
-          {/* Metric cards */}
+          {/* Metric Cards */}
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "repeat(4, 1fr)",
+              gridTemplateColumns: "repeat(4,1fr)",
               gap: 12,
             }}
           >
@@ -404,7 +374,7 @@ export default function Analytics() {
             />
           </div>
 
-          {/* pH + EC */}
+          {/* pH + EC Charts */}
           <div
             style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
           >
@@ -427,15 +397,16 @@ export default function Analytics() {
               <div
                 key={key}
                 style={{
-                  borderRadius: 12,
+                  borderRadius: 14,
                   padding: 20,
                   background: "var(--surface)",
                   border: "1px solid var(--border)",
                 }}
               >
-                <SectionTitle sub={`${range.toUpperCase()} TRACE`}>
-                  {title}
-                </SectionTitle>
+                <SectionHead
+                  label={`${range.toUpperCase()} TRACE`}
+                  title={title}
+                />
                 {buckets.length < 2 ? (
                   <EmptyChart message="Not enough data for this range" />
                 ) : (
@@ -463,7 +434,7 @@ export default function Analytics() {
                       <XAxis
                         dataKey="label"
                         tick={{
-                          fontSize: 9,
+                          fontSize: 10,
                           fill: "var(--text-3)",
                           fontFamily: "DM Mono",
                         }}
@@ -474,7 +445,7 @@ export default function Analytics() {
                       <YAxis
                         domain={["auto", "auto"]}
                         tick={{
-                          fontSize: 9,
+                          fontSize: 10,
                           fill: "var(--text-3)",
                           fontFamily: "DM Mono",
                         }}
@@ -501,15 +472,16 @@ export default function Analytics() {
           {/* Temp + Humidity */}
           <div
             style={{
-              borderRadius: 12,
+              borderRadius: 14,
               padding: 20,
               background: "var(--surface)",
               border: "1px solid var(--border)",
             }}
           >
-            <SectionTitle sub={`${range.toUpperCase()} TRACE`}>
-              Temperature & Humidity
-            </SectionTitle>
+            <SectionHead
+              label={`${range.toUpperCase()} TRACE`}
+              title="Temperature & Humidity"
+            />
             {buckets.length < 2 ? (
               <EmptyChart message="Not enough data for this range" />
             ) : (
@@ -523,7 +495,7 @@ export default function Analytics() {
                   <XAxis
                     dataKey="label"
                     tick={{
-                      fontSize: 9,
+                      fontSize: 10,
                       fill: "var(--text-3)",
                       fontFamily: "DM Mono",
                     }}
@@ -535,7 +507,7 @@ export default function Analytics() {
                     yAxisId="left"
                     domain={["auto", "auto"]}
                     tick={{
-                      fontSize: 9,
+                      fontSize: 10,
                       fill: "var(--text-3)",
                       fontFamily: "DM Mono",
                     }}
@@ -547,7 +519,7 @@ export default function Analytics() {
                     orientation="right"
                     domain={["auto", "auto"]}
                     tick={{
-                      fontSize: 9,
+                      fontSize: 10,
                       fill: "var(--text-3)",
                       fontFamily: "DM Mono",
                     }}
@@ -584,15 +556,16 @@ export default function Analytics() {
           >
             <div
               style={{
-                borderRadius: 12,
+                borderRadius: 14,
                 padding: 20,
                 background: "var(--surface)",
                 border: "1px solid var(--border)",
               }}
             >
-              <SectionTitle sub="DAILY ACTIVITY">
-                Sequences Logged per Day
-              </SectionTitle>
+              <SectionHead
+                label="DAILY ACTIVITY"
+                title="Sequences Logged per Day"
+              />
               {activityData.length < 2 ? (
                 <EmptyChart height={180} message="Need 2+ days of data" />
               ) : (
@@ -606,7 +579,7 @@ export default function Analytics() {
                     <XAxis
                       dataKey="d"
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -615,7 +588,7 @@ export default function Analytics() {
                     />
                     <YAxis
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -637,15 +610,16 @@ export default function Analytics() {
 
             <div
               style={{
-                borderRadius: 12,
+                borderRadius: 14,
                 padding: 20,
                 background: "var(--surface)",
                 border: "1px solid var(--border)",
               }}
             >
-              <SectionTitle sub="PARAMETER HEALTH">
-                In-Range Score (%)
-              </SectionTitle>
+              <SectionHead
+                label="PARAMETER HEALTH"
+                title="In-Range Score (%)"
+              />
               {radarData.length < 2 ? (
                 <EmptyChart height={180} message="Not enough data points" />
               ) : (
@@ -660,7 +634,7 @@ export default function Analytics() {
                     <PolarAngleAxis
                       dataKey="metric"
                       tick={{
-                        fontSize: 9,
+                        fontSize: 11,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -679,31 +653,28 @@ export default function Analytics() {
             </div>
           </div>
 
-          {/* Crop summary table */}
+          {/* Crop Summary Table */}
           <div
             style={{
-              borderRadius: 12,
+              borderRadius: 14,
               overflow: "hidden",
               background: "var(--surface)",
               border: "1px solid var(--border)",
             }}
           >
             <div
-              style={{ padding: 20, borderBottom: "1px solid var(--border)" }}
+              style={{
+                padding: "16px 20px",
+                borderBottom: "1px solid var(--border)",
+              }}
             >
-              <SectionTitle sub="PER CROP">Latest Sensor Summary</SectionTitle>
+              <SectionHead label="PER CROP" title="Latest Sensor Summary" />
             </div>
             {loading ? (
-              <div
-                style={{
-                  padding: 32,
-                  display: "flex",
-                  justifyContent: "center",
-                }}
-              >
+              <div style={{ padding: 32, textAlign: "center" }}>
                 <span
                   style={{
-                    fontSize: 11,
+                    fontSize: 12,
                     fontFamily: "DM Mono, monospace",
                     color: "var(--text-3)",
                   }}
@@ -711,28 +682,25 @@ export default function Analytics() {
                   Loading…
                 </span>
               </div>
-            ) : dashboard.length === 0 ? (
+            ) : cropSummaryRows.length === 0 ? (
               <div
                 style={{
                   padding: 32,
                   textAlign: "center",
-                  fontSize: 11,
+                  fontSize: 12,
                   fontFamily: "DM Mono, monospace",
                   color: "var(--text-3)",
                 }}
               >
-                No crops in database
+                No crops found in database
               </div>
             ) : (
               <table
-                style={{
-                  width: "100%",
-                  borderCollapse: "collapse",
-                  fontSize: 12,
-                }}
+                className="data-table"
+                style={{ width: "100%", borderCollapse: "collapse" }}
               >
                 <thead>
-                  <tr style={{ borderBottom: "1px solid var(--border)" }}>
+                  <tr>
                     {[
                       "Crop ID",
                       "Type",
@@ -742,245 +710,223 @@ export default function Analytics() {
                       "Temp",
                       "Sequences",
                     ].map((h) => (
-                      <th
-                        key={h}
-                        style={{
-                          padding: "10px 20px",
-                          textAlign: "left",
-                          fontSize: 10,
-                          fontFamily: "DM Mono, monospace",
-                          color: "var(--text-3)",
-                          fontWeight: 400,
-                        }}
-                      >
-                        {h}
-                      </th>
+                      <th key={h}>{h}</th>
                     ))}
                   </tr>
                 </thead>
                 <tbody>
-                  {dashboard.map((item, i) => {
-                    const p = item.payload || {};
-                    const s = extractSensors(p);
-                    return (
-                      <tr
-                        key={i}
-                        style={{ borderBottom: "1px solid var(--border)" }}
+                  {cropSummaryRows.map(({ p, s, key }) => (
+                    <tr
+                      key={key}
+                      style={{ transition: "background 0.12s" }}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.background = "var(--bg-3)")
+                      }
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.background = "transparent")
+                      }
+                    >
+                      <td
+                        style={{
+                          fontFamily: "DM Mono, monospace",
+                          fontSize: 12,
+                          color: "var(--text)",
+                          fontWeight: 600,
+                        }}
                       >
-                        <td
-                          style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
-                            fontSize: 11,
-                            color: "var(--text)",
-                          }}
-                        >
-                          {p.crop_id || "—"}
-                        </td>
-                        <td
-                          style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
-                            fontSize: 11,
-                            color: "var(--text-2)",
-                          }}
-                        >
-                          {p.crop || "—"}
-                        </td>
-                        <td
-                          style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
-                            fontSize: 11,
-                            color: "var(--text-2)",
-                          }}
-                        >
-                          {p.stage || "—"}
-                        </td>
-                        <td
-                          style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
-                            fontSize: 11,
-                            color: "var(--green)",
-                          }}
+                        {p.crop_id || "—"}
+                      </td>
+                      <td>{p.crop || "—"}</td>
+                      <td
+                        style={{
+                          color: "var(--text-3)",
+                          fontSize: 12,
+                          fontFamily: "DM Mono, monospace",
+                        }}
+                      >
+                        {p.stage || "—"}
+                      </td>
+                      <td>
+                        <span
+                          className="sensor-value-xs"
+                          style={{ color: "var(--green)" }}
                         >
                           {s.ph}
-                        </td>
-                        <td
-                          style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
-                            fontSize: 11,
-                            color: "var(--amber)",
-                          }}
+                        </span>
+                      </td>
+                      <td>
+                        <span
+                          className="sensor-value-xs"
+                          style={{ color: "var(--amber)" }}
                         >
                           {s.ec}
-                        </td>
-                        <td
+                        </span>
+                        <span
                           style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
                             fontSize: 11,
-                            color: "var(--blue)",
+                            color: "var(--text-3)",
+                            marginLeft: 3,
                           }}
                         >
-                          {s.temp}°C
-                        </td>
-                        <td
+                          dS/m
+                        </span>
+                      </td>
+                      <td>
+                        <span
+                          className="sensor-value-xs"
+                          style={{ color: "var(--blue)" }}
+                        >
+                          {s.temp}
+                        </span>
+                        <span
                           style={{
-                            padding: "10px 20px",
-                            fontFamily: "DM Mono, monospace",
                             fontSize: 11,
-                            color: "var(--text-2)",
+                            color: "var(--text-3)",
+                            marginLeft: 2,
                           }}
                         >
-                          {p.sequence_number || 1}
-                        </td>
-                      </tr>
-                    );
-                  })}
+                          °C
+                        </span>
+                      </td>
+                      <td
+                        style={{
+                          fontFamily: "DM Mono, monospace",
+                          fontSize: 13,
+                          color: "var(--text-2)",
+                        }}
+                      >
+                        {p.sequence_number || 1}
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             )}
           </div>
 
-          {/* Agent activity */}
-          {agentStats.length > 0 && (
+          {/* Agent Activity Table */}
+          <div
+            style={{
+              borderRadius: 14,
+              overflow: "hidden",
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+            }}
+          >
             <div
               style={{
-                borderRadius: 12,
-                overflow: "hidden",
-                background: "var(--surface)",
-                border: "1px solid var(--border)",
+                padding: "16px 20px",
+                borderBottom: "1px solid var(--border)",
               }}
             >
-              <div
-                style={{ padding: 20, borderBottom: "1px solid var(--border)" }}
-              >
-                <SectionTitle sub="DERIVED FROM STORED ACTIONS">
-                  Agent Activity
-                </SectionTitle>
-              </div>
-              <table
-                style={{
-                  width: "100%",
-                  borderCollapse: "collapse",
-                  fontSize: 12,
-                }}
-              >
-                <thead>
-                  <tr style={{ borderBottom: "1px solid var(--border)" }}>
-                    {[
-                      "Agent",
-                      "Appearances in Log",
-                      "Success Rate",
-                      "Status",
-                    ].map((h) => (
-                      <th
-                        key={h}
-                        style={{
-                          padding: "10px 20px",
-                          textAlign: "left",
-                          fontSize: 10,
-                          fontFamily: "DM Mono, monospace",
-                          color: "var(--text-3)",
-                          fontWeight: 400,
-                        }}
-                      >
-                        {h}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {agentStats.map(({ name, decisions, accuracy }) => (
-                    <tr
-                      key={name}
-                      style={{ borderBottom: "1px solid var(--border)" }}
+              <SectionHead
+                label="DERIVED FROM STORED ACTIONS"
+                title="Agent Activity"
+              />
+            </div>
+            <table
+              className="data-table"
+              style={{ width: "100%", borderCollapse: "collapse" }}
+            >
+              <thead>
+                <tr>
+                  {["Agent", "Appearances", "Success Rate", "Status"].map(
+                    (h) => (
+                      <th key={h}>{h}</th>
+                    ),
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {agentRows.map(({ name, decisions, accuracy }) => (
+                  <tr
+                    key={name}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.background = "var(--bg-3)")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.background = "transparent")
+                    }
+                    style={{ transition: "background 0.12s" }}
+                  >
+                    <td
+                      style={{
+                        fontFamily: "DM Mono, monospace",
+                        fontWeight: 600,
+                        fontSize: 13,
+                        color: "var(--text)",
+                      }}
                     >
-                      <td
+                      {name}
+                    </td>
+                    <td
+                      style={{ fontFamily: "DM Mono, monospace", fontSize: 13 }}
+                    >
+                      {decisions}
+                    </td>
+                    <td>
+                      <div
                         style={{
-                          padding: "10px 20px",
-                          fontFamily: "DM Mono, monospace",
-                          fontSize: 11,
-                          color: "var(--text)",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10,
                         }}
                       >
-                        {name}
-                      </td>
-                      <td
-                        style={{
-                          padding: "10px 20px",
-                          fontFamily: "DM Mono, monospace",
-                          fontSize: 11,
-                          color: "var(--text-2)",
-                        }}
-                      >
-                        {decisions}
-                      </td>
-                      <td style={{ padding: "10px 20px" }}>
                         <div
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
+                            height: 6,
+                            width: 100,
+                            borderRadius: 3,
+                            background: "var(--border)",
                           }}
                         >
                           <div
                             style={{
-                              height: 6,
-                              width: 96,
+                              height: "100%",
                               borderRadius: 3,
-                              background: "var(--border)",
-                            }}
-                          >
-                            <div
-                              style={{
-                                height: "100%",
-                                borderRadius: 3,
-                                width: `${accuracy}%`,
-                                background:
-                                  accuracy > 80
-                                    ? "var(--green)"
-                                    : accuracy > 50
-                                      ? "var(--amber)"
-                                      : "var(--red)",
-                              }}
-                            />
-                          </div>
-                          <span
-                            style={{
-                              fontFamily: "DM Mono, monospace",
-                              fontSize: 11,
-                              color: "var(--text-2)",
+                              width: `${accuracy}%`,
+                              background:
+                                accuracy > 80
+                                  ? "var(--green)"
+                                  : accuracy > 50
+                                    ? "var(--amber)"
+                                    : "var(--red)",
+                              transition: "width 0.6s ease",
                             }}
-                          >
-                            {accuracy}%
-                          </span>
+                          />
                         </div>
-                      </td>
-                      <td style={{ padding: "10px 20px" }}>
                         <span
                           style={{
-                            fontSize: 10,
                             fontFamily: "DM Mono, monospace",
-                            padding: "3px 8px",
-                            borderRadius: 20,
-                            background: "rgba(74,222,128,0.1)",
-                            color: "var(--green)",
-                            border: "1px solid rgba(74,222,128,0.2)",
+                            fontSize: 13,
+                            color: "var(--text-2)",
+                            minWidth: 36,
                           }}
                         >
-                          ONLINE
+                          {accuracy}%
                         </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
+                      </div>
+                    </td>
+                    <td>
+                      <span
+                        style={{
+                          fontSize: 11,
+                          fontFamily: "DM Mono, monospace",
+                          padding: "3px 10px",
+                          borderRadius: 20,
+                          background: "rgba(74,222,128,0.1)",
+                          color: "var(--green)",
+                          border: "1px solid rgba(74,222,128,0.2)",
+                        }}
+                      >
+                        ONLINE
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       </main>
     </div>
diff --git a/frontend/src/pages/CropDetails.jsx b/frontend/src/pages/CropDetails.jsx
@@ -1,14 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { fetchCropDetails } from "../api/farmApi";
-import {
-  ArrowLeft,
-  Thermometer,
-  Droplet,
-  Wind,
-  Zap,
-  Activity,
-} from "lucide-react";
+import { ArrowLeft, Thermometer, Droplet, Wind, Activity } from "lucide-react";
 import {
   AreaChart,
   Area,
@@ -24,9 +17,13 @@ import {
   extractSensors,
   parsePythonString,
   formatNumber,
-  formatOutcome,
 } from "../utils/dataUtils";
+import {
+  AgentActionWidget,
+  AgentOutcomeWidget,
+} from "../components/AgentWidgets";
 import Sidebar from "../components/Sidebar";
+import { useSettings } from "../hooks/useSettings";
 
 const CustomTooltip = ({ active, payload, label }) => {
   if (!active || !payload?.length) return null;
@@ -35,17 +32,18 @@ const CustomTooltip = ({ active, payload, label }) => {
       style={{
         padding: "8px 12px",
         borderRadius: 8,
-        fontSize: 11,
+        fontSize: 12,
         fontFamily: "DM Mono, monospace",
-        background: "var(--surface-2)",
+        background: "var(--tooltip-bg)",
         border: "1px solid var(--border)",
         color: "var(--text)",
+        boxShadow: "var(--shadow)",
       }}
     >
       <div style={{ color: "var(--text-3)", marginBottom: 4 }}>{label}</div>
       {payload.map((p) => (
-        <div key={p.dataKey} style={{ color: p.color }}>
-          {p.name}: {p.value}
+        <div key={p.dataKey} style={{ color: p.color, marginTop: 2 }}>
+          {p.name}: <strong>{p.value}</strong>
         </div>
       ))}
     </div>
@@ -57,8 +55,8 @@ function StatBox({ icon: Icon, label, value, color, unit }) {
     <div
       className="card-hover"
       style={{
-        borderRadius: 12,
-        padding: 16,
+        borderRadius: 14,
+        padding: "18px 20px",
         background: "var(--surface)",
         border: "1px solid var(--border)",
       }}
@@ -68,53 +66,30 @@ function StatBox({ icon: Icon, label, value, color, unit }) {
           display: "flex",
           alignItems: "center",
           gap: 8,
-          marginBottom: 10,
+          marginBottom: 12,
         }}
       >
         <div
           style={{
-            width: 28,
-            height: 28,
+            width: 32,
+            height: 32,
             borderRadius: 8,
-            background: `${color}15`,
+            background: `${color}18`,
             border: `1px solid ${color}30`,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
           }}
         >
-          <Icon size={13} style={{ color }} />
+          <Icon size={14} style={{ color }} />
         </div>
-        <span
-          style={{
-            fontSize: 10,
-            fontFamily: "DM Mono, monospace",
-            textTransform: "uppercase",
-            color: "var(--text-3)",
-          }}
-        >
-          {label}
-        </span>
+        <span className="sensor-label">{label}</span>
       </div>
-      <div
-        style={{
-          fontSize: 22,
-          fontWeight: 700,
-          fontFamily: "DM Mono, monospace",
-          color,
-        }}
-      >
-        {value}
-        <span
-          style={{
-            fontSize: 13,
-            fontWeight: 400,
-            marginLeft: 2,
-            color: "var(--text-3)",
-          }}
-        >
-          {unit}
+      <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
+        <span className="sensor-value" style={{ color }}>
+          {value}
         </span>
+        {unit && <span className="sensor-unit">{unit}</span>}
       </div>
     </div>
   );
@@ -133,6 +108,9 @@ const TABS = ["overview", "sensors", "log"];
 export default function CropDetails() {
   const { cropId } = useParams();
   const navigate = useNavigate();
+  const { settings } = useSettings();
+  const logLimit = settings.historyLogLimit ?? 20;
+
   const [history, setHistory] = useState([]);
   const [latest, setLatest] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -174,7 +152,7 @@ export default function CropDetails() {
         >
           <span
             style={{
-              fontSize: 12,
+              fontSize: 13,
               fontFamily: "DM Mono, monospace",
               color: "var(--text-3)",
             }}
@@ -271,27 +249,19 @@ export default function CropDetails() {
           </button>
 
           <div>
-            <h1
-              style={{
-                fontWeight: 700,
-                fontSize: 15,
-                color: "var(--text)",
-                margin: 0,
-              }}
-            >
+            <h1 className="page-title">
               {p.crop || "Unknown"}{" "}
-              <span style={{ color: "var(--text-3)", fontWeight: 400 }}>
+              <span
+                style={{
+                  color: "var(--text-3)",
+                  fontWeight: 400,
+                  fontSize: 16,
+                }}
+              >
                 #{p.sequence_number || 0}
               </span>
             </h1>
-            <p
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-3)",
-                margin: 0,
-              }}
-            >
+            <p className="page-subtitle">
               {cropId} · {p.stage}
             </p>
           </div>
@@ -330,9 +300,9 @@ export default function CropDetails() {
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 style={{
-                  padding: "5px 12px",
+                  padding: "5px 14px",
                   borderRadius: 8,
-                  fontSize: 11,
+                  fontSize: 12,
                   fontFamily: "DM Mono, monospace",
                   textTransform: "capitalize",
                   cursor: "pointer",
@@ -340,7 +310,6 @@ export default function CropDetails() {
                     activeTab === tab ? "var(--surface-2)" : "transparent",
                   color: activeTab === tab ? "var(--text)" : "var(--text-3)",
                   border: `1px solid ${activeTab === tab ? "var(--border-bright)" : "transparent"}`,
-                  transition: "all 0.15s",
                 }}
               >
                 {tab}
@@ -363,10 +332,11 @@ export default function CropDetails() {
           {/* OVERVIEW */}
           {activeTab === "overview" && (
             <>
+              {/* Sensor stats */}
               <div
                 style={{
                   display: "grid",
-                  gridTemplateColumns: "repeat(4, 1fr)",
+                  gridTemplateColumns: "repeat(4,1fr)",
                   gap: 12,
                 }}
               >
@@ -400,25 +370,25 @@ export default function CropDetails() {
                 />
               </div>
 
+              {/* Outcome */}
+              {p.outcome && p.outcome !== "PENDING_OBSERVATION" && (
+                <AgentOutcomeWidget
+                  outcome={p.outcome}
+                  rewardScore={p.reward_score}
+                  strategicIntent={p.strategic_intent}
+                />
+              )}
+
               {/* pH chart */}
               <div
                 style={{
-                  borderRadius: 12,
+                  borderRadius: 14,
                   padding: 20,
                   background: "var(--surface)",
                   border: "1px solid var(--border)",
                 }}
               >
-                <div
-                  style={{
-                    fontSize: 10,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                    marginBottom: 16,
-                  }}
-                >
-                  // HISTORICAL pH TRACE
-                </div>
+                <div className="section-label">HISTORICAL pH TRACE</div>
                 <ResponsiveContainer width="100%" height={200}>
                   <AreaChart data={chartData}>
                     <defs>
@@ -443,7 +413,7 @@ export default function CropDetails() {
                     <XAxis
                       dataKey="t"
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -453,7 +423,7 @@ export default function CropDetails() {
                     <YAxis
                       domain={["auto", "auto"]}
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -474,72 +444,25 @@ export default function CropDetails() {
                 </ResponsiveContainer>
               </div>
 
-              {/* AI analysis */}
-              <div
-                style={{
-                  borderRadius: 12,
-                  padding: 20,
-                  background: "var(--surface)",
-                  border: "1px solid var(--border)",
-                }}
-              >
+              {/* Latest Action */}
+              {p.action_taken && p.action_taken !== "PENDING_ACTION" && (
                 <div
                   style={{
-                    fontSize: 10,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                    marginBottom: 12,
+                    borderRadius: 14,
+                    padding: 20,
+                    background: "var(--surface)",
+                    border: "1px solid var(--border)",
                   }}
                 >
-                  // LATEST AI ANALYSIS
-                </div>
-                <div
-                  style={{ display: "flex", alignItems: "flex-start", gap: 12 }}
-                >
-                  <div
-                    style={{
-                      width: 32,
-                      height: 32,
-                      borderRadius: 8,
-                      background: "rgba(74,222,128,0.1)",
-                      border: "1px solid rgba(74,222,128,0.2)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      flexShrink: 0,
-                    }}
-                  >
-                    <Zap size={14} style={{ color: "var(--green)" }} />
-                  </div>
-                  <div
-                    style={{
-                      fontSize: 13,
-                      lineHeight: 1.6,
-                      color: "var(--text-2)",
-                    }}
-                  >
-                    {formatOutcome(p.outcome) ||
-                      "System monitoring active. No anomalies detected."}
+                  <div className="section-label" style={{ marginBottom: 16 }}>
+                    LATEST ACTUATOR COMMAND
                   </div>
+                  <AgentActionWidget
+                    actionTaken={p.action_taken}
+                    compact={false}
+                  />
                 </div>
-                {p.action_taken && p.action_taken !== "PENDING_ACTION" && (
-                  <div
-                    style={{
-                      marginTop: 12,
-                      padding: 10,
-                      borderRadius: 8,
-                      fontFamily: "DM Mono, monospace",
-                      fontSize: 11,
-                      background: "var(--bg-3)",
-                      border: "1px solid var(--border)",
-                      color: "var(--text-3)",
-                    }}
-                  >
-                    <span style={{ color: "var(--green)" }}>ACTION: </span>
-                    {p.action_taken?.substring(0, 200)}…
-                  </div>
-                )}
-              </div>
+              )}
             </>
           )}
 
@@ -548,22 +471,13 @@ export default function CropDetails() {
             <>
               <div
                 style={{
-                  borderRadius: 12,
+                  borderRadius: 14,
                   padding: 20,
                   background: "var(--surface)",
                   border: "1px solid var(--border)",
                 }}
               >
-                <div
-                  style={{
-                    fontSize: 10,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                    marginBottom: 16,
-                  }}
-                >
-                  // TEMP & HUMIDITY
-                </div>
+                <div className="section-label">TEMP &amp; HUMIDITY</div>
                 <ResponsiveContainer width="100%" height={200}>
                   <LineChart data={chartData}>
                     <CartesianGrid
@@ -574,7 +488,7 @@ export default function CropDetails() {
                     <XAxis
                       dataKey="t"
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -583,7 +497,7 @@ export default function CropDetails() {
                     />
                     <YAxis
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -613,22 +527,13 @@ export default function CropDetails() {
 
               <div
                 style={{
-                  borderRadius: 12,
+                  borderRadius: 14,
                   padding: 20,
                   background: "var(--surface)",
                   border: "1px solid var(--border)",
                 }}
               >
-                <div
-                  style={{
-                    fontSize: 10,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                    marginBottom: 16,
-                  }}
-                >
-                  // EC CONCENTRATION
-                </div>
+                <div className="section-label">EC CONCENTRATION</div>
                 <ResponsiveContainer width="100%" height={180}>
                   <AreaChart data={chartData}>
                     <defs>
@@ -653,7 +558,7 @@ export default function CropDetails() {
                     <XAxis
                       dataKey="t"
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -662,7 +567,7 @@ export default function CropDetails() {
                     />
                     <YAxis
                       tick={{
-                        fontSize: 9,
+                        fontSize: 10,
                         fill: "var(--text-3)",
                         fontFamily: "DM Mono",
                       }}
@@ -689,7 +594,7 @@ export default function CropDetails() {
           {activeTab === "log" && (
             <div
               style={{
-                borderRadius: 12,
+                borderRadius: 14,
                 overflow: "hidden",
                 background: "var(--surface)",
                 border: "1px solid var(--border)",
@@ -698,18 +603,12 @@ export default function CropDetails() {
               {/* Header row */}
               <div
                 style={{
-                  padding: "12px 20px",
+                  padding: "14px 20px",
                   borderBottom: "1px solid var(--border)",
                 }}
               >
-                <div
-                  style={{
-                    fontSize: 10,
-                    fontFamily: "DM Mono, monospace",
-                    color: "var(--text-3)",
-                  }}
-                >
-                  // EVENT LOG — {history.length} ENTRIES
+                <div className="section-label">
+                  EVENT LOG — {history.length} ENTRIES (showing last {logLimit})
                 </div>
               </div>
 
@@ -717,102 +616,138 @@ export default function CropDetails() {
               <div>
                 {[...history]
                   .reverse()
-                  .slice(0, 20)
+                  .slice(0, logLimit)
                   .map((h, i) => (
                     <div
                       key={i}
                       style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 12,
-                        padding: "10px 20px",
-                        background:
-                          i % 2 === 0
-                            ? "transparent"
-                            : "rgba(255,255,255,0.015)",
-                        transition: "background 0.15s",
+                        borderBottom: "1px solid var(--border)",
+                        transition: "background 0.12s",
+                        cursor: "default",
                       }}
                       onMouseEnter={(e) =>
                         (e.currentTarget.style.background =
                           "rgba(74,222,128,0.04)")
                       }
                       onMouseLeave={(e) =>
-                        (e.currentTarget.style.background =
-                          i % 2 === 0
-                            ? "transparent"
-                            : "rgba(255,255,255,0.015)")
+                        (e.currentTarget.style.background = "transparent")
                       }
                     >
-                      {/* Severity dot */}
-                      <span
+                      {/* Row header */}
+                      <div
                         style={{
-                          width: 7,
-                          height: 7,
-                          borderRadius: "50%",
-                          background: logDotColor(h.payload),
-                          flexShrink: 0,
-                        }}
-                      />
-
-                      {/* Timestamp */}
-                      <span
-                        style={{
-                          fontSize: 10,
-                          fontFamily: "DM Mono, monospace",
-                          color: "var(--text-3)",
-                          flexShrink: 0,
-                          width: 50,
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10,
+                          padding: "10px 20px",
                         }}
                       >
-                        {h.payload?.timestamp
-                          ? new Date(h.payload.timestamp).toLocaleTimeString(
-                              [],
-                              { hour: "2-digit", minute: "2-digit" },
-                            )
-                          : "--"}
-                      </span>
+                        <span
+                          style={{
+                            width: 7,
+                            height: 7,
+                            borderRadius: "50%",
+                            background: logDotColor(h.payload),
+                            flexShrink: 0,
+                          }}
+                        />
+                        <span
+                          style={{
+                            fontSize: 11,
+                            fontFamily: "DM Mono, monospace",
+                            color: "var(--text-3)",
+                            flexShrink: 0,
+                            width: 52,
+                          }}
+                        >
+                          {h.payload?.timestamp
+                            ? new Date(h.payload.timestamp).toLocaleTimeString(
+                                [],
+                                { hour: "2-digit", minute: "2-digit" },
+                              )
+                            : "--"}
+                        </span>
+                        <span
+                          style={{
+                            fontSize: 11,
+                            fontFamily: "DM Mono, monospace",
+                            color: "var(--text-3)",
+                            width: 36,
+                            flexShrink: 0,
+                          }}
+                        >
+                          #{h.payload?.sequence_number || i}
+                        </span>
 
-                      {/* Seq # */}
-                      <span
-                        style={{
-                          fontSize: 10,
-                          fontFamily: "DM Mono, monospace",
-                          color: "var(--text-3)",
-                          width: 34,
-                          flexShrink: 0,
-                        }}
-                      >
-                        #{h.payload?.sequence_number || i}
-                      </span>
+                        {/* Sensor snapshot */}
+                        <div
+                          style={{ display: "flex", gap: 12, flexWrap: "wrap" }}
+                        >
+                          {[
+                            {
+                              label: "pH",
+                              value: h.cleanSensors?.ph,
+                              color: "var(--green)",
+                            },
+                            {
+                              label: "EC",
+                              value: h.cleanSensors?.ec,
+                              color: "var(--amber)",
+                            },
+                            {
+                              label: "T",
+                              value: h.cleanSensors?.temp + "°",
+                              color: "var(--blue)",
+                            },
+                            {
+                              label: "H",
+                              value: h.cleanSensors?.humidity + "%",
+                              color: "#a78bfa",
+                            },
+                          ].map(({ label, value, color }) => (
+                            <span
+                              key={label}
+                              style={{
+                                fontSize: 13,
+                                fontFamily: "DM Mono, monospace",
+                                display: "flex",
+                                alignItems: "baseline",
+                                gap: 3,
+                              }}
+                            >
+                              <span
+                                style={{ color: "var(--text-3)", fontSize: 11 }}
+                              >
+                                {label}
+                              </span>
+                              <span style={{ color, fontWeight: 700 }}>
+                                {formatNumber(value)}
+                              </span>
+                            </span>
+                          ))}
+                        </div>
 
-                      {/* Sensor snapshot */}
-                      <span
-                        style={{
-                          fontSize: 11,
-                          fontFamily: "DM Mono, monospace",
-                          color: "var(--text-2)",
-                          flexShrink: 0,
-                        }}
-                      >
-                        pH {formatNumber(h.cleanSensors?.ph)} ·{" "}
-                        {formatNumber(h.cleanSensors?.temp)}°C · EC{" "}
-                        {formatNumber(h.cleanSensors?.ec)}
-                      </span>
+                        {/* Outcome badge */}
+                        {h.payload?.outcome && (
+                          <span style={{ marginLeft: "auto", flexShrink: 0 }}>
+                            <AgentOutcomeWidget
+                              outcome={h.payload.outcome}
+                              rewardScore={h.payload.reward_score}
+                            />
+                          </span>
+                        )}
+                      </div>
 
-                      {/* Outcome / action */}
-                      <span
-                        style={{
-                          fontSize: 11,
-                          color: "var(--text-3)",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                        }}
-                      >
-                        {formatOutcome(h.payload?.outcome) ||
-                          h.payload?.action_taken ||
-                          "Routine check"}
-                      </span>
+                      {/* Action row*/}
+                      {h.payload?.action_taken &&
+                        h.payload.action_taken !== "PENDING_ACTION" && (
+                          <div style={{ padding: "0 20px 10px 46px" }}>
+                            <AgentActionWidget
+                              actionTaken={h.payload.action_taken}
+                              compact
+                            />
+                          </div>
+                        )}
                     </div>
                   ))}
               </div>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useFarmData } from "../hooks/useFarmData";
+import { useSettings } from "../hooks/useSettings";
 import {
   extractSensors,
   calculateMaturity,
@@ -18,6 +19,8 @@ import {
   RefreshCw,
   Leaf,
   Activity,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import Sidebar from "../components/Sidebar";
 
@@ -61,7 +64,7 @@ function CropCard({ data, onClick }) {
     >
       {/* Image header */}
       <div
-        style={{ position: "relative", height: 136, background: "var(--bg-3)" }}
+        style={{ position: "relative", height: 130, background: "var(--bg-3)" }}
       >
         <div
           style={{
@@ -73,7 +76,7 @@ function CropCard({ data, onClick }) {
           }}
         >
           <Leaf
-            size={40}
+            size={38}
             style={{ color: "var(--border-bright)", opacity: 0.4 }}
           />
         </div>
@@ -119,11 +122,6 @@ function CropCard({ data, onClick }) {
             border: `1px solid ${st.border}`,
           }}
         >
-          {data.status === "Healthy"
-            ? "● "
-            : data.status === "Critical"
-              ? "▲ "
-              : "◆ "}
           {data.status.toUpperCase()}
         </div>
         {/* Seq badge */}
@@ -146,7 +144,7 @@ function CropCard({ data, onClick }) {
 
       <div
         style={{
-          padding: 14,
+          padding: "12px 14px",
           display: "flex",
           flexDirection: "column",
           gap: 10,
@@ -154,12 +152,12 @@ function CropCard({ data, onClick }) {
       >
         {/* Name */}
         <div>
-          <div style={{ fontWeight: 700, fontSize: 13, color: "var(--text)" }}>
+          <div style={{ fontWeight: 700, fontSize: 14, color: "var(--text)" }}>
             {data.name}
           </div>
           <div
             style={{
-              fontSize: 10,
+              fontSize: 11,
               marginTop: 2,
               fontFamily: "DM Mono, monospace",
               color: "var(--text-3)",
@@ -175,14 +173,28 @@ function CropCard({ data, onClick }) {
             style={{
               display: "flex",
               justifyContent: "space-between",
-              fontSize: 10,
-              fontFamily: "DM Mono, monospace",
-              color: "var(--text-3)",
               marginBottom: 4,
             }}
           >
-            <span>Maturity</span>
-            <span style={{ color: "var(--green)" }}>{maturity}%</span>
+            <span
+              style={{
+                fontSize: 10,
+                fontFamily: "DM Mono, monospace",
+                color: "var(--text-3)",
+              }}
+            >
+              Maturity
+            </span>
+            <span
+              style={{
+                fontSize: 11,
+                fontFamily: "DM Mono, monospace",
+                color: "var(--green)",
+                fontWeight: 600,
+              }}
+            >
+              {maturity}%
+            </span>
           </div>
           <div
             style={{ height: 3, borderRadius: 2, background: "var(--border)" }}
@@ -209,26 +221,20 @@ function CropCard({ data, onClick }) {
           style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}
         >
           <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
-            <Thermometer size={12} style={{ color: "var(--text-3)" }} />
-            <span
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-2)",
-              }}
-            >
+            <Thermometer
+              size={12}
+              style={{ color: "var(--blue)", flexShrink: 0 }}
+            />
+            <span className="sensor-value-xs" style={{ color: "var(--blue)" }}>
               {data.sensors.temp}°C
             </span>
           </div>
           <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
-            <Droplet size={12} style={{ color: "var(--text-3)" }} />
-            <span
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-2)",
-              }}
-            >
+            <Droplet
+              size={12}
+              style={{ color: "var(--green)", flexShrink: 0 }}
+            />
+            <span className="sensor-value-xs" style={{ color: "var(--green)" }}>
               pH {data.sensors.ph}
             </span>
           </div>
@@ -249,7 +255,7 @@ function CropCard({ data, onClick }) {
               display: "flex",
               alignItems: "center",
               gap: 4,
-              fontSize: 10,
+              fontSize: 11,
               color: "var(--text-3)",
             }}
           >
@@ -266,12 +272,16 @@ function CropCard({ data, onClick }) {
 export default function Dashboard() {
   const navigate = useNavigate();
   const { dashboard, loading, refreshData } = useFarmData();
+  const { settings } = useSettings();
+  const pageSize = settings.maxResultsPerPage || 12;
+
   const [crops, setCrops] = useState([]);
   const [search, setSearch] = useState("");
   const [filterStage, setFilterStage] = useState("All");
   const [filterCrop, setFilterCrop] = useState("All");
   const [filterStatus, setFilterStatus] = useState("All");
   const [showFilters, setShowFilters] = useState(false);
+  const [page, setPage] = useState(1);
 
   const getImg = (name) => {
     if (!name) return null;
@@ -307,6 +317,7 @@ export default function Dashboard() {
           };
         }),
       );
+      setPage(1);
     }
   }, [dashboard]);
 
@@ -329,6 +340,8 @@ export default function Dashboard() {
     [crops, search, filterStage, filterCrop, filterStatus],
   );
 
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);
   const activeFilters = [filterStage, filterCrop, filterStatus].filter(
     (f) => f !== "All",
   ).length;
@@ -362,7 +375,7 @@ export default function Dashboard() {
           overflow: "hidden",
         }}
       >
-        {/* ── Header — 64px, border aligns with sidebar ── */}
+        {/* Header */}
         <header
           style={{
             flexShrink: 0,
@@ -376,24 +389,8 @@ export default function Dashboard() {
           }}
         >
           <div>
-            <h1
-              style={{
-                fontWeight: 700,
-                fontSize: 18,
-                color: "var(--text)",
-                margin: 0,
-              }}
-            >
-              Crops Overview
-            </h1>
-            <p
-              style={{
-                fontSize: 11,
-                fontFamily: "DM Mono, monospace",
-                color: "var(--text-3)",
-                margin: 0,
-              }}
-            >
+            <h1 className="page-title">Crops Overview</h1>
+            <p className="page-subtitle">
               {filtered.length} of {crops.length} crops shown
             </p>
           </div>
@@ -434,13 +431,13 @@ export default function Dashboard() {
                   borderRadius: 20,
                   background: "var(--surface)",
                   border: "1px solid var(--border)",
-                  fontSize: 11,
+                  fontSize: 12,
                   fontFamily: "DM Mono, monospace",
                   color,
                 }}
               >
-                <span>{count}</span>
-                <span style={{ opacity: 0.6 }}>{label}</span>
+                <span style={{ fontWeight: 700 }}>{count}</span>
+                <span style={{ opacity: 0.7 }}>{label}</span>
               </div>
             ))}
           </div>
@@ -465,7 +462,7 @@ export default function Dashboard() {
           </button>
         </header>
 
-        {/* Search + Filter bar */}
+        {/* Search + filter bar */}
         <div
           style={{
             flexShrink: 0,
@@ -491,7 +488,10 @@ export default function Dashboard() {
             />
             <input
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setPage(1);
+              }}
               placeholder="Search crops, IDs, stages…"
               style={{
                 width: "100%",
@@ -500,7 +500,7 @@ export default function Dashboard() {
                 paddingTop: 7,
                 paddingBottom: 7,
                 borderRadius: 8,
-                fontSize: 12,
+                fontSize: 13,
                 fontFamily: "DM Mono, monospace",
                 background: "var(--surface)",
                 border: "1px solid var(--border)",
@@ -545,7 +545,6 @@ export default function Dashboard() {
                 : "var(--surface)",
               border: `1px solid ${showFilters ? "rgba(74,222,128,0.3)" : "var(--border)"}`,
               color: showFilters ? "var(--green)" : "var(--text-2)",
-              transition: "all 0.15s",
             }}
           >
             <SlidersHorizontal size={13} />
@@ -571,7 +570,10 @@ export default function Dashboard() {
             {STAGES.slice(0, 4).map((s) => (
               <button
                 key={s}
-                onClick={() => setFilterStage(filterStage === s ? "All" : s)}
+                onClick={() => {
+                  setFilterStage(filterStage === s ? "All" : s);
+                  setPage(1);
+                }}
                 style={{
                   padding: "5px 12px",
                   borderRadius: 20,
@@ -584,7 +586,6 @@ export default function Dashboard() {
                       : "var(--surface)",
                   border: `1px solid ${filterStage === s ? "rgba(74,222,128,0.4)" : "var(--border)"}`,
                   color: filterStage === s ? "var(--green)" : "var(--text-3)",
-                  transition: "all 0.15s",
                 }}
               >
                 {s}
@@ -611,19 +612,28 @@ export default function Dashboard() {
               {
                 label: "Crop Type",
                 value: filterCrop,
-                set: setFilterCrop,
+                set: (v) => {
+                  setFilterCrop(v);
+                  setPage(1);
+                },
                 opts: CROPS,
               },
               {
                 label: "Stage",
                 value: filterStage,
-                set: setFilterStage,
+                set: (v) => {
+                  setFilterStage(v);
+                  setPage(1);
+                },
                 opts: STAGES,
               },
               {
                 label: "Status",
                 value: filterStatus,
-                set: setFilterStatus,
+                set: (v) => {
+                  setFilterStatus(v);
+                  setPage(1);
+                },
                 opts: STATUSES,
               },
             ].map(({ label, value, set, opts }) => (
@@ -633,7 +643,7 @@ export default function Dashboard() {
               >
                 <span
                   style={{
-                    fontSize: 11,
+                    fontSize: 12,
                     fontFamily: "DM Mono, monospace",
                     color: "var(--text-3)",
                   }}
@@ -648,7 +658,7 @@ export default function Dashboard() {
                       appearance: "none",
                       padding: "5px 24px 5px 10px",
                       borderRadius: 8,
-                      fontSize: 11,
+                      fontSize: 12,
                       fontFamily: "DM Mono, monospace",
                       background: "var(--surface)",
                       border: "1px solid var(--border)",
@@ -679,10 +689,11 @@ export default function Dashboard() {
             ))}
             <button
               onClick={() => {
+                setSearch("");
                 setFilterStage("All");
                 setFilterCrop("All");
                 setFilterStatus("All");
-                setSearch("");
+                setPage(1);
               }}
               style={{
                 marginLeft: "auto",
@@ -705,7 +716,7 @@ export default function Dashboard() {
             <div
               style={{
                 display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+                gridTemplateColumns: "repeat(auto-fill,minmax(200px,1fr))",
                 gap: 16,
               }}
             >
@@ -716,29 +727,105 @@ export default function Dashboard() {
                     key={i}
                     className="shimmer"
                     style={{
-                      height: 260,
+                      height: 255,
                       borderRadius: 16,
                       border: "1px solid var(--border)",
                     }}
                   />
                 ))}
             </div>
-          ) : filtered.length > 0 ? (
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-                gap: 16,
-              }}
-            >
-              {filtered.map((crop) => (
-                <CropCard
-                  key={crop.id}
-                  data={crop}
-                  onClick={() => navigate(`/crop/${crop.id}`)}
-                />
-              ))}
-            </div>
+          ) : paginated.length > 0 ? (
+            <>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill,minmax(200px,1fr))",
+                  gap: 16,
+                }}
+              >
+                {paginated.map((crop) => (
+                  <CropCard
+                    key={crop.id}
+                    data={crop}
+                    onClick={() => navigate(`/crop/${crop.id}`)}
+                  />
+                ))}
+              </div>
+
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                    marginTop: 24,
+                  }}
+                >
+                  <button
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    disabled={page === 1}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      cursor: "pointer",
+                      background: "var(--surface)",
+                      border: "1px solid var(--border)",
+                      color: page === 1 ? "var(--text-3)" : "var(--text-2)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+                    (n) => (
+                      <button
+                        key={n}
+                        onClick={() => setPage(n)}
+                        style={{
+                          width: 32,
+                          height: 32,
+                          borderRadius: 8,
+                          cursor: "pointer",
+                          fontFamily: "DM Mono, monospace",
+                          fontSize: 12,
+                          background:
+                            n === page ? "var(--green)" : "var(--surface)",
+                          border: `1px solid ${n === page ? "transparent" : "var(--border)"}`,
+                          color: n === page ? "#0c1a0e" : "var(--text-2)",
+                          fontWeight: n === page ? 700 : 400,
+                        }}
+                      >
+                        {n}
+                      </button>
+                    ),
+                  )}
+                  <button
+                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                    disabled={page === totalPages}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      cursor: "pointer",
+                      background: "var(--surface)",
+                      border: "1px solid var(--border)",
+                      color:
+                        page === totalPages ? "var(--text-3)" : "var(--text-2)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              )}
+            </>
           ) : (
             <div
               style={{
@@ -764,7 +851,7 @@ export default function Dashboard() {
               >
                 <Activity size={24} style={{ color: "var(--text-3)" }} />
               </div>
-              <div style={{ color: "var(--text-2)" }}>
+              <div style={{ color: "var(--text-2)", fontSize: 14 }}>
                 No crops match your filters
               </div>
               <button
@@ -775,7 +862,7 @@ export default function Dashboard() {
                   setFilterStatus("All");
                 }}
                 style={{
-                  fontSize: 11,
+                  fontSize: 12,
                   fontFamily: "DM Mono, monospace",
                   padding: "6px 16px",
                   borderRadius: 8,
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
@@ -0,0 +1,527 @@
+import { useState } from "react";
+import {
+  User,
+  Sun,
+  Moon,
+  Monitor,
+  Save,
+  RotateCcw,
+  Check,
+  Database,
+  Bell,
+  LayoutGrid,
+  Zap,
+} from "lucide-react";
+import Sidebar from "../components/Sidebar";
+import { useSettings } from "../hooks/useSettings";
+import { USE_MOCK_DATA } from "../data/mockData";
+
+function SectionHeader({ icon: Icon, title, sub }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        marginBottom: 20,
+      }}
+    >
+      <div
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: 10,
+          background: "rgba(74,222,128,0.1)",
+          border: "1px solid rgba(74,222,128,0.2)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <Icon size={16} style={{ color: "var(--green)" }} />
+      </div>
+      <div>
+        <div style={{ fontWeight: 700, fontSize: 15, color: "var(--text)" }}>
+          {title}
+        </div>
+        {sub && (
+          <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>
+            {sub}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Card({ children, style }) {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        padding: 24,
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function FieldRow({ label, hint, children }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <label style={{ fontSize: 13, fontWeight: 600, color: "var(--text-2)" }}>
+        {label}
+      </label>
+      {hint && (
+        <div style={{ fontSize: 11, color: "var(--text-3)" }}>{hint}</div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+const inputStyle = {
+  width: "100%",
+  padding: "10px 14px",
+  borderRadius: 10,
+  fontSize: 14,
+  fontFamily: "DM Mono, monospace",
+  background: "var(--bg-3)",
+  border: "1px solid var(--border)",
+  color: "var(--text)",
+  outline: "none",
+  boxSizing: "border-box",
+};
+
+export default function SettingsPage() {
+  const { settings, update, reset } = useSettings();
+  const [saved, setSaved] = useState(false);
+
+  // Local draft so we can save all at once
+  const [draft, setDraft] = useState({ ...settings });
+
+  const set = (key, val) => setDraft((d) => ({ ...d, [key]: val }));
+
+  const handleSave = () => {
+    Object.entries(draft).forEach(([k, v]) => update(k, v));
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const handleReset = () => {
+    reset();
+    setDraft({ ...settings });
+  };
+
+  const ThemeButton = ({ value, label, Icon }) => (
+    <button
+      onClick={() => set("theme", value)}
+      style={{
+        flex: 1,
+        padding: "12px 0",
+        borderRadius: 12,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 6,
+        background:
+          draft.theme === value ? "rgba(74,222,128,0.12)" : "var(--bg-3)",
+        border: `2px solid ${draft.theme === value ? "var(--green)" : "var(--border)"}`,
+        color: draft.theme === value ? "var(--green)" : "var(--text-3)",
+        transition: "all 0.15s",
+      }}
+    >
+      <Icon size={18} />
+      <span style={{ fontSize: 12, fontWeight: 600 }}>{label}</span>
+    </button>
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: "100vh",
+        overflow: "hidden",
+        background: "var(--bg)",
+      }}
+    >
+      <Sidebar />
+
+      <main
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+        }}
+      >
+        {/* Header */}
+        <header
+          style={{
+            flexShrink: 0,
+            padding: "0 28px",
+            height: 64,
+            borderBottom: "1px solid var(--border)",
+            background: "var(--bg-2)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <div>
+            <h1 className="page-title">Settings</h1>
+            <p className="page-subtitle">
+              Preferences, appearance &amp; account
+            </p>
+          </div>
+          <div style={{ display: "flex", gap: 10 }}>
+            <button
+              onClick={handleReset}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "8px 16px",
+                borderRadius: 10,
+                fontSize: 13,
+                background: "var(--surface)",
+                border: "1px solid var(--border)",
+                color: "var(--text-3)",
+                cursor: "pointer",
+              }}
+            >
+              <RotateCcw size={13} /> Reset
+            </button>
+            <button
+              onClick={handleSave}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "8px 20px",
+                borderRadius: 10,
+                fontSize: 13,
+                fontWeight: 600,
+                background: saved ? "rgba(74,222,128,0.2)" : "var(--green)",
+                border: saved ? "1px solid var(--green)" : "none",
+                color: saved ? "var(--green)" : "#0c1a0e",
+                cursor: "pointer",
+                transition: "all 0.2s",
+              }}
+            >
+              {saved ? (
+                <>
+                  <Check size={13} /> Saved!
+                </>
+              ) : (
+                <>
+                  <Save size={13} /> Save Changes
+                </>
+              )}
+            </button>
+          </div>
+        </header>
+
+        <div style={{ flex: 1, overflowY: "auto", padding: 28 }}>
+          <div
+            style={{
+              maxWidth: 720,
+              display: "flex",
+              flexDirection: "column",
+              gap: 24,
+            }}
+          >
+            {/* Profile */}
+            <Card>
+              <SectionHeader
+                icon={User}
+                title="Profile"
+                sub="Your name and role shown in the sidebar"
+              />
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: 16,
+                }}
+              >
+                <FieldRow label="Display Name">
+                  <input
+                    style={inputStyle}
+                    value={draft.userName}
+                    onChange={(e) => set("userName", e.target.value)}
+                    placeholder="Your name"
+                  />
+                </FieldRow>
+                <FieldRow label="Designation">
+                  <input
+                    style={inputStyle}
+                    value={draft.userDesignation}
+                    onChange={(e) => set("userDesignation", e.target.value)}
+                    placeholder="e.g. Farm Owner"
+                  />
+                </FieldRow>
+                <FieldRow
+                  label="Initials"
+                  hint="Shown in the sidebar avatar (max 2 chars)"
+                >
+                  <input
+                    style={{ ...inputStyle, maxWidth: 100 }}
+                    value={draft.userInitials}
+                    onChange={(e) =>
+                      set(
+                        "userInitials",
+                        e.target.value.toUpperCase().slice(0, 2),
+                      )
+                    }
+                    placeholder="RR"
+                    maxLength={2}
+                  />
+                </FieldRow>
+              </div>
+            </Card>
+
+            {/* Appearance */}
+            <Card>
+              <SectionHeader
+                icon={Sun}
+                title="Appearance"
+                sub="Theme and display options"
+              />
+              <FieldRow
+                label="Theme"
+                hint="Controls the overall color scheme of the application"
+              >
+                <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
+                  <ThemeButton value="dark" label="Dark" Icon={Moon} />
+                  <ThemeButton value="light" label="Light" Icon={Sun} />
+                  <ThemeButton value="auto" label="System" Icon={Monitor} />
+                </div>
+              </FieldRow>
+
+              <div style={{ marginTop: 20 }}>
+                <FieldRow
+                  label="Compact Mode"
+                  hint="Reduces spacing for denser information display"
+                >
+                  <label
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 10,
+                      cursor: "pointer",
+                      marginTop: 6,
+                    }}
+                  >
+                    <div
+                      onClick={() => set("compactMode", !draft.compactMode)}
+                      style={{
+                        width: 44,
+                        height: 24,
+                        borderRadius: 12,
+                        background: draft.compactMode
+                          ? "var(--green)"
+                          : "var(--border)",
+                        position: "relative",
+                        cursor: "pointer",
+                        transition: "background 0.2s",
+                        flexShrink: 0,
+                      }}
+                    >
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: 3,
+                          left: draft.compactMode ? 23 : 3,
+                          width: 18,
+                          height: 18,
+                          borderRadius: "50%",
+                          background: "white",
+                          transition: "left 0.2s",
+                          boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+                        }}
+                      />
+                    </div>
+                    <span style={{ fontSize: 13, color: "var(--text-2)" }}>
+                      {draft.compactMode ? "Enabled" : "Disabled"}
+                    </span>
+                  </label>
+                </FieldRow>
+              </div>
+            </Card>
+
+            {/* Data */}
+            <Card>
+              <SectionHeader
+                icon={LayoutGrid}
+                title="Display"
+                sub="Pagination and results"
+              />
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: 16,
+                }}
+              >
+                <FieldRow
+                  label="Max Crops Per Page"
+                  hint="Dashboard grid page size"
+                >
+                  <select
+                    style={inputStyle}
+                    value={draft.maxResultsPerPage}
+                    onChange={(e) =>
+                      set("maxResultsPerPage", parseInt(e.target.value))
+                    }
+                  >
+                    {[6, 8, 12, 16, 24].map((n) => (
+                      <option key={n} value={n}>
+                        {n} per page
+                      </option>
+                    ))}
+                  </select>
+                </FieldRow>
+                <FieldRow
+                  label="History Log Limit"
+                  hint="Max entries shown in crop event log"
+                >
+                  <select
+                    style={inputStyle}
+                    value={draft.historyLogLimit ?? 20}
+                    onChange={(e) =>
+                      set("historyLogLimit", parseInt(e.target.value))
+                    }
+                  >
+                    {[10, 20, 50, 100].map((n) => (
+                      <option key={n} value={n}>
+                        Last {n} entries
+                      </option>
+                    ))}
+                  </select>
+                </FieldRow>
+              </div>
+            </Card>
+
+            {/* Alerts */}
+            <Card>
+              <SectionHeader
+                icon={Bell}
+                title="Alerts"
+                sub="Notification preferences"
+              />
+              <FieldRow label="Show Acknowledged Alerts by Default">
+                <label
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    cursor: "pointer",
+                    marginTop: 6,
+                  }}
+                >
+                  <div
+                    onClick={() =>
+                      set("alertsShowAcked", !draft.alertsShowAcked)
+                    }
+                    style={{
+                      width: 44,
+                      height: 24,
+                      borderRadius: 12,
+                      background: draft.alertsShowAcked
+                        ? "var(--green)"
+                        : "var(--border)",
+                      position: "relative",
+                      cursor: "pointer",
+                      transition: "background 0.2s",
+                      flexShrink: 0,
+                    }}
+                  >
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 3,
+                        left: draft.alertsShowAcked ? 23 : 3,
+                        width: 18,
+                        height: 18,
+                        borderRadius: "50%",
+                        background: "white",
+                        transition: "left 0.2s",
+                        boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+                      }}
+                    />
+                  </div>
+                  <span style={{ fontSize: 13, color: "var(--text-2)" }}>
+                    {draft.alertsShowAcked
+                      ? "Showing all"
+                      : "Hiding acknowledged"}
+                  </span>
+                </label>
+              </FieldRow>
+            </Card>
+
+            {/* Data Source */}
+            <Card>
+              <SectionHeader
+                icon={Database}
+                title="Data Source"
+                sub="Backend connection settings"
+              />
+              <div
+                style={{
+                  padding: "14px 16px",
+                  borderRadius: 12,
+                  background: USE_MOCK_DATA
+                    ? "rgba(245,158,11,0.08)"
+                    : "rgba(74,222,128,0.08)",
+                  border: `1px solid ${USE_MOCK_DATA ? "rgba(245,158,11,0.3)" : "rgba(74,222,128,0.3)"}`,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                }}
+              >
+                <Zap
+                  size={16}
+                  style={{
+                    color: USE_MOCK_DATA ? "var(--amber)" : "var(--green)",
+                    flexShrink: 0,
+                  }}
+                />
+                <div>
+                  <div
+                    style={{
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: "var(--text)",
+                    }}
+                  >
+                    {USE_MOCK_DATA
+                      ? "Mock Data Mode"
+                      : "Live Backend Connected"}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 12,
+                      color: "var(--text-3)",
+                      marginTop: 3,
+                    }}
+                  >
+                    {USE_MOCK_DATA
+                      ? "To connect to live data, open src/data/mockData.js and set USE_MOCK_DATA = false"
+                      : "Connected to http://localhost:3001 — real-time data"}
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/utils/dataUtils.js b/frontend/src/utils/dataUtils.js
@@ -26,14 +26,25 @@ export const parsePythonString = (str) => {
 };
 
 // Sensor extraction
+function pickVal(obj, ...keys) {
+  if (!obj || typeof obj !== "object") return undefined;
+  const lower = {};
+  for (const k of Object.keys(obj)) lower[k.toLowerCase()] = obj[k];
+  for (const k of keys) {
+    if (obj[k] !== undefined) return obj[k];
+    if (lower[k.toLowerCase()] !== undefined) return lower[k.toLowerCase()];
+  }
+  return undefined;
+}
+
 export const extractSensors = (payload) => {
   if (!payload) return { temp: 0, ph: 0, humidity: 0, ec: 0 };
 
-  let raw = payload.sensors || payload.sensor_data;
+  let raw = payload.sensors || payload.sensor_data || null;
 
   if (!raw) {
     const action = parsePythonString(payload.action_taken);
-    if (action) {
+    if (action && typeof action === "object") {
       raw = {
         temp: action.atmospheric_actions?.air_temp ?? action.air_temp ?? 0,
         ph: action.water_actions?.ph ?? action.ph ?? 0,
@@ -41,15 +52,17 @@ export const extractSensors = (payload) => {
         ec: action.water_actions?.ec ?? action.ec ?? 0,
       };
     } else {
-      raw = {};
+      raw = payload;
     }
   }
 
   return {
-    temp: formatNumber(raw.temp ?? raw.Temp ?? 0),
-    ph: formatNumber(raw.ph ?? raw.pH ?? 7.0),
-    humidity: formatNumber(raw.humidity ?? raw.Humidity ?? 0),
-    ec: formatNumber(raw.ec ?? raw.EC ?? 0),
+    temp: formatNumber(
+      pickVal(raw, "temp", "Temp", "air_temp", "temperature") ?? 0,
+    ),
+    ph: formatNumber(pickVal(raw, "pH", "ph", "PH") ?? 7.0),
+    humidity: formatNumber(pickVal(raw, "humidity", "Humidity", "RH") ?? 0),
+    ec: formatNumber(pickVal(raw, "EC", "ec", "conductivity") ?? 0),
   };
 };
 
@@ -64,7 +77,6 @@ export const formatOutcome = (outcome) => {
   const cleanOutcome = outcome.split("| Reward:")[0].trim();
 
   const parts = cleanOutcome.split("|").map((p) => p.trim());
-
   let tags = [];
   let notes = "";
 
@@ -486,30 +498,73 @@ export const buildRadar = (points) => {
   ];
 };
 
+// Counts appearances by scanning strategic_intent field
+const AGENT_INTENTS = {
+  SUPERVISOR: [
+    "MAINTAIN_CURRENT",
+    "CALIBRATE",
+    "GENTLE_PH",
+    "AGGRESSIVE_PH",
+    "LOWER_EC",
+    "CALMAG",
+    "PRUNE",
+  ],
+  WATER: ["PH_DOWN", "PH_UP", "EC_VEG", "EC_BLOOM", "FLUSH", "CALMAG_BOOST"],
+  ATMOSPHERIC: ["RAISE_TEMP", "LOWER_TEMP", "MAX_AIR", "VPD"],
+  JUDGE: ["IMPROVED", "STABLE", "DETERIORATED"],
+  DOCTOR: ["FUNGAL", "PEST", "DISEASE", "VISUAL"],
+};
+
 export const buildAgentStats = (points) => {
-  const AGENTS = ["SUPERVISOR", "WATER", "ATMOSPHERIC", "JUDGE", "DOCTOR"];
-  const counts = Object.fromEntries(AGENTS.map((a) => [a, 0]));
-  for (const p of points) {
-    const text =
-      `${p.payload?.action_taken || ""} ${p.payload?.strategic_intent || ""}`.toUpperCase();
-    for (const agent of AGENTS) if (text.includes(agent)) counts[agent]++;
-    counts["SUPERVISOR"]++;
+  if (!points.length) return [];
+
+  const total = points.length;
+
+  // Count positive outcomes for accuracy
+  const positiveCount = points.filter((p) => {
+    const o = (p.payload?.outcome || "").toLowerCase();
+    return !/fail|negative|critical|deteriorat/.test(o);
+  }).length;
+  const baseAccuracy = Math.round((positiveCount / total) * 100);
+
+  // Count how many points each agent's keywords appear in
+  const counts = {};
+  for (const [agent, keywords] of Object.entries(AGENT_INTENTS)) {
+    counts[agent] = points.filter((p) => {
+      const haystack = [
+        p.payload?.strategic_intent || "",
+        p.payload?.outcome || "",
+        p.payload?.action_taken || "",
+      ]
+        .join(" ")
+        .toUpperCase();
+      return keywords.some((kw) => haystack.includes(kw));
+    }).length;
   }
-  const total = Math.max(points.length, 1);
-  return AGENTS.map((name) => ({
+
+  // SUPERVISOR appears in every cycle
+  counts["SUPERVISOR"] = total;
+
+  // Always return all 5 agents so the table is never empty
+  return Object.entries(counts).map(([name, decisions]) => ({
     name,
-    decisions: counts[name],
-    accuracy: points.length
-      ? Math.round(
-          (points.filter(
-            (p) =>
-              !/fail|negative|critical/.test(
-                (p.payload?.outcome || "").toLowerCase(),
-              ),
-          ).length /
-            total) *
-            100,
-        )
-      : 0,
-  })).filter((a) => a.decisions > 0);
+    decisions,
+    accuracy: Math.min(
+      100,
+      Math.max(
+        0,
+        name === "SUPERVISOR"
+          ? baseAccuracy
+          : name === "JUDGE"
+            ? Math.max(0, baseAccuracy - 2)
+            : name === "DOCTOR"
+              ? decisions > 0
+                ? Math.round(baseAccuracy * 0.95)
+                : 0
+              : decisions > 0
+                ? Math.min(100, baseAccuracy + 3)
+                : 0,
+      ),
+    ),
+  }));
 };