diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f5c1dca..6ae1c67 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import axios from 'axios'
 import {
   Wifi, WifiOff, Server, FileText, GitBranch,
-  Table2, Activity, TerminalSquare, Box, Settings, RefreshCw,
+  Table2, Activity, TerminalSquare, Box, Settings, RefreshCw, ShieldCheck,
 } from 'lucide-react'
 
 import ConnectionPanel  from './components/ConnectionPanel'
@@ -13,11 +13,13 @@ import TrainingMonitor  from './components/TrainingMonitor'
 import Terminal         from './components/Terminal'
 import ModelManager     from './components/ModelManager'
 import ConfigEditor     from './components/ConfigEditor'
+import SetupPanel      from './components/SetupPanel'
 
 const API = ''   // vite proxy forwards /api → :8080
 
 const NAV = [
   { id: 'connection', label: 'Connection',  icon: Server      },
+  { id: 'setup',      label: 'Setup',       icon: ShieldCheck },
   { id: 'documents',  label: 'Documents',   icon: FileText    },
   { id: 'pipeline',   label: 'Pipeline',    icon: GitBranch   },
   { id: 'pairs',      label: 'QA Pairs',    icon: Table2      },
@@ -51,6 +53,7 @@ export default function App() {
 
   const panels = {
     connection: <ConnectionPanel onConnect={fetchStatus} setStatus={setStatusMsg} />,
+    setup:      <SetupPanel      connected={connected} />,
     documents:  <DocumentManager connected={connected} />,
     pipeline:   <PipelineRunner  connected={connected} />,
     pairs:      <QAPairViewer    connected={connected} />,