diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7b84bc5..2457268 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -92,7 +92,6 @@
             "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.27.1",
@@ -1277,7 +1276,6 @@
             "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/prop-types": "*",
                 "csstype": "^3.0.2"
@@ -1480,7 +1478,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "caniuse-lite": "^1.0.30001726",
                 "electron-to-chromium": "^1.5.173",
@@ -1530,7 +1527,6 @@
             "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
             "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@kurkle/color": "^0.3.0"
             },
@@ -2418,7 +2414,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -2621,7 +2616,6 @@
             "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
             "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
             },
@@ -2644,7 +2638,6 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
             "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "scheduler": "^0.23.2"
@@ -3011,7 +3004,6 @@
             "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -3166,7 +3158,6 @@
             "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "esbuild": "^0.21.3",
                 "postcss": "^8.4.43",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a28e977..21d29da 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,12 +4,13 @@ import Editor from '@monaco-editor/react'
 import { useSessions } from './hooks'
 import type { Session, OAuthServerInfo, OAuthStatusResponse, OAuthAuthorizeRequest, OAuthStatus, ToolSchemasResponse, ToolSchemaEntry } from './types'
 import { SessionTable } from './components/SessionTable'
-import { Toggle } from './components/Toggle'
+import { Toggle, ThemeToggle } from './components/Toggle'
 import { Modal } from './components/Modal'
 import AgentDataflow from './components/AgentDataflow'
 import Stats from './components/Stats'
 import Kpis from './components/Kpis'
 import DateRangeSlider from './components/DateRangeSlider'
+import { EnterpriseFeature } from './components/EnterpriseFeature'
 
 // Embedding/Electron detection
 const isEmbedded = (() => {
@@ -337,10 +338,10 @@ export function App(): React.JSX.Element {
 
     const projectRoot = (globalThis as any).__PROJECT_ROOT__ || ''
 
-    const [view, setView] = useState<'sessions' | 'configs' | 'manager' | 'observability' | 'agents'>(() => {
+    const [view, setView] = useState<'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'users' | 'roles'>(() => {
         try {
             const saved = safeLocalStorage.getItem('app_view')
-            if (saved === 'sessions' || saved === 'configs' || saved === 'manager' || saved === 'observability' || saved === 'agents') {
+            if (saved === 'sessions' || saved === 'configs' || saved === 'manager' || saved === 'observability' || saved === 'agents' || saved === 'users' || saved === 'roles') {
                 return saved
             }
         } catch { /* ignore */ }
@@ -349,7 +350,7 @@ export function App(): React.JSX.Element {
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
 
     // Handle view changes with unsaved changes warning
-    const handleViewChange = (newView: 'sessions' | 'configs' | 'manager' | 'observability' | 'agents') => {
+    const handleViewChange = (newView: 'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'users' | 'roles') => {
         if (hasUnsavedChanges && view === 'configs') {
             const confirmed = window.confirm('You have unsaved changes in the JSON editor. Are you sure you want to switch views? Your changes will be lost.')
             if (!confirmed) return
@@ -735,23 +736,48 @@ export function App(): React.JSX.Element {
                         {view === 'configs' && 'Direct JSON editing for configuration and permission files.'}
                         {view === 'manager' && 'Manage MCP servers, tools, and permissions with a guided interface.'}
                         {view === 'agents' && 'Monitor agent identities, sessions, and permission overrides.'}
+                        {view === 'users' && 'Multi-user management and access control (Enterprise feature).'}
+                        {view === 'roles' && 'Role-based access control and permission management (Enterprise feature).'}
                     </p>
                 </div>
                 <div className="flex gap-2 items-center">
                     <div className="hidden sm:flex border border-app-border rounded overflow-hidden">
                         <button className={`px-3 py-1 text-sm ${view === 'sessions' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('sessions')}>Sessions</button>
                         <button className={`px-3 py-1 text-sm ${view === 'agents' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('agents')}>Agents</button>
+                        <button className={`px-3 py-1 text-sm ${view === 'users' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('users')}>
+                            <span className="inline-flex items-center gap-1">
+                                Users
+                                <svg className="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                                </svg>
+                            </span>
+                        </button>
+                        <button className={`px-3 py-1 text-sm ${view === 'roles' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('roles')}>
+                            <span className="inline-flex items-center gap-1">
+                                Roles
+                                <svg className="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                                </svg>
+                            </span>
+                        </button>
                         <button className={`px-3 py-1 text-sm ${view === 'configs' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('configs')}>Raw Config</button>
-                        <button className={`px-3 py-1 text-sm ${view === 'manager' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('manager')}>Server Manager</button>
+                        <button className={`px-3 py-1 text-sm ${view === 'manager' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('manager')}>Servers</button>
                         <button className={`px-3 py-1 text-sm ${view === 'observability' ? 'text-app-accent bg-app-accent/10' : ''}`} onClick={() => handleViewChange('observability')}>Observability</button>
                     </div>
                     {/* Hide theme switch when embedded in Electron (exposed via window.__ELECTRON_EMBED__) */}
                     {!(window as any).__ELECTRON_EMBED__ && (new URLSearchParams(location.search).get('embed') !== 'electron') && (
-                        <button className="button" onClick={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))}>
-                            {theme === 'light' ? 'Dark' : 'Light'} mode
-                        </button>
+                        <ThemeToggle theme={theme} onChange={setTheme} />
                     )}
-                    <button className="button" onClick={() => location.reload()}>Refresh</button>
+                    <button
+                        className="button flex items-center justify-center"
+                        onClick={() => location.reload()}
+                        aria-label="Refresh page"
+                        title="Refresh page"
+                    >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                    </button>
                 </div>
             </div>
 
@@ -840,6 +866,16 @@ export function App(): React.JSX.Element {
                 <ConfigurationManager projectRoot={projectRoot} />
             ) : view === 'agents' ? (
                 <AgentsView sessions={uiSessions} />
+            ) : view === 'users' ? (
+                <EnterpriseFeature
+                    featureName="User Management"
+                    description="Manage multiple users, roles, and permissions across your organization with enterprise-grade access control."
+                />
+            ) : view === 'roles' ? (
+                <EnterpriseFeature
+                    featureName="Role-Based Access Control"
+                    description="Define custom roles and granular permissions to control what users can access and manage across your MCP infrastructure."
+                />
             ) : (
                 <div className="space-y-4">
                     <Kpis sessions={timeFiltered} prevSessions={prevTimeFiltered} />
diff --git a/frontend/src/components/ComparisonTable.tsx b/frontend/src/components/ComparisonTable.tsx
new file mode 100644
index 0000000..03a98a0
--- /dev/null
+++ b/frontend/src/components/ComparisonTable.tsx
@@ -0,0 +1,110 @@
+interface Feature {
+  name: string
+  openEdison: boolean
+  edisonWatch: boolean
+}
+
+const features: Feature[] = [
+  { name: 'Single User', openEdison: true, edisonWatch: true },
+  { name: 'MCP Security Controls', openEdison: true, edisonWatch: true },
+  { name: 'Lethal Trifecta Detection', openEdison: true, edisonWatch: true },
+  { name: 'Tool/Resource Permissions', openEdison: true, edisonWatch: true },
+  { name: 'Multi-Tenancy', openEdison: false, edisonWatch: true },
+  { name: 'SIEM Integration', openEdison: false, edisonWatch: true },
+  { name: 'SSO (Single Sign-On)', openEdison: false, edisonWatch: true },
+  { name: 'Client Software for Auto-Enforcement', openEdison: false, edisonWatch: true },
+]
+
+function CheckIcon() {
+  return <span className="text-green-400 text-xl">✅</span>
+}
+
+function CrossIcon() {
+  return <span className="text-rose-400 text-xl">❌</span>
+}
+
+export function ComparisonTable() {
+  return (
+    <div className="card max-w-5xl mx-auto">
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold mb-2">OpenEdison vs EdisonWatch</h2>
+        <p className="text-app-muted">
+          EdisonWatch adds Multi-Tenancy, SIEM, SSO, and Auto-Enforcement
+        </p>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse">
+          <thead>
+            <tr>
+              <th className="border-b border-app-border py-3 px-4 text-left font-semibold">Feature</th>
+              <th className="border-b border-app-border py-3 px-4 text-center font-semibold">
+                OpenEdison<br />
+                <span className="text-sm font-normal text-app-muted">(Open Source)</span>
+              </th>
+              <th className="border-b border-app-border py-3 px-4 text-center font-semibold">
+                EdisonWatch<br />
+                <span className="text-sm font-normal text-app-muted">(Commercial)</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, index) => (
+              <tr key={index} className={index % 2 === 0 ? 'bg-app-bg/30' : ''}>
+                <td className="border-b border-app-border py-3 px-4">{feature.name}</td>
+                <td className="border-b border-app-border py-3 px-4 text-center">
+                  {feature.openEdison ? <CheckIcon /> : <CrossIcon />}
+                </td>
+                <td className="border-b border-app-border py-3 px-4 text-center">
+                  {feature.edisonWatch ? <CheckIcon /> : <CrossIcon />}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-6 p-4 bg-app-bg/30 rounded border border-app-border">
+        <h3 className="font-semibold mb-2 text-amber-400">Enterprise Features Exclusive to EdisonWatch</h3>
+        <ul className="list-disc list-inside text-app-muted space-y-1">
+          <li><strong>Multi-Tenancy</strong>: Support for multiple isolated users and organizations</li>
+          <li><strong>SIEM Integration</strong>: Enterprise security information and event management</li>
+          <li><strong>SSO (Single Sign-On)</strong>: Integration with enterprise identity providers</li>
+          <li><strong>Client Software for Auto-Enforcement</strong>: Automated policy enforcement at the client level</li>
+        </ul>
+      </div>
+
+      <div className="mt-6 p-6 bg-gradient-to-r from-app-accent/10 to-app-accent/5 rounded-lg border-2 border-app-accent/30">
+        <div className="text-center space-y-4">
+          <h3 className="text-xl font-semibold text-app-accent">Interested in EdisonWatch Enterprise?</h3>
+          <p className="text-app-muted max-w-2xl mx-auto">
+            Schedule a personalized demo to see how EdisonWatch can secure your organization's AI agents with enterprise-grade features.
+          </p>
+          <a
+            href="https://cal.com/eito80/demo"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block px-6 py-3 font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg"
+            style={{ backgroundColor: 'var(--accent)', color: 'var(--bg)' }}
+          >
+            Book a Demo Call
+          </a>
+        </div>
+      </div>
+
+      <div className="mt-4 text-center text-sm text-app-muted">
+        <p>
+          For more information about EdisonWatch commercial licensing, please visit{' '}
+          <a
+            href="https://edisonwatch.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-app-accent hover:underline"
+          >
+            edisonwatch.com
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/DateRangeSlider.tsx b/frontend/src/components/DateRangeSlider.tsx
index 27adbb0..7fa734d 100644
--- a/frontend/src/components/DateRangeSlider.tsx
+++ b/frontend/src/components/DateRangeSlider.tsx
@@ -306,7 +306,7 @@ export function DateRangeSlider({
                 <div className="mb-3" style={{ height: 80, overflow: 'hidden' }}>
                     <Line ref={sparkRef as any} height={60} data={{
                         labels: histogram.labels,
-                        datasets: [{ label: 'sessions', data: histogram.data, borderColor: '#8b5cf6', backgroundColor: 'rgba(139,92,246,0.2)', tension: 0.3, pointRadius: 0 }],
+                        datasets: [{ label: 'sessions', data: histogram.data, borderColor: '#C3FFFD', backgroundColor: 'rgba(195,255,253,0.2)', tension: 0.3, pointRadius: 0 }],
                     }} options={{
                         responsive: true,
                         maintainAspectRatio: false,
diff --git a/frontend/src/components/EnterpriseFeature.tsx b/frontend/src/components/EnterpriseFeature.tsx
new file mode 100644
index 0000000..4b1e88a
--- /dev/null
+++ b/frontend/src/components/EnterpriseFeature.tsx
@@ -0,0 +1,89 @@
+interface EnterpriseFeatureProps {
+  featureName: string
+  description: string
+}
+
+export function EnterpriseFeature({ featureName, description }: EnterpriseFeatureProps) {
+  return (
+    <div className="card max-w-4xl mx-auto">
+      <div className="flex flex-col items-center justify-center py-16 px-8 text-center">
+        {/* Lock Icon */}
+        <div className="mb-6 p-4 rounded-full bg-app-accent/10 border-2 border-app-accent/30">
+          <svg className="w-16 h-16 text-app-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+        </div>
+
+        {/* Heading */}
+        <div className="mb-4">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 mb-3">
+            <svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
+            </svg>
+            <span className="text-xs font-semibold text-amber-400 uppercase tracking-wide">Enterprise Feature</span>
+          </div>
+          <h2 className="text-3xl font-bold mb-2">{featureName}</h2>
+          <p className="text-lg text-app-muted max-w-2xl">{description}</p>
+        </div>
+
+        {/* Feature List */}
+        <div className="mt-8 p-6 bg-app-bg/30 rounded-lg border border-app-border max-w-2xl w-full">
+          <h3 className="font-semibold mb-4 text-left">Available in EdisonWatch Enterprise</h3>
+          <ul className="text-left space-y-3 text-app-muted">
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>Multi-Tenancy</strong>: Manage multiple isolated users and organizations</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>SSO Integration</strong>: Enterprise identity provider support</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>SIEM Integration</strong>: Enterprise security monitoring</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>Client Software</strong>: Auto-enforcement at the client level</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* CTA */}
+        <div className="mt-8 flex flex-col sm:flex-row gap-4 items-center">
+          <a
+            href="https://cal.com/eito80/demo"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg"
+            style={{ backgroundColor: 'var(--accent)', color: 'var(--bg)' }}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            Schedule a Demo
+          </a>
+          <a
+            href="https://edisonwatch.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border-2 border-app-accent text-app-accent hover:bg-app-accent/10 transition-colors"
+          >
+            Learn More
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/Kpis.tsx b/frontend/src/components/Kpis.tsx
index 62cb300..10f7792 100644
--- a/frontend/src/components/Kpis.tsx
+++ b/frontend/src/components/Kpis.tsx
@@ -116,7 +116,7 @@ export default function Kpis({ sessions, prevSessions }: { sessions: Session[];
 
     return (
         <div className="grid" style={{ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }}>
-            <Item title="Sessions" value={formatNumber(sessionsCount)} delta={dSessions.text} deltaPos={dSessions.pos} deltaZero={dSessions.zero} spark={<Spark data={callsSpark} color="#8b5cf6" />} />
+            <Item title="Sessions" value={formatNumber(sessionsCount)} delta={dSessions.text} deltaPos={dSessions.pos} deltaZero={dSessions.zero} spark={<Spark data={callsSpark} color="#C3FFFD" />} />
             <Item title="Calls" value={formatNumber(callsCount)} delta={dCalls.text} deltaPos={dCalls.pos} deltaZero={dCalls.zero} spark={<Spark data={callsSpark} color="#34d399" />} />
             <Item title="Error rate" value={`${Math.round(errorRate * 1000) / 10}%`} delta={dErr.text} deltaPos={dErr.pos} deltaZero={dErr.zero} />
             <Item title="p95 duration" value={`${Math.round(p95ms)}`} unit="ms" delta={dP95.text} deltaPos={dP95.pos} deltaZero={dP95.zero} />
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx
index 93c6b26..6e7ddf3 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/components/Stats.tsx
@@ -45,14 +45,14 @@ const CrosshairPlugin = {
 ChartJS.register(CrosshairPlugin as any)
 
 const COLOR_PALETTE = [
-    { fill: 'rgba(99,102,241,0.6)', stroke: 'rgba(99,102,241,1)' }, // indigo
+    { fill: 'rgba(195,255,253,0.6)', stroke: 'rgba(195,255,253,1)' }, // core cyan
     { fill: 'rgba(34,197,94,0.6)', stroke: 'rgba(34,197,94,1)' },  // green
     { fill: 'rgba(59,130,246,0.6)', stroke: 'rgba(59,130,246,1)' }, // blue
     { fill: 'rgba(244,114,182,0.6)', stroke: 'rgba(244,114,182,1)' }, // pink
     { fill: 'rgba(251,191,36,0.6)', stroke: 'rgba(251,191,36,1)' },  // amber
     { fill: 'rgba(248,113,113,0.6)', stroke: 'rgba(248,113,113,1)' }, // red
     { fill: 'rgba(14,165,233,0.6)', stroke: 'rgba(14,165,233,1)' },  // sky
-    { fill: 'rgba(139,92,246,0.6)', stroke: 'rgba(139,92,246,1)' },  // violet
+    { fill: 'rgba(155,164,166,0.6)', stroke: 'rgba(155,164,166,1)' },  // graphene grey
 ]
 
 type Bucket = { label: string; value: number }
@@ -377,8 +377,8 @@ export function Stats({ sessions, onTimeRangeChange, onHoverTimeChange, rangeSta
                             {
                                 label: 'Calls',
                                 data: callsValues,
-                                borderColor: '#8b5cf6',
-                                backgroundColor: 'rgba(139,92,246,0.2)',
+                                borderColor: '#C3FFFD',
+                                backgroundColor: 'rgba(195,255,253,0.2)',
                                 tension: 0,
                                 cubicInterpolationMode: 'monotone' as any,
                                 pointRadius: (callsValues.length <= 1 ? 3 : 0),
@@ -459,7 +459,7 @@ export function Stats({ sessions, onTimeRangeChange, onHoverTimeChange, rangeSta
                             <Line height={480} data={{
                                 labels: callsLabels,
                                 datasets: [
-                                    { label: 'Calls', data: callsValues, borderColor: '#8b5cf6', backgroundColor: 'rgba(139,92,246,0.2)', tension: 0.25, pointRadius: (callsValues.length <= 1 ? 3 : 0) },
+                                    { label: 'Calls', data: callsValues, borderColor: '#C3FFFD', backgroundColor: 'rgba(195,255,253,0.2)', tension: 0.25, pointRadius: (callsValues.length <= 1 ? 3 : 0) },
                                     ...(showMA ? [{ label: '7-day Moving Average', data: callsMA, borderColor: '#34d399', backgroundColor: 'rgba(16,185,129,0.0)', borderDash: [6, 4], tension: 0, pointRadius: 0 }] : []),
                                 ],
                             }} options={{
@@ -564,7 +564,7 @@ export function Stats({ sessions, onTimeRangeChange, onHoverTimeChange, rangeSta
                 {isEmpty ? EmptyState : (
                     <Bar height={200} data={{
                         labels: sessionLenHist.map(b => b.label),
-                        datasets: [{ label: 'sessions', data: sessionLenHist.map(b => b.value), backgroundColor: '#8b5cf6', borderColor: '#7c3aed' }],
+                        datasets: [{ label: 'sessions', data: sessionLenHist.map(b => b.value), backgroundColor: '#C3FFFD', borderColor: '#9BA4A6' }],
                     }} options={{
                         responsive: true,
                         maintainAspectRatio: false,
@@ -581,7 +581,7 @@ export function Stats({ sessions, onTimeRangeChange, onHoverTimeChange, rangeSta
                         ) : (
                             <Bar height={480} data={{
                                 labels: sessionLenHist.map(b => b.label),
-                                datasets: [{ label: 'sessions', data: sessionLenHist.map(b => b.value), backgroundColor: '#8b5cf6', borderColor: '#7c3aed' }],
+                                datasets: [{ label: 'sessions', data: sessionLenHist.map(b => b.value), backgroundColor: '#C3FFFD', borderColor: '#9BA4A6' }],
                             }} options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }} />)}
                     </div>
                 </Modal>
diff --git a/frontend/src/components/Toggle.tsx b/frontend/src/components/Toggle.tsx
index 53690b5..3c17d35 100644
--- a/frontend/src/components/Toggle.tsx
+++ b/frontend/src/components/Toggle.tsx
@@ -22,4 +22,46 @@ export function Toggle({ checked, onChange }: { checked: boolean; onChange: (nex
   )
 }
 
+export function ThemeToggle({ theme, onChange }: { theme: 'light' | 'dark' | 'blue'; onChange: (theme: 'light' | 'dark') => void }) {
+  const isDark = theme === 'dark' || theme === 'blue'
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label="Toggle theme"
+      className="relative inline-flex h-8 w-16 items-center rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-accent"
+      style={{
+        backgroundColor: isDark ? 'var(--accent)' : '#FFB84D',
+      }}
+      onClick={() => onChange(isDark ? 'light' : 'dark')}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onChange(isDark ? 'light' : 'dark')
+        }
+      }}
+    >
+      {/* Slider */}
+      <span
+        className={`inline-flex h-6 w-6 transform items-center justify-center rounded-full shadow-md transition-transform duration-200 ${isDark ? 'translate-x-9' : 'translate-x-1'}`}
+        style={{ backgroundColor: 'var(--card)' }}
+      >
+        {isDark ? (
+          // Moon icon
+          <svg className="h-4 w-4" style={{ color: 'var(--accent)' }} fill="currentColor" viewBox="0 0 20 20">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        ) : (
+          // Sun icon
+          <svg className="h-4 w-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+          </svg>
+        )}
+      </span>
+    </button>
+  )
+}
+
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 856f8aa..f7001a2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,13 +3,19 @@
 @tailwind utilities;
 
 :root {
-    --bg: #0b0c10;
-    --card: #111318;
-    --border: #1f2430;
-    --text: #e6e6e6;
-    --muted: #a0a7b4;
-    --accent: #7c3aed;
-    /* inspired accent */
+    /* Brand Colors */
+    --baseline-black: #000000;
+    --graphene-grey: #9BA4A6;
+    --core-cyan: #C3FFFD;
+    --wavelength-white: #F9F9F9;
+
+    /* Applied Theme */
+    --bg: #000000;
+    --card: #0a0a0a;
+    --border: #1a1a1a;
+    --text: #F9F9F9;
+    --muted: #9BA4A6;
+    --accent: #C3FFFD;
     --success: #10b981;
     --warning: #f59e0b;
     --danger: #ef4444;
@@ -17,36 +23,38 @@
 
 /* Explicit theme overrides via data-theme attribute */
 [data-theme="dark"] {
-    --bg: #0b0c10;
-    --card: #111318;
-    --border: #1f2430;
-    --text: #e6e6e6;
-    --muted: #a0a7b4;
+    --bg: #000000;
+    --card: #0a0a0a;
+    --border: #1a1a1a;
+    --text: #F9F9F9;
+    --muted: #9BA4A6;
 }
 
 [data-theme="light"] {
-    --bg: #f8fafc;
+    --bg: #F9F9F9;
     --card: #ffffff;
-    --border: #e5e7eb;
-    --text: #0f172a;
-    --muted: #475569;
+    --border: #9BA4A6;
+    --text: #000000;
+    --muted: #9BA4A6;
+    --accent: #00B8B8;
 }
 
 [data-theme="blue"] {
-    --bg: #1e293b;
-    --card: #2d3b4e;
-    --border: #3d4f66;
-    --text: #f1f5f9;
-    --muted: #94a3b8;
+    --bg: #0a1419;
+    --card: #0f1e26;
+    --border: #1a3340;
+    --text: #C3FFFD;
+    --muted: #9BA4A6;
 }
 
 @media (prefers-color-scheme: light) {
     :root {
-        --bg: #f8fafc;
+        --bg: #F9F9F9;
         --card: #ffffff;
-        --border: #e5e7eb;
-        --text: #0f172a;
-        --muted: #475569;
+        --border: #9BA4A6;
+        --text: #000000;
+        --muted: #9BA4A6;
+        --accent: #00B8B8;
     }
 }
 
@@ -94,7 +102,7 @@ body {
     padding: 2px 8px;
     border-radius: 999px;
     border: 1px solid var(--border);
-    background: rgba(124, 58, 237, 0.08);
+    background: color-mix(in srgb, var(--accent) 8%, transparent);
     color: var(--text);
 }
 
diff --git a/pyproject.toml b/pyproject.toml
index b3d84ea..b15a151 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "open-edison"
-version = "0.1.133"
+version = "0.1.134"
 description = "Open-source MCP security, aggregation, and monitoring. Single-user, self-hosted MCP proxy."
 readme = "README.md"
 authors = [