diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx
index b97aaf4a..20794015 100644
--- a/AppImage/components/proxmox-dashboard.tsx
+++ b/AppImage/components/proxmox-dashboard.tsx
@@ -11,6 +11,7 @@ import { VirtualMachines } from "./virtual-machines"
 import Hardware from "./hardware"
 import { SystemLogs } from "./system-logs"
 import { Settings } from "./settings"
+import { Security } from "./security"
 import { OnboardingCarousel } from "./onboarding-carousel"
 import { HealthStatusModal } from "./health-status-modal"
 import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
@@ -31,6 +32,7 @@ import {
   FileText,
   SettingsIcon,
   Terminal,
+  ShieldCheck,
 } from "lucide-react"
 import Image from "next/image"
 import { ThemeToggle } from "./theme-toggle"
@@ -265,8 +267,10 @@ export function ProxmoxDashboard() {
         return "Terminal"
       case "logs":
         return "System Logs"
-      case "settings":
-        return "Settings"
+  case "security":
+  return "Security"
+  case "settings":
+  return "Settings"
       default:
         return "Navigation Menu"
     }
@@ -416,7 +420,7 @@ export function ProxmoxDashboard() {
       >
         <div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
-            <TabsList className="hidden md:grid w-full grid-cols-8 bg-card border border-border">
+            <TabsList className="hidden md:grid w-full grid-cols-9 bg-card border border-border">
               <TabsTrigger
                 value="overview"
                 className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -459,6 +463,12 @@ export function ProxmoxDashboard() {
               >
                 Terminal
               </TabsTrigger>
+              <TabsTrigger
+                value="security"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Security
+              </TabsTrigger>
               <TabsTrigger
                 value="settings"
                 className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -588,6 +598,21 @@ export function ProxmoxDashboard() {
                     <Terminal className="h-5 w-5" />
                     <span>Terminal</span>
                   </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("security")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "security"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <ShieldCheck className="h-5 w-5" />
+                    <span>Security</span>
+                  </Button>
                   <Button
                     variant="ghost"
                     onClick={() => {
@@ -640,6 +665,10 @@ export function ProxmoxDashboard() {
             <TerminalPanel key={`terminal-${componentKey}`} />
           </TabsContent>
 
+          <TabsContent value="security" className="space-y-4 md:space-y-6 mt-0">
+            <Security key={`security-${componentKey}`} />
+          </TabsContent>
+
           <TabsContent value="settings" className="space-y-4 md:space-y-6 mt-0">
             <Settings />
           </TabsContent>
diff --git a/AppImage/components/security.tsx b/AppImage/components/security.tsx
new file mode 100644
index 00000000..cf944e22
--- /dev/null
+++ b/AppImage/components/security.tsx
@@ -0,0 +1,2096 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
+import {
+  Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Key, Copy, Eye, EyeOff,
+  Trash2, RefreshCw, Clock, ShieldCheck, Globe, FileKey, AlertTriangle,
+  Flame, Bug, Search, Download, Power, PowerOff, Plus, Minus, Activity,
+} from "lucide-react"
+import { getApiUrl, fetchApi } from "../lib/api-config"
+import { TwoFactorSetup } from "./two-factor-setup"
+import { ScriptTerminalModal } from "./script-terminal-modal"
+
+interface ApiTokenEntry {
+  id: string
+  name: string
+  token_prefix: string
+  created_at: string
+  expires_at: string
+  revoked: boolean
+}
+
+export function Security() {
+  const [authEnabled, setAuthEnabled] = useState(false)
+  const [totpEnabled, setTotpEnabled] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
+
+  // Setup form state
+  const [showSetupForm, setShowSetupForm] = useState(false)
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+
+  // Change password form state
+  const [showChangePassword, setShowChangePassword] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const [confirmNewPassword, setConfirmNewPassword] = useState("")
+
+  const [show2FASetup, setShow2FASetup] = useState(false)
+  const [show2FADisable, setShow2FADisable] = useState(false)
+  const [disable2FAPassword, setDisable2FAPassword] = useState("")
+
+  // API Token state management
+  const [showApiTokenSection, setShowApiTokenSection] = useState(false)
+  const [apiToken, setApiToken] = useState("")
+  const [apiTokenVisible, setApiTokenVisible] = useState(false)
+  const [tokenPassword, setTokenPassword] = useState("")
+  const [tokenTotpCode, setTokenTotpCode] = useState("")
+  const [generatingToken, setGeneratingToken] = useState(false)
+  const [tokenCopied, setTokenCopied] = useState(false)
+
+  // Token list state
+  const [existingTokens, setExistingTokens] = useState<ApiTokenEntry[]>([])
+  const [loadingTokens, setLoadingTokens] = useState(false)
+  const [revokingTokenId, setRevokingTokenId] = useState<string | null>(null)
+  const [tokenName, setTokenName] = useState("API Token")
+
+  // Proxmox Firewall state
+  const [firewallLoading, setFirewallLoading] = useState(true)
+  const [firewallData, setFirewallData] = useState<{
+    pve_firewall_installed: boolean
+    pve_firewall_active: boolean
+    cluster_fw_enabled: boolean
+    host_fw_enabled: boolean
+    rules_count: number
+    rules: Array<{ raw: string; direction?: string; action?: string; dport?: string; p?: string; source_file?: string; section?: string }>
+    monitor_port_open: boolean
+  } | null>(null)
+  const [firewallAction, setFirewallAction] = useState(false)
+
+  // Security Tools state
+  const [toolsLoading, setToolsLoading] = useState(true)
+  const [fail2banInfo, setFail2banInfo] = useState<{
+    installed: boolean; active: boolean; version: string; jails: string[]; banned_ips_count: number
+  } | null>(null)
+  const [lynisInfo, setLynisInfo] = useState<{
+    installed: boolean; version: string; last_scan: string | null; hardening_index: number | null
+  } | null>(null)
+  const [showFail2banInstaller, setShowFail2banInstaller] = useState(false)
+  const [showLynisInstaller, setShowLynisInstaller] = useState(false)
+
+  // Fail2Ban detailed state
+  interface JailDetail {
+    name: string
+    currently_failed: number
+    total_failed: number
+    currently_banned: number
+    total_banned: number
+    banned_ips: string[]
+    findtime: string
+    bantime: string
+    maxretry: string
+  }
+  interface F2bEvent {
+    timestamp: string
+    jail: string
+    ip: string
+    action: "ban" | "unban" | "found"
+  }
+  const [f2bDetails, setF2bDetails] = useState<{
+    installed: boolean; active: boolean; version: string; jails: JailDetail[]
+  } | null>(null)
+  const [f2bActivity, setF2bActivity] = useState<F2bEvent[]>([])
+  const [f2bDetailsLoading, setF2bDetailsLoading] = useState(false)
+  const [f2bUnbanning, setF2bUnbanning] = useState<string | null>(null)
+  const [f2bActiveTab, setF2bActiveTab] = useState<"jails" | "activity">("jails")
+
+  // SSL/HTTPS state
+  const [sslEnabled, setSslEnabled] = useState(false)
+  const [sslSource, setSslSource] = useState<"none" | "proxmox" | "custom">("none")
+  const [sslCertPath, setSslCertPath] = useState("")
+  const [sslKeyPath, setSslKeyPath] = useState("")
+  const [proxmoxCertAvailable, setProxmoxCertAvailable] = useState(false)
+  const [proxmoxCertInfo, setProxmoxCertInfo] = useState<{subject?: string; expires?: string; issuer?: string; is_self_signed?: boolean} | null>(null)
+  const [loadingSsl, setLoadingSsl] = useState(true)
+  const [configuringSsl, setConfiguringSsl] = useState(false)
+  const [showCustomCertForm, setShowCustomCertForm] = useState(false)
+  const [customCertPath, setCustomCertPath] = useState("")
+  const [customKeyPath, setCustomKeyPath] = useState("")
+
+  useEffect(() => {
+    checkAuthStatus()
+    loadApiTokens()
+    loadSslStatus()
+    loadFirewallStatus()
+    loadSecurityTools()
+  }, [])
+
+  const loadFirewallStatus = async () => {
+    try {
+      setFirewallLoading(true)
+      const data = await fetchApi("/api/security/firewall/status")
+      if (data.success) {
+        setFirewallData({
+          pve_firewall_installed: data.pve_firewall_installed,
+          pve_firewall_active: data.pve_firewall_active,
+          cluster_fw_enabled: data.cluster_fw_enabled,
+          host_fw_enabled: data.host_fw_enabled,
+          rules_count: data.rules_count,
+          rules: data.rules || [],
+          monitor_port_open: data.monitor_port_open,
+        })
+      }
+    } catch {
+      // Silently fail
+    } finally {
+      setFirewallLoading(false)
+    }
+  }
+
+  const loadSecurityTools = async () => {
+    try {
+      setToolsLoading(true)
+      const data = await fetchApi("/api/security/tools")
+      if (data.success && data.tools) {
+        setFail2banInfo(data.tools.fail2ban || null)
+        setLynisInfo(data.tools.lynis || null)
+      }
+    } catch {
+      // Silently fail
+    } finally {
+      setToolsLoading(false)
+    }
+  }
+
+  const loadFail2banDetails = async () => {
+    try {
+      setF2bDetailsLoading(true)
+      const [detailsRes, activityRes] = await Promise.all([
+        fetchApi("/api/security/fail2ban/details"),
+        fetchApi("/api/security/fail2ban/activity"),
+      ])
+      if (detailsRes.success) {
+        setF2bDetails({
+          installed: detailsRes.installed,
+          active: detailsRes.active,
+          version: detailsRes.version,
+          jails: detailsRes.jails || [],
+        })
+      }
+      if (activityRes.success) {
+        setF2bActivity(activityRes.events || [])
+      }
+    } catch {
+      // Silently fail
+    } finally {
+      setF2bDetailsLoading(false)
+    }
+  }
+
+  const handleUnbanIp = async (jail: string, ip: string) => {
+    const key = `${jail}:${ip}`
+    setF2bUnbanning(key)
+    setError("")
+    setSuccess("")
+    try {
+      const data = await fetchApi("/api/security/fail2ban/unban", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jail, ip }),
+      })
+      if (data.success) {
+        setSuccess(data.message || `IP ${ip} unbanned from ${jail}`)
+        loadFail2banDetails()
+        loadSecurityTools()
+      } else {
+        setError(data.message || "Failed to unban IP")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to unban IP")
+    } finally {
+      setF2bUnbanning(null)
+    }
+  }
+
+  // Load fail2ban details when basic info shows it's installed and active
+  useEffect(() => {
+    if (fail2banInfo?.installed && fail2banInfo?.active) {
+      loadFail2banDetails()
+    }
+  }, [fail2banInfo?.installed, fail2banInfo?.active])
+
+  const formatBanTime = (seconds: string) => {
+    const s = parseInt(seconds, 10)
+    if (isNaN(s) || s <= 0) return seconds
+    if (s < 60) return `${s}s`
+    if (s < 3600) return `${Math.floor(s / 60)}m`
+    if (s < 86400) return `${Math.floor(s / 3600)}h`
+    return `${Math.floor(s / 86400)}d`
+  }
+
+  const handleFirewallToggle = async (level: "host" | "cluster", enable: boolean) => {
+    setFirewallAction(true)
+    setError("")
+    setSuccess("")
+    try {
+      const endpoint = enable ? "/api/security/firewall/enable" : "/api/security/firewall/disable"
+      const data = await fetchApi(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ level }),
+      })
+      if (data.success) {
+        setSuccess(data.message || `Firewall ${enable ? "enabled" : "disabled"} at ${level} level`)
+        loadFirewallStatus()
+      } else {
+        setError(data.message || "Failed to update firewall")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update firewall")
+    } finally {
+      setFirewallAction(false)
+    }
+  }
+
+  const handleMonitorPortToggle = async (add: boolean) => {
+    setFirewallAction(true)
+    setError("")
+    setSuccess("")
+    try {
+      const data = await fetchApi("/api/security/firewall/monitor-port", {
+        method: add ? "POST" : "DELETE",
+      })
+      if (data.success) {
+        setSuccess(data.message || `Monitor port rule ${add ? "added" : "removed"}`)
+        loadFirewallStatus()
+      } else {
+        setError(data.message || "Failed to update monitor port rule")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update monitor port rule")
+    } finally {
+      setFirewallAction(false)
+    }
+  }
+
+  const checkAuthStatus = async () => {
+    try {
+      const response = await fetch(getApiUrl("/api/auth/status"))
+      const data = await response.json()
+      setAuthEnabled(data.auth_enabled || false)
+      setTotpEnabled(data.totp_enabled || false)
+    } catch (err) {
+      console.error("Failed to check auth status:", err)
+    }
+  }
+
+  const handleEnableAuth = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!username || !password) {
+      setError("Please fill in all fields")
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match")
+      return
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch(getApiUrl("/api/auth/setup"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          enable_auth: true,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to enable authentication")
+      }
+
+      localStorage.setItem("proxmenux-auth-token", data.token)
+      localStorage.setItem("proxmenux-auth-setup-complete", "true")
+
+      setSuccess("Authentication enabled successfully!")
+      setAuthEnabled(true)
+      setShowSetupForm(false)
+      setUsername("")
+      setPassword("")
+      setConfirmPassword("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to enable authentication")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDisableAuth = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
+      )
+    ) {
+      return
+    }
+
+    setLoading(true)
+    setError("")
+    setSuccess("")
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/disable"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to disable authentication")
+      }
+
+      localStorage.removeItem("proxmenux-auth-token")
+      localStorage.removeItem("proxmenux-auth-setup-complete")
+
+      setSuccess("Authentication disabled successfully! Reloading...")
+
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChangePassword = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!currentPassword || !newPassword) {
+      setError("Please fill in all fields")
+      return
+    }
+
+    if (newPassword !== confirmNewPassword) {
+      setError("New passwords do not match")
+      return
+    }
+
+    if (newPassword.length < 6) {
+      setError("Password must be at least 6 characters")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch(getApiUrl("/api/auth/change-password"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
+        },
+        body: JSON.stringify({
+          current_password: currentPassword,
+          new_password: newPassword,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to change password")
+      }
+
+      if (data.token) {
+        localStorage.setItem("proxmenux-auth-token", data.token)
+      }
+
+      setSuccess("Password changed successfully!")
+      setShowChangePassword(false)
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmNewPassword("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to change password")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDisable2FA = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!disable2FAPassword) {
+      setError("Please enter your password")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const token = localStorage.getItem("proxmenux-auth-token")
+      const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ password: disable2FAPassword }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to disable 2FA")
+      }
+
+      setSuccess("2FA disabled successfully!")
+      setTotpEnabled(false)
+      setShow2FADisable(false)
+      setDisable2FAPassword("")
+      checkAuthStatus()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable 2FA")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogout = () => {
+    localStorage.removeItem("proxmenux-auth-token")
+    localStorage.removeItem("proxmenux-auth-setup-complete")
+    window.location.reload()
+  }
+
+  const loadApiTokens = async () => {
+    try {
+      setLoadingTokens(true)
+      const data = await fetchApi("/api/auth/api-tokens")
+      if (data.success) {
+        setExistingTokens(data.tokens || [])
+      }
+    } catch {
+      // Silently fail - tokens section is optional
+    } finally {
+      setLoadingTokens(false)
+    }
+  }
+
+  const handleRevokeToken = async (tokenId: string) => {
+    if (!confirm("Are you sure you want to revoke this token? Any integration using it will stop working immediately.")) {
+      return
+    }
+
+    setRevokingTokenId(tokenId)
+    setError("")
+    setSuccess("")
+
+    try {
+      const data = await fetchApi(`/api/auth/api-tokens/${tokenId}`, {
+        method: "DELETE",
+      })
+
+      if (data.success) {
+        setSuccess("Token revoked successfully")
+        setExistingTokens((prev) => prev.filter((t) => t.id !== tokenId))
+      } else {
+        setError(data.message || "Failed to revoke token")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to revoke token")
+    } finally {
+      setRevokingTokenId(null)
+    }
+  }
+
+  const handleGenerateApiToken = async () => {
+    setError("")
+    setSuccess("")
+
+    if (!tokenPassword) {
+      setError("Please enter your password")
+      return
+    }
+
+    if (totpEnabled && !tokenTotpCode) {
+      setError("Please enter your 2FA code")
+      return
+    }
+
+    setGeneratingToken(true)
+
+    try {
+      const data = await fetchApi("/api/auth/generate-api-token", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          password: tokenPassword,
+          totp_token: totpEnabled ? tokenTotpCode : undefined,
+          token_name: tokenName || "API Token",
+        }),
+      })
+
+      if (!data.success) {
+        setError(data.message || data.error || "Failed to generate API token")
+        return
+      }
+
+      if (!data.token) {
+        setError("No token received from server")
+        return
+      }
+
+      setApiToken(data.token)
+      setSuccess("API token generated successfully! Make sure to copy it now as you won't be able to see it again.")
+      setTokenPassword("")
+      setTokenTotpCode("")
+      setTokenName("API Token")
+      loadApiTokens()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to generate API token. Please try again.")
+    } finally {
+      setGeneratingToken(false)
+    }
+  }
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+        await navigator.clipboard.writeText(text)
+      } else {
+        const textarea = document.createElement("textarea")
+        textarea.value = text
+        textarea.style.position = "fixed"
+        textarea.style.left = "-9999px"
+        textarea.style.top = "-9999px"
+        textarea.style.opacity = "0"
+        document.body.appendChild(textarea)
+        textarea.focus()
+        textarea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textarea)
+      }
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const copyApiToken = async () => {
+    const ok = await copyToClipboard(apiToken)
+    if (ok) {
+      setTokenCopied(true)
+      setTimeout(() => setTokenCopied(false), 2000)
+    }
+  }
+
+  const loadSslStatus = async () => {
+    try {
+      setLoadingSsl(true)
+      const data = await fetchApi("/api/ssl/status")
+      if (data.success) {
+        setSslEnabled(data.ssl_enabled || false)
+        setSslSource(data.source || "none")
+        setSslCertPath(data.cert_path || "")
+        setSslKeyPath(data.key_path || "")
+        setProxmoxCertAvailable(data.proxmox_available || false)
+        setProxmoxCertInfo(data.cert_info || null)
+      }
+    } catch {
+      // Silently fail
+    } finally {
+      setLoadingSsl(false)
+    }
+  }
+
+  const handleEnableSsl = async (source: "proxmox" | "custom", certPath?: string, keyPath?: string) => {
+    setConfiguringSsl(true)
+    setError("")
+    setSuccess("")
+
+    try {
+      const body: Record<string, string> = { source }
+      if (source === "custom" && certPath && keyPath) {
+        body.cert_path = certPath
+        body.key_path = keyPath
+      }
+
+      const data = await fetchApi("/api/ssl/configure", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      })
+
+      if (data.success) {
+        setSuccess(data.message || "SSL configured successfully. Restart the monitor service to apply.")
+        setSslEnabled(true)
+        setSslSource(source)
+        setShowCustomCertForm(false)
+        setCustomCertPath("")
+        setCustomKeyPath("")
+        loadSslStatus()
+      } else {
+        setError(data.message || "Failed to configure SSL")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to configure SSL")
+    } finally {
+      setConfiguringSsl(false)
+    }
+  }
+
+  const handleDisableSsl = async () => {
+    if (!confirm("Are you sure you want to disable HTTPS? The monitor will revert to HTTP after restart.")) {
+      return
+    }
+
+    setConfiguringSsl(true)
+    setError("")
+    setSuccess("")
+
+    try {
+      const data = await fetchApi("/api/ssl/disable", { method: "POST" })
+
+      if (data.success) {
+        setSuccess(data.message || "SSL disabled. Restart the monitor service to apply.")
+        setSslEnabled(false)
+        setSslSource("none")
+        setSslCertPath("")
+        setSslKeyPath("")
+        loadSslStatus()
+      } else {
+        setError(data.message || "Failed to disable SSL")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable SSL")
+    } finally {
+      setConfiguringSsl(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Security</h1>
+        <p className="text-muted-foreground mt-2">Manage authentication, encryption, and access control</p>
+      </div>
+
+      {/* Authentication Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-blue-500" />
+            <CardTitle>Authentication</CardTitle>
+          </div>
+          <CardDescription>Protect your dashboard with username and password authentication</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+              <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-red-500">{error}</p>
+            </div>
+          )}
+
+          {success && (
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
+              <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-green-500">{success}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div
+                className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
+              >
+                <Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
+              </div>
+              <div>
+                <p className="font-medium">Authentication Status</p>
+                <p className="text-sm text-muted-foreground">
+                  {authEnabled ? "Password protection is enabled" : "No password protection"}
+                </p>
+              </div>
+            </div>
+            <div
+              className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
+            >
+              {authEnabled ? "Enabled" : "Disabled"}
+            </div>
+          </div>
+
+          {!authEnabled && !showSetupForm && (
+            <div className="space-y-3">
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-blue-500">
+                  Enable authentication to protect your dashboard when accessing from non-private networks.
+                </p>
+              </div>
+              <Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
+                <Shield className="h-4 w-4 mr-2" />
+                Enable Authentication
+              </Button>
+            </div>
+          )}
+
+          {!authEnabled && showSetupForm && (
+            <div className="space-y-4 border border-border rounded-lg p-4">
+              <h3 className="font-semibold">Setup Authentication</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-username">Username</Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-username"
+                    type="text"
+                    placeholder="Enter username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-password">Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-password"
+                    type="password"
+                    placeholder="Enter password (min 6 characters)"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="setup-confirm-password">Confirm Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="setup-confirm-password"
+                    type="password"
+                    placeholder="Confirm password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="pl-10"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
+                  {loading ? "Enabling..." : "Enable"}
+                </Button>
+                <Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {authEnabled && (
+            <div className="space-y-3">
+              <Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
+                <LogOut className="h-4 w-4 mr-2" />
+                Logout
+              </Button>
+
+              {!showChangePassword && (
+                <Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
+                  <Lock className="h-4 w-4 mr-2" />
+                  Change Password
+                </Button>
+              )}
+
+              {showChangePassword && (
+                <div className="space-y-4 border border-border rounded-lg p-4">
+                  <h3 className="font-semibold">Change Password</h3>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="current-password">Current Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="current-password"
+                        type="password"
+                        placeholder="Enter current password"
+                        value={currentPassword}
+                        onChange={(e) => setCurrentPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="new-password">New Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="new-password"
+                        type="password"
+                        placeholder="Enter new password (min 6 characters)"
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="confirm-new-password">Confirm New Password</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="confirm-new-password"
+                        type="password"
+                        placeholder="Confirm new password"
+                        value={confirmNewPassword}
+                        onChange={(e) => setConfirmNewPassword(e.target.value)}
+                        className="pl-10"
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={handleChangePassword}
+                      className="flex-1 bg-blue-500 hover:bg-blue-600"
+                      disabled={loading}
+                    >
+                      {loading ? "Changing..." : "Change Password"}
+                    </Button>
+                    <Button
+                      onClick={() => setShowChangePassword(false)}
+                      variant="outline"
+                      className="flex-1"
+                      disabled={loading}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {!totpEnabled && (
+                <div className="space-y-3">
+                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                    <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                    <div className="text-sm text-blue-400">
+                      <p className="font-medium mb-1">Two-Factor Authentication (2FA)</p>
+                      <p className="text-blue-300">
+                        Add an extra layer of security by requiring a code from your authenticator app in addition to
+                        your password.
+                      </p>
+                    </div>
+                  </div>
+
+                  <Button onClick={() => setShow2FASetup(true)} variant="outline" className="w-full">
+                    <Shield className="h-4 w-4 mr-2" />
+                    Enable Two-Factor Authentication
+                  </Button>
+                </div>
+              )}
+
+              {totpEnabled && (
+                <div className="space-y-3">
+                  <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
+                    <CheckCircle className="h-5 w-5 text-green-500" />
+                    <p className="text-sm text-green-500 font-medium">2FA is enabled</p>
+                  </div>
+
+                  {!show2FADisable && (
+                    <Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
+                      <Shield className="h-4 w-4 mr-2" />
+                      Disable 2FA
+                    </Button>
+                  )}
+
+                  {show2FADisable && (
+                    <div className="space-y-4 border border-border rounded-lg p-4">
+                      <h3 className="font-semibold">Disable Two-Factor Authentication</h3>
+                      <p className="text-sm text-muted-foreground">Enter your password to confirm</p>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="disable-2fa-password">Password</Label>
+                        <div className="relative">
+                          <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                          <Input
+                            id="disable-2fa-password"
+                            type="password"
+                            placeholder="Enter your password"
+                            value={disable2FAPassword}
+                            onChange={(e) => setDisable2FAPassword(e.target.value)}
+                            className="pl-10"
+                            disabled={loading}
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex gap-2">
+                        <Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
+                          {loading ? "Disabling..." : "Disable 2FA"}
+                        </Button>
+                        <Button
+                          onClick={() => {
+                            setShow2FADisable(false)
+                            setDisable2FAPassword("")
+                            setError("")
+                          }}
+                          variant="outline"
+                          className="flex-1"
+                          disabled={loading}
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
+                Disable Authentication
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* SSL/HTTPS Configuration */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="h-5 w-5 text-green-500" />
+            <CardTitle>SSL / HTTPS</CardTitle>
+          </div>
+          <CardDescription>
+            Serve ProxMenux Monitor over HTTPS using your Proxmox host certificate or a custom certificate
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {loadingSsl ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
+            </div>
+          ) : (
+            <>
+              {/* Current Status */}
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${sslEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}>
+                    <Globe className={`h-5 w-5 ${sslEnabled ? "text-green-500" : "text-gray-500"}`} />
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      {sslEnabled ? "HTTPS Enabled" : "HTTP (No SSL)"}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {sslEnabled
+                        ? `Using ${sslSource === "proxmox" ? "Proxmox host" : "custom"} certificate`
+                        : "Monitor is served over unencrypted HTTP"}
+                    </p>
+                  </div>
+                </div>
+                <div className={`px-3 py-1 rounded-full text-sm font-medium ${sslEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}>
+                  {sslEnabled ? "HTTPS" : "HTTP"}
+                </div>
+              </div>
+
+              {/* Active certificate info */}
+              {sslEnabled && (
+                <div className="space-y-2 p-3 bg-green-500/5 border border-green-500/20 rounded-lg">
+                  <div className="flex items-center gap-2 text-sm font-medium text-green-500">
+                    <FileKey className="h-4 w-4" />
+                    Active Certificate
+                  </div>
+                  <div className="grid gap-1 text-sm text-muted-foreground">
+                    <p><span className="font-medium text-foreground">Cert:</span> <code className="text-xs">{sslCertPath}</code></p>
+                    <p><span className="font-medium text-foreground">Key:</span> <code className="text-xs">{sslKeyPath}</code></p>
+                  </div>
+                  <Button
+                    onClick={handleDisableSsl}
+                    variant="outline"
+                    size="sm"
+                    disabled={configuringSsl}
+                    className="mt-2 text-red-500 border-red-500/30 hover:bg-red-500/10 bg-transparent"
+                  >
+                    {configuringSsl ? "Disabling..." : "Disable HTTPS"}
+                  </Button>
+                </div>
+              )}
+
+              {/* Proxmox certificate detection */}
+              {!sslEnabled && proxmoxCertAvailable && (
+                <div className="space-y-3 p-4 border border-border rounded-lg">
+                  <div className="flex items-center gap-2">
+                    <ShieldCheck className="h-4 w-4 text-green-500" />
+                    <h3 className="font-semibold text-sm">Proxmox Host Certificate Detected</h3>
+                  </div>
+
+                  {proxmoxCertInfo && (
+                    <div className="grid gap-1 text-sm text-muted-foreground bg-muted/50 p-3 rounded">
+                      {proxmoxCertInfo.subject && (
+                        <p><span className="font-medium text-foreground">Subject:</span> {proxmoxCertInfo.subject}</p>
+                      )}
+                      {proxmoxCertInfo.issuer && (
+                        <p><span className="font-medium text-foreground">Issuer:</span> {proxmoxCertInfo.issuer}</p>
+                      )}
+                      {proxmoxCertInfo.expires && (
+                        <p><span className="font-medium text-foreground">Expires:</span> {proxmoxCertInfo.expires}</p>
+                      )}
+                      {proxmoxCertInfo.is_self_signed && (
+                        <div className="flex items-center gap-1.5 mt-1 text-yellow-500">
+                          <AlertTriangle className="h-3.5 w-3.5" />
+                          <span className="text-xs">Self-signed certificate (browsers will show a security warning)</span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  <Button
+                    onClick={() => handleEnableSsl("proxmox")}
+                    className="w-full bg-green-600 hover:bg-green-700 text-white"
+                    disabled={configuringSsl}
+                  >
+                    {configuringSsl ? (
+                      <div className="flex items-center gap-2">
+                        <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
+                        Configuring...
+                      </div>
+                    ) : (
+                      <>
+                        <ShieldCheck className="h-4 w-4 mr-2" />
+                        Use Proxmox Certificate
+                      </>
+                    )}
+                  </Button>
+                </div>
+              )}
+
+              {!sslEnabled && !proxmoxCertAvailable && (
+                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3 flex items-start gap-2">
+                  <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-yellow-500">
+                    No Proxmox host certificate detected. You can configure a custom certificate below.
+                  </p>
+                </div>
+              )}
+
+              {/* Custom certificate option */}
+              {!sslEnabled && (
+                <div className="space-y-3">
+                  {!showCustomCertForm ? (
+                    <Button
+                      onClick={() => setShowCustomCertForm(true)}
+                      variant="outline"
+                      className="w-full"
+                    >
+                      <FileKey className="h-4 w-4 mr-2" />
+                      Use Custom Certificate
+                    </Button>
+                  ) : (
+                    <div className="space-y-4 border border-border rounded-lg p-4">
+                      <h3 className="font-semibold text-sm">Custom Certificate Paths</h3>
+                      <p className="text-xs text-muted-foreground">
+                        Enter the absolute paths to your SSL certificate and private key files on the Proxmox server.
+                      </p>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="ssl-cert-path">Certificate Path (.pem / .crt)</Label>
+                        <Input
+                          id="ssl-cert-path"
+                          type="text"
+                          placeholder="/etc/ssl/certs/mydomain.pem"
+                          value={customCertPath}
+                          onChange={(e) => setCustomCertPath(e.target.value)}
+                          disabled={configuringSsl}
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="ssl-key-path">Private Key Path (.key / .pem)</Label>
+                        <Input
+                          id="ssl-key-path"
+                          type="text"
+                          placeholder="/etc/ssl/private/mydomain.key"
+                          value={customKeyPath}
+                          onChange={(e) => setCustomKeyPath(e.target.value)}
+                          disabled={configuringSsl}
+                        />
+                      </div>
+
+                      <div className="flex gap-2">
+                        <Button
+                          onClick={() => handleEnableSsl("custom", customCertPath, customKeyPath)}
+                          className="flex-1 bg-green-600 hover:bg-green-700 text-white"
+                          disabled={configuringSsl || !customCertPath || !customKeyPath}
+                        >
+                          {configuringSsl ? "Configuring..." : "Enable HTTPS"}
+                        </Button>
+                        <Button
+                          onClick={() => {
+                            setShowCustomCertForm(false)
+                            setCustomCertPath("")
+                            setCustomKeyPath("")
+                          }}
+                          variant="outline"
+                          className="flex-1"
+                          disabled={configuringSsl}
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Info note about restart */}
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-blue-500">
+                  Changes to SSL configuration require a monitor service restart to take effect.
+                  The service will automatically use HTTPS on port 8008 when enabled.
+                </p>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* API Access Tokens */}
+      {authEnabled && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Key className="h-5 w-5 text-purple-500" />
+              <CardTitle>API Access Tokens</CardTitle>
+            </div>
+            <CardDescription>
+              Generate long-lived API tokens for external integrations like Homepage and Home Assistant
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
+                <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            )}
+
+            {success && (
+              <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
+                <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-green-500">{success}</p>
+              </div>
+            )}
+
+            <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+              <div className="flex items-start gap-3">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <div className="space-y-2 text-sm text-blue-400">
+                  <p className="font-medium">About API Tokens</p>
+                  <ul className="list-disc list-inside space-y-1 text-blue-300">
+                    <li>Tokens are valid for 1 year</li>
+                    <li>Use them to access APIs from external services</li>
+                    <li>{'Include in Authorization header: Bearer YOUR_TOKEN'}</li>
+                    <li>See README.md for complete integration examples</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {!showApiTokenSection && !apiToken && (
+              <Button onClick={() => setShowApiTokenSection(true)} className="w-full bg-purple-500 hover:bg-purple-600">
+                <Key className="h-4 w-4 mr-2" />
+                Generate New API Token
+              </Button>
+            )}
+
+            {showApiTokenSection && !apiToken && (
+              <div className="space-y-4 border border-border rounded-lg p-4">
+                <h3 className="font-semibold">Generate API Token</h3>
+                <p className="text-sm text-muted-foreground">
+                  Enter your credentials to generate a new long-lived API token
+                </p>
+
+                <div className="space-y-2">
+                  <Label htmlFor="token-name">Token Name</Label>
+                  <div className="relative">
+                    <Key className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="token-name"
+                      type="text"
+                      placeholder="e.g. Homepage, Home Assistant"
+                      value={tokenName}
+                      onChange={(e) => setTokenName(e.target.value)}
+                      className="pl-10"
+                      disabled={generatingToken}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="token-password">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="token-password"
+                      type="password"
+                      placeholder="Enter your password"
+                      value={tokenPassword}
+                      onChange={(e) => setTokenPassword(e.target.value)}
+                      className="pl-10"
+                      disabled={generatingToken}
+                    />
+                  </div>
+                </div>
+
+                {totpEnabled && (
+                  <div className="space-y-2">
+                    <Label htmlFor="token-totp">2FA Code</Label>
+                    <div className="relative">
+                      <Shield className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="token-totp"
+                        type="text"
+                        placeholder="Enter 6-digit code"
+                        value={tokenTotpCode}
+                        onChange={(e) => setTokenTotpCode(e.target.value)}
+                        className="pl-10"
+                        maxLength={6}
+                        disabled={generatingToken}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex gap-2">
+                  <Button
+                    onClick={handleGenerateApiToken}
+                    className="flex-1 bg-purple-500 hover:bg-purple-600"
+                    disabled={generatingToken}
+                  >
+                    {generatingToken ? "Generating..." : "Generate Token"}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setShowApiTokenSection(false)
+                      setTokenPassword("")
+                      setTokenTotpCode("")
+                      setTokenName("API Token")
+                      setError("")
+                    }}
+                    variant="outline"
+                    className="flex-1"
+                    disabled={generatingToken}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {apiToken && (
+              <div className="space-y-4 border border-green-500/20 bg-green-500/5 rounded-lg p-4">
+                <div className="flex items-center gap-2 text-green-500">
+                  <CheckCircle className="h-5 w-5" />
+                  <h3 className="font-semibold">Your API Token</h3>
+                </div>
+
+                <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 flex items-start gap-2">
+                  <AlertCircle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
+                  <div className="space-y-1">
+                    <p className="text-sm text-amber-600 dark:text-amber-400 font-semibold">
+                      Important: Save this token now!
+                    </p>
+                    <p className="text-xs text-amber-600/80 dark:text-amber-400/80">
+                      {"You won't be able to see it again. Store it securely."}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Token</Label>
+                  <div className="relative">
+                    <Input
+                      value={apiToken}
+                      readOnly
+                      type={apiTokenVisible ? "text" : "password"}
+                      className="pr-20 font-mono text-sm"
+                    />
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => setApiTokenVisible(!apiTokenVisible)}
+                        className="h-7 w-7 p-0"
+                      >
+                        {apiTokenVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </Button>
+                      <Button size="sm" variant="ghost" onClick={copyApiToken} className="h-7 w-7 p-0">
+                        <Copy className={`h-4 w-4 ${tokenCopied ? "text-green-500" : ""}`} />
+                      </Button>
+                    </div>
+                  </div>
+                  {tokenCopied && (
+                    <p className="text-xs text-green-500 flex items-center gap-1">
+                      <CheckCircle className="h-3 w-3" />
+                      Copied to clipboard!
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-sm font-medium">How to use this token:</p>
+                  <div className="bg-muted/50 rounded p-3 text-xs font-mono">
+                    <p className="text-muted-foreground mb-2"># Add to request headers:</p>
+                    <p>{'Authorization: Bearer YOUR_TOKEN_HERE'}</p>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    See the README documentation for complete integration examples with Homepage and Home Assistant.
+                  </p>
+                </div>
+
+                <Button
+                  onClick={() => {
+                    setApiToken("")
+                    setShowApiTokenSection(false)
+                  }}
+                  variant="outline"
+                  className="w-full"
+                >
+                  Done
+                </Button>
+              </div>
+            )}
+
+            {/* Existing Tokens List */}
+            {!loadingTokens && existingTokens.length > 0 && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-muted-foreground">Active Tokens</h3>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={loadApiTokens}
+                    className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                  >
+                    <RefreshCw className="h-3 w-3 mr-1" />
+                    Refresh
+                  </Button>
+                </div>
+
+                <div className="space-y-2">
+                  {existingTokens.map((token) => (
+                    <div
+                      key={token.id}
+                      className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border border-border"
+                    >
+                      <div className="flex items-center gap-3 min-w-0">
+                        <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0">
+                          <Key className="h-4 w-4 text-blue-500" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="text-sm font-medium truncate">{token.name}</p>
+                          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                            <code className="font-mono">{token.token_prefix}</code>
+                            <span className="flex items-center gap-1">
+                              <Clock className="h-3 w-3" />
+                              {token.created_at
+                                ? new Date(token.created_at).toLocaleDateString()
+                                : "Unknown"}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRevokeToken(token.id)}
+                        disabled={revokingTokenId === token.id}
+                        className="h-8 px-2 text-red-500 hover:text-red-400 hover:bg-red-500/10 flex-shrink-0"
+                      >
+                        {revokingTokenId === token.id ? (
+                          <div className="animate-spin h-4 w-4 border-2 border-red-500 border-t-transparent rounded-full" />
+                        ) : (
+                          <Trash2 className="h-4 w-4" />
+                        )}
+                        <span className="ml-1 text-xs hidden sm:inline">Revoke</span>
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {loadingTokens && (
+              <div className="flex items-center justify-center py-4">
+                <div className="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading tokens...</span>
+              </div>
+            )}
+
+            {!loadingTokens && existingTokens.length === 0 && !showApiTokenSection && !apiToken && (
+              <div className="text-center py-4 text-sm text-muted-foreground">
+                No API tokens created yet
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Proxmox Firewall */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Flame className="h-5 w-5 text-orange-500" />
+            <CardTitle>Proxmox Firewall</CardTitle>
+          </div>
+          <CardDescription>
+            Manage the Proxmox VE built-in firewall at cluster and host level
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {firewallLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-orange-500 border-t-transparent rounded-full" />
+            </div>
+          ) : !firewallData?.pve_firewall_installed ? (
+            <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 flex items-start gap-3">
+              <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-yellow-500">Proxmox Firewall Not Detected</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  The pve-firewall service was not found on this system. It should be included with Proxmox VE by default.
+                </p>
+              </div>
+            </div>
+          ) : (
+            <>
+              {/* Firewall Status Overview */}
+              <div className="grid gap-3 sm:grid-cols-2">
+                {/* Cluster Firewall */}
+                <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg border border-border">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${firewallData.cluster_fw_enabled ? "bg-green-500/10" : "bg-gray-500/10"}`}>
+                      <Globe className={`h-5 w-5 ${firewallData.cluster_fw_enabled ? "text-green-500" : "text-gray-500"}`} />
+                    </div>
+                    <div>
+                      <p className="font-medium text-sm">Cluster Firewall</p>
+                      <p className="text-xs text-muted-foreground">
+                        {firewallData.cluster_fw_enabled ? "Active" : "Disabled"}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={firewallAction}
+                    onClick={() => handleFirewallToggle("cluster", !firewallData.cluster_fw_enabled)}
+                    className={firewallData.cluster_fw_enabled
+                      ? "text-red-500 border-red-500/30 hover:bg-red-500/10 bg-transparent"
+                      : "text-green-500 border-green-500/30 hover:bg-green-500/10 bg-transparent"
+                    }
+                  >
+                    {firewallData.cluster_fw_enabled ? (
+                      <><PowerOff className="h-3.5 w-3.5 mr-1" /> Disable</>
+                    ) : (
+                      <><Power className="h-3.5 w-3.5 mr-1" /> Enable</>
+                    )}
+                  </Button>
+                </div>
+
+                {/* Host Firewall */}
+                <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg border border-border">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${firewallData.host_fw_enabled ? "bg-green-500/10" : "bg-gray-500/10"}`}>
+                      <Shield className={`h-5 w-5 ${firewallData.host_fw_enabled ? "text-green-500" : "text-gray-500"}`} />
+                    </div>
+                    <div>
+                      <p className="font-medium text-sm">Host Firewall</p>
+                      <p className="text-xs text-muted-foreground">
+                        {firewallData.host_fw_enabled ? "Active" : "Disabled"}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={firewallAction}
+                    onClick={() => handleFirewallToggle("host", !firewallData.host_fw_enabled)}
+                    className={firewallData.host_fw_enabled
+                      ? "text-red-500 border-red-500/30 hover:bg-red-500/10 bg-transparent"
+                      : "text-green-500 border-green-500/30 hover:bg-green-500/10 bg-transparent"
+                    }
+                  >
+                    {firewallData.host_fw_enabled ? (
+                      <><PowerOff className="h-3.5 w-3.5 mr-1" /> Disable</>
+                    ) : (
+                      <><Power className="h-3.5 w-3.5 mr-1" /> Enable</>
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {/* ProxMenux Monitor Port 8008 */}
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg border border-border">
+                <div className="flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${firewallData.monitor_port_open ? "bg-green-500/10" : "bg-yellow-500/10"}`}>
+                    <Activity className={`h-5 w-5 ${firewallData.monitor_port_open ? "text-green-500" : "text-yellow-500"}`} />
+                  </div>
+                  <div>
+                    <p className="font-medium text-sm">ProxMenux Monitor Port (8008/TCP)</p>
+                    <p className="text-xs text-muted-foreground">
+                      {firewallData.monitor_port_open
+                        ? "Port 8008 is allowed in the firewall"
+                        : "Port 8008 is not configured in the firewall"}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={firewallAction}
+                  onClick={() => handleMonitorPortToggle(!firewallData.monitor_port_open)}
+                  className={firewallData.monitor_port_open
+                    ? "text-red-500 border-red-500/30 hover:bg-red-500/10 bg-transparent"
+                    : "text-green-500 border-green-500/30 hover:bg-green-500/10 bg-transparent"
+                  }
+                >
+                  {firewallData.monitor_port_open ? (
+                    <><Minus className="h-3.5 w-3.5 mr-1" /> Remove Rule</>
+                  ) : (
+                    <><Plus className="h-3.5 w-3.5 mr-1" /> Add Rule</>
+                  )}
+                </Button>
+              </div>
+
+              {!firewallData.monitor_port_open && (firewallData.cluster_fw_enabled || firewallData.host_fw_enabled) && (
+                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3 flex items-start gap-2">
+                  <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-yellow-500">
+                    The firewall is active but port 8008 is not allowed. ProxMenux Monitor may be inaccessible from other devices. Add the rule above to fix this.
+                  </p>
+                </div>
+              )}
+
+              {/* Active Rules */}
+              {firewallData.rules.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-semibold text-muted-foreground">
+                      Active Rules ({firewallData.rules_count})
+                    </h3>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={loadFirewallStatus}
+                      className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    >
+                      <RefreshCw className="h-3 w-3 mr-1" />
+                      Refresh
+                    </Button>
+                  </div>
+                  <div className="max-h-48 overflow-y-auto space-y-1">
+                    {firewallData.rules.map((rule, idx) => (
+                      <div key={idx} className="flex items-center gap-2 p-2 bg-muted/30 rounded text-xs font-mono">
+                        <span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${
+                          rule.action === "ACCEPT" ? "bg-green-500/10 text-green-500" :
+                          rule.action === "DROP" ? "bg-red-500/10 text-red-500" :
+                          "bg-gray-500/10 text-gray-500"
+                        }`}>
+                          {rule.action || "?"}
+                        </span>
+                        <span className="text-muted-foreground">{rule.direction || "IN"}</span>
+                        {rule.p && <span className="text-blue-400">{rule.p}</span>}
+                        {rule.dport && <span className="text-foreground">:{rule.dport}</span>}
+                        <span className="text-muted-foreground/60 ml-auto">{rule.source_file}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-blue-500">
+                  For advanced firewall configuration (IP sets, security groups, per-VM rules), use the Proxmox web interface at port 8006.
+                </p>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Fail2Ban */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Bug className="h-5 w-5 text-red-500" />
+              <CardTitle>Fail2Ban</CardTitle>
+            </div>
+            {fail2banInfo?.installed && fail2banInfo?.active && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => { loadFail2banDetails(); loadSecurityTools(); }}
+                className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <RefreshCw className="h-3 w-3 mr-1" />
+                Refresh
+              </Button>
+            )}
+          </div>
+          <CardDescription>
+            Intrusion prevention system that bans IPs after repeated failed login attempts
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {toolsLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-red-500 border-t-transparent rounded-full" />
+            </div>
+          ) : !fail2banInfo?.installed ? (
+            /* --- NOT INSTALLED --- */
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gray-500/10 flex items-center justify-center">
+                    <Bug className="h-5 w-5 text-gray-500" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Fail2Ban Not Installed</p>
+                    <p className="text-sm text-muted-foreground">Protect SSH and Proxmox web interface from brute force attacks</p>
+                  </div>
+                </div>
+                <div className="px-3 py-1 rounded-full text-sm font-medium bg-gray-500/10 text-gray-500">
+                  Not Installed
+                </div>
+              </div>
+
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                  <div className="space-y-2 text-sm text-blue-400">
+                    <p className="font-medium">What Fail2Ban will configure:</p>
+                    <ul className="list-disc list-inside space-y-1 text-blue-300">
+                      <li>SSH protection (max 2 retries, 9h ban)</li>
+                      <li>Proxmox web interface protection (port 8006, max 3 retries, 1h ban)</li>
+                      <li>Global settings with nftables backend</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                onClick={() => setShowFail2banInstaller(true)}
+                className="w-full bg-red-600 hover:bg-red-700 text-white"
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Install and Configure Fail2Ban
+              </Button>
+            </div>
+          ) : (
+            /* --- INSTALLED --- */
+            <div className="space-y-4">
+              {/* Status bar */}
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${fail2banInfo.active ? "bg-green-500/10" : "bg-yellow-500/10"}`}>
+                    <Bug className={`h-5 w-5 ${fail2banInfo.active ? "text-green-500" : "text-yellow-500"}`} />
+                  </div>
+                  <div>
+                    <p className="font-medium">Fail2Ban {fail2banInfo.version}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {fail2banInfo.active ? "Service is running" : "Service is not running"}
+                    </p>
+                  </div>
+                </div>
+                <div className={`px-3 py-1 rounded-full text-sm font-medium ${fail2banInfo.active ? "bg-green-500/10 text-green-500" : "bg-yellow-500/10 text-yellow-500"}`}>
+                  {fail2banInfo.active ? "Active" : "Inactive"}
+                </div>
+              </div>
+
+              {fail2banInfo.active && f2bDetails && (
+                <>
+                  {/* Summary stats */}
+                  <div className="grid gap-3 grid-cols-2 sm:grid-cols-4">
+                    <div className="p-3 bg-muted/30 rounded-lg border border-border text-center">
+                      <p className="text-xs text-muted-foreground mb-1">Jails</p>
+                      <p className="text-xl font-bold">{f2bDetails.jails.length}</p>
+                    </div>
+                    <div className="p-3 bg-muted/30 rounded-lg border border-border text-center">
+                      <p className="text-xs text-muted-foreground mb-1">Banned IPs</p>
+                      <p className={`text-xl font-bold ${f2bDetails.jails.reduce((a, j) => a + j.currently_banned, 0) > 0 ? "text-red-500" : "text-green-500"}`}>
+                        {f2bDetails.jails.reduce((a, j) => a + j.currently_banned, 0)}
+                      </p>
+                    </div>
+                    <div className="p-3 bg-muted/30 rounded-lg border border-border text-center">
+                      <p className="text-xs text-muted-foreground mb-1">Total Bans</p>
+                      <p className="text-xl font-bold text-orange-500">
+                        {f2bDetails.jails.reduce((a, j) => a + j.total_banned, 0)}
+                      </p>
+                    </div>
+                    <div className="p-3 bg-muted/30 rounded-lg border border-border text-center">
+                      <p className="text-xs text-muted-foreground mb-1">Failed Attempts</p>
+                      <p className="text-xl font-bold text-yellow-500">
+                        {f2bDetails.jails.reduce((a, j) => a + j.total_failed, 0)}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Tab switcher */}
+                  <div className="flex gap-1 p-1 bg-muted/30 rounded-lg">
+                    <button
+                      onClick={() => setF2bActiveTab("jails")}
+                      className={`flex-1 px-3 py-2 rounded-md text-sm font-medium transition-all ${
+                        f2bActiveTab === "jails"
+                          ? "bg-red-500 text-white shadow-sm"
+                          : "text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      <Shield className="h-3.5 w-3.5 inline mr-1.5" />
+                      Jails & Banned IPs
+                    </button>
+                    <button
+                      onClick={() => setF2bActiveTab("activity")}
+                      className={`flex-1 px-3 py-2 rounded-md text-sm font-medium transition-all ${
+                        f2bActiveTab === "activity"
+                          ? "bg-red-500 text-white shadow-sm"
+                          : "text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      <Clock className="h-3.5 w-3.5 inline mr-1.5" />
+                      Recent Activity
+                    </button>
+                  </div>
+
+                  {/* JAILS TAB */}
+                  {f2bActiveTab === "jails" && (
+                    <div className="space-y-3">
+                      {f2bDetails.jails.map((jail) => (
+                        <div key={jail.name} className="border border-border rounded-lg overflow-hidden">
+                          {/* Jail header */}
+                          <div className="flex items-center justify-between p-3 bg-muted/40">
+                            <div className="flex items-center gap-2.5">
+                              <div className={`w-2.5 h-2.5 rounded-full ${jail.currently_banned > 0 ? "bg-red-500 animate-pulse" : "bg-green-500"}`} />
+                              <span className="font-semibold text-sm">{jail.name}</span>
+                            </div>
+                            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                              <span title="Max retries before ban">
+                                Retries: <span className="text-foreground font-medium">{jail.maxretry}</span>
+                              </span>
+                              <span title="Ban duration">
+                                Ban: <span className="text-foreground font-medium">{formatBanTime(jail.bantime)}</span>
+                              </span>
+                              <span title="Time window for counting failures">
+                                Window: <span className="text-foreground font-medium">{formatBanTime(jail.findtime)}</span>
+                              </span>
+                            </div>
+                          </div>
+
+                          {/* Jail stats bar */}
+                          <div className="grid grid-cols-4 gap-px bg-border">
+                            <div className="p-2.5 bg-card text-center">
+                              <p className="text-[10px] text-muted-foreground uppercase tracking-wider">Banned</p>
+                              <p className={`text-lg font-bold ${jail.currently_banned > 0 ? "text-red-500" : "text-green-500"}`}>
+                                {jail.currently_banned}
+                              </p>
+                            </div>
+                            <div className="p-2.5 bg-card text-center">
+                              <p className="text-[10px] text-muted-foreground uppercase tracking-wider">Total Bans</p>
+                              <p className="text-lg font-bold text-orange-500">{jail.total_banned}</p>
+                            </div>
+                            <div className="p-2.5 bg-card text-center">
+                              <p className="text-[10px] text-muted-foreground uppercase tracking-wider">Failed Now</p>
+                              <p className="text-lg font-bold text-yellow-500">{jail.currently_failed}</p>
+                            </div>
+                            <div className="p-2.5 bg-card text-center">
+                              <p className="text-[10px] text-muted-foreground uppercase tracking-wider">Total Failed</p>
+                              <p className="text-lg font-bold text-muted-foreground">{jail.total_failed}</p>
+                            </div>
+                          </div>
+
+                          {/* Banned IPs list */}
+                          {jail.banned_ips.length > 0 && (
+                            <div className="border-t border-border">
+                              <div className="px-3 py-2 bg-red-500/5">
+                                <p className="text-xs font-semibold text-red-500 mb-2">
+                                  Banned IPs ({jail.banned_ips.length})
+                                </p>
+                                <div className="space-y-1.5">
+                                  {jail.banned_ips.map((ip) => (
+                                    <div key={ip} className="flex items-center justify-between px-3 py-2 bg-card rounded-md border border-red-500/20">
+                                      <div className="flex items-center gap-2.5">
+                                        <div className="w-2 h-2 rounded-full bg-red-500" />
+                                        <code className="text-sm font-mono">{ip}</code>
+                                      </div>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => handleUnbanIp(jail.name, ip)}
+                                        disabled={f2bUnbanning === `${jail.name}:${ip}`}
+                                        className="h-7 px-2.5 text-xs text-green-500 hover:text-green-400 hover:bg-green-500/10"
+                                      >
+                                        {f2bUnbanning === `${jail.name}:${ip}` ? (
+                                          <div className="animate-spin h-3 w-3 border-2 border-green-500 border-t-transparent rounded-full" />
+                                        ) : (
+                                          <>
+                                            <ShieldCheck className="h-3 w-3 mr-1" />
+                                            Unban
+                                          </>
+                                        )}
+                                      </Button>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {jail.currently_banned === 0 && (
+                            <div className="px-3 py-3 border-t border-border text-center">
+                              <p className="text-xs text-muted-foreground">No IPs currently banned in this jail</p>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+
+                      {f2bDetails.jails.length === 0 && (
+                        <div className="text-center py-6 text-muted-foreground text-sm">
+                          No jails configured
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* ACTIVITY TAB */}
+                  {f2bActiveTab === "activity" && (
+                    <div className="space-y-1.5 max-h-80 overflow-y-auto">
+                      {f2bActivity.length === 0 ? (
+                        <div className="text-center py-6 text-muted-foreground text-sm">
+                          No recent activity in the Fail2Ban log
+                        </div>
+                      ) : (
+                        f2bActivity.map((event, idx) => (
+                          <div key={idx} className="flex items-center gap-3 px-3 py-2 bg-muted/20 rounded-md hover:bg-muted/40 transition-colors">
+                            <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                              event.action === "ban" ? "bg-red-500" :
+                              event.action === "unban" ? "bg-green-500" :
+                              "bg-yellow-500"
+                            }`} />
+                            <div className={`px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
+                              event.action === "ban" ? "bg-red-500/10 text-red-500" :
+                              event.action === "unban" ? "bg-green-500/10 text-green-500" :
+                              "bg-yellow-500/10 text-yellow-500"
+                            }`}>
+                              {event.action}
+                            </div>
+                            <code className="text-xs font-mono text-foreground flex-shrink-0">{event.ip}</code>
+                            <span className="text-xs text-muted-foreground">{event.jail}</span>
+                            <span className="text-[10px] text-muted-foreground/70 ml-auto flex-shrink-0">{event.timestamp}</span>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+
+              {fail2banInfo.active && !f2bDetails && f2bDetailsLoading && (
+                <div className="flex items-center justify-center py-4">
+                  <div className="animate-spin h-6 w-6 border-3 border-red-500 border-t-transparent rounded-full" />
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Lynis */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Search className="h-5 w-5 text-cyan-500" />
+            <CardTitle>Lynis Security Audit</CardTitle>
+          </div>
+          <CardDescription>
+            System security auditing tool that performs comprehensive security scans
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {toolsLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-cyan-500 border-t-transparent rounded-full" />
+            </div>
+          ) : !lynisInfo?.installed ? (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gray-500/10 flex items-center justify-center">
+                    <Search className="h-5 w-5 text-gray-500" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Lynis Not Installed</p>
+                    <p className="text-sm text-muted-foreground">Comprehensive security auditing and hardening tool</p>
+                  </div>
+                </div>
+                <div className="px-3 py-1 rounded-full text-sm font-medium bg-gray-500/10 text-gray-500">
+                  Not Installed
+                </div>
+              </div>
+
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                  <div className="space-y-2 text-sm text-blue-400">
+                    <p className="font-medium">Lynis features:</p>
+                    <ul className="list-disc list-inside space-y-1 text-blue-300">
+                      <li>System hardening scoring (0-100)</li>
+                      <li>Vulnerability detection and suggestions</li>
+                      <li>Compliance checking (PCI-DSS, HIPAA, etc.)</li>
+                      <li>Installed from latest GitHub source</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                onClick={() => setShowLynisInstaller(true)}
+                className="w-full bg-cyan-600 hover:bg-cyan-700 text-white"
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Install Lynis
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {/* Status */}
+              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center">
+                    <Search className="h-5 w-5 text-green-500" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Lynis {lynisInfo.version}</p>
+                    <p className="text-sm text-muted-foreground">Security auditing tool installed</p>
+                  </div>
+                </div>
+                <div className="px-3 py-1 rounded-full text-sm font-medium bg-green-500/10 text-green-500">
+                  Installed
+                </div>
+              </div>
+
+              {/* Last Scan Info */}
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="p-3 bg-muted/30 rounded-lg border border-border">
+                  <p className="text-xs text-muted-foreground mb-1">Last Scan</p>
+                  <p className="text-sm font-medium">
+                    {lynisInfo.last_scan || "No scan performed yet"}
+                  </p>
+                </div>
+                <div className="p-3 bg-muted/30 rounded-lg border border-border">
+                  <p className="text-xs text-muted-foreground mb-1">Hardening Index</p>
+                  <p className={`text-lg font-bold ${
+                    lynisInfo.hardening_index === null ? "text-muted-foreground" :
+                    lynisInfo.hardening_index >= 70 ? "text-green-500" :
+                    lynisInfo.hardening_index >= 50 ? "text-yellow-500" :
+                    "text-red-500"
+                  }`}>
+                    {lynisInfo.hardening_index !== null ? `${lynisInfo.hardening_index}/100` : "N/A"}
+                  </p>
+                </div>
+              </div>
+
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-blue-500">
+                  Run audits from the Proxmox terminal with: <code className="text-xs bg-blue-500/10 px-1.5 py-0.5 rounded">lynis audit system</code>
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Script Terminal Modals */}
+      <ScriptTerminalModal
+        open={showFail2banInstaller}
+        onClose={() => {
+          setShowFail2banInstaller(false)
+          loadSecurityTools()
+        }}
+        scriptPath="/usr/local/share/proxmenux/scripts/security/fail2ban_installer.sh"
+        scriptName="fail2ban_installer"
+        params={{ EXECUTION_MODE: "web" }}
+        title="Fail2Ban Installation"
+        description="Installing and configuring Fail2Ban for SSH and Proxmox protection..."
+      />
+      <ScriptTerminalModal
+        open={showLynisInstaller}
+        onClose={() => {
+          setShowLynisInstaller(false)
+          loadSecurityTools()
+        }}
+        scriptPath="/usr/local/share/proxmenux/scripts/security/lynis_installer.sh"
+        scriptName="lynis_installer"
+        params={{ EXECUTION_MODE: "web" }}
+        title="Lynis Installation"
+        description="Installing Lynis security auditing tool from GitHub..."
+      />
+
+      <TwoFactorSetup
+        open={show2FASetup}
+        onClose={() => setShow2FASetup(false)}
+        onSuccess={() => {
+          setSuccess("2FA enabled successfully!")
+          checkAuthStatus()
+        }}
+      />
+    </div>
+  )
+}
diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index 29402a03..73625767 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -1,16 +1,11 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Button } from "./ui/button"
-import { Input } from "./ui/input"
-import { Label } from "./ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
-import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Wrench, Package, Key, Copy, Eye, EyeOff, Ruler, Trash2, RefreshCw, Clock, ShieldCheck, Globe, FileKey, AlertTriangle } from 'lucide-react'
-import { APP_VERSION } from "./release-notes-modal"
-import { getApiUrl, fetchApi } from "../lib/api-config"
-import { TwoFactorSetup } from "./two-factor-setup"
+import { Wrench, Package, Ruler } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 import { getNetworkUnit } from "../lib/format-network"
+import { fetchApi } from "../lib/api-config"
 
 interface ProxMenuxTool {
   key: string
@@ -18,99 +13,20 @@ interface ProxMenuxTool {
   enabled: boolean
 }
 
-interface ApiTokenEntry {
-  id: string
-  name: string
-  token_prefix: string
-  created_at: string
-  expires_at: string
-  revoked: boolean
-}
-
 export function Settings() {
-  const [authEnabled, setAuthEnabled] = useState(false)
-  const [totpEnabled, setTotpEnabled] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [success, setSuccess] = useState("")
-
-  // Setup form state
-  const [showSetupForm, setShowSetupForm] = useState(false)
-  const [username, setUsername] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
-
-  // Change password form state
-  const [showChangePassword, setShowChangePassword] = useState(false)
-  const [currentPassword, setCurrentPassword] = useState("")
-  const [newPassword, setNewPassword] = useState("")
-  const [confirmNewPassword, setConfirmNewPassword] = useState("")
-
-  const [show2FASetup, setShow2FASetup] = useState(false)
-  const [show2FADisable, setShow2FADisable] = useState(false)
-  const [disable2FAPassword, setDisable2FAPassword] = useState("")
-
   const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
   const [loadingTools, setLoadingTools] = useState(true)
-  const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
-    [APP_VERSION]: true, // Current version expanded by default
-  })
-
-  // API Token state management
-  const [showApiTokenSection, setShowApiTokenSection] = useState(false)
-  const [apiToken, setApiToken] = useState("")
-  const [apiTokenVisible, setApiTokenVisible] = useState(false)
-  const [tokenPassword, setTokenPassword] = useState("")
-  const [tokenTotpCode, setTokenTotpCode] = useState("")
-  const [generatingToken, setGeneratingToken] = useState(false)
-  const [tokenCopied, setTokenCopied] = useState(false)
-
-  // Token list state
-  const [existingTokens, setExistingTokens] = useState<ApiTokenEntry[]>([])
-  const [loadingTokens, setLoadingTokens] = useState(false)
-  const [revokingTokenId, setRevokingTokenId] = useState<string | null>(null)
-  const [tokenName, setTokenName] = useState("API Token")
-
-  // SSL/HTTPS state
-  const [sslEnabled, setSslEnabled] = useState(false)
-  const [sslSource, setSslSource] = useState<"none" | "proxmox" | "custom">("none")
-  const [sslCertPath, setSslCertPath] = useState("")
-  const [sslKeyPath, setSslKeyPath] = useState("")
-  const [proxmoxCertAvailable, setProxmoxCertAvailable] = useState(false)
-  const [proxmoxCertInfo, setProxmoxCertInfo] = useState<{subject?: string; expires?: string; issuer?: string; is_self_signed?: boolean} | null>(null)
-  const [loadingSsl, setLoadingSsl] = useState(true)
-  const [configuringSsl, setConfiguringSsl] = useState(false)
-  const [showCustomCertForm, setShowCustomCertForm] = useState(false)
-  const [customCertPath, setCustomCertPath] = useState("")
-  const [customKeyPath, setCustomKeyPath] = useState("")
-
   const [networkUnitSettings, setNetworkUnitSettings] = useState<"Bytes" | "Bits">("Bytes")
   const [loadingUnitSettings, setLoadingUnitSettings] = useState(true)
 
   useEffect(() => {
-    checkAuthStatus()
     loadProxmenuxTools()
-    loadApiTokens()
-    loadSslStatus(setSslEnabled, setSslSource, setSslCertPath, setSslKeyPath, setProxmoxCertAvailable, setProxmoxCertInfo, setLoadingSsl)
     getUnitsSettings()
   }, [])
 
-  const checkAuthStatus = async () => {
-    try {
-      const response = await fetch(getApiUrl("/api/auth/status"))
-      const data = await response.json()
-      setAuthEnabled(data.auth_enabled || false)
-      setTotpEnabled(data.totp_enabled || false) // Get 2FA status
-    } catch (err) {
-      console.error("Failed to check auth status:", err)
-    }
-  }
-
   const loadProxmenuxTools = async () => {
     try {
-      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"))
-      const data = await response.json()
-
+      const data = await fetchApi("/api/proxmenux/installed-tools")
       if (data.success) {
         setProxmenuxTools(data.installed_tools || [])
       }
@@ -121,347 +37,13 @@ export function Settings() {
     }
   }
 
-  const handleEnableAuth = async () => {
-    setError("")
-    setSuccess("")
-
-    if (!username || !password) {
-      setError("Please fill in all fields")
-      return
-    }
-
-    if (password !== confirmPassword) {
-      setError("Passwords do not match")
-      return
-    }
-
-    if (password.length < 6) {
-      setError("Password must be at least 6 characters")
-      return
-    }
-
-    setLoading(true)
-
-    try {
-      const response = await fetch(getApiUrl("/api/auth/setup"), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          username,
-          password,
-          enable_auth: true,
-        }),
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.error || "Failed to enable authentication")
-      }
-
-      // Save token
-      localStorage.setItem("proxmenux-auth-token", data.token)
-      localStorage.setItem("proxmenux-auth-setup-complete", "true")
-
-      setSuccess("Authentication enabled successfully!")
-      setAuthEnabled(true)
-      setShowSetupForm(false)
-      setUsername("")
-      setPassword("")
-      setConfirmPassword("")
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to enable authentication")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleDisableAuth = async () => {
-    if (
-      !confirm(
-        "Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
-      )
-    ) {
-      return
-    }
-
-    setLoading(true)
-    setError("")
-    setSuccess("")
-
-    try {
-      const token = localStorage.getItem("proxmenux-auth-token")
-      const response = await fetch(getApiUrl("/api/auth/disable"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.message || "Failed to disable authentication")
-      }
-
-      localStorage.removeItem("proxmenux-auth-token")
-      localStorage.removeItem("proxmenux-auth-setup-complete")
-
-      setSuccess("Authentication disabled successfully! Reloading...")
-
-      setTimeout(() => {
-        window.location.reload()
-      }, 1000)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleChangePassword = async () => {
-    setError("")
-    setSuccess("")
-
-    if (!currentPassword || !newPassword) {
-      setError("Please fill in all fields")
-      return
-    }
-
-    if (newPassword !== confirmNewPassword) {
-      setError("New passwords do not match")
-      return
-    }
-
-    if (newPassword.length < 6) {
-      setError("Password must be at least 6 characters")
-      return
-    }
-
-    setLoading(true)
-
-    try {
-      const response = await fetch(getApiUrl("/api/auth/change-password"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
-        },
-        body: JSON.stringify({
-          current_password: currentPassword,
-          new_password: newPassword,
-        }),
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.error || "Failed to change password")
-      }
-
-      // Update token if provided
-      if (data.token) {
-        localStorage.setItem("proxmenux-auth-token", data.token)
-      }
-
-      setSuccess("Password changed successfully!")
-      setShowChangePassword(false)
-      setCurrentPassword("")
-      setNewPassword("")
-      setConfirmNewPassword("")
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to change password")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleDisable2FA = async () => {
-    setError("")
-    setSuccess("")
-
-    if (!disable2FAPassword) {
-      setError("Please enter your password")
-      return
-    }
-
-    setLoading(true)
-
-    try {
-      const token = localStorage.getItem("proxmenux-auth-token")
-      const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ password: disable2FAPassword }),
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.message || "Failed to disable 2FA")
-      }
-
-      setSuccess("2FA disabled successfully!")
-      setTotpEnabled(false)
-      setShow2FADisable(false)
-      setDisable2FAPassword("")
-      checkAuthStatus()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable 2FA")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleLogout = () => {
-    localStorage.removeItem("proxmenux-auth-token")
-    localStorage.removeItem("proxmenux-auth-setup-complete")
-    window.location.reload()
-  }
-
-  const loadApiTokens = async () => {
-    try {
-      setLoadingTokens(true)
-      const data = await fetchApi("/api/auth/api-tokens")
-      if (data.success) {
-        setExistingTokens(data.tokens || [])
-      }
-    } catch {
-      // Silently fail - tokens section is optional
-    } finally {
-      setLoadingTokens(false)
-    }
-  }
-
-  const handleRevokeToken = async (tokenId: string) => {
-    if (!confirm("Are you sure you want to revoke this token? Any integration using it will stop working immediately.")) {
-      return
-    }
-
-    setRevokingTokenId(tokenId)
-    setError("")
-    setSuccess("")
-
-    try {
-      const data = await fetchApi(`/api/auth/api-tokens/${tokenId}`, {
-        method: "DELETE",
-      })
-
-      if (data.success) {
-        setSuccess("Token revoked successfully")
-        setExistingTokens((prev) => prev.filter((t) => t.id !== tokenId))
-      } else {
-        setError(data.message || "Failed to revoke token")
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to revoke token")
-    } finally {
-      setRevokingTokenId(null)
-    }
-  }
-
-  const handleGenerateApiToken = async () => {
-    setError("")
-    setSuccess("")
-
-    if (!tokenPassword) {
-      setError("Please enter your password")
-      return
-    }
-
-    if (totpEnabled && !tokenTotpCode) {
-      setError("Please enter your 2FA code")
-      return
-    }
-
-    setGeneratingToken(true)
-
-    try {
-      const data = await fetchApi("/api/auth/generate-api-token", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          password: tokenPassword,
-          totp_token: totpEnabled ? tokenTotpCode : undefined,
-          token_name: tokenName || "API Token",
-        }),
-      })
-
-      if (!data.success) {
-        setError(data.message || data.error || "Failed to generate API token")
-        return
-      }
-
-      if (!data.token) {
-        setError("No token received from server")
-        return
-      }
-
-      setApiToken(data.token)
-      setSuccess("API token generated successfully! Make sure to copy it now as you won't be able to see it again.")
-      setTokenPassword("")
-      setTokenTotpCode("")
-      setTokenName("API Token")
-      loadApiTokens()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to generate API token. Please try again.")
-    } finally {
-      setGeneratingToken(false)
-    }
-  }
-
-  const copyToClipboard = async (text: string) => {
-    try {
-      if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
-        await navigator.clipboard.writeText(text)
-      } else {
-        // Fallback for non-secure contexts (HTTP on local network)
-        const textarea = document.createElement("textarea")
-        textarea.value = text
-        textarea.style.position = "fixed"
-        textarea.style.left = "-9999px"
-        textarea.style.top = "-9999px"
-        textarea.style.opacity = "0"
-        document.body.appendChild(textarea)
-        textarea.focus()
-        textarea.select()
-        document.execCommand("copy")
-        document.body.removeChild(textarea)
-      }
-      return true
-    } catch {
-      return false
-    }
-  }
-
-  const copyApiToken = async () => {
-    const ok = await copyToClipboard(apiToken)
-    if (ok) {
-      setTokenCopied(true)
-      setTimeout(() => setTokenCopied(false), 2000)
-    }
-  }
-
-  const toggleVersion = (version: string) => {
-    setExpandedVersions((prev) => ({
-      ...prev,
-      [version]: !prev[version],
-    }))
-  }
-
   const changeNetworkUnit = (unit: string) => {
     const networkUnit = unit as "Bytes" | "Bits"
     localStorage.setItem("proxmenux-network-unit", networkUnit)
     setNetworkUnitSettings(networkUnit)
-    
-    // Dispatch custom event to notify other components
+
     window.dispatchEvent(new CustomEvent("networkUnitChanged", { detail: networkUnit }))
-    
-    // Also dispatch storage event for backward compatibility
+
     window.dispatchEvent(new StorageEvent("storage", {
       key: "proxmenux-network-unit",
       newValue: networkUnit,
@@ -475,391 +57,13 @@ export function Settings() {
     setLoadingUnitSettings(false)
   }
 
-  const loadSslStatus = async () => {
-    try {
-      setLoadingSsl(true)
-      const data = await fetchApi("/api/ssl/status")
-      if (data.success) {
-        setSslEnabled(data.ssl_enabled || false)
-        setSslSource(data.source || "none")
-        setSslCertPath(data.cert_path || "")
-        setSslKeyPath(data.key_path || "")
-        setProxmoxCertAvailable(data.proxmox_available || false)
-        setProxmoxCertInfo(data.cert_info || null)
-      }
-    } catch {
-      // Silently fail
-    } finally {
-      setLoadingSsl(false)
-    }
-  }
-
-  const handleEnableSsl = async (source: "proxmox" | "custom", certPath?: string, keyPath?: string) => {
-    setConfiguringSsl(true)
-    setError("")
-    setSuccess("")
-
-    try {
-      const body: Record<string, string> = { source }
-      if (source === "custom" && certPath && keyPath) {
-        body.cert_path = certPath
-        body.key_path = keyPath
-      }
-
-      const data = await fetchApi("/api/ssl/configure", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-      })
-
-      if (data.success) {
-        setSuccess(data.message || "SSL configured successfully. Restart the monitor service to apply.")
-        setSslEnabled(true)
-        setSslSource(source)
-        setShowCustomCertForm(false)
-        setCustomCertPath("")
-        setCustomKeyPath("")
-        loadSslStatus()
-      } else {
-        setError(data.message || "Failed to configure SSL")
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to configure SSL")
-    } finally {
-      setConfiguringSsl(false)
-    }
-  }
-
-  const handleDisableSsl = async () => {
-    if (!confirm("Are you sure you want to disable HTTPS? The monitor will revert to HTTP after restart.")) {
-      return
-    }
-
-    setConfiguringSsl(true)
-    setError("")
-    setSuccess("")
-
-    try {
-      const data = await fetchApi("/api/ssl/disable", { method: "POST" })
-
-      if (data.success) {
-        setSuccess(data.message || "SSL disabled. Restart the monitor service to apply.")
-        setSslEnabled(false)
-        setSslSource("none")
-        setSslCertPath("")
-        setSslKeyPath("")
-        loadSslStatus()
-      } else {
-        setError(data.message || "Failed to disable SSL")
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable SSL")
-    } finally {
-      setConfiguringSsl(false)
-    }
-  }
-
   return (
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold">Settings</h1>
-        <p className="text-muted-foreground mt-2">Manage your dashboard security and preferences</p>
+        <p className="text-muted-foreground mt-2">Manage your dashboard preferences</p>
       </div>
 
-      {/* Authentication Settings */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Shield className="h-5 w-5 text-blue-500" />
-            <CardTitle>Authentication</CardTitle>
-          </div>
-          <CardDescription>Protect your dashboard with username and password authentication</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {error && (
-            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
-              <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
-              <p className="text-sm text-red-500">{error}</p>
-            </div>
-          )}
-
-          {success && (
-            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
-              <p className="text-sm text-green-500">{success}</p>
-            </div>
-          )}
-
-          <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-            <div className="flex items-center gap-3">
-              <div
-                className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
-              >
-                <Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
-              </div>
-              <div>
-                <p className="font-medium">Authentication Status</p>
-                <p className="text-sm text-muted-foreground">
-                  {authEnabled ? "Password protection is enabled" : "No password protection"}
-                </p>
-              </div>
-            </div>
-            <div
-              className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
-            >
-              {authEnabled ? "Enabled" : "Disabled"}
-            </div>
-          </div>
-
-          {!authEnabled && !showSetupForm && (
-            <div className="space-y-3">
-              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
-                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
-                <p className="text-sm text-blue-500">
-                  Enable authentication to protect your dashboard when accessing from non-private networks.
-                </p>
-              </div>
-              <Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
-                <Shield className="h-4 w-4 mr-2" />
-                Enable Authentication
-              </Button>
-            </div>
-          )}
-
-          {!authEnabled && showSetupForm && (
-            <div className="space-y-4 border border-border rounded-lg p-4">
-              <h3 className="font-semibold">Setup Authentication</h3>
-
-              <div className="space-y-2">
-                <Label htmlFor="setup-username">Username</Label>
-                <div className="relative">
-                  <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    id="setup-username"
-                    type="text"
-                    placeholder="Enter username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    className="pl-10"
-                    disabled={loading}
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="setup-password">Password</Label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    id="setup-password"
-                    type="password"
-                    placeholder="Enter password (min 6 characters)"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pl-10"
-                    disabled={loading}
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="setup-confirm-password">Confirm Password</Label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    id="setup-confirm-password"
-                    type="password"
-                    placeholder="Confirm password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="pl-10"
-                    disabled={loading}
-                  />
-                </div>
-              </div>
-
-              <div className="flex gap-2">
-                <Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
-                  {loading ? "Enabling..." : "Enable"}
-                </Button>
-                <Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
-                  Cancel
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {authEnabled && (
-            <div className="space-y-3">
-              <Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
-                <LogOut className="h-4 w-4 mr-2" />
-                Logout
-              </Button>
-
-              {!showChangePassword && (
-                <Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
-                  <Lock className="h-4 w-4 mr-2" />
-                  Change Password
-                </Button>
-              )}
-
-              {showChangePassword && (
-                <div className="space-y-4 border border-border rounded-lg p-4">
-                  <h3 className="font-semibold">Change Password</h3>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="current-password">Current Password</Label>
-                    <div className="relative">
-                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="current-password"
-                        type="password"
-                        placeholder="Enter current password"
-                        value={currentPassword}
-                        onChange={(e) => setCurrentPassword(e.target.value)}
-                        className="pl-10"
-                        disabled={loading}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="new-password">New Password</Label>
-                    <div className="relative">
-                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="new-password"
-                        type="password"
-                        placeholder="Enter new password (min 6 characters)"
-                        value={newPassword}
-                        onChange={(e) => setNewPassword(e.target.value)}
-                        className="pl-10"
-                        disabled={loading}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="confirm-new-password">Confirm New Password</Label>
-                    <div className="relative">
-                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="confirm-new-password"
-                        type="password"
-                        placeholder="Confirm new password"
-                        value={confirmNewPassword}
-                        onChange={(e) => setConfirmNewPassword(e.target.value)}
-                        className="pl-10"
-                        disabled={loading}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex gap-2">
-                    <Button
-                      onClick={handleChangePassword}
-                      className="flex-1 bg-blue-500 hover:bg-blue-600"
-                      disabled={loading}
-                    >
-                      {loading ? "Changing..." : "Change Password"}
-                    </Button>
-                    <Button
-                      onClick={() => setShowChangePassword(false)}
-                      variant="outline"
-                      className="flex-1"
-                      disabled={loading}
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                </div>
-              )}
-
-              {!totpEnabled && (
-                <div className="space-y-3">
-                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
-                    <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
-                    <div className="text-sm text-blue-400">
-                      <p className="font-medium mb-1">Two-Factor Authentication (2FA)</p>
-                      <p className="text-blue-300">
-                        Add an extra layer of security by requiring a code from your authenticator app in addition to
-                        your password.
-                      </p>
-                    </div>
-                  </div>
-
-                  <Button onClick={() => setShow2FASetup(true)} variant="outline" className="w-full">
-                    <Shield className="h-4 w-4 mr-2" />
-                    Enable Two-Factor Authentication
-                  </Button>
-                </div>
-              )}
-
-              {totpEnabled && (
-                <div className="space-y-3">
-                  <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
-                    <CheckCircle className="h-5 w-5 text-green-500" />
-                    <p className="text-sm text-green-500 font-medium">2FA is enabled</p>
-                  </div>
-
-                  {!show2FADisable && (
-                    <Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
-                      <Shield className="h-4 w-4 mr-2" />
-                      Disable 2FA
-                    </Button>
-                  )}
-
-                  {show2FADisable && (
-                    <div className="space-y-4 border border-border rounded-lg p-4">
-                      <h3 className="font-semibold">Disable Two-Factor Authentication</h3>
-                      <p className="text-sm text-muted-foreground">Enter your password to confirm</p>
-
-                      <div className="space-y-2">
-                        <Label htmlFor="disable-2fa-password">Password</Label>
-                        <div className="relative">
-                          <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                          <Input
-                            id="disable-2fa-password"
-                            type="password"
-                            placeholder="Enter your password"
-                            value={disable2FAPassword}
-                            onChange={(e) => setDisable2FAPassword(e.target.value)}
-                            className="pl-10"
-                            disabled={loading}
-                          />
-                        </div>
-                      </div>
-
-                      <div className="flex gap-2">
-                        <Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
-                          {loading ? "Disabling..." : "Disable 2FA"}
-                        </Button>
-                        <Button
-                          onClick={() => {
-                            setShow2FADisable(false)
-                            setDisable2FAPassword("")
-                            setError("")
-                          }}
-                          variant="outline"
-                          className="flex-1"
-                          disabled={loading}
-                        >
-                          Cancel
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              <Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
-                Disable Authentication
-              </Button>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
       {/* Network Units Settings */}
       <Card>
         <CardHeader>
@@ -891,490 +95,6 @@ export function Settings() {
         </CardContent>
       </Card>
 
-      {/* API Access Tokens */}
-      {authEnabled && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-2">
-              <Key className="h-5 w-5 text-purple-500" />
-              <CardTitle>API Access Tokens</CardTitle>
-            </div>
-            <CardDescription>
-              Generate long-lived API tokens for external integrations like Homepage and Home Assistant
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {error && (
-              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
-                <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
-                <p className="text-sm text-red-500">{error}</p>
-              </div>
-            )}
-
-            {success && (
-              <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
-                <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
-                <p className="text-sm text-green-500">{success}</p>
-              </div>
-            )}
-
-            <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
-                <div className="space-y-2 text-sm text-blue-400">
-                  <p className="font-medium">About API Tokens</p>
-                  <ul className="list-disc list-inside space-y-1 text-blue-300">
-                    <li>Tokens are valid for 1 year</li>
-                    <li>Use them to access APIs from external services</li>
-                    <li>Include in Authorization header: Bearer YOUR_TOKEN</li>
-                    <li>See README.md for complete integration examples</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            {!showApiTokenSection && !apiToken && (
-              <Button onClick={() => setShowApiTokenSection(true)} className="w-full bg-purple-500 hover:bg-purple-600">
-                <Key className="h-4 w-4 mr-2" />
-                Generate New API Token
-              </Button>
-            )}
-
-            {showApiTokenSection && !apiToken && (
-              <div className="space-y-4 border border-border rounded-lg p-4">
-                <h3 className="font-semibold">Generate API Token</h3>
-                <p className="text-sm text-muted-foreground">
-                  Enter your credentials to generate a new long-lived API token
-                </p>
-
-                <div className="space-y-2">
-                  <Label htmlFor="token-name">Token Name</Label>
-                  <div className="relative">
-                    <Key className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="token-name"
-                      type="text"
-                      placeholder="e.g. Homepage, Home Assistant"
-                      value={tokenName}
-                      onChange={(e) => setTokenName(e.target.value)}
-                      className="pl-10"
-                      disabled={generatingToken}
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="token-password">Password</Label>
-                  <div className="relative">
-                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="token-password"
-                      type="password"
-                      placeholder="Enter your password"
-                      value={tokenPassword}
-                      onChange={(e) => setTokenPassword(e.target.value)}
-                      className="pl-10"
-                      disabled={generatingToken}
-                    />
-                  </div>
-                </div>
-
-                {totpEnabled && (
-                  <div className="space-y-2">
-                    <Label htmlFor="token-totp">2FA Code</Label>
-                    <div className="relative">
-                      <Shield className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="token-totp"
-                        type="text"
-                        placeholder="Enter 6-digit code"
-                        value={tokenTotpCode}
-                        onChange={(e) => setTokenTotpCode(e.target.value)}
-                        className="pl-10"
-                        maxLength={6}
-                        disabled={generatingToken}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                <div className="flex gap-2">
-                  <Button
-                    onClick={handleGenerateApiToken}
-                    className="flex-1 bg-purple-500 hover:bg-purple-600"
-                    disabled={generatingToken}
-                  >
-                    {generatingToken ? "Generating..." : "Generate Token"}
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setShowApiTokenSection(false)
-                      setTokenPassword("")
-                      setTokenTotpCode("")
-                      setTokenName("API Token")
-                      setError("")
-                    }}
-                    variant="outline"
-                    className="flex-1"
-                    disabled={generatingToken}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {apiToken && (
-              <div className="space-y-4 border border-green-500/20 bg-green-500/5 rounded-lg p-4">
-                <div className="flex items-center gap-2 text-green-500">
-                  <CheckCircle className="h-5 w-5" />
-                  <h3 className="font-semibold">Your API Token</h3>
-                </div>
-
-                <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 flex items-start gap-2">
-                  <AlertCircle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
-                  <div className="space-y-1">
-                    <p className="text-sm text-amber-600 dark:text-amber-400 font-semibold">
-                      ⚠️ Important: Save this token now!
-                    </p>
-                    <p className="text-xs text-amber-600/80 dark:text-amber-400/80">
-                      You won't be able to see it again. Store it securely.
-                    </p>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>Token</Label>
-                  <div className="relative">
-                    <Input
-                      value={apiToken}
-                      readOnly
-                      type={apiTokenVisible ? "text" : "password"}
-                      className="pr-20 font-mono text-sm"
-                    />
-                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setApiTokenVisible(!apiTokenVisible)}
-                        className="h-7 w-7 p-0"
-                      >
-                        {apiTokenVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                      </Button>
-                      <Button size="sm" variant="ghost" onClick={copyApiToken} className="h-7 w-7 p-0">
-                        <Copy className={`h-4 w-4 ${tokenCopied ? "text-green-500" : ""}`} />
-                      </Button>
-                    </div>
-                  </div>
-                  {tokenCopied && (
-                    <p className="text-xs text-green-500 flex items-center gap-1">
-                      <CheckCircle className="h-3 w-3" />
-                      Copied to clipboard!
-                    </p>
-                  )}
-                </div>
-
-                <div className="space-y-2">
-                  <p className="text-sm font-medium">How to use this token:</p>
-                  <div className="bg-muted/50 rounded p-3 text-xs font-mono">
-                    <p className="text-muted-foreground mb-2"># Add to request headers:</p>
-                    <p>Authorization: Bearer YOUR_TOKEN_HERE</p>
-                  </div>
-                  <p className="text-xs text-muted-foreground">
-                    See the README documentation for complete integration examples with Homepage and Home Assistant.
-                  </p>
-                </div>
-
-                <Button
-                  onClick={() => {
-                    setApiToken("")
-                    setShowApiTokenSection(false)
-                  }}
-                  variant="outline"
-                  className="w-full"
-                >
-                  Done
-                </Button>
-              </div>
-            )}
-
-            {/* Existing Tokens List */}
-            {!loadingTokens && existingTokens.length > 0 && (
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <h3 className="text-sm font-semibold text-muted-foreground">Active Tokens</h3>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={loadApiTokens}
-                    className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
-                  >
-                    <RefreshCw className="h-3 w-3 mr-1" />
-                    Refresh
-                  </Button>
-                </div>
-
-                <div className="space-y-2">
-                  {existingTokens.map((token) => (
-                    <div
-                      key={token.id}
-                      className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border border-border"
-                    >
-                      <div className="flex items-center gap-3 min-w-0">
-                        <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0">
-                          <Key className="h-4 w-4 text-blue-500" />
-                        </div>
-                        <div className="min-w-0">
-                          <p className="text-sm font-medium truncate">{token.name}</p>
-                          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                            <code className="font-mono">{token.token_prefix}</code>
-                            <span className="flex items-center gap-1">
-                              <Clock className="h-3 w-3" />
-                              {token.created_at
-                                ? new Date(token.created_at).toLocaleDateString()
-                                : "Unknown"}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleRevokeToken(token.id)}
-                        disabled={revokingTokenId === token.id}
-                        className="h-8 px-2 text-red-500 hover:text-red-400 hover:bg-red-500/10 flex-shrink-0"
-                      >
-                        {revokingTokenId === token.id ? (
-                          <div className="animate-spin h-4 w-4 border-2 border-red-500 border-t-transparent rounded-full" />
-                        ) : (
-                          <Trash2 className="h-4 w-4" />
-                        )}
-                        <span className="ml-1 text-xs hidden sm:inline">Revoke</span>
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {loadingTokens && (
-              <div className="flex items-center justify-center py-4">
-                <div className="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full" />
-                <span className="ml-2 text-sm text-muted-foreground">Loading tokens...</span>
-              </div>
-            )}
-
-            {!loadingTokens && existingTokens.length === 0 && !showApiTokenSection && !apiToken && (
-              <div className="text-center py-4 text-sm text-muted-foreground">
-                No API tokens created yet
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* SSL/HTTPS Configuration */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <ShieldCheck className="h-5 w-5 text-green-500" />
-            <CardTitle>SSL / HTTPS</CardTitle>
-          </div>
-          <CardDescription>
-            Serve ProxMenux Monitor over HTTPS using your Proxmox host certificate or a custom certificate
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {loadingSsl ? (
-            <div className="flex items-center justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
-            </div>
-          ) : (
-            <>
-              {/* Current Status */}
-              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${sslEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}>
-                    <Globe className={`h-5 w-5 ${sslEnabled ? "text-green-500" : "text-gray-500"}`} />
-                  </div>
-                  <div>
-                    <p className="font-medium">
-                      {sslEnabled ? "HTTPS Enabled" : "HTTP (No SSL)"}
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      {sslEnabled
-                        ? `Using ${sslSource === "proxmox" ? "Proxmox host" : "custom"} certificate`
-                        : "Monitor is served over unencrypted HTTP"}
-                    </p>
-                  </div>
-                </div>
-                <div className={`px-3 py-1 rounded-full text-sm font-medium ${sslEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}>
-                  {sslEnabled ? "HTTPS" : "HTTP"}
-                </div>
-              </div>
-
-              {/* Active certificate info */}
-              {sslEnabled && (
-                <div className="space-y-2 p-3 bg-green-500/5 border border-green-500/20 rounded-lg">
-                  <div className="flex items-center gap-2 text-sm font-medium text-green-500">
-                    <FileKey className="h-4 w-4" />
-                    Active Certificate
-                  </div>
-                  <div className="grid gap-1 text-sm text-muted-foreground">
-                    <p><span className="font-medium text-foreground">Cert:</span> <code className="text-xs">{sslCertPath}</code></p>
-                    <p><span className="font-medium text-foreground">Key:</span> <code className="text-xs">{sslKeyPath}</code></p>
-                  </div>
-                  <Button
-                    onClick={handleDisableSsl}
-                    variant="outline"
-                    size="sm"
-                    disabled={configuringSsl}
-                    className="mt-2 text-red-500 border-red-500/30 hover:bg-red-500/10 bg-transparent"
-                  >
-                    {configuringSsl ? "Disabling..." : "Disable HTTPS"}
-                  </Button>
-                </div>
-              )}
-
-              {/* Proxmox certificate detection */}
-              {!sslEnabled && proxmoxCertAvailable && (
-                <div className="space-y-3 p-4 border border-border rounded-lg">
-                  <div className="flex items-center gap-2">
-                    <ShieldCheck className="h-4 w-4 text-green-500" />
-                    <h3 className="font-semibold text-sm">Proxmox Host Certificate Detected</h3>
-                  </div>
-
-                  {proxmoxCertInfo && (
-                    <div className="grid gap-1 text-sm text-muted-foreground bg-muted/50 p-3 rounded">
-                      {proxmoxCertInfo.subject && (
-                        <p><span className="font-medium text-foreground">Subject:</span> {proxmoxCertInfo.subject}</p>
-                      )}
-                      {proxmoxCertInfo.issuer && (
-                        <p><span className="font-medium text-foreground">Issuer:</span> {proxmoxCertInfo.issuer}</p>
-                      )}
-                      {proxmoxCertInfo.expires && (
-                        <p><span className="font-medium text-foreground">Expires:</span> {proxmoxCertInfo.expires}</p>
-                      )}
-                      {proxmoxCertInfo.is_self_signed && (
-                        <div className="flex items-center gap-1.5 mt-1 text-yellow-500">
-                          <AlertTriangle className="h-3.5 w-3.5" />
-                          <span className="text-xs">Self-signed certificate (browsers will show a security warning)</span>
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  <Button
-                    onClick={() => handleEnableSsl("proxmox")}
-                    className="w-full bg-green-600 hover:bg-green-700 text-white"
-                    disabled={configuringSsl}
-                  >
-                    {configuringSsl ? (
-                      <div className="flex items-center gap-2">
-                        <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
-                        Configuring...
-                      </div>
-                    ) : (
-                      <>
-                        <ShieldCheck className="h-4 w-4 mr-2" />
-                        Use Proxmox Certificate
-                      </>
-                    )}
-                  </Button>
-                </div>
-              )}
-
-              {!sslEnabled && !proxmoxCertAvailable && (
-                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3 flex items-start gap-2">
-                  <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-0.5" />
-                  <p className="text-sm text-yellow-500">
-                    No Proxmox host certificate detected. You can configure a custom certificate below.
-                  </p>
-                </div>
-              )}
-
-              {/* Custom certificate option */}
-              {!sslEnabled && (
-                <div className="space-y-3">
-                  {!showCustomCertForm ? (
-                    <Button
-                      onClick={() => setShowCustomCertForm(true)}
-                      variant="outline"
-                      className="w-full"
-                    >
-                      <FileKey className="h-4 w-4 mr-2" />
-                      Use Custom Certificate
-                    </Button>
-                  ) : (
-                    <div className="space-y-4 border border-border rounded-lg p-4">
-                      <h3 className="font-semibold text-sm">Custom Certificate Paths</h3>
-                      <p className="text-xs text-muted-foreground">
-                        Enter the absolute paths to your SSL certificate and private key files on the Proxmox server.
-                      </p>
-
-                      <div className="space-y-2">
-                        <Label htmlFor="ssl-cert-path">Certificate Path (.pem / .crt)</Label>
-                        <Input
-                          id="ssl-cert-path"
-                          type="text"
-                          placeholder="/etc/ssl/certs/mydomain.pem"
-                          value={customCertPath}
-                          onChange={(e) => setCustomCertPath(e.target.value)}
-                          disabled={configuringSsl}
-                        />
-                      </div>
-
-                      <div className="space-y-2">
-                        <Label htmlFor="ssl-key-path">Private Key Path (.key / .pem)</Label>
-                        <Input
-                          id="ssl-key-path"
-                          type="text"
-                          placeholder="/etc/ssl/private/mydomain.key"
-                          value={customKeyPath}
-                          onChange={(e) => setCustomKeyPath(e.target.value)}
-                          disabled={configuringSsl}
-                        />
-                      </div>
-
-                      <div className="flex gap-2">
-                        <Button
-                          onClick={() => handleEnableSsl("custom", customCertPath, customKeyPath)}
-                          className="flex-1 bg-green-600 hover:bg-green-700 text-white"
-                          disabled={configuringSsl || !customCertPath || !customKeyPath}
-                        >
-                          {configuringSsl ? "Configuring..." : "Enable HTTPS"}
-                        </Button>
-                        <Button
-                          onClick={() => {
-                            setShowCustomCertForm(false)
-                            setCustomCertPath("")
-                            setCustomKeyPath("")
-                          }}
-                          variant="outline"
-                          className="flex-1"
-                          disabled={configuringSsl}
-                        >
-                          Cancel
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Info note about restart */}
-              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
-                <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
-                <p className="text-sm text-blue-500">
-                  Changes to SSL configuration require a monitor service restart to take effect.
-                  The service will automatically use HTTPS on port 8008 when enabled.
-                </p>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-
       {/* ProxMenux Optimizations */}
       <Card>
         <CardHeader>
@@ -1416,15 +136,6 @@ export function Settings() {
           )}
         </CardContent>
       </Card>
-
-      <TwoFactorSetup
-        open={show2FASetup}
-        onClose={() => setShow2FASetup(false)}
-        onSuccess={() => {
-          setSuccess("2FA enabled successfully!")
-          checkAuthStatus()
-        }}
-      />
     </div>
   )
 }
diff --git a/AppImage/scripts/build_appimage.sh b/AppImage/scripts/build_appimage.sh
index b2c450e6..447dd60e 100644
--- a/AppImage/scripts/build_appimage.sh
+++ b/AppImage/scripts/build_appimage.sh
@@ -89,6 +89,8 @@ cp "$SCRIPT_DIR/flask_terminal_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || ech
 cp "$SCRIPT_DIR/hardware_monitor.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  hardware_monitor.py not found"
 cp "$SCRIPT_DIR/proxmox_storage_monitor.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  proxmox_storage_monitor.py not found"
 cp "$SCRIPT_DIR/flask_script_runner.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_script_runner.py not found"
+cp "$SCRIPT_DIR/security_manager.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  security_manager.py not found"
+cp "$SCRIPT_DIR/flask_security_routes.py" "$APP_DIR/usr/bin/" 2>/dev/null || echo "⚠️  flask_security_routes.py not found"
 
 echo "📋 Adding translation support..."
 cat > "$APP_DIR/usr/bin/translate_cli.py" << 'PYEOF'
diff --git a/AppImage/scripts/flask_security_routes.py b/AppImage/scripts/flask_security_routes.py
new file mode 100644
index 00000000..1462cbf7
--- /dev/null
+++ b/AppImage/scripts/flask_security_routes.py
@@ -0,0 +1,145 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+ProxMenux Security Routes
+Flask blueprint for firewall management and security tool detection.
+"""
+
+from flask import Blueprint, jsonify, request
+
+security_bp = Blueprint('security', __name__)
+
+try:
+    import security_manager
+except ImportError:
+    security_manager = None
+
+
+# -------------------------------------------------------------------
+# Proxmox Firewall
+# -------------------------------------------------------------------
+
+@security_bp.route('/api/security/firewall/status', methods=['GET'])
+def firewall_status():
+    """Get Proxmox firewall status, rules, and port 8008 status"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        status = security_manager.get_firewall_status()
+        return jsonify({"success": True, **status})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/firewall/enable', methods=['POST'])
+def firewall_enable():
+    """Enable Proxmox firewall at host or cluster level"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        data = request.json or {}
+        level = data.get("level", "host")
+        success, message = security_manager.enable_firewall(level)
+        return jsonify({"success": success, "message": message})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/firewall/disable', methods=['POST'])
+def firewall_disable():
+    """Disable Proxmox firewall at host or cluster level"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        data = request.json or {}
+        level = data.get("level", "host")
+        success, message = security_manager.disable_firewall(level)
+        return jsonify({"success": success, "message": message})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/firewall/monitor-port', methods=['POST'])
+def firewall_add_monitor_port():
+    """Add firewall rule to allow port 8008 for ProxMenux Monitor"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        success, message = security_manager.add_monitor_port_rule()
+        return jsonify({"success": success, "message": message})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/firewall/monitor-port', methods=['DELETE'])
+def firewall_remove_monitor_port():
+    """Remove the ProxMenux Monitor port 8008 rule"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        success, message = security_manager.remove_monitor_port_rule()
+        return jsonify({"success": success, "message": message})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+# -------------------------------------------------------------------
+# Fail2Ban Detailed Management
+# -------------------------------------------------------------------
+
+@security_bp.route('/api/security/fail2ban/details', methods=['GET'])
+def fail2ban_details():
+    """Get detailed Fail2Ban info: per-jail banned IPs, stats, config"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        details = security_manager.get_fail2ban_details()
+        return jsonify({"success": True, **details})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/fail2ban/unban', methods=['POST'])
+def fail2ban_unban():
+    """Unban a specific IP from a Fail2Ban jail"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        data = request.json or {}
+        jail = data.get("jail", "")
+        ip = data.get("ip", "")
+        success, message = security_manager.unban_ip(jail, ip)
+        if success:
+            return jsonify({"success": True, "message": message})
+        else:
+            return jsonify({"success": False, "message": message}), 400
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+@security_bp.route('/api/security/fail2ban/activity', methods=['GET'])
+def fail2ban_activity():
+    """Get recent Fail2Ban log activity"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        events = security_manager.get_fail2ban_recent_activity()
+        return jsonify({"success": True, "events": events})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+
+# -------------------------------------------------------------------
+# Security Tools Detection
+# -------------------------------------------------------------------
+
+@security_bp.route('/api/security/tools', methods=['GET'])
+def security_tools():
+    """Detect installed security tools (Fail2Ban, Lynis, etc.)"""
+    if not security_manager:
+        return jsonify({"success": False, "message": "Security manager not available"}), 500
+    try:
+        tools = security_manager.detect_security_tools()
+        return jsonify({"success": True, "tools": tools})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
diff --git a/AppImage/scripts/flask_server.py b/AppImage/scripts/flask_server.py
index 94d40c3f..05b3f4d5 100644
--- a/AppImage/scripts/flask_server.py
+++ b/AppImage/scripts/flask_server.py
@@ -43,6 +43,7 @@ from flask_terminal_routes import terminal_bp, init_terminal_routes  # noqa: E40
 from flask_health_routes import health_bp  # noqa: E402
 from flask_auth_routes import auth_bp  # noqa: E402
 from flask_proxmenux_routes import proxmenux_bp  # noqa: E402
+from flask_security_routes import security_bp  # noqa: E402
 from jwt_middleware import require_auth  # noqa: E402
 import auth_manager  # noqa: E402
 
@@ -116,6 +117,7 @@ CORS(app)  # Enable CORS for Next.js frontend
 app.register_blueprint(auth_bp)
 app.register_blueprint(health_bp)
 app.register_blueprint(proxmenux_bp)
+app.register_blueprint(security_bp)
 
 # Initialize terminal / WebSocket routes
 init_terminal_routes(app)
diff --git a/AppImage/scripts/security_manager.py b/AppImage/scripts/security_manager.py
new file mode 100644
index 00000000..2634517a
--- /dev/null
+++ b/AppImage/scripts/security_manager.py
@@ -0,0 +1,648 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+ProxMenux Security Manager
+Handles Proxmox firewall status, rules, and security tool detection.
+"""
+
+import os
+import json
+import subprocess
+import re
+
+# =================================================================
+# Proxmox Firewall Management
+# =================================================================
+
+# Proxmox firewall config paths
+CLUSTER_FW = "/etc/pve/firewall/cluster.fw"
+HOST_FW_DIR = "/etc/pve/local"  # host.fw is per-node
+
+def _run_cmd(cmd, timeout=10):
+    """Run a shell command and return (returncode, stdout, stderr)"""
+    try:
+        result = subprocess.run(
+            cmd, capture_output=True, text=True, timeout=timeout
+        )
+        return result.returncode, result.stdout.strip(), result.stderr.strip()
+    except subprocess.TimeoutExpired:
+        return -1, "", "Command timed out"
+    except FileNotFoundError:
+        return -1, "", f"Command not found: {cmd[0]}"
+    except Exception as e:
+        return -1, "", str(e)
+
+
+def get_firewall_status():
+    """
+    Get the overall Proxmox firewall status.
+    Returns dict with status info.
+    """
+    result = {
+        "pve_firewall_installed": False,
+        "pve_firewall_active": False,
+        "cluster_fw_enabled": False,
+        "host_fw_enabled": False,
+        "rules_count": 0,
+        "rules": [],
+        "monitor_port_open": False,
+    }
+
+    # Check if pve-firewall service exists
+    rc, out, _ = _run_cmd(["systemctl", "is-active", "pve-firewall"])
+    result["pve_firewall_installed"] = rc == 0 or "inactive" in out or "active" in out
+    result["pve_firewall_active"] = (rc == 0 and out == "active")
+
+    # If not installed or inactive, check if the service unit exists
+    if not result["pve_firewall_installed"]:
+        rc2, _, _ = _run_cmd(["systemctl", "cat", "pve-firewall"])
+        result["pve_firewall_installed"] = rc2 == 0
+
+    # Parse cluster firewall config
+    if os.path.isfile(CLUSTER_FW):
+        try:
+            with open(CLUSTER_FW, 'r') as f:
+                content = f.read()
+            # Check if firewall is enabled at cluster level
+            for line in content.splitlines():
+                line = line.strip()
+                if line.lower().startswith("enable:"):
+                    val = line.split(":", 1)[1].strip()
+                    result["cluster_fw_enabled"] = val == "1"
+                    break
+        except Exception:
+            pass
+
+    # Parse host firewall config
+    host_fw = os.path.join(HOST_FW_DIR, "host.fw")
+    if os.path.isfile(host_fw):
+        try:
+            with open(host_fw, 'r') as f:
+                content = f.read()
+            for line in content.splitlines():
+                line = line.strip()
+                if line.lower().startswith("enable:"):
+                    val = line.split(":", 1)[1].strip()
+                    result["host_fw_enabled"] = val == "1"
+                    break
+        except Exception:
+            pass
+
+    # Get rules
+    rules = _parse_firewall_rules()
+    result["rules"] = rules
+    result["rules_count"] = len(rules)
+
+    # Check if port 8008 is allowed
+    for rule in rules:
+        dport = str(rule.get("dport", ""))
+        if "8008" in dport and rule.get("action", "").upper() == "ACCEPT":
+            result["monitor_port_open"] = True
+            break
+
+    return result
+
+
+def _parse_firewall_rules():
+    """Parse all firewall rules from cluster and host configs"""
+    rules = []
+
+    for fw_file, source in [(CLUSTER_FW, "cluster"), (os.path.join(HOST_FW_DIR, "host.fw"), "host")]:
+        if not os.path.isfile(fw_file):
+            continue
+        try:
+            with open(fw_file, 'r') as f:
+                content = f.read()
+
+            in_rules = False
+            section = ""
+            for line in content.splitlines():
+                line = line.strip()
+                if not line or line.startswith('#'):
+                    continue
+
+                # Detect section headers
+                if line.startswith('['):
+                    section_match = re.match(r'\[(\w+)\]', line)
+                    if section_match:
+                        section = section_match.group(1).upper()
+                        in_rules = section in ("RULES", "IN", "OUT")
+                    continue
+
+                if in_rules or section in ("RULES", "IN", "OUT"):
+                    rule = _parse_rule_line(line, source, section)
+                    if rule:
+                        rules.append(rule)
+        except Exception:
+            pass
+
+    return rules
+
+
+def _parse_rule_line(line, source, section):
+    """Parse a single firewall rule line"""
+    # Proxmox rule format: |ACTION MACRO(params) -option value ...
+    # or: IN/OUT ACTION -p proto -dport port -source addr
+    parts = line.split()
+    if len(parts) < 2:
+        return None
+
+    rule = {
+        "raw": line,
+        "source_file": source,
+        "section": section,
+    }
+
+    idx = 0
+    # Direction
+    if parts[0].upper() in ("IN", "OUT"):
+        rule["direction"] = parts[0].upper()
+        idx = 1
+    elif section in ("IN",):
+        rule["direction"] = "IN"
+    elif section in ("OUT",):
+        rule["direction"] = "OUT"
+
+    if idx < len(parts):
+        rule["action"] = parts[idx].upper()
+        idx += 1
+
+    # Parse options
+    while idx < len(parts):
+        opt = parts[idx]
+        if opt.startswith("-") and idx + 1 < len(parts):
+            key = opt.lstrip("-")
+            val = parts[idx + 1]
+            rule[key] = val
+            idx += 2
+        else:
+            idx += 1
+
+    return rule
+
+
+def add_monitor_port_rule():
+    """
+    Add a firewall rule to allow port 8008 (ProxMenux Monitor) on the host.
+    Returns (success, message)
+    """
+    host_fw = os.path.join(HOST_FW_DIR, "host.fw")
+
+    # Check if rule already exists
+    status = get_firewall_status()
+    if status.get("monitor_port_open"):
+        return True, "Port 8008 is already allowed in the firewall"
+
+    try:
+        content = ""
+        has_rules_section = False
+
+        if os.path.isfile(host_fw):
+            with open(host_fw, 'r') as f:
+                content = f.read()
+            has_rules_section = "[RULES]" in content
+
+        rule_line = "IN ACCEPT -p tcp -dport 8008 -log nolog # ProxMenux Monitor"
+
+        if has_rules_section:
+            # Add rule after [RULES] section header
+            lines = content.splitlines()
+            new_lines = []
+            inserted = False
+            for line in lines:
+                new_lines.append(line)
+                if not inserted and line.strip() == "[RULES]":
+                    new_lines.append(rule_line)
+                    inserted = True
+            content = "\n".join(new_lines) + "\n"
+        else:
+            # Add [RULES] section
+            if content and not content.endswith("\n"):
+                content += "\n"
+            content += "\n[RULES]\n"
+            content += rule_line + "\n"
+
+        with open(host_fw, 'w') as f:
+            f.write(content)
+
+        # Reload firewall
+        _run_cmd(["pve-firewall", "reload"])
+
+        return True, "Firewall rule added: port 8008 (TCP) allowed for ProxMenux Monitor"
+    except PermissionError:
+        return False, "Permission denied. Cannot write to firewall config."
+    except Exception as e:
+        return False, f"Failed to add firewall rule: {str(e)}"
+
+
+def remove_monitor_port_rule():
+    """
+    Remove the ProxMenux Monitor port 8008 rule from host firewall.
+    Returns (success, message)
+    """
+    host_fw = os.path.join(HOST_FW_DIR, "host.fw")
+
+    if not os.path.isfile(host_fw):
+        return True, "No host firewall config found"
+
+    try:
+        with open(host_fw, 'r') as f:
+            lines = f.readlines()
+
+        new_lines = []
+        removed = False
+        for line in lines:
+            if "8008" in line and "ProxMenux" in line:
+                removed = True
+                continue
+            new_lines.append(line)
+
+        if not removed:
+            return True, "No ProxMenux Monitor rule found to remove"
+
+        with open(host_fw, 'w') as f:
+            f.writelines(new_lines)
+
+        _run_cmd(["pve-firewall", "reload"])
+
+        return True, "ProxMenux Monitor firewall rule removed"
+    except Exception as e:
+        return False, f"Failed to remove firewall rule: {str(e)}"
+
+
+def enable_firewall(level="host"):
+    """
+    Enable the Proxmox firewall at host or cluster level.
+    Returns (success, message)
+    """
+    if level == "cluster":
+        return _set_firewall_enabled(CLUSTER_FW, True)
+    else:
+        host_fw = os.path.join(HOST_FW_DIR, "host.fw")
+        return _set_firewall_enabled(host_fw, True)
+
+
+def disable_firewall(level="host"):
+    """
+    Disable the Proxmox firewall at host or cluster level.
+    Returns (success, message)
+    """
+    if level == "cluster":
+        return _set_firewall_enabled(CLUSTER_FW, False)
+    else:
+        host_fw = os.path.join(HOST_FW_DIR, "host.fw")
+        return _set_firewall_enabled(host_fw, False)
+
+
+def _set_firewall_enabled(fw_file, enabled):
+    """Set enable: 1 or enable: 0 in firewall config"""
+    try:
+        content = ""
+        if os.path.isfile(fw_file):
+            with open(fw_file, 'r') as f:
+                content = f.read()
+
+        enable_val = "1" if enabled else "0"
+        has_options = "[OPTIONS]" in content
+        has_enable = False
+
+        lines = content.splitlines()
+        new_lines = []
+        in_options = False
+
+        for line in lines:
+            stripped = line.strip()
+            if stripped.startswith("["):
+                in_options = stripped == "[OPTIONS]"
+
+            if in_options and stripped.lower().startswith("enable:"):
+                new_lines.append(f"enable: {enable_val}")
+                has_enable = True
+            else:
+                new_lines.append(line)
+
+        if not has_enable:
+            if has_options:
+                # Add enable line after [OPTIONS]
+                final_lines = []
+                for line in new_lines:
+                    final_lines.append(line)
+                    if line.strip() == "[OPTIONS]":
+                        final_lines.append(f"enable: {enable_val}")
+                new_lines = final_lines
+            else:
+                # Add [OPTIONS] section at the beginning
+                new_lines.insert(0, "[OPTIONS]")
+                new_lines.insert(1, f"enable: {enable_val}")
+                new_lines.insert(2, "")
+
+        # Ensure parent directory exists
+        os.makedirs(os.path.dirname(fw_file), exist_ok=True)
+
+        with open(fw_file, 'w') as f:
+            f.write("\n".join(new_lines) + "\n")
+
+        # Reload or start the firewall service
+        if enabled:
+            _run_cmd(["systemctl", "enable", "pve-firewall"])
+            _run_cmd(["systemctl", "start", "pve-firewall"])
+        
+        _run_cmd(["pve-firewall", "reload"])
+
+        state = "enabled" if enabled else "disabled"
+        level = "cluster" if fw_file == CLUSTER_FW else "host"
+        return True, f"Firewall {state} at {level} level"
+    except PermissionError:
+        return False, "Permission denied. Cannot modify firewall config."
+    except Exception as e:
+        return False, f"Failed to modify firewall: {str(e)}"
+
+
+# =================================================================
+# Security Tools Detection
+# =================================================================
+
+# =================================================================
+# Fail2Ban Detailed Management
+# =================================================================
+
+def get_fail2ban_details():
+    """
+    Get detailed Fail2Ban info: per-jail banned IPs, ban times, etc.
+    Returns dict with detailed jail information.
+    """
+    result = {
+        "installed": False,
+        "active": False,
+        "version": "",
+        "jails": [],
+    }
+
+    rc, out, _ = _run_cmd(["fail2ban-client", "--version"])
+    if rc != 0:
+        return result
+
+    result["installed"] = True
+    result["version"] = out.split("\n")[0].strip() if out else ""
+
+    rc2, out2, _ = _run_cmd(["systemctl", "is-active", "fail2ban"])
+    result["active"] = (rc2 == 0 and out2 == "active")
+
+    if not result["active"]:
+        return result
+
+    # Get jail list
+    rc3, out3, _ = _run_cmd(["fail2ban-client", "status"])
+    jail_names = []
+    if rc3 == 0:
+        for line in out3.splitlines():
+            if "Jail list:" in line:
+                jails_str = line.split(":", 1)[1].strip()
+                jail_names = [j.strip() for j in jails_str.split(",") if j.strip()]
+
+    # Get detailed info per jail
+    for jail_name in jail_names:
+        jail_info = {
+            "name": jail_name,
+            "currently_failed": 0,
+            "total_failed": 0,
+            "currently_banned": 0,
+            "total_banned": 0,
+            "banned_ips": [],
+            "findtime": "",
+            "bantime": "",
+            "maxretry": "",
+        }
+
+        rc4, out4, _ = _run_cmd(["fail2ban-client", "status", jail_name])
+        if rc4 == 0:
+            for line in out4.splitlines():
+                line = line.strip()
+                if "Currently failed:" in line:
+                    try:
+                        jail_info["currently_failed"] = int(line.split(":", 1)[1].strip())
+                    except ValueError:
+                        pass
+                elif "Total failed:" in line:
+                    try:
+                        jail_info["total_failed"] = int(line.split(":", 1)[1].strip())
+                    except ValueError:
+                        pass
+                elif "Currently banned:" in line:
+                    try:
+                        jail_info["currently_banned"] = int(line.split(":", 1)[1].strip())
+                    except ValueError:
+                        pass
+                elif "Total banned:" in line:
+                    try:
+                        jail_info["total_banned"] = int(line.split(":", 1)[1].strip())
+                    except ValueError:
+                        pass
+                elif "Banned IP list:" in line:
+                    ips_str = line.split(":", 1)[1].strip()
+                    if ips_str:
+                        jail_info["banned_ips"] = [ip.strip() for ip in ips_str.split() if ip.strip()]
+
+        # Get jail config values
+        for key in ["findtime", "bantime", "maxretry"]:
+            rc5, out5, _ = _run_cmd(["fail2ban-client", "get", jail_name, key])
+            if rc5 == 0 and out5:
+                jail_info[key] = out5.strip()
+
+        result["jails"].append(jail_info)
+
+    return result
+
+
+def unban_ip(jail_name, ip_address):
+    """
+    Unban a specific IP from a Fail2Ban jail.
+    Returns (success, message)
+    """
+    if not jail_name or not ip_address:
+        return False, "Jail name and IP address are required"
+
+    # Validate IP format (basic check)
+    if not re.match(r'^[\d.:a-fA-F]+$', ip_address):
+        return False, f"Invalid IP address format: {ip_address}"
+
+    rc, out, err = _run_cmd(["fail2ban-client", "set", jail_name, "unbanip", ip_address])
+    if rc == 0:
+        return True, f"IP {ip_address} has been unbanned from jail '{jail_name}'"
+    else:
+        return False, f"Failed to unban IP: {err or out}"
+
+
+def get_fail2ban_recent_activity(lines=50):
+    """
+    Get recent Fail2Ban log activity (bans and unbans).
+    Returns list of recent events.
+    """
+    events = []
+
+    log_file = "/var/log/fail2ban.log"
+    if not os.path.isfile(log_file):
+        return events
+
+    try:
+        # Read last N lines using tail
+        rc, out, _ = _run_cmd(["tail", f"-{lines}", log_file], timeout=5)
+        if rc != 0 or not out:
+            return events
+
+        for line in out.splitlines():
+            event = None
+
+            # Parse ban events
+            ban_match = re.search(
+                r'(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})[,\d]*\s+.*\[(\w+)\]\s+Ban\s+([\d.:a-fA-F]+)',
+                line
+            )
+            if ban_match:
+                event = {
+                    "timestamp": ban_match.group(1),
+                    "jail": ban_match.group(2),
+                    "ip": ban_match.group(3),
+                    "action": "ban",
+                }
+
+            # Parse unban events
+            if not event:
+                unban_match = re.search(
+                    r'(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})[,\d]*\s+.*\[(\w+)\]\s+Unban\s+([\d.:a-fA-F]+)',
+                    line
+                )
+                if unban_match:
+                    event = {
+                        "timestamp": unban_match.group(1),
+                        "jail": unban_match.group(2),
+                        "ip": unban_match.group(3),
+                        "action": "unban",
+                    }
+
+            # Parse found (failed attempt) events
+            if not event:
+                found_match = re.search(
+                    r'(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})[,\d]*\s+.*\[(\w+)\]\s+Found\s+([\d.:a-fA-F]+)',
+                    line
+                )
+                if found_match:
+                    event = {
+                        "timestamp": found_match.group(1),
+                        "jail": found_match.group(2),
+                        "ip": found_match.group(3),
+                        "action": "found",
+                    }
+
+            if event:
+                events.append(event)
+
+        # Return most recent first
+        events.reverse()
+
+    except Exception:
+        pass
+
+    return events
+
+
+def detect_security_tools():
+    """
+    Detect installed security tools on the system.
+    Returns dict with tool status info.
+    """
+    tools = {}
+
+    # Fail2Ban
+    tools["fail2ban"] = _detect_fail2ban()
+
+    # Lynis
+    tools["lynis"] = _detect_lynis()
+
+    return tools
+
+
+def _detect_fail2ban():
+    """Detect Fail2Ban installation and status"""
+    info = {
+        "installed": False,
+        "active": False,
+        "version": "",
+        "jails": [],
+        "banned_ips_count": 0,
+    }
+
+    rc, out, _ = _run_cmd(["fail2ban-client", "--version"])
+    if rc == 0:
+        info["installed"] = True
+        info["version"] = out.split("\n")[0].strip() if out else ""
+
+        # Check service status
+        rc2, out2, _ = _run_cmd(["systemctl", "is-active", "fail2ban"])
+        info["active"] = (rc2 == 0 and out2 == "active")
+
+        if info["active"]:
+            # Get jails
+            rc3, out3, _ = _run_cmd(["fail2ban-client", "status"])
+            if rc3 == 0:
+                for line in out3.splitlines():
+                    if "Jail list:" in line:
+                        jails_str = line.split(":", 1)[1].strip()
+                        info["jails"] = [j.strip() for j in jails_str.split(",") if j.strip()]
+
+            # Count banned IPs across all jails
+            total_banned = 0
+            for jail in info["jails"]:
+                rc4, out4, _ = _run_cmd(["fail2ban-client", "status", jail])
+                if rc4 == 0:
+                    for line in out4.splitlines():
+                        if "Currently banned:" in line:
+                            try:
+                                count = int(line.split(":", 1)[1].strip())
+                                total_banned += count
+                            except ValueError:
+                                pass
+            info["banned_ips_count"] = total_banned
+
+    return info
+
+
+def _detect_lynis():
+    """Detect Lynis installation and status"""
+    info = {
+        "installed": False,
+        "version": "",
+        "last_scan": None,
+        "hardening_index": None,
+    }
+
+    # Check both locations
+    lynis_cmd = None
+    for path in ["/usr/local/bin/lynis", "/opt/lynis/lynis", "/usr/bin/lynis"]:
+        if os.path.isfile(path) and os.access(path, os.X_OK):
+            lynis_cmd = path
+            break
+
+    if lynis_cmd:
+        info["installed"] = True
+        rc, out, _ = _run_cmd([lynis_cmd, "show", "version"])
+        if rc == 0:
+            info["version"] = out.strip()
+
+        # Check for last scan report
+        report_file = "/var/log/lynis-report.dat"
+        if os.path.isfile(report_file):
+            try:
+                with open(report_file, 'r') as f:
+                    for line in f:
+                        if line.startswith("report_datetime_start="):
+                            info["last_scan"] = line.split("=", 1)[1].strip()
+                        elif line.startswith("hardening_index="):
+                            try:
+                                info["hardening_index"] = int(line.split("=", 1)[1].strip())
+                            except ValueError:
+                                pass
+            except Exception:
+                pass
+
+    return info