diff --git a/frontend/src/App.css b/frontend/src/App.css
index 60760c8..a8b9867 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -533,20 +533,202 @@
   font-size: 13px;
 }
 
+/* ─── Mobile Menu Button ──────────────────────────────────── */
+
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 14px;
+  left: 14px;
+  z-index: 200;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 90;
+  backdrop-filter: blur(4px);
+}
+
+.sidebar-close-mobile {
+  display: none;
+  position: absolute;
+  top: 16px;
+  right: 12px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+}
+
+.sidebar-close-mobile:hover { color: var(--text-primary); background: var(--bg-card); }
+
+/* ─── Gauge Widgets ───────────────────────────────────────── */
+
+.gauges-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 0 28px 24px;
+}
+
+.gauge-widget {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 0.2s;
+}
+
+.gauge-widget:hover { border-color: var(--border-light); transform: translateY(-1px); }
+
+.gauge-header {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.gauge-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: center;
+}
+
+.gauge-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.gauge-value {
+  font-size: 24px;
+  font-weight: 800;
+  font-family: 'JetBrains Mono', monospace;
+  margin-top: -8px;
+}
+
+.gauge-unit {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-muted);
+  margin-left: 2px;
+}
+
+.gauge-range {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
 /* ─── Responsive ──────────────────────────────────────────── */
 
 @media (max-width: 1024px) {
-  .sidebar { width: 60px; }
+  .sidebar {
+    width: 60px;
+  }
   .sidebar-title, .sidebar-sub, .sidebar-btn span, .sidebar-footer span { display: none; }
   .sidebar-brand { padding: 16px 14px; }
   .sidebar-btn { justify-content: center; padding: 10px; }
   .main { margin-left: 60px; }
   .stats-grid { grid-template-columns: repeat(2, 1fr); }
   .charts-grid, .bottom-grid { grid-template-columns: 1fr; }
+  .gauges-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
-@media (max-width: 640px) {
-  .stats-grid { grid-template-columns: 1fr; }
-  .pipeline-visual { flex-direction: column; }
+@media (max-width: 768px) {
+  .mobile-menu-btn { display: flex; }
+
+  .sidebar {
+    transform: translateX(-100%);
+    width: 260px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .sidebar.sidebar-open {
+    transform: translateX(0);
+  }
+
+  .sidebar-open ~ .sidebar-overlay,
+  .sidebar-overlay { display: block; }
+
+  .sidebar-title, .sidebar-sub, .sidebar-btn span, .sidebar-footer span,
+  .sidebar-close-mobile { display: block; }
+
+  .sidebar-btn { justify-content: flex-start; padding: 10px 12px; }
+
+  .main { margin-left: 0; }
+
+  .topbar {
+    padding: 16px 16px 16px 64px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 16px;
+  }
+
+  .charts-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 0 16px 16px;
+  }
+
+  .gauges-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 0 16px 16px;
+  }
+
+  .bottom-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 0 16px 16px;
+  }
+
+  .devices-page, .alerts-page, .agents-page {
+    padding: 16px;
+  }
+
+  .topbar-actions { gap: 8px; }
+  .topbar-stat { font-size: 11px; padding: 4px 8px; }
+  .topbar-stat span { display: none; }
+
+  .pipeline-visual { flex-direction: column; padding: 16px; }
   .pipeline-arrow { transform: rotate(90deg); }
+  .pipeline-node { min-width: unset; width: 100%; }
+}
+
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: 1fr; }
+  .gauges-grid { grid-template-columns: 1fr 1fr; }
+  .stat-card { padding: 14px 16px; }
+  .stat-value { font-size: 18px; }
+  .gauge-value { font-size: 20px; }
+  .device-card-value { font-size: 22px; }
+  .devices-grid { grid-template-columns: 1fr; }
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 60ea39f..44353dd 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-  AreaChart, Area, BarChart, Bar, Cell, PieChart, Pie
+  AreaChart, Area, BarChart, Bar, Cell, PieChart, Pie, RadialBarChart, RadialBar
 } from 'recharts';
 import {
   Thermometer, Activity, Zap, AlertTriangle, Wifi, WifiOff, Brain, Cpu, Radio,
   Droplets, Sun, Bell, BellOff, Send, RefreshCw, ChevronDown, ChevronRight,
-  CheckCircle, XCircle, Info, Shield, Server, LayoutDashboard, Settings
+  CheckCircle, XCircle, Info, Shield, Server, LayoutDashboard, Settings,
+  Menu, X, Gauge, TrendingUp, BarChart3
 } from 'lucide-react';
 import './App.css';
 
@@ -130,35 +131,98 @@ function DeviceCard({ device }) {
   );
 }
 
-function ChartCard({ title, icon: Icon, data, dataKey, color, unit }) {
+function ChartCard({ title, icon: Icon, data, dataKey, color, unit, chartType = 'area' }) {
+  const chartContent = chartType === 'bar' ? (
+    <ResponsiveContainer width="100%" height={220}>
+      <BarChart data={data || []}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
+        <XAxis dataKey="time" stroke="#475569" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
+        <YAxis stroke="#475569" tick={{ fontSize: 10 }} width={45} />
+        <Tooltip
+          contentStyle={{ background: '#1a1f35', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }}
+          formatter={(v) => [`${v} ${unit}`, '']}
+        />
+        <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ResponsiveContainer>
+  ) : (
+    <ResponsiveContainer width="100%" height={220}>
+      <AreaChart data={data || []}>
+        <defs>
+          <linearGradient id={`grad-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={color} stopOpacity={0.25} />
+            <stop offset="95%" stopColor={color} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
+        <XAxis dataKey="time" stroke="#475569" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
+        <YAxis stroke="#475569" tick={{ fontSize: 10 }} width={45} />
+        <Tooltip
+          contentStyle={{ background: '#1a1f35', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }}
+          formatter={(v) => [`${v} ${unit}`, '']}
+        />
+        <Area type="monotone" dataKey={dataKey} stroke={color} fill={`url(#grad-${dataKey})`} strokeWidth={2} dot={false} />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+
   return (
     <div className="chart-card">
       <div className="chart-header">
         <div className="chart-title"><Icon size={16} /> {title}</div>
-        <div className="chart-badge">{data?.length || 0} pts</div>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <div className="chart-badge">{data?.length || 0} pts</div>
+        </div>
+      </div>
+      {chartContent}
+    </div>
+  );
+}
+
+function GaugeWidget({ title, value, min = 0, max = 100, unit, color, icon: Icon }) {
+  const pct = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+  const gaugeData = [{ name: 'value', value: pct }, { name: 'bg', value: 100 - pct }];
+
+  return (
+    <div className="gauge-widget">
+      <div className="gauge-header">
+        <div className="gauge-title"><Icon size={14} /> {title}</div>
+      </div>
+      <div className="gauge-body">
+        <ResponsiveContainer width={120} height={90}>
+          <RadialBarChart cx="50%" cy="100%" innerRadius="60%" outerRadius="90%" startAngle={180} endAngle={0} barSize={12} data={gaugeData}>
+            <RadialBar
+              dataKey="value"
+              cornerRadius={6}
+              fill={color}
+              background={{ fill: '#1e293b' }}
+            />
+          </RadialBarChart>
+        </ResponsiveContainer>
+        <div className="gauge-value" style={{ color }}>
+          {value != null ? value.toFixed(1) : '—'}
+          <span className="gauge-unit">{unit}</span>
+        </div>
+      </div>
+      <div className="gauge-range">
+        <span>{min}</span>
+        <span>{max} {unit}</span>
       </div>
-      <ResponsiveContainer width="100%" height={220}>
-        <AreaChart data={data || []}>
-          <defs>
-            <linearGradient id={`grad-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor={color} stopOpacity={0.25} />
-              <stop offset="95%" stopColor={color} stopOpacity={0} />
-            </linearGradient>
-          </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
-          <XAxis dataKey="time" stroke="#475569" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
-          <YAxis stroke="#475569" tick={{ fontSize: 10 }} width={45} />
-          <Tooltip
-            contentStyle={{ background: '#1a1f35', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }}
-            formatter={(v) => [`${v} ${unit}`, '']}
-          />
-          <Area type="monotone" dataKey={dataKey} stroke={color} fill={`url(#grad-${dataKey})`} strokeWidth={2} dot={false} />
-        </AreaChart>
-      </ResponsiveContainer>
     </div>
   );
 }
 
+function MiniSparkline({ data, color, height = 32 }) {
+  if (!data || data.length < 2) return null;
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <LineChart data={data}>
+        <Line type="monotone" dataKey="value" stroke={color} strokeWidth={1.5} dot={false} />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
 function AlertItem({ alert }) {
   return (
     <div className={`alert-item alert-${alert.severity}`}>
@@ -192,6 +256,7 @@ function AgentMessage({ msg }) {
 
 export default function App() {
   const [tab, setTab] = useState('dashboard');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [wsData, setWsData] = useState({ devices: [], alerts: [], actuators: [] });
   const [timeSeries, setTimeSeries] = useState({});
   const [stats, setStats] = useState(null);
@@ -243,10 +308,23 @@ export default function App() {
     { id: 'agents', label: 'AI Agents', icon: Brain },
   ];
 
+  const latestReadings = {};
+  (wsData.devices || []).forEach(d => {
+    if (d.last_reading != null) latestReadings[d.device_type] = d.last_reading;
+  });
+
   return (
     <div className="app">
+      {/* Mobile Overlay */}
+      {sidebarOpen && <div className="sidebar-overlay" onClick={() => setSidebarOpen(false)} />}
+
+      {/* Mobile Topbar (hamburger) */}
+      <button className="mobile-menu-btn" onClick={() => setSidebarOpen(!sidebarOpen)} aria-label="Toggle menu">
+        {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
+      </button>
+
       {/* Sidebar */}
-      <nav className="sidebar">
+      <nav className={`sidebar ${sidebarOpen ? 'sidebar-open' : ''}`}>
         <div className="sidebar-brand">
           <Brain size={24} />
           <div>
@@ -259,7 +337,7 @@ export default function App() {
           {tabs.map(t => (
             <button key={t.id}
               className={`sidebar-btn ${tab === t.id ? 'active' : ''}`}
-              onClick={() => setTab(t.id)}>
+              onClick={() => { setTab(t.id); setSidebarOpen(false); }}>
               <t.icon size={16} />
               {t.label}
               {t.id === 'alerts' && criticalAlerts.length > 0 && (
@@ -269,6 +347,9 @@ export default function App() {
           ))}
         </div>
 
+        <div className="sidebar-close-mobile" onClick={() => setSidebarOpen(false)}>
+          <X size={18} />
+        </div>
         <div className="sidebar-footer">
           <div className="ws-indicator">
             <span className="ws-dot" />
@@ -308,11 +389,19 @@ export default function App() {
               <StatCard icon={Activity} label="Readings Processed" value={sysStats?.ingestion?.total ?? '—'} sub="total" color="#22c55e" />
             </div>
 
+            {/* Gauge Widgets */}
+            <div className="gauges-grid">
+              <GaugeWidget title="Temperature" value={latestReadings['temperature']} min={-10} max={50} unit="°C" color="#ef4444" icon={Thermometer} />
+              <GaugeWidget title="Energy" value={latestReadings['energy']} min={0} max={500} unit="W" color="#eab308" icon={Zap} />
+              <GaugeWidget title="Humidity" value={latestReadings['humidity']} min={0} max={100} unit="%" color="#06b6d4" icon={Droplets} />
+              <GaugeWidget title="Light" value={latestReadings['light']} min={0} max={1000} unit="lux" color="#f97316" icon={Sun} />
+            </div>
+
             {/* Charts */}
             <div className="charts-grid">
-              <ChartCard title="Temperature" icon={Thermometer} data={timeSeries['temperature']} dataKey="value" color="#ef4444" unit="°C" />
-              <ChartCard title="Energy Consumption" icon={Zap} data={timeSeries['energy']} dataKey="value" color="#eab308" unit="W" />
-              <ChartCard title="Humidity" icon={Droplets} data={timeSeries['humidity']} dataKey="value" color="#06b6d4" unit="%" />
+              <ChartCard title="Temperature Trend" icon={Thermometer} data={timeSeries['temperature']} dataKey="value" color="#ef4444" unit="°C" />
+              <ChartCard title="Energy Consumption" icon={Zap} data={timeSeries['energy']} dataKey="value" color="#eab308" unit="W" chartType="bar" />
+              <ChartCard title="Humidity Trend" icon={Droplets} data={timeSeries['humidity']} dataKey="value" color="#06b6d4" unit="%" />
               <ChartCard title="Light Level" icon={Sun} data={timeSeries['light']} dataKey="value" color="#f97316" unit="lux" />
             </div>