diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b31e258..20f0ebc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { InventoryPage } from './pages/InventoryPage';
 import { LoginPage } from './pages/LoginPage';
+import { getToken, clearSession } from './lib/session';
 import './app-shell.css';
 
 type TabKey = 'overview' | 'inventory' | 'discovery' | 'topology' | 'options';
@@ -11,10 +12,36 @@ const tabs = [
   { key: 'topology', label: 'Topology', description: 'Vista futura della mappa multilivello.' },
   { key: 'options', label: 'Options', description: 'Utenti, impostazioni, servizi di sistema e sicurezza.' },
 ] as const;
-function ShellCard({ title, children, tone = 'default' }: { title: string; children: React.ReactNode; tone?: 'default' | 'accent' | 'warning' }) { return <section className={`shell-card ${tone}`}><div className="shell-card-header"><h3>{title}</h3></div><div className="shell-card-body">{children}</div></section>; }
-function OverviewTab(){ return <div className="shell-grid"><ShellCard title="Workspace status" tone="accent"><ul className="shell-list"><li>Frontend inventory collegato al backend.</li><li>Tree gerarchico e context panel attivi.</li><li>Navigazione tra parent, children e relazioni disponibile.</li></ul></ShellCard><ShellCard title="Milestone attive"><ul className="shell-list"><li>Reintegro layout persistente completato.</li><li>Roadmap di security e options introdotta.</li><li>Preparazione vista topology multilivello.</li></ul></ShellCard><ShellCard title="Quick notes" tone="warning"><ul className="shell-list"><li>I moduli servizi confluiranno nel menu Options.</li><li>L'accesso dovrà essere autenticato prima delle integrazioni remote.</li><li>Serve hardening progressivo di sessione e permessi.</li></ul></ShellCard></div>; }
-function DiscoveryTab(){ return <div className="shell-grid two-columns"><ShellCard title="Discovery pipeline"><ul className="shell-list"><li>Seed scan subnet.</li><li>Classificazione host e object binding.</li><li>Correlazione con relazioni inventory.</li></ul></ShellCard><ShellCard title="Job queue"><ul className="shell-list"><li>SNMP collector.</li><li>LLDP ingestion.</li><li>Port mapping inference.</li></ul></ShellCard></div>; }
-function TopologyTab(){ return <div className="shell-grid two-columns"><ShellCard title="Topology roadmap"><ul className="shell-list"><li>Vista fisica dispositivi.</li><li>Vista logica host / VM / container / app.</li><li>Layer networking e dipendenze.</li></ul></ShellCard><ShellCard title="Planned interactions"><ul className="shell-list"><li>Drag & drop dei contenitori.</li><li>Link fisici e logici cliccabili.</li><li>Focus node e highlight dei vicini.</li></ul></ShellCard></div>; }
-function OptionsTab(){ return <div className="shell-stack"><div className="shell-grid two-columns"><ShellCard title="User management" tone="accent"><ul className="shell-list"><li>Utenti locali e ruoli applicativi.</li><li>Disattivazione account inattivi o non più autorizzati.</li><li>Storico accessi e audit trail amministrativo.</li></ul></ShellCard><ShellCard title="System settings"><ul className="shell-list"><li>Parametri workspace e branding dell'istanza.</li><li>Configurazione discovery, inventory e policy future.</li><li>Feature flags per moduli sperimentali.</li></ul></ShellCard></div><div className="shell-grid two-columns"><ShellCard title="Services backlog"><ul className="shell-list"><li>La sezione Servizi viene assorbita nel menu Options.</li><li>Qui confluiranno terminale remoto, job runner e integrazioni di sistema.</li><li>Ogni funzione sensibile dovrà essere protetta da permessi espliciti.</li></ul></ShellCard><ShellCard title="Security roadmap" tone="warning"><ul className="shell-list"><li>Login obbligatorio per tutte le viste non pubbliche.</li><li>MFA per admin e per funzioni ad alto impatto.</li><li>Controlli server-side su ogni richiesta, deny-by-default e audit centralizzato.</li></ul></ShellCard></div></div>; }
-function AppShell(){ const [activeTab,setActiveTab]=useState<TabKey>('inventory'); const currentTab=tabs.find((t)=>t.key===activeTab)!; return <div className="app-shell"><aside className="app-sidebar"><div className="app-brand"><div className="app-brand-mark">NM</div><div><h1>NetMapper</h1><p>Homelab workspace</p></div></div><nav className="app-nav">{tabs.map((tab)=><button key={tab.key} className={`app-nav-item ${activeTab===tab.key?'active':''}`} onClick={()=>setActiveTab(tab.key)}><span>{tab.label}</span><small>{tab.description}</small></button>)}</nav><div className="app-sidebar-footer"><span className="shell-pill">MVP</span><span className="shell-pill">Inventory online</span><span className="shell-pill">Options added</span></div></aside><main className="app-main"><header className="app-header"><div><h2>{currentTab.label}</h2><p>{currentTab.description}</p></div><div className="app-header-actions"><span className="shell-pill">Book of truth</span><span className="shell-pill">Auth roadmap</span></div></header><section style={{ display: activeTab === 'overview' ? 'block' : 'none' }}><OverviewTab /></section><section style={{ display: activeTab === 'inventory' ? 'block' : 'none' }}><InventoryPage /></section><section style={{ display: activeTab === 'discovery' ? 'block' : 'none' }}><DiscoveryTab /></section><section style={{ display: activeTab === 'topology' ? 'block' : 'none' }}><TopologyTab /></section><section style={{ display: activeTab === 'options' ? 'block' : 'none' }}><OptionsTab /></section></main></div>; }
-export default function App(){ const [token,setToken]=useState<string|null>(null); useEffect(()=>{const t=window.localStorage.getItem('nm_token'); if(t) setToken(t);},[]); const login=(nextToken:string)=>{window.localStorage.setItem('nm_token', nextToken); setToken(nextToken);}; const logout=()=>{window.localStorage.removeItem('nm_token'); setToken(null);}; if(!token) return <LoginPage onLogin={login} />; return <><button onClick={logout} className="logout-button">Logout</button><AppShell /></>; }
+
+function ShellCard({ title, children, tone = 'default' }: { title: string; children: React.ReactNode; tone?: 'default' | 'accent' | 'warning' }) {
+  return <section className={`shell-card ${tone}`}><div className="shell-card-header"><h3>{title}</h3></div><div className="shell-card-body">{children}</div></section>;
+}
+function OverviewTab() { return <div className="shell-grid"><ShellCard title="Workspace status" tone="accent"><ul className="shell-list"><li>Frontend inventory collegato al backend.</li><li>Tree gerarchico e context panel attivi.</li><li>Navigazione tra parent, children e relazioni disponibile.</li></ul></ShellCard><ShellCard title="Milestone attive"><ul className="shell-list"><li>Reintegro layout persistente completato.</li><li>Roadmap di security e options introdotta.</li><li>Preparazione vista topology multilivello.</li></ul></ShellCard><ShellCard title="Quick notes" tone="warning"><ul className="shell-list"><li>I moduli servizi confluiranno nel menu Options.</li><li>L'accesso dovrà essere autenticato prima delle integrazioni remote.</li><li>Serve hardening progressivo di sessione e permessi.</li></ul></ShellCard></div>; }
+function DiscoveryTab() { return <div className="shell-grid two-columns"><ShellCard title="Discovery pipeline"><ul className="shell-list"><li>Seed scan subnet.</li><li>Classificazione host e object binding.</li><li>Correlazione con relazioni inventory.</li></ul></ShellCard><ShellCard title="Job queue"><ul className="shell-list"><li>SNMP collector.</li><li>LLDP ingestion.</li><li>Port mapping inference.</li></ul></ShellCard></div>; }
+function TopologyTab() { return <div className="shell-grid two-columns"><ShellCard title="Topology roadmap"><ul className="shell-list"><li>Vista fisica dispositivi.</li><li>Vista logica host / VM / container / app.</li><li>Layer networking e dipendenze.</li></ul></ShellCard><ShellCard title="Planned interactions"><ul className="shell-list"><li>Drag &amp; drop dei contenitori.</li><li>Link fisici e logici cliccabili.</li><li>Focus node e highlight dei vicini.</li></ul></ShellCard></div>; }
+function OptionsTab() { return <div className="shell-stack"><div className="shell-grid two-columns"><ShellCard title="User management" tone="accent"><ul className="shell-list"><li>Utenti locali e ruoli applicativi.</li><li>Disattivazione account inattivi o non più autorizzati.</li><li>Storico accessi e audit trail amministrativo.</li></ul></ShellCard><ShellCard title="System settings"><ul className="shell-list"><li>Parametri workspace e branding dell'istanza.</li><li>Configurazione discovery, inventory e policy future.</li><li>Feature flags per moduli sperimentali.</li></ul></ShellCard></div><div className="shell-grid two-columns"><ShellCard title="Services backlog"><ul className="shell-list"><li>La sezione Servizi viene assorbita nel menu Options.</li><li>Qui confluiranno terminale remoto, job runner e integrazioni di sistema.</li><li>Ogni funzione sensibile dovrà essere protetta da permessi espliciti.</li></ul></ShellCard><ShellCard title="Security roadmap" tone="warning"><ul className="shell-list"><li>Login obbligatorio per tutte le viste non pubbliche.</li><li>MFA per admin e per funzioni ad alto impatto.</li><li>Controlli server-side su ogni richiesta, deny-by-default e audit centralizzato.</li></ul></ShellCard></div></div>; }
+
+function AppShell() {
+  const [activeTab, setActiveTab] = useState<TabKey>('inventory');
+  const currentTab = tabs.find((t) => t.key === activeTab)!;
+  return <div className="app-shell"><aside className="app-sidebar"><div className="app-brand"><div className="app-brand-mark">NM</div><div><h1>NetMapper</h1><p>Homelab workspace</p></div></div><nav className="app-nav">{tabs.map((tab) => <button key={tab.key} className={`app-nav-item ${activeTab === tab.key ? 'active' : ''}`} onClick={() => setActiveTab(tab.key)}><span>{tab.label}</span><small>{tab.description}</small></button>)}</nav><div className="app-sidebar-footer"><span className="shell-pill">MVP</span><span className="shell-pill">Inventory online</span><span className="shell-pill">Options added</span></div></aside><main className="app-main"><header className="app-header"><div><h2>{currentTab.label}</h2><p>{currentTab.description}</p></div><div className="app-header-actions"><span className="shell-pill">Book of truth</span><span className="shell-pill">Auth active</span></div></header><section style={{ display: activeTab === 'overview' ? 'block' : 'none' }}><OverviewTab /></section><section style={{ display: activeTab === 'inventory' ? 'block' : 'none' }}><InventoryPage /></section><section style={{ display: activeTab === 'discovery' ? 'block' : 'none' }}><DiscoveryTab /></section><section style={{ display: activeTab === 'topology' ? 'block' : 'none' }}><TopologyTab /></section><section style={{ display: activeTab === 'options' ? 'block' : 'none' }}><OptionsTab /></section></main></div>;
+}
+
+export default function App() {
+  const [loggedIn, setLoggedIn] = useState<boolean>(false);
+
+  useEffect(() => {
+    const t = getToken();
+    if (t) setLoggedIn(true);
+  }, []);
+
+  const handleLogin = () => setLoggedIn(true);
+
+  const handleLogout = () => {
+    clearSession();
+    setLoggedIn(false);
+  };
+
+  if (!loggedIn) return <LoginPage onLogin={handleLogin} />;
+  return <><button onClick={handleLogout} className="logout-button">Logout</button><AppShell /></>;
+}