From 252c7b95b3be5d14bad7ac3299ed323664adba8e Mon Sep 17 00:00:00 2001
From: jae <jae@jaeswift.xyz>
Date: Tue, 31 Mar 2026 22:19:27 +0000
Subject: [PATCH] feat: mega admin panel expansion, contact form, 9 blog posts

- admin.html: 14 sections (dashboard, posts, editor, tracks, settings, homepage editor, services, navigation, links, API keys, theme, SEO, contact settings, backups)
- admin.js: 1554 lines, full AdminApp with CRUD for all sections
- admin.css: 1972 lines, responsive mobile nav, all new section styles
- app.py: 42 endpoints, new routes for homepage/services/nav/links/apikeys/theme/seo/contact/backups
- 9 JSON data files for new settings
- Contact form wired to POST /api/contact
- 9 blog posts with full HUD metadata
- .gitignore added
---
 .gitignore                     |    6 +
 admin.html                     | 1202 ++++++++++++++++----
 api/app.py                     |  371 ++++++-
 api/data/apikeys.json          |   37 +
 api/data/contact_settings.json |    5 +
 api/data/homepage.json         |   38 +
 api/data/links.json            |   14 +
 api/data/managed_services.json |   14 +
 api/data/messages.json         |    1 +
 api/data/navigation.json       |   17 +
 api/data/posts.json            |  154 ++-
 api/data/seo.json              |    7 +
 api/data/theme.json            |   10 +
 css/admin.css                  | 1162 +++++++++++++++++++-
 index.html                     |    8 +-
 js/admin.js                    | 1893 +++++++++++++++++++++++++-------
 js/main.js                     |   58 +-
 17 files changed, 4312 insertions(+), 685 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 api/data/apikeys.json
 create mode 100644 api/data/contact_settings.json
 create mode 100644 api/data/homepage.json
 create mode 100644 api/data/links.json
 create mode 100644 api/data/managed_services.json
 create mode 100644 api/data/messages.json
 create mode 100644 api/data/navigation.json
 create mode 100644 api/data/seo.json
 create mode 100644 api/data/theme.json
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..558e78e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+.env
+*.swp
+*.swo
+.DS_Store
diff --git a/admin.html b/admin.html
index 4ff0955..7c3b014 100644
--- a/admin.html
+++ b/admin.html
@@ -3,312 +3,1048 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JAESWIFT // ADMIN</title>
+    <title>JAE // ADMIN HUD</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/admin.css">
 </head>
 <body>
 
-    <!-- Login Screen -->
-    <div class="admin-login" id="loginScreen">
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <!-- LOGIN SCREEN                                            -->
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <div id="loginScreen" class="login-screen">
         <div class="login-box">
-            <div class="login-header">
-                <div class="login-icon">⬡</div>
-                <h1 class="login-title">JAESWIFT</h1>
-                <span class="login-subtitle">ADMIN // CONTROL PANEL</span>
-            </div>
-            <form class="login-form" id="loginForm">
+            <div class="login-logo">◈ JAE<span class="accent">SWIFT</span></div>
+            <div class="login-subtitle">OPERATOR AUTHENTICATION REQUIRED</div>
+            <div class="login-form">
                 <div class="login-field">
-                    <label class="login-label">OPERATOR ID</label>
-                    <input type="text" id="loginUser" class="login-input" autocomplete="username" placeholder="username" required>
+                    <label class="login-label">CALLSIGN</label>
+                    <input type="text" id="loginUsername" class="login-input" placeholder="Enter username..." autocomplete="username">
                 </div>
                 <div class="login-field">
-                    <label class="login-label">ACCESS KEY</label>
-                    <input type="password" id="loginPass" class="login-input" autocomplete="current-password" placeholder="••••••••" required>
+                    <label class="login-label">PASSPHRASE</label>
+                    <input type="password" id="loginPassword" class="login-input" placeholder="Enter password..." autocomplete="current-password">
                 </div>
-                <div class="login-error" id="loginError"></div>
-                <button type="submit" class="login-btn">AUTHENTICATE →</button>
-            </form>
-            <div class="login-footer">
-                <span class="login-status">SECURE CHANNEL // AES-256</span>
+                <button id="loginBtn" class="login-btn" onclick="AdminApp.login()">▶ AUTHENTICATE</button>
+                <div id="loginError" class="login-error"></div>
             </div>
+            <div class="login-footer">SECURE CHANNEL // AES-256 ENCRYPTED</div>
         </div>
     </div>
 
-    <!-- Admin Dashboard -->
-    <div class="admin-app" id="adminApp" style="display:none;">
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <!-- ADMIN APPLICATION                                       -->
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <div id="adminApp" class="admin-app" style="display:none;">
 
-        <!-- Top Bar -->
-        <header class="admin-topbar">
-            <div class="topbar-left">
-                <span class="topbar-logo">⬡ JAESWIFT</span>
-                <span class="topbar-divider">//</span>
-                <span class="topbar-section" id="topbarSection">DASHBOARD</span>
-            </div>
+        <!-- ─── TOPBAR ─── -->
+        <div class="topbar">
+            <button id="mobileMenuBtn" class="mobile-menu-btn" onclick="AdminApp.toggleSidebar()" aria-label="Toggle menu">☰</button>
+            <div class="topbar-logo">◈ JAE<span class="accent">SWIFT</span> // HUD</div>
+            <div id="topbarTitle" class="topbar-title">DASHBOARD</div>
             <div class="topbar-right">
-                <span class="topbar-user" id="topbarUser">jae</span>
-                <button class="topbar-btn" onclick="AdminApp.logout()">LOGOUT</button>
+                <span class="topbar-user">▣ <span id="topbarUser">OPERATOR</span></span>
+                <button class="topbar-logout" onclick="AdminApp.logout()">⏻ LOGOUT</button>
             </div>
-        </header>
+        </div>
 
-        <!-- Sidebar -->
-        <nav class="admin-sidebar">
-            <a href="#" class="sidebar-link active" data-section="dashboard" onclick="AdminApp.showSection('dashboard')">
-                <span class="sidebar-icon">◈</span> DASHBOARD
-            </a>
-            <a href="#" class="sidebar-link" data-section="posts" onclick="AdminApp.showSection('posts')">
-                <span class="sidebar-icon">▤</span> POSTS
-            </a>
-            <a href="#" class="sidebar-link" data-section="editor" onclick="AdminApp.showSection('editor')">
-                <span class="sidebar-icon">✎</span> NEW POST
-            </a>
-            <a href="#" class="sidebar-link" data-section="tracks" onclick="AdminApp.showSection('tracks')">
-                <span class="sidebar-icon">♫</span> TRACKS
-            </a>
-            <a href="#" class="sidebar-link" data-section="settings" onclick="AdminApp.showSection('settings')">
-                <span class="sidebar-icon">⚙</span> SETTINGS
-            </a>
-            <div class="sidebar-footer">
-                <a href="/" class="sidebar-link">
-                    <span class="sidebar-icon">←</span> VIEW SITE
+        <!-- ─── SIDEBAR ─── -->
+        <div id="sidebar" class="sidebar">
+            <div class="sidebar-header">
+                <span class="sidebar-brand">◈ ADMIN</span>
+                <button class="sidebar-close" onclick="AdminApp.toggleSidebar()" aria-label="Close menu">✕</button>
+            </div>
+            <nav class="sidebar-nav">
+                <a href="javascript:void(0)" class="sidebar-link active" data-section="dashboard" onclick="event.preventDefault(); AdminApp.showSection('dashboard')">
+                    <span class="sidebar-icon">◈</span> Dashboard
                 </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="posts" onclick="event.preventDefault(); AdminApp.showSection('posts')">
+                    <span class="sidebar-icon">▤</span> Posts
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="editor" onclick="event.preventDefault(); AdminApp.showSection('editor')">
+                    <span class="sidebar-icon">✎</span> Editor
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="tracks" onclick="event.preventDefault(); AdminApp.showSection('tracks')">
+                    <span class="sidebar-icon">♫</span> Tracks
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="settings" onclick="event.preventDefault(); AdminApp.showSection('settings')">
+                    <span class="sidebar-icon">⚙</span> Settings
+                </a>
+
+                <div class="sidebar-divider"></div>
+                <div class="sidebar-section-label">CONTENT</div>
+
+                <a href="javascript:void(0)" class="sidebar-link" data-section="homepage" onclick="event.preventDefault(); AdminApp.showSection('homepage')">
+                    <span class="sidebar-icon">⬡</span> Homepage
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="navigation" onclick="event.preventDefault(); AdminApp.showSection('navigation')">
+                    <span class="sidebar-icon">◇</span> Navigation
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="links" onclick="event.preventDefault(); AdminApp.showSection('links')">
+                    <span class="sidebar-icon">↗</span> Links
+                </a>
+
+                <div class="sidebar-divider"></div>
+                <div class="sidebar-section-label">SYSTEM</div>
+
+                <a href="javascript:void(0)" class="sidebar-link" data-section="services" onclick="event.preventDefault(); AdminApp.showSection('services')">
+                    <span class="sidebar-icon">⟐</span> Services
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="apikeys" onclick="event.preventDefault(); AdminApp.showSection('apikeys')">
+                    <span class="sidebar-icon">⚿</span> API Keys
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="theme" onclick="event.preventDefault(); AdminApp.showSection('theme')">
+                    <span class="sidebar-icon">◉</span> Theme
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="seo" onclick="event.preventDefault(); AdminApp.showSection('seo')">
+                    <span class="sidebar-icon">⊛</span> SEO / Meta
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="contact" onclick="event.preventDefault(); AdminApp.showSection('contact')">
+                    <span class="sidebar-icon">✉</span> Contact
+                </a>
+                <a href="javascript:void(0)" class="sidebar-link" data-section="backups" onclick="event.preventDefault(); AdminApp.showSection('backups')">
+                    <span class="sidebar-icon">⛋</span> Backups
+                </a>
+            </nav>
+            <div class="sidebar-footer">
+                <span class="sidebar-version">v2.0 // EXPANDED HUD</span>
             </div>
-        </nav>
+        </div>
 
-        <!-- Main Content -->
-        <main class="admin-main">
+        <!-- ─── SIDEBAR OVERLAY (mobile) ─── -->
+        <div id="sidebarOverlay" class="sidebar-overlay" onclick="AdminApp.toggleSidebar()"></div>
 
-            <!-- Dashboard Section -->
-            <section class="admin-section" id="section-dashboard">
-                <h2 class="section-heading">SYSTEM OVERVIEW</h2>
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- MAIN CONTENT                                            -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <div class="main-content">
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 1. DASHBOARD                                        -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-dashboard" class="admin-section active">
+                <h2 class="section-heading">◈ SYSTEM DASHBOARD</h2>
+
+                <!-- Stats Cards -->
                 <div class="dash-grid">
                     <div class="dash-card">
-                        <span class="dash-card-label">TOTAL POSTS</span>
-                        <span class="dash-card-value" id="dashPosts">--</span>
+                        <div class="dash-card-label">POSTS</div>
+                        <div class="dash-card-value" id="statPosts">--</div>
                     </div>
                     <div class="dash-card">
-                        <span class="dash-card-label">TOTAL WORDS</span>
-                        <span class="dash-card-value" id="dashWords">--</span>
+                        <div class="dash-card-label">WORDS</div>
+                        <div class="dash-card-value" id="statWords">--</div>
                     </div>
                     <div class="dash-card">
-                        <span class="dash-card-label">TRACKS</span>
-                        <span class="dash-card-value" id="dashTracks">--</span>
+                        <div class="dash-card-label">TRACKS</div>
+                        <div class="dash-card-value" id="statTracks">--</div>
                     </div>
                     <div class="dash-card">
-                        <span class="dash-card-label">SERVER CPU</span>
-                        <span class="dash-card-value" id="dashCPU">--%</span>
+                        <div class="dash-card-label">CPU</div>
+                        <div class="dash-card-value" id="statCPU">--%</div>
                     </div>
                     <div class="dash-card">
-                        <span class="dash-card-label">MEMORY</span>
-                        <span class="dash-card-value" id="dashMem">--%</span>
+                        <div class="dash-card-label">MEM</div>
+                        <div class="dash-card-value" id="statMEM">--%</div>
                     </div>
                     <div class="dash-card">
-                        <span class="dash-card-label">DISK</span>
-                        <span class="dash-card-value" id="dashDisk">--%</span>
+                        <div class="dash-card-label">DISK</div>
+                        <div class="dash-card-value" id="statDISK">--%</div>
                     </div>
                 </div>
-                <h3 class="section-subheading">SERVICES STATUS</h3>
-                <div class="services-grid" id="dashServices">Loading...</div>
-                <h3 class="section-subheading">RECENT THREATS (CVE)</h3>
-                <div class="threats-list" id="dashThreats">Loading...</div>
-            </section>
 
-            <!-- Posts Section -->
-            <section class="admin-section" id="section-posts" style="display:none;">
-                <div class="section-heading-row">
-                    <h2 class="section-heading">BLOG POSTS</h2>
-                    <button class="action-btn" onclick="AdminApp.showSection('editor')">+ NEW POST</button>
+                <!-- Services Grid -->
+                <h3 class="section-subheading">⟐ SERVICES STATUS</h3>
+                <div id="servicesGrid" class="services-grid">
+                    <!-- Populated by JS -->
                 </div>
-                <div class="posts-table-wrap">
-                    <table class="posts-table">
+
+                <!-- Threat Feed -->
+                <h3 class="section-subheading">⚠ THREAT FEED</h3>
+                <div id="threatFeed" class="threat-feed">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 2. POSTS                                            -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-posts" class="admin-section">
+                <h2 class="section-heading">▤ POSTS MANAGEMENT</h2>
+                <div class="section-toolbar">
+                    <button class="action-btn accent" onclick="AdminApp.newPost()">＋ NEW POST</button>
+                </div>
+                <div class="table-wrap">
+                    <table class="admin-table" id="postsTable">
                         <thead>
                             <tr>
-                                <th>DATE</th>
                                 <th>TITLE</th>
-                                <th>TAGS</th>
+                                <th>SLUG</th>
+                                <th>DATE</th>
                                 <th>WORDS</th>
-                                <th>THREAT</th>
                                 <th>ACTIONS</th>
                             </tr>
                         </thead>
-                        <tbody id="postsTableBody"></tbody>
+                        <tbody id="postsTableBody">
+                            <!-- Populated by JS -->
+                        </tbody>
                     </table>
                 </div>
-            </section>
+            </div>
 
-            <!-- Editor Section -->
-            <section class="admin-section" id="section-editor" style="display:none;">
-                <h2 class="section-heading" id="editorHeading">NEW TRANSMISSION</h2>
-                <form class="editor-form" id="editorForm">
-                    <input type="hidden" id="editSlugOriginal">
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 3. EDITOR                                           -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-editor" class="admin-section">
+                <h2 class="section-heading">✎ POST EDITOR</h2>
 
+                <!-- Post Metadata -->
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="editorTitle">TITLE</label>
+                        <input type="text" id="editorTitle" class="editor-input" placeholder="Post title...">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="editorSlug">SLUG</label>
+                        <input type="text" id="editorSlug" class="editor-input" placeholder="post-slug">
+                    </div>
+                </div>
+
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="editorDate">DATE</label>
+                        <input type="date" id="editorDate" class="editor-input">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="editorTime">TIME</label>
+                        <input type="time" id="editorTime" class="editor-input">
+                    </div>
+                </div>
+
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="editorTags">TAGS</label>
+                        <input type="text" id="editorTags" class="editor-input" placeholder="tag1, tag2, tag3">
+                    </div>
+                </div>
+
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="editorExcerpt">EXCERPT</label>
+                        <textarea id="editorExcerpt" class="editor-input editor-textarea-sm" placeholder="Short description..."></textarea>
+                    </div>
+                </div>
+
+                <!-- Markdown Toolbar -->
+                <div class="editor-toolbar">
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('bold')" title="Bold"><b>B</b></button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('italic')" title="Italic"><i>I</i></button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('strikethrough')" title="Strikethrough"><s>S</s></button>
+                    <span class="toolbar-sep">│</span>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('h1')" title="Heading 1">H1</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('h2')" title="Heading 2">H2</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('h3')" title="Heading 3">H3</button>
+                    <span class="toolbar-sep">│</span>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('link')" title="Link">🔗</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('image')" title="Image">🖼</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('code')" title="Code">&lt;/&gt;</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('codeblock')" title="Code Block">▣</button>
+                    <span class="toolbar-sep">│</span>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('ul')" title="Bullet List">• List</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('ol')" title="Numbered List">1. List</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('quote')" title="Blockquote">❝</button>
+                    <button type="button" class="toolbar-btn" onclick="AdminApp.insertMarkdown('hr')" title="Horizontal Rule">―</button>
+                </div>
+
+                <!-- Markdown Editor + Preview -->
+                <div class="editor-split">
+                    <div class="editor-pane">
+                        <label class="editor-label">MARKDOWN</label>
+                        <textarea id="editorContent" class="editor-input editor-textarea" placeholder="Write your post in markdown..."></textarea>
+                        <div class="editor-meta-bar">
+                            <span id="editorWordCount">0 words</span>
+                        </div>
+                    </div>
+                    <div class="preview-pane">
+                        <label class="editor-label">PREVIEW</label>
+                        <div id="editorPreview" class="editor-preview"></div>
+                    </div>
+                </div>
+
+                <!-- ─── OPERATOR HUD ─── -->
+                <div class="operator-hud">
+                    <h3 class="section-subheading">⬡ OPERATOR HUD</h3>
+                    <div class="hud-grid">
+                        <!-- Mood -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudMood">MOOD</label>
+                            <select id="hudMood" class="editor-input">
+                                <option value="focused">focused</option>
+                                <option value="creative">creative</option>
+                                <option value="productive">productive</option>
+                                <option value="tired">tired</option>
+                                <option value="wired">wired</option>
+                                <option value="chaotic">chaotic</option>
+                                <option value="locked-in">locked-in</option>
+                                <option value="zen">zen</option>
+                            </select>
+                        </div>
+
+                        <!-- Energy -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudEnergy">ENERGY <span id="hudEnergyVal" class="hud-val">3</span></label>
+                            <input type="range" id="hudEnergy" class="editor-input hud-range" min="1" max="5" value="3">
+                        </div>
+
+                        <!-- Motivation -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudMotivation">MOTIVATION <span id="hudMotivationVal" class="hud-val">3</span></label>
+                            <input type="range" id="hudMotivation" class="editor-input hud-range" min="1" max="5" value="3">
+                        </div>
+
+                        <!-- Focus -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudFocus">FOCUS <span id="hudFocusVal" class="hud-val">3</span></label>
+                            <input type="range" id="hudFocus" class="editor-input hud-range" min="1" max="5" value="3">
+                        </div>
+
+                        <!-- Difficulty -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudDifficulty">DIFFICULTY <span id="hudDifficultyVal" class="hud-val">3</span></label>
+                            <input type="range" id="hudDifficulty" class="editor-input hud-range" min="1" max="5" value="3">
+                        </div>
+
+                        <!-- Coffee -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudCoffee">COFFEE ☕ <span id="hudCoffeeVal" class="hud-val">0</span></label>
+                            <input type="range" id="hudCoffee" class="editor-input hud-range" min="0" max="10" value="0">
+                        </div>
+
+                        <!-- BPM -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudBPM">BPM ♡ <span id="hudBPMVal" class="hud-val">72</span></label>
+                            <input type="range" id="hudBPM" class="editor-input hud-range" min="40" max="200" value="72">
+                        </div>
+
+                        <!-- Threat Level -->
+                        <div class="hud-field">
+                            <label class="editor-label" for="hudThreat">THREAT LEVEL</label>
+                            <select id="hudThreat" class="editor-input">
+                                <option value="low">low</option>
+                                <option value="medium">medium</option>
+                                <option value="high">high</option>
+                                <option value="critical">critical</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Editor Actions -->
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.savePost()">⬡ SAVE POST</button>
+                    <button class="action-btn" onclick="AdminApp.showSection('posts')">✕ CANCEL</button>
+                </div>
+                <input type="hidden" id="editorPostId" value="">
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 4. TRACKS                                           -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-tracks" class="admin-section">
+                <h2 class="section-heading">♫ TRACKS LIBRARY</h2>
+
+                <!-- Add Track Form -->
+                <div class="tracks-add-form">
+                    <h3 class="section-subheading">＋ ADD TRACK</h3>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackTitle">TITLE</label>
+                            <input type="text" id="trackTitle" class="editor-input" placeholder="Track title...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackArtist">ARTIST</label>
+                            <input type="text" id="trackArtist" class="editor-input" placeholder="Artist name...">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackAlbum">ALBUM</label>
+                            <input type="text" id="trackAlbum" class="editor-input" placeholder="Album name...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackGenre">GENRE</label>
+                            <input type="text" id="trackGenre" class="editor-input" placeholder="Genre...">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackURL">URL</label>
+                            <input type="text" id="trackURL" class="editor-input" placeholder="https://...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="trackCover">COVER URL</label>
+                            <input type="text" id="trackCover" class="editor-input" placeholder="https://cover-image...">
+                        </div>
+                    </div>
+                    <button class="action-btn accent" onclick="AdminApp.addTrack()">＋ ADD TRACK</button>
+                </div>
+
+                <!-- Tracks List -->
+                <div class="tracks-list" id="tracksList">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 5. SETTINGS                                         -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-settings" class="admin-section">
+                <h2 class="section-heading">⚙ WIDGET SETTINGS</h2>
+
+                <div class="settings-grid">
+                    <div class="setting-item">
+                        <label class="editor-label">SCANLINES EFFECT</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingScanlines" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">PARTICLES</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingParticles" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">GLITCH TEXT</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingGlitch" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">TERMINAL</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingTerminal" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">TYPING ANIMATION</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingTyping" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">SCROLL REVEALS</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingScrollReveal" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">NOW PLAYING WIDGET</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingNowPlaying" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">GRID BACKGROUND</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="settingGridBg" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveSettings()">⬡ SAVE SETTINGS</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 6. HOMEPAGE EDITOR                                  -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-homepage" class="admin-section">
+                <h2 class="section-heading">⬡ HOMEPAGE EDITOR</h2>
+
+                <!-- Hero Section -->
+                <h3 class="section-subheading">◈ HERO SECTION</h3>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="heroTitle">HERO TITLE</label>
+                        <input type="text" id="heroTitle" class="editor-input" placeholder="Main hero title...">
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="heroSubtitle">HERO SUBTITLE</label>
+                        <input type="text" id="heroSubtitle" class="editor-input" placeholder="Subtitle text...">
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="heroTagline">TAGLINE</label>
+                        <input type="text" id="heroTagline" class="editor-input" placeholder="Tagline / typing text...">
+                    </div>
+                </div>
+
+                <!-- Section Toggles & Ordering -->
+                <h3 class="section-subheading">▤ SECTIONS VISIBILITY & ORDER</h3>
+                <div id="homepageSections" class="homepage-sections-list">
+                    <div class="homepage-section-item" data-section-key="about">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionAbout" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">ABOUT</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('about','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('about','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                    <div class="homepage-section-item" data-section-key="blog">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionBlog" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">BLOG</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('blog','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('blog','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                    <div class="homepage-section-item" data-section-key="devcards">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionDevcards" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">DEV CARDS</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('devcards','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('devcards','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                    <div class="homepage-section-item" data-section-key="links">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionLinks" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">LINKS</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('links','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('links','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                    <div class="homepage-section-item" data-section-key="contact">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionContact" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">CONTACT</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('contact','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('contact','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                    <div class="homepage-section-item" data-section-key="terminal">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="hpSectionTerminal" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span class="homepage-section-name">TERMINAL</span>
+                        <div class="homepage-section-controls">
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('terminal','up')" title="Move up">▲</button>
+                            <button class="action-btn sm" onclick="AdminApp.moveSection('terminal','down')" title="Move down">▼</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- About Text -->
+                <h3 class="section-subheading">✎ ABOUT TEXT</h3>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="aboutText">ABOUT SECTION CONTENT (Markdown)</label>
+                        <textarea id="aboutText" class="editor-input editor-textarea" placeholder="Write your about section content..."></textarea>
+                    </div>
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveHomepage()">⬡ SAVE HOMEPAGE</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 7. SERVICES MANAGER                                 -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-services" class="admin-section">
+                <h2 class="section-heading">⟐ SERVICES MANAGER</h2>
+
+                <!-- Add Service Form -->
+                <h3 class="section-subheading">＋ ADD SERVICE</h3>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="serviceName">SERVICE NAME</label>
+                        <input type="text" id="serviceName" class="editor-input" placeholder="e.g. Gitea">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="serviceURL">SERVICE URL</label>
+                        <input type="text" id="serviceURL" class="editor-input" placeholder="https://git.example.com">
+                    </div>
+                </div>
+                <button class="action-btn accent" onclick="AdminApp.addService()">＋ ADD SERVICE</button>
+
+                <!-- Services List -->
+                <h3 class="section-subheading">▤ MONITORED SERVICES</h3>
+                <div id="servicesList" class="services-manage-list">
+                    <!-- Populated by JS -->
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveServices()">⬡ SAVE SERVICES</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 8. NAVIGATION EDITOR                                -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-navigation" class="admin-section">
+                <h2 class="section-heading">◇ NAVIGATION EDITOR</h2>
+
+                <!-- Add Nav Item -->
+                <h3 class="section-subheading">＋ ADD NAV ITEM</h3>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="navLabel">LABEL</label>
+                        <input type="text" id="navLabel" class="editor-input" placeholder="e.g. Blog">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="navURL">URL</label>
+                        <input type="text" id="navURL" class="editor-input" placeholder="/blog.html">
+                    </div>
+                    <div class="editor-field sm">
+                        <label class="editor-label" for="navOrder">ORDER</label>
+                        <input type="number" id="navOrder" class="editor-input" placeholder="0" min="0">
+                    </div>
+                </div>
+                <button class="action-btn accent" onclick="AdminApp.addNavItem()">＋ ADD NAV ITEM</button>
+
+                <!-- Nav Items List -->
+                <h3 class="section-subheading">▤ MENU ITEMS</h3>
+                <div id="navList" class="nav-manage-list">
+                    <!-- Populated by JS -->
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveNavigation()">⬡ SAVE NAVIGATION</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 9. LINKS MANAGER                                    -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-links" class="admin-section">
+                <h2 class="section-heading">↗ LINKS MANAGER</h2>
+
+                <!-- Add Link Form -->
+                <h3 class="section-subheading">＋ ADD LINK</h3>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="linkName">NAME</label>
+                        <input type="text" id="linkName" class="editor-input" placeholder="e.g. GitHub">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="linkURL">URL</label>
+                        <input type="text" id="linkURL" class="editor-input" placeholder="https://github.com/...">
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="linkIcon">ICON (unicode/emoji)</label>
+                        <input type="text" id="linkIcon" class="editor-input" placeholder="⬡ or 🐙">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="linkCategory">CATEGORY</label>
+                        <input type="text" id="linkCategory" class="editor-input" placeholder="social / project / tool">
+                    </div>
+                </div>
+                <button class="action-btn accent" onclick="AdminApp.addLink()">＋ ADD LINK</button>
+
+                <!-- Links List -->
+                <h3 class="section-subheading">▤ MANAGED LINKS</h3>
+                <div id="linksList" class="links-manage-list">
+                    <!-- Populated by JS -->
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveLinks()">⬡ SAVE LINKS</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 10. API KEYS & INTEGRATIONS                          -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-apikeys" class="admin-section">
+                <h2 class="section-heading">⚿ API KEYS & INTEGRATIONS</h2>
+
+                <!-- Weather API -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">☁ WEATHER API</h3>
                     <div class="editor-row">
                         <div class="editor-field full">
-                            <label class="editor-label">TITLE</label>
-                            <input type="text" id="edTitle" class="editor-input" placeholder="Post title..." required>
+                            <label class="editor-label" for="apiWeatherKey">API KEY</label>
+                            <input type="text" id="apiWeatherKey" class="editor-input" placeholder="Enter Weather API key...">
                         </div>
                     </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('weather')">⬡ SAVE</button>
+                </div>
 
+                <!-- Spotify / Music API -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">♫ MUSIC / SPOTIFY API</h3>
                     <div class="editor-row">
                         <div class="editor-field">
-                            <label class="editor-label">SLUG</label>
-                            <input type="text" id="edSlug" class="editor-input" placeholder="auto-generated">
+                            <label class="editor-label" for="apiSpotifyClientId">CLIENT ID</label>
+                            <input type="text" id="apiSpotifyClientId" class="editor-input" placeholder="Enter Spotify Client ID...">
                         </div>
                         <div class="editor-field">
-                            <label class="editor-label">DATE</label>
-                            <input type="date" id="edDate" class="editor-input">
-                        </div>
-                        <div class="editor-field">
-                            <label class="editor-label">TIME</label>
-                            <input type="time" id="edTime" class="editor-input" value="00:00">
+                            <label class="editor-label" for="apiSpotifyClientSecret">CLIENT SECRET</label>
+                            <input type="password" id="apiSpotifyClientSecret" class="editor-input" placeholder="Enter Spotify Client Secret...">
                         </div>
                     </div>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiSpotifyRefreshToken">REFRESH TOKEN</label>
+                            <input type="text" id="apiSpotifyRefreshToken" class="editor-input" placeholder="Enter Spotify Refresh Token...">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('spotify')">⬡ SAVE</button>
+                </div>
 
+                <!-- Email SMTP -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">✉ EMAIL SMTP</h3>
                     <div class="editor-row">
                         <div class="editor-field">
-                            <label class="editor-label">TAGS (comma-separated)</label>
-                            <input type="text" id="edTags" class="editor-input" placeholder="security, infrastructure">
+                            <label class="editor-label" for="apiSmtpHost">SMTP HOST</label>
+                            <input type="text" id="apiSmtpHost" class="editor-input" placeholder="smtp.example.com">
+                        </div>
+                        <div class="editor-field sm">
+                            <label class="editor-label" for="apiSmtpPort">PORT</label>
+                            <input type="number" id="apiSmtpPort" class="editor-input" placeholder="587">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiSmtpUser">USERNAME</label>
+                            <input type="text" id="apiSmtpUser" class="editor-input" placeholder="user@example.com">
                         </div>
                         <div class="editor-field">
-                            <label class="editor-label">EXCERPT</label>
-                            <input type="text" id="edExcerpt" class="editor-input" placeholder="Short description...">
+                            <label class="editor-label" for="apiSmtpPass">PASSWORD</label>
+                            <input type="password" id="apiSmtpPass" class="editor-input" placeholder="Enter SMTP password...">
                         </div>
                     </div>
-
-                    <!-- Cyberpunk Health Stats -->
-                    <div class="editor-hud-section">
-                        <h3 class="editor-hud-title">◈ OPERATOR STATUS</h3>
-                        <div class="editor-hud-grid">
-                            <div class="hud-field">
-                                <label class="editor-label">MOOD</label>
-                                <select id="edMood" class="editor-input editor-select">
-                                    <option value="focused">Focused</option>
-                                    <option value="creative">Creative</option>
-                                    <option value="productive">Productive</option>
-                                    <option value="tired">Tired</option>
-                                    <option value="wired">Wired</option>
-                                    <option value="chaotic">Chaotic</option>
-                                    <option value="locked-in">Locked In</option>
-                                    <option value="zen">Zen</option>
-                                </select>
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">ENERGY (1-5)</label>
-                                <input type="range" id="edEnergy" class="editor-range" min="1" max="5" value="3">
-                                <span class="range-val" id="edEnergyVal">3</span>
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">MOTIVATION (1-5)</label>
-                                <input type="range" id="edMotivation" class="editor-range" min="1" max="5" value="3">
-                                <span class="range-val" id="edMotivationVal">3</span>
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">FOCUS (1-5)</label>
-                                <input type="range" id="edFocus" class="editor-range" min="1" max="5" value="3">
-                                <span class="range-val" id="edFocusVal">3</span>
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">DIFFICULTY (1-5)</label>
-                                <input type="range" id="edDifficulty" class="editor-range" min="1" max="5" value="3">
-                                <span class="range-val" id="edDifficultyVal">3</span>
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">COFFEE ☕</label>
-                                <input type="number" id="edCoffee" class="editor-input editor-small" min="0" max="10" value="2">
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">BPM ♥</label>
-                                <input type="number" id="edBPM" class="editor-input editor-small" min="40" max="200" value="72">
-                            </div>
-                            <div class="hud-field">
-                                <label class="editor-label">THREAT LEVEL</label>
-                                <select id="edThreat" class="editor-input editor-select">
-                                    <option value="low">LOW</option>
-                                    <option value="medium">MEDIUM</option>
-                                    <option value="high">HIGH</option>
-                                    <option value="critical">CRITICAL</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <!-- Content Editor -->
-                    <div class="editor-field full">
-                        <label class="editor-label">CONTENT (Markdown)</label>
-                        <div class="editor-toolbar">
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('**','**')" title="Bold"><b>B</b></button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('*','*')" title="Italic"><i>I</i></button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('`','`')" title="Code">&lt;/&gt;</button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('\n```\n','\n```\n')" title="Code Block">[ ]</button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('## ','')" title="Heading">H2</button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('### ','')" title="Heading">H3</button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('[','](url)')" title="Link">🔗</button>
-                            <button type="button" class="tb-btn" onclick="AdminApp.insertMD('---\n','')" title="Divider">—</button>
-                            <span class="tb-wordcount" id="edWordCount">0 words</span>
-                        </div>
-                        <textarea id="edContent" class="editor-textarea" rows="20" placeholder="Write your transmission in markdown..."></textarea>
-                    </div>
-
-                    <!-- Preview -->
-                    <div class="editor-field full">
-                        <label class="editor-label">PREVIEW</label>
-                        <div class="editor-preview" id="edPreview"></div>
-                    </div>
-
-                    <div class="editor-actions">
-                        <button type="submit" class="action-btn">TRANSMIT POST →</button>
-                        <button type="button" class="action-btn secondary" onclick="AdminApp.clearEditor()">CLEAR</button>
-                    </div>
-                </form>
-            </section>
-
-            <!-- Tracks Section -->
-            <section class="admin-section" id="section-tracks" style="display:none;">
-                <div class="section-heading-row">
-                    <h2 class="section-heading">TRACK LIBRARY</h2>
-                    <button class="action-btn" onclick="AdminApp.showAddTrack()">+ ADD TRACK</button>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('smtp')">⬡ SAVE</button>
                 </div>
-                <div class="track-add-form" id="trackAddForm" style="display:none;">
-                    <input type="text" id="trackArtist" class="editor-input" placeholder="Artist">
-                    <input type="text" id="trackTitle" class="editor-input" placeholder="Track">
-                    <input type="text" id="trackAlbum" class="editor-input" placeholder="Album">
-                    <button class="action-btn" onclick="AdminApp.addTrack()">ADD</button>
-                </div>
-                <div class="tracks-list" id="tracksList"></div>
-            </section>
 
-            <!-- Settings Section -->
-            <section class="admin-section" id="section-settings" style="display:none;">
-                <h2 class="section-heading">CONFIGURATION</h2>
-                <form class="settings-form" id="settingsForm">
-                    <div class="settings-group">
-                        <h3 class="settings-group-title">WIDGET TOGGLES</h3>
-                        <label class="toggle-row">
-                            <input type="checkbox" id="setWeather" checked>
-                            <span class="toggle-label">Weather Widget</span>
-                        </label>
-                        <label class="toggle-row">
-                            <input type="checkbox" id="setNowPlaying" checked>
-                            <span class="toggle-label">Now Playing Widget</span>
-                        </label>
-                        <label class="toggle-row">
-                            <input type="checkbox" id="setThreats" checked>
-                            <span class="toggle-label">CVE Threat Feed</span>
-                        </label>
-                        <label class="toggle-row">
-                            <input type="checkbox" id="setTerminal" checked>
-                            <span class="toggle-label">Terminal Emulator</span>
+                <!-- Discord Webhook -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">◈ DISCORD WEBHOOK</h3>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiDiscordWebhook">WEBHOOK URL</label>
+                            <input type="text" id="apiDiscordWebhook" class="editor-input" placeholder="https://discord.com/api/webhooks/...">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('discord')">⬡ SAVE</button>
+                </div>
+
+                <!-- GitHub Token -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">⬡ GITHUB TOKEN</h3>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiGithubToken">PERSONAL ACCESS TOKEN</label>
+                            <input type="password" id="apiGithubToken" class="editor-input" placeholder="Enter GitHub token...">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('github')">⬡ SAVE</button>
+                </div>
+
+                <!-- Custom API 1 -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">⟐ CUSTOM API 1</h3>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom1Name">NAME</label>
+                            <input type="text" id="apiCustom1Name" class="editor-input" placeholder="API name...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom1Key">API KEY</label>
+                            <input type="password" id="apiCustom1Key" class="editor-input" placeholder="Enter API key...">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiCustom1URL">BASE URL</label>
+                            <input type="text" id="apiCustom1URL" class="editor-input" placeholder="https://api.example.com/v1">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('custom1')">⬡ SAVE</button>
+                </div>
+
+                <!-- Custom API 2 -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">⟐ CUSTOM API 2</h3>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom2Name">NAME</label>
+                            <input type="text" id="apiCustom2Name" class="editor-input" placeholder="API name...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom2Key">API KEY</label>
+                            <input type="password" id="apiCustom2Key" class="editor-input" placeholder="Enter API key...">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiCustom2URL">BASE URL</label>
+                            <input type="text" id="apiCustom2URL" class="editor-input" placeholder="https://api.example.com/v1">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('custom2')">⬡ SAVE</button>
+                </div>
+
+                <!-- Custom API 3 -->
+                <div class="apikey-group">
+                    <h3 class="section-subheading">⟐ CUSTOM API 3</h3>
+                    <div class="editor-row">
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom3Name">NAME</label>
+                            <input type="text" id="apiCustom3Name" class="editor-input" placeholder="API name...">
+                        </div>
+                        <div class="editor-field">
+                            <label class="editor-label" for="apiCustom3Key">API KEY</label>
+                            <input type="password" id="apiCustom3Key" class="editor-input" placeholder="Enter API key...">
+                        </div>
+                    </div>
+                    <div class="editor-row">
+                        <div class="editor-field full">
+                            <label class="editor-label" for="apiCustom3URL">BASE URL</label>
+                            <input type="text" id="apiCustom3URL" class="editor-input" placeholder="https://api.example.com/v1">
+                        </div>
+                    </div>
+                    <button class="action-btn accent sm" onclick="AdminApp.saveApiKey('custom3')">⬡ SAVE</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 11. THEME / APPEARANCE                               -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-theme" class="admin-section">
+                <h2 class="section-heading">◉ THEME / APPEARANCE</h2>
+
+                <!-- Color Pickers -->
+                <h3 class="section-subheading">◈ COLOURS</h3>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="themeAccentColor">ACCENT COLOUR</label>
+                        <div class="color-picker-row">
+                            <input type="color" id="themeAccentColor" class="editor-input color-input" value="#00ffc8">
+                            <input type="text" id="themeAccentColorHex" class="editor-input color-hex" value="#00ffc8" placeholder="#00ffc8">
+                        </div>
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="themeBgColor">BACKGROUND COLOUR</label>
+                        <div class="color-picker-row">
+                            <input type="color" id="themeBgColor" class="editor-input color-input" value="#0a0e17">
+                            <input type="text" id="themeBgColorHex" class="editor-input color-hex" value="#0a0e17" placeholder="#0a0e17">
+                        </div>
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="themeTextColor">TEXT COLOUR</label>
+                        <div class="color-picker-row">
+                            <input type="color" id="themeTextColor" class="editor-input color-input" value="#e0e0e0">
+                            <input type="text" id="themeTextColorHex" class="editor-input color-hex" value="#e0e0e0" placeholder="#e0e0e0">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Effect Toggles -->
+                <h3 class="section-subheading">⚡ EFFECTS</h3>
+                <div class="settings-grid">
+                    <div class="setting-item">
+                        <label class="editor-label">SCANLINES</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="themeScanlines" checked>
+                            <span class="toggle-slider"></span>
                         </label>
                     </div>
-                    <button type="submit" class="action-btn">SAVE SETTINGS</button>
-                </form>
-            </section>
+                    <div class="setting-item">
+                        <label class="editor-label">PARTICLES</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="themeParticles" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">GLITCH EFFECT</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="themeGlitch" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-item">
+                        <label class="editor-label">GRID BACKGROUND</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="themeGridBg" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
 
-        </main>
-    </div>
+                <!-- Font Size -->
+                <h3 class="section-subheading">Aa TYPOGRAPHY</h3>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="themeFontSize">BASE FONT SIZE <span id="themeFontSizeVal" class="hud-val">16px</span></label>
+                        <input type="range" id="themeFontSize" class="editor-input hud-range" min="12" max="24" value="16">
+                    </div>
+                </div>
 
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveTheme()">⬡ SAVE THEME</button>
+                    <button class="action-btn" onclick="AdminApp.resetTheme()">↺ RESET TO DEFAULTS</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 12. SEO / META                                      -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-seo" class="admin-section">
+                <h2 class="section-heading">⊛ SEO / META</h2>
+
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="seoTitle">SITE TITLE</label>
+                        <input type="text" id="seoTitle" class="editor-input" placeholder="JAE // SWIFT">
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="seoDescription">META DESCRIPTION</label>
+                        <textarea id="seoDescription" class="editor-input editor-textarea-sm" placeholder="A brief description of your site for search engines..."></textarea>
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="seoKeywords">KEYWORDS</label>
+                        <input type="text" id="seoKeywords" class="editor-input" placeholder="cyberpunk, developer, portfolio, blog">
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="editor-field">
+                        <label class="editor-label" for="seoOgImage">OG IMAGE URL</label>
+                        <input type="text" id="seoOgImage" class="editor-input" placeholder="https://jaeswift.xyz/assets/og-image.png">
+                    </div>
+                    <div class="editor-field">
+                        <label class="editor-label" for="seoFavicon">FAVICON URL</label>
+                        <input type="text" id="seoFavicon" class="editor-input" placeholder="/assets/favicon.ico">
+                    </div>
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveSEO()">⬡ SAVE SEO</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 13. CONTACT SETTINGS                                -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-contact" class="admin-section">
+                <h2 class="section-heading">✉ CONTACT SETTINGS</h2>
+
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="contactEmail">CONTACT EMAIL ADDRESS</label>
+                        <input type="email" id="contactEmail" class="editor-input" placeholder="you@example.com">
+                    </div>
+                </div>
+
+                <div class="editor-row">
+                    <div class="setting-item">
+                        <label class="editor-label">ENABLE CONTACT FORM</label>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="contactFormEnabled" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="editor-row">
+                    <div class="editor-field full">
+                        <label class="editor-label" for="contactAutoReply">AUTO-REPLY MESSAGE</label>
+                        <textarea id="contactAutoReply" class="editor-input editor-textarea-sm" placeholder="Thanks for reaching out! I'll get back to you soon..."></textarea>
+                    </div>
+                </div>
+
+                <div class="editor-actions">
+                    <button class="action-btn accent" onclick="AdminApp.saveContact()">⬡ SAVE CONTACT</button>
+                </div>
+            </div>
+
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <!-- 14. BACKUPS                                         -->
+            <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
+            <div id="section-backups" class="admin-section">
+                <h2 class="section-heading">⛋ BACKUPS & EXPORT</h2>
+
+                <div class="backup-grid">
+                    <!-- Individual Downloads -->
+                    <div class="backup-card">
+                        <div class="backup-card-icon">▤</div>
+                        <div class="backup-card-title">POSTS DATA</div>
+                        <div class="backup-card-desc">Download posts.json</div>
+                        <button class="action-btn accent" onclick="AdminApp.downloadBackup('posts')">⬡ DOWNLOAD</button>
+                    </div>
+                    <div class="backup-card">
+                        <div class="backup-card-icon">♫</div>
+                        <div class="backup-card-title">TRACKS DATA</div>
+                        <div class="backup-card-desc">Download tracks.json</div>
+                        <button class="action-btn accent" onclick="AdminApp.downloadBackup('tracks')">⬡ DOWNLOAD</button>
+                    </div>
+                    <div class="backup-card">
+                        <div class="backup-card-icon">⚙</div>
+                        <div class="backup-card-title">SETTINGS DATA</div>
+                        <div class="backup-card-desc">Download settings.json</div>
+                        <button class="action-btn accent" onclick="AdminApp.downloadBackup('settings')">⬡ DOWNLOAD</button>
+                    </div>
+                </div>
+
+                <!-- Export All -->
+                <div class="backup-export">
+                    <h3 class="section-subheading">⛋ FULL EXPORT</h3>
+                    <p class="backup-desc">Download all site data (posts, tracks, settings) as a single ZIP archive.</p>
+                    <button class="action-btn accent lg" onclick="AdminApp.downloadBackup('all')">⬡ EXPORT ALL DATA (ZIP)</button>
+                </div>
+
+                <!-- Backup Status -->
+                <div id="backupStatus" class="backup-status"></div>
+            </div>
+
+        </div><!-- /main-content -->
+    </div><!-- /adminApp -->
+
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <!-- NOTIFICATION TOAST                                      -->
+    <!-- ═══════════════════════════════════════════════════════ -->
+    <div id="notification" class="notification"></div>
+
+    <!-- Scripts -->
     <script src="js/admin.js"></script>
 </body>
 </html>
diff --git a/api/app.py b/api/app.py
index 2a46823..31fedba 100644
--- a/api/app.py
+++ b/api/app.py
@@ -1,10 +1,12 @@
 #!/usr/bin/env python3
 """JAESWIFT HUD Backend API"""
-import json, os, time, subprocess, random, datetime, hashlib
+import json, os, time, subprocess, random, datetime, hashlib, zipfile, io, smtplib
 from functools import wraps
 from pathlib import Path
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
 
-from flask import Flask, request, jsonify, abort
+from flask import Flask, request, jsonify, abort, send_file
 from flask_cors import CORS
 import jwt
 import requests as req
@@ -17,13 +19,18 @@ JWT_SECRET = 'jaeswift-hud-s3cr3t-2026!x'
 ADMIN_USER = 'jae'
 ADMIN_PASS = 'HUDAdmin2026!'
 
+ARRAY_FILES = {
+    'posts.json', 'tracks.json', 'navigation.json', 'links.json',
+    'managed_services.json', 'messages.json'
+}
+
 # ─── Helpers ─────────────────────────────────────────
 def load_json(name):
     p = DATA_DIR / name
     if p.exists():
         with open(p) as f:
             return json.load(f)
-    return [] if name.endswith('posts.json') else {}
+    return [] if name in ARRAY_FILES else {}
 
 def save_json(name, data):
     p = DATA_DIR / name
@@ -249,7 +256,6 @@ def delete_track(index):
         return jsonify({'ok': True, 'removed': removed})
     abort(404)
 
-
 # ─── Git Activity (from Gitea API) ───────────────────
 @app.route('/api/git-activity')
 def git_activity():
@@ -305,6 +311,363 @@ def update_settings():
     save_json('settings.json', d)
     return jsonify(d)
 
+# ═════════════════════════════════════════════════════
+# NEW ENDPOINTS
+# ═════════════════════════════════════════════════════
+
+# ─── Homepage Config ───────────────────��─────────────
+@app.route('/api/homepage')
+def get_homepage():
+    return jsonify(load_json('homepage.json'))
+
+@app.route('/api/homepage', methods=['POST'])
+@require_auth
+def save_homepage():
+    try:
+        d = request.get_json(force=True)
+        save_json('homepage.json', d)
+        return jsonify(d)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── Managed Services ───────────────────────────────
+@app.route('/api/services/managed')
+def get_managed_services():
+    return jsonify(load_json('managed_services.json'))
+
+@app.route('/api/services/managed', methods=['POST'])
+@require_auth
+def add_managed_service():
+    try:
+        d = request.get_json(force=True)
+        svcs = load_json('managed_services.json')
+        if not isinstance(svcs, list):
+            svcs = []
+        svcs.append({
+            'name': d.get('name', ''),
+            'url': d.get('url', '')
+        })
+        save_json('managed_services.json', svcs)
+        return jsonify(svcs[-1]), 201
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/services/managed/<int:index>', methods=['DELETE'])
+@require_auth
+def delete_managed_service(index):
+    svcs = load_json('managed_services.json')
+    if not isinstance(svcs, list):
+        svcs = []
+    if 0 <= index < len(svcs):
+        removed = svcs.pop(index)
+        save_json('managed_services.json', svcs)
+        return jsonify({'ok': True, 'removed': removed})
+    abort(404)
+
+# ─── Navigation ──────────────────────────────────────
+@app.route('/api/navigation')
+def get_navigation():
+    return jsonify(load_json('navigation.json'))
+
+@app.route('/api/navigation', methods=['POST'])
+@require_auth
+def add_navigation():
+    try:
+        d = request.get_json(force=True)
+        nav = load_json('navigation.json')
+        if not isinstance(nav, list):
+            nav = []
+        nav.append({
+            'label': d.get('label', ''),
+            'url': d.get('url', ''),
+            'order': d.get('order', len(nav) + 1)
+        })
+        save_json('navigation.json', nav)
+        return jsonify(nav[-1]), 201
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/navigation/<int:index>', methods=['DELETE'])
+@require_auth
+def delete_navigation(index):
+    nav = load_json('navigation.json')
+    if not isinstance(nav, list):
+        nav = []
+    if 0 <= index < len(nav):
+        removed = nav.pop(index)
+        save_json('navigation.json', nav)
+        return jsonify({'ok': True, 'removed': removed})
+    abort(404)
+
+# ─── Links ───────────────────────────────────────────
+@app.route('/api/links')
+def get_links():
+    return jsonify(load_json('links.json'))
+
+@app.route('/api/links', methods=['POST'])
+@require_auth
+def add_link():
+    try:
+        d = request.get_json(force=True)
+        links = load_json('links.json')
+        if not isinstance(links, list):
+            links = []
+        links.append({
+            'name': d.get('name', ''),
+            'url': d.get('url', ''),
+            'icon': d.get('icon', ''),
+            'category': d.get('category', '')
+        })
+        save_json('links.json', links)
+        return jsonify(links[-1]), 201
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/links/<int:index>', methods=['DELETE'])
+@require_auth
+def delete_link(index):
+    links = load_json('links.json')
+    if not isinstance(links, list):
+        links = []
+    if 0 <= index < len(links):
+        removed = links.pop(index)
+        save_json('links.json', links)
+        return jsonify({'ok': True, 'removed': removed})
+    abort(404)
+
+# ─── API Keys ────────────────────────────────────────
+def mask_value(val):
+    """Mask a string value, showing only last 4 chars if longer than 4."""
+    if not isinstance(val, str) or len(val) == 0:
+        return val
+    if len(val) <= 4:
+        return '••••'
+    return '••••••' + val[-4:]
+
+def is_masked(val):
+    """Check if a value is a masked placeholder."""
+    if not isinstance(val, str):
+        return False
+    return '••••' in val
+
+@app.route('/api/apikeys')
+@require_auth
+def get_apikeys():
+    try:
+        keys = load_json('apikeys.json')
+        masked = {}
+        for group, fields in keys.items():
+            if isinstance(fields, dict):
+                masked[group] = {}
+                for k, v in fields.items():
+                    masked[group][k] = mask_value(v)
+            else:
+                masked[group] = mask_value(fields)
+        return jsonify(masked)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/apikeys', methods=['POST'])
+@require_auth
+def save_apikeys():
+    try:
+        d = request.get_json(force=True)
+        group = d.get('group', '')
+        data = d.get('data', {})
+        if not group or not isinstance(data, dict):
+            return jsonify({'error': 'Invalid request: need group and data'}), 400
+
+        keys = load_json('apikeys.json')
+        if group not in keys:
+            keys[group] = {}
+
+        # Only update values that are not masked and not empty
+        for k, v in data.items():
+            if isinstance(v, str) and (is_masked(v) or v == ''):
+                continue  # Skip masked or empty values
+            keys[group][k] = v
+
+        save_json('apikeys.json', keys)
+        return jsonify({'ok': True, 'group': group})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── Theme ───────────────────────────────────────────
+@app.route('/api/theme')
+def get_theme():
+    return jsonify(load_json('theme.json'))
+
+@app.route('/api/theme', methods=['POST'])
+@require_auth
+def save_theme():
+    try:
+        d = request.get_json(force=True)
+        save_json('theme.json', d)
+        return jsonify(d)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── SEO ─────────────────────────────────────────────
+@app.route('/api/seo')
+def get_seo():
+    return jsonify(load_json('seo.json'))
+
+@app.route('/api/seo', methods=['POST'])
+@require_auth
+def save_seo():
+    try:
+        d = request.get_json(force=True)
+        save_json('seo.json', d)
+        return jsonify(d)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── Contact Settings ───────────────────────────────
+@app.route('/api/contact-settings')
+@require_auth
+def get_contact_settings():
+    return jsonify(load_json('contact_settings.json'))
+
+@app.route('/api/contact-settings', methods=['POST'])
+@require_auth
+def save_contact_settings():
+    try:
+        d = request.get_json(force=True)
+        save_json('contact_settings.json', d)
+        return jsonify(d)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── Contact Form (public) ──────────────────────────
+@app.route('/api/contact', methods=['POST'])
+def contact_form():
+    try:
+        d = request.get_json(force=True)
+        name = d.get('name', '').strip()
+        email = d.get('email', '').strip()
+        message = d.get('message', '').strip()
+
+        if not name or not email or not message:
+            return jsonify({'error': 'All fields are required'}), 400
+
+        # Check if form is enabled
+        settings = load_json('contact_settings.json')
+        if not settings.get('form_enabled', True):
+            return jsonify({'error': 'Contact form is currently disabled'}), 403
+
+        contact_email = settings.get('email', '')
+        auto_reply = settings.get('auto_reply', '')
+
+        # Save message to messages.json regardless
+        messages = load_json('messages.json')
+        if not isinstance(messages, list):
+            messages = []
+        messages.append({
+            'name': name,
+            'email': email,
+            'message': message,
+            'timestamp': datetime.datetime.utcnow().isoformat() + 'Z'
+        })
+        save_json('messages.json', messages)
+
+        # Try to send email via SMTP if configured
+        keys = load_json('apikeys.json')
+        smtp_cfg = keys.get('smtp', {})
+        smtp_host = smtp_cfg.get('host', '')
+        smtp_port = smtp_cfg.get('port', '587')
+        smtp_user = smtp_cfg.get('user', '')
+        smtp_pass = smtp_cfg.get('pass', '')
+
+        email_sent = False
+        if smtp_host and smtp_user and smtp_pass and contact_email:
+            try:
+                # Send notification to site owner
+                msg = MIMEMultipart()
+                msg['From'] = smtp_user
+                msg['To'] = contact_email
+                msg['Subject'] = f'[JAESWIFT] Contact from {name}'
+                body = f"Name: {name}\nEmail: {email}\n\nMessage:\n{message}"
+                msg.attach(MIMEText(body, 'plain'))
+
+                server = smtplib.SMTP(smtp_host, int(smtp_port))
+                server.starttls()
+                server.login(smtp_user, smtp_pass)
+                server.send_message(msg)
+
+                # Send auto-reply if configured
+                if auto_reply:
+                    reply = MIMEText(auto_reply, 'plain')
+                    reply['From'] = smtp_user
+                    reply['To'] = email
+                    reply['Subject'] = 'Re: Your message to JAESWIFT'
+                    server.send_message(reply)
+
+                server.quit()
+                email_sent = True
+            except Exception:
+                pass  # Email failed, but message is saved
+
+        return jsonify({
+            'ok': True,
+            'email_sent': email_sent,
+            'message': 'Message received. Thanks for reaching out!'
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ─── Backups ─────────────────────────────────────────
+@app.route('/api/backups/posts')
+@require_auth
+def backup_posts():
+    try:
+        p = DATA_DIR / 'posts.json'
+        if not p.exists():
+            return jsonify({'error': 'No posts data found'}), 404
+        return send_file(p, as_attachment=True, download_name='posts.json', mimetype='application/json')
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/backups/tracks')
+@require_auth
+def backup_tracks():
+    try:
+        p = DATA_DIR / 'tracks.json'
+        if not p.exists():
+            return jsonify({'error': 'No tracks data found'}), 404
+        return send_file(p, as_attachment=True, download_name='tracks.json', mimetype='application/json')
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/backups/settings')
+@require_auth
+def backup_settings():
+    try:
+        p = DATA_DIR / 'settings.json'
+        if not p.exists():
+            return jsonify({'error': 'No settings data found'}), 404
+        return send_file(p, as_attachment=True, download_name='settings.json', mimetype='application/json')
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/backups/all')
+@require_auth
+def backup_all():
+    try:
+        buf = io.BytesIO()
+        with zipfile.ZipFile(buf, 'w', zipfile.ZIP_DEFLATED) as zf:
+            for f in DATA_DIR.glob('*.json'):
+                zf.write(f, f.name)
+        buf.seek(0)
+        ts = datetime.datetime.utcnow().strftime('%Y%m%d_%H%M%S')
+        return send_file(
+            buf,
+            as_attachment=True,
+            download_name=f'jaeswift_backup_{ts}.zip',
+            mimetype='application/zip'
+        )
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
 # ─── Run ─────────────────────────────────────────────
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=5000, debug=False)
diff --git a/api/data/apikeys.json b/api/data/apikeys.json
new file mode 100644
index 0000000..6c2cd16
--- /dev/null
+++ b/api/data/apikeys.json
@@ -0,0 +1,37 @@
+{
+  "weather": {
+    "api_key": ""
+  },
+  "spotify": {
+    "client_id": "",
+    "client_secret": "",
+    "refresh_token": ""
+  },
+  "smtp": {
+    "host": "",
+    "port": "587",
+    "user": "",
+    "pass": ""
+  },
+  "discord": {
+    "webhook": ""
+  },
+  "github": {
+    "token": ""
+  },
+  "custom1": {
+    "name": "",
+    "key": "",
+    "url": ""
+  },
+  "custom2": {
+    "name": "",
+    "key": "",
+    "url": ""
+  },
+  "custom3": {
+    "name": "",
+    "key": "",
+    "url": ""
+  }
+}
\ No newline at end of file
diff --git a/api/data/contact_settings.json b/api/data/contact_settings.json
new file mode 100644
index 0000000..422d1ad
--- /dev/null
+++ b/api/data/contact_settings.json
@@ -0,0 +1,5 @@
+{
+  "email": "jaeswift@jaeswift.xyz",
+  "form_enabled": true,
+  "auto_reply": "Thanks for reaching out. I'll get back to you soon."
+}
\ No newline at end of file
diff --git a/api/data/homepage.json b/api/data/homepage.json
new file mode 100644
index 0000000..fcaeaaf
--- /dev/null
+++ b/api/data/homepage.json
@@ -0,0 +1,38 @@
+{
+  "hero_title": "JAESWIFT",
+  "hero_subtitle": "SECURITY ENGINEER // DEVELOPER",
+  "hero_tagline": "Building the future, one exploit at a time.",
+  "sections": [
+    {
+      "id": "about",
+      "label": "About",
+      "visible": true
+    },
+    {
+      "id": "blog",
+      "label": "Blog",
+      "visible": true
+    },
+    {
+      "id": "dev-cards",
+      "label": "Dev Cards",
+      "visible": true
+    },
+    {
+      "id": "links",
+      "label": "Links",
+      "visible": true
+    },
+    {
+      "id": "contact",
+      "label": "Contact",
+      "visible": true
+    },
+    {
+      "id": "terminal",
+      "label": "Terminal",
+      "visible": true
+    }
+  ],
+  "about_text": "Cybersecurity enthusiast and full-stack developer based in the UK."
+}
\ No newline at end of file
diff --git a/api/data/links.json b/api/data/links.json
new file mode 100644
index 0000000..f3c946d
--- /dev/null
+++ b/api/data/links.json
@@ -0,0 +1,14 @@
+[
+  {
+    "name": "GitHub",
+    "url": "https://github.com/jaeswift",
+    "icon": "\u2b21",
+    "category": "social"
+  },
+  {
+    "name": "Discord",
+    "url": "#",
+    "icon": "\u25c8",
+    "category": "social"
+  }
+]
\ No newline at end of file
diff --git a/api/data/managed_services.json b/api/data/managed_services.json
new file mode 100644
index 0000000..3783c14
--- /dev/null
+++ b/api/data/managed_services.json
@@ -0,0 +1,14 @@
+[
+  {
+    "name": "Main Site",
+    "url": "https://jaeswift.xyz"
+  },
+  {
+    "name": "Gitea",
+    "url": "https://git.jaeswift.xyz"
+  },
+  {
+    "name": "Yoink",
+    "url": "https://jaeswift.xyz/yoink/"
+  }
+]
\ No newline at end of file
diff --git a/api/data/messages.json b/api/data/messages.json
new file mode 100644
index 0000000..0637a08
--- /dev/null
+++ b/api/data/messages.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/api/data/navigation.json b/api/data/navigation.json
new file mode 100644
index 0000000..56e4d60
--- /dev/null
+++ b/api/data/navigation.json
@@ -0,0 +1,17 @@
+[
+  {
+    "label": "HOME",
+    "url": "/",
+    "order": 1
+  },
+  {
+    "label": "BLOG",
+    "url": "/blog",
+    "order": 2
+  },
+  {
+    "label": "ADMIN",
+    "url": "/admin",
+    "order": 3
+  }
+]
\ No newline at end of file
diff --git a/api/data/posts.json b/api/data/posts.json
index e79f232..77e442e 100644
--- a/api/data/posts.json
+++ b/api/data/posts.json
@@ -1,12 +1,40 @@
 [
+  {
+    "title": "Building This Dashboard: A Cyberpunk Dev Log",
+    "slug": "building-this-dashboard",
+    "date": "2026-03-30",
+    "time_written": "04:22",
+    "excerpt": "The story behind jaeswift.xyz \u2014 how I built a cyberpunk HUD dashboard as a personal homepage using nothing but vanilla HTML, CSS, and JavaScript.",
+    "tags": [
+      "webdev",
+      "css",
+      "javascript",
+      "design",
+      "devlog"
+    ],
+    "content": "# Building This Dashboard: A Cyberpunk Dev Log\n\nYou're looking at it. This site. The one with the scanlines, the particle system, the glitching text, the fake terminal, and the server metrics that are actually real.\n\n## Why?\n\nEvery developer has a portfolio site. Most look the same \u2014 clean, minimal, forgettable. I wanted something that felt like logging into a system. Something that made you feel like you just SSH'd into my brain.\n\n## The Rules\n\n1. **No frameworks** \u2014 Vanilla HTML, CSS, JS only\n2. **No templates** \u2014 Every line written from scratch\n3. **Real data** \u2014 Server metrics, weather, and now-playing are live\n4. **Cyberpunk aesthetic** \u2014 Dark theme, neon accents, monospace everything\n\n## The HUD Grid\n\nThe hero section is a CSS Grid layout. Left column: UK map (SVG with animated pulse rings) + identity block. Right column: Server metrics + containers + weather + now playing.\n\n## The Particle System\n\nThe background particles are drawn on a canvas element. Each frame: move particles based on velocity, check distance to mouse cursor, draw connection lines between nearby particles, recycle particles that leave the viewport. ~200 particles at 60fps. Surprisingly lightweight.\n\n## Live Data Integration\n\nThe server metrics aren't fake. They hit a Flask API running on the same VPS. Same for weather (Open-Meteo API) and the now-playing widget (rotating through my playlist).\n\n## The Glitch Effect\n\nThe title uses CSS clip-path animations with pseudo-elements offset by a few pixels in cyan and red. Triggered randomly every few seconds. Subtle enough to not be annoying.\n\n## What I'd Do Differently\n\nHonestly? Not much. This was a passion project built at 3AM with coffee and beats. It's not perfect, but it's mine. The entire site is about 1,600 lines of CSS and 800 lines of JS. No build step, no dependencies, no npm. Just files and a server.",
+    "mood": "creative",
+    "energy": 3,
+    "motivation": 5,
+    "focus": 4,
+    "difficulty": 3,
+    "coffee": 6,
+    "heart_rate": 76,
+    "threat_level": "LOW"
+  },
   {
     "id": 1,
     "title": "Building a Self-Hosted Empire",
     "slug": "self-hosted-empire",
     "date": "2026-03-28",
-    "excerpt": "How I ditched big tech and built my own infrastructure from the ground up. Gitea, Plex, search engines — all on one box.",
-    "content": "## The Breaking Point\n\nThere comes a moment in every developer's life when you look at your Google Drive, your Gmail, your hosted repos on GitHub, and you think: *why am I handing all of this to someone else?* For me, that moment came at 2 AM on a Tuesday, staring at a Terms of Service update email that basically said 'we own your soul now.'\n\nSo I did what any rational person would do. I bought a VPS and started building.\n\n## The Stack\n\nThe foundation is a Debian box sitting in a data centre somewhere in Europe. On top of that:\n\n- **Gitea** for git hosting — lightweight, fast, and mine\n- **Plex** for media — because why pay for streaming when you have a 2TB drive\n- **Nginx** as the reverse proxy tying it all together\n- **Docker** containers for everything that can be containerised\n- **WireGuard** for secure remote access\n\nThe whole thing runs on 4GB of RAM and barely breaks a sweat.\n\n## The Hard Parts\n\nDNS was a nightmare at first. Getting wildcard SSL certs with Let's Encrypt took three attempts and a lot of swearing. Docker networking still makes me want to throw my laptop out the window sometimes.\n\nBut the worst part? Email. Self-hosted email is a rabbit hole I'm still climbing out of. Every major provider treats your IP as spam by default. You need SPF, DKIM, DMARC, a reverse DNS entry, and probably a blood sacrifice to get Gmail to accept your messages.\n\n## Was It Worth It?\n\nAbsolutely. I own my data. I control my infrastructure. When a service goes down, it's my fault and I can fix it. There's something deeply satisfying about `ssh root@mybox` and knowing that everything running on that machine is mine.\n\nThe total cost? About £8 a month for the VPS. That's less than a single streaming subscription.\n\n## What's Next\n\nI'm looking at adding a self-hosted AI inference server, a personal search engine, and maybe a Matrix server for comms. The empire keeps growing.",
-    "tags": ["self-hosted", "infrastructure", "linux", "docker"],
+    "excerpt": "How I ditched big tech and built my own infrastructure from the ground up. Gitea, Plex, search engines \u2014 all on one box.",
+    "content": "## The Breaking Point\n\nThere comes a moment in every developer's life when you look at your Google Drive, your Gmail, your hosted repos on GitHub, and you think: *why am I handing all of this to someone else?* For me, that moment came at 2 AM on a Tuesday, staring at a Terms of Service update email that basically said 'we own your soul now.'\n\nSo I did what any rational person would do. I bought a VPS and started building.\n\n## The Stack\n\nThe foundation is a Debian box sitting in a data centre somewhere in Europe. On top of that:\n\n- **Gitea** for git hosting \u2014 lightweight, fast, and mine\n- **Plex** for media \u2014 because why pay for streaming when you have a 2TB drive\n- **Nginx** as the reverse proxy tying it all together\n- **Docker** containers for everything that can be containerised\n- **WireGuard** for secure remote access\n\nThe whole thing runs on 4GB of RAM and barely breaks a sweat.\n\n## The Hard Parts\n\nDNS was a nightmare at first. Getting wildcard SSL certs with Let's Encrypt took three attempts and a lot of swearing. Docker networking still makes me want to throw my laptop out the window sometimes.\n\nBut the worst part? Email. Self-hosted email is a rabbit hole I'm still climbing out of. Every major provider treats your IP as spam by default. You need SPF, DKIM, DMARC, a reverse DNS entry, and probably a blood sacrifice to get Gmail to accept your messages.\n\n## Was It Worth It?\n\nAbsolutely. I own my data. I control my infrastructure. When a service goes down, it's my fault and I can fix it. There's something deeply satisfying about `ssh root@mybox` and knowing that everything running on that machine is mine.\n\nThe total cost? About \u00a38 a month for the VPS. That's less than a single streaming subscription.\n\n## What's Next\n\nI'm looking at adding a self-hosted AI inference server, a personal search engine, and maybe a Matrix server for comms. The empire keeps growing.",
+    "tags": [
+      "self-hosted",
+      "infrastructure",
+      "linux",
+      "docker"
+    ],
     "mood": 4,
     "energy": 5,
     "motivation": 5,
@@ -18,14 +46,41 @@
     "time_written": "02:34 AM",
     "word_count": 347
   },
+  {
+    "title": "Homelab Chronicles: Docker, Proxmox & 10 Containers Deep",
+    "slug": "homelab-chronicles",
+    "date": "2026-03-28",
+    "time_written": "02:15",
+    "excerpt": "A deep dive into my self-hosted infrastructure \u2014 from bare metal to a fleet of Docker containers running everything from Gitea to media servers.",
+    "tags": [
+      "homelab",
+      "docker",
+      "self-hosting",
+      "infrastructure"
+    ],
+    "content": "# Homelab Chronicles: Docker, Proxmox & 10 Containers Deep\n\nThere's something deeply satisfying about running your own infrastructure. No cloud bills. No vendor lock-in. Just you, a box of silicon, and a terminal.\n\n## The Hardware\n\nMy current setup is a single Contabo VPS \u2014 nothing fancy, but it punches well above its weight:\n\n- **CPU:** 6 vCPU AMD EPYC\n- **RAM:** 16GB DDR4\n- **Storage:** 400GB NVMe SSD\n- **OS:** Debian 12 (Bookworm)\n- **Location:** EU datacenter\n\n## The Stack\n\nEverything runs in Docker containers behind an Nginx reverse proxy with Let's Encrypt SSL. Here's what's running:\n\n### Core Infrastructure\n1. **Nginx Proxy Manager** \u2014 SSL termination, reverse proxy for everything\n2. **Portainer** \u2014 Container management UI (though I mostly use CLI)\n3. **Uptime Kuma** \u2014 Monitoring dashboard for all services\n\n### Development\n4. **Gitea** \u2014 Self-hosted Git at git.jaeswift.xyz\n5. **Drone CI** \u2014 Continuous integration pipelines\n6. **Agent Zero** \u2014 AI agent framework for automation\n\n### Applications\n7. **Yoink** \u2014 Custom SvelteKit media downloader\n8. **Vane** \u2014 Weather dashboard built with Next.js\n9. **Ghost** \u2014 Blog platform (since migrated to custom static)\n10. **Wireguard** \u2014 VPN tunnel for secure access\n\n## Docker Compose Setup\n\nThe entire stack is defined in a single `docker-compose.yml` with proper networking. Each service gets its own network segment. Only services that need external access join the proxy network.\n\n## Monitoring\n\nUptime Kuma pings every service every 60 seconds. I get Discord webhook alerts if anything drops. Current uptime across all services: **99.7%** over the last 30 days.\n\n## Lessons Learned\n\n1. **Always have backups** \u2014 I learned this the hard way when a disk migration went wrong\n2. **Document everything** \u2014 Future you will thank present you\n3. **Don't over-engineer** \u2014 Start simple, add complexity when needed\n4. **Security first** \u2014 Fail2ban, UFW, SSH keys only, no root login\n\nThe homelab never sleeps. Neither do I, apparently.",
+    "mood": "productive",
+    "energy": 4,
+    "motivation": 5,
+    "focus": 4,
+    "difficulty": 3,
+    "coffee": 3,
+    "heart_rate": 72,
+    "threat_level": "LOW"
+  },
   {
     "id": 2,
     "title": "Securing the Perimeter: VPS Hardening 101",
     "slug": "vps-hardening-101",
     "date": "2026-03-25",
-    "excerpt": "Your fresh VPS is a sitting duck. Here's how I lock mine down — SSH keys, fail2ban, firewalls, and a healthy dose of paranoia.",
-    "content": "## You Just Deployed a Server. You're Already Under Attack.\n\nI'm not being dramatic. Within five minutes of spinning up a fresh VPS, check your auth logs. You'll see hundreds of brute-force SSH attempts from IPs all over the world. Bots are scanning every IP range constantly, looking for default credentials and open ports.\n\nWelcome to the internet.\n\n## Step 1: SSH Hardening\n\nFirst thing, always:\n\n```bash\n# Generate a key pair on your local machine\nssh-keygen -t ed25519 -C \"your@email.com\"\n\n# Copy it to the server\nssh-copy-id root@your-server\n\n# Then disable password auth\nsed -i 's/#PasswordAuthentication yes/PasswordAuthentication no/' /etc/ssh/sshd_config\nsystemctl restart sshd\n```\n\nChange the default SSH port while you're at it. Security through obscurity isn't real security, but it cuts the noise in your logs by 95%.\n\n## Step 2: Firewall\n\nUFW is your friend:\n\n```bash\nufw default deny incoming\nufw default allow outgoing\nufw allow 2222/tcp  # your SSH port\nufw allow 80/tcp\nufw allow 443/tcp\nufw enable\n```\n\nThat's it. Everything else gets dropped.\n\n## Step 3: Fail2Ban\n\nFail2ban watches your logs and auto-bans IPs that fail authentication too many times. Install it, configure it for SSH, and forget about it. It'll do its job quietly in the background.\n\n## Step 4: Unattended Upgrades\n\nSecurity patches should install themselves. You shouldn't need to remember to run `apt update` every day:\n\n```bash\napt install unattended-upgrades\ndpkg-reconfigure unattended-upgrades\n```\n\n## Step 5: The Paranoia Layer\n\n- Disable root login over SSH (use a regular user + sudo)\n- Set up 2FA with Google Authenticator PAM module\n- Monitor with Netdata or similar\n- Regular `lynis audit system` scans\n- Keep backups. Always keep backups.\n\n## The Mindset\n\nSecurity isn't a destination, it's a process. You're never 'done' securing a server. New vulnerabilities drop daily. The trick is making your box harder to crack than the next one. Attackers are lazy — they'll move on to easier targets.",
-    "tags": ["security", "linux", "sysadmin", "hardening"],
+    "excerpt": "Your fresh VPS is a sitting duck. Here's how I lock mine down \u2014 SSH keys, fail2ban, firewalls, and a healthy dose of paranoia.",
+    "content": "## You Just Deployed a Server. You're Already Under Attack.\n\nI'm not being dramatic. Within five minutes of spinning up a fresh VPS, check your auth logs. You'll see hundreds of brute-force SSH attempts from IPs all over the world. Bots are scanning every IP range constantly, looking for default credentials and open ports.\n\nWelcome to the internet.\n\n## Step 1: SSH Hardening\n\nFirst thing, always:\n\n```bash\n# Generate a key pair on your local machine\nssh-keygen -t ed25519 -C \"your@email.com\"\n\n# Copy it to the server\nssh-copy-id root@your-server\n\n# Then disable password auth\nsed -i 's/#PasswordAuthentication yes/PasswordAuthentication no/' /etc/ssh/sshd_config\nsystemctl restart sshd\n```\n\nChange the default SSH port while you're at it. Security through obscurity isn't real security, but it cuts the noise in your logs by 95%.\n\n## Step 2: Firewall\n\nUFW is your friend:\n\n```bash\nufw default deny incoming\nufw default allow outgoing\nufw allow 2222/tcp  # your SSH port\nufw allow 80/tcp\nufw allow 443/tcp\nufw enable\n```\n\nThat's it. Everything else gets dropped.\n\n## Step 3: Fail2Ban\n\nFail2ban watches your logs and auto-bans IPs that fail authentication too many times. Install it, configure it for SSH, and forget about it. It'll do its job quietly in the background.\n\n## Step 4: Unattended Upgrades\n\nSecurity patches should install themselves. You shouldn't need to remember to run `apt update` every day:\n\n```bash\napt install unattended-upgrades\ndpkg-reconfigure unattended-upgrades\n```\n\n## Step 5: The Paranoia Layer\n\n- Disable root login over SSH (use a regular user + sudo)\n- Set up 2FA with Google Authenticator PAM module\n- Monitor with Netdata or similar\n- Regular `lynis audit system` scans\n- Keep backups. Always keep backups.\n\n## The Mindset\n\nSecurity isn't a destination, it's a process. You're never 'done' securing a server. New vulnerabilities drop daily. The trick is making your box harder to crack than the next one. Attackers are lazy \u2014 they'll move on to easier targets.",
+    "tags": [
+      "security",
+      "linux",
+      "sysadmin",
+      "hardening"
+    ],
     "mood": 3,
     "energy": 4,
     "motivation": 5,
@@ -37,14 +92,65 @@
     "time_written": "11:47 PM",
     "word_count": 312
   },
+  {
+    "title": "CTF Write-Up: Breaking Into the Matrix (HackTheBox)",
+    "slug": "ctf-matrix-writeup",
+    "date": "2026-03-25",
+    "time_written": "23:48",
+    "excerpt": "A detailed write-up of a medium-difficulty HackTheBox challenge involving SSRF, JWT manipulation, and a satisfying root shell.",
+    "tags": [
+      "ctf",
+      "hackthebox",
+      "pentesting",
+      "write-up",
+      "security"
+    ],
+    "content": "# CTF Write-Up: Breaking Into the Matrix\n\n**Platform:** HackTheBox\n**Difficulty:** Medium\n**Time:** 4 hours 23 minutes\n**Tools:** nmap, burpsuite, john, linpeas\n\n---\n\n## Reconnaissance\n\nStarted with the usual nmap scan. Ports open: 22 (OpenSSH 8.9), 80 (Nginx redirects to matrix.htb), 8080 (Node.js API).\n\n## Web Enumeration\n\nThe main site was a futuristic dashboard (ironic, given my own site). Gobuster revealed /api/v1/users, /api/v1/auth, /api/v1/admin (403), and /internal/health (SSRF candidate).\n\n## The SSRF\n\nThe /api/v1/users endpoint had a profile picture feature that fetched URLs server-side. Classic SSRF. Fetched the internal health endpoint which leaked server config including a JWT secret.\n\n## JWT Manipulation\n\nWith the secret, I forged an admin token using PyJWT. Used this to access /api/v1/admin \u2014 which had a command execution endpoint.\n\n## User Shell\n\nUsed the command exec endpoint to fire a reverse shell. Got in as www-data. User flag captured.\n\n## Privilege Escalation\n\nRan linpeas. Found a SUID binary in /opt/matrix-monitor owned by root. Strings revealed it called curl without a full path. Path hijack \u2014 created a fake curl that spawns bash -p. Root shell. GG.\n\n## Takeaways\n\n- SSRF is still everywhere \u2014 always test URL input fields\n- JWT secrets in internal endpoints = instant admin\n- SUID binaries with relative paths are free root\n- Always run linpeas. Always.",
+    "mood": "focused",
+    "energy": 5,
+    "motivation": 5,
+    "focus": 5,
+    "difficulty": 4,
+    "coffee": 5,
+    "heart_rate": 88,
+    "threat_level": "HIGH"
+  },
+  {
+    "title": "OpSec for the Paranoid: My Privacy Stack",
+    "slug": "opsec-privacy-stack",
+    "date": "2026-03-22",
+    "time_written": "01:30",
+    "excerpt": "A breakdown of the tools, habits, and configurations I use to stay private online \u2014 from DNS to email to browsing.",
+    "tags": [
+      "privacy",
+      "security",
+      "opsec",
+      "linux",
+      "self-hosting"
+    ],
+    "content": "# OpSec for the Paranoid: My Privacy Stack\n\nI'm not hiding anything. I just don't think anyone's entitled to my data.\n\n## DNS\n\nSelf-hosted Pi-hole pointing to Quad9 (9.9.9.9) with DNSSEC enabled. Every DNS query on my network is filtered and encrypted. The blocklist catches ~30% of all queries.\n\n## Email\n\nProtonMail for personal. Self-hosted Postfix/Dovecot on jaeswift.xyz for project mail. Both with SPF, DKIM, and DMARC. I use email aliases extensively \u2014 every service gets a unique address.\n\n## Browser\n\nFirefox with uBlock Origin (hard mode), Privacy Badger, HTTPS Everywhere, Multi-Account Containers, and a custom user.js based on arkenfox. No Chrome. Ever.\n\n## VPN\n\nWireGuard tunnel to my VPS. All traffic routed through it on public networks. Dead simple config.\n\n## Passwords\n\nKeePassXC locally synced via Syncthing. No cloud password manager. The database is backed up encrypted to three locations.\n\n## Messaging\n\nSignal for anything sensitive. Discord for community (privacy settings maxed). Never SMS for anything important.\n\n## The Mindset\n\nPrivacy isn't just tools \u2014 it's habits:\n\n- **Compartmentalise** \u2014 Different emails, browsers, identities for different contexts\n- **Minimise** \u2014 Don't give data you don't have to\n- **Verify** \u2014 Check permissions, read privacy policies, audit your attack surface\n- **Update** \u2014 Patch everything, always\n\nStay safe out there.",
+    "mood": "focused",
+    "energy": 4,
+    "motivation": 4,
+    "focus": 5,
+    "difficulty": 2,
+    "coffee": 2,
+    "heart_rate": 65,
+    "threat_level": "MEDIUM"
+  },
   {
     "id": 3,
     "title": "AI Agents at 3AM: Building Agent Zero",
     "slug": "ai-agents-3am",
     "date": "2026-03-20",
     "excerpt": "What happens when you give an AI root access to your server and tell it to build things? Chaos, learning, and surprisingly good code.",
-    "content": "## The Rabbit Hole\n\nIt started with a simple question: what if an AI could actually *do* things on my server, not just talk about doing them?\n\nI'd been messing around with LLMs for months — ChatGPT, Claude, local models on my GPU. They're brilliant at explaining things and writing snippets, but there's always that gap between 'here's the code' and 'it's actually running.' You still have to copy, paste, debug, fix the hallucinated import, debug again.\n\nThen I found Agent Zero.\n\n## What Is It?\n\nAgent Zero is an AI agent framework. You give it access to a terminal, a browser, memory, and tools. Then you tell it what you want. It figures out the steps, writes the code, runs it, checks the output, and iterates until it works.\n\nThe first time I watched it SSH into my VPS, install nginx, write a config file, test it, and reload the service — all without me touching the keyboard — I felt something between excitement and genuine unease.\n\n## The Good\n\n- It handles complex multi-step tasks that would take me an hour of googling\n- It remembers previous solutions and applies them to new problems\n- It can debug its own mistakes (most of the time)\n- It never gets frustrated at 3 AM\n\n## The Bad\n\n- It sometimes gets stuck in loops, trying the same failing approach repeatedly\n- Token costs add up fast on complex tasks\n- You need to be specific — vague instructions produce vague results\n- It occasionally decides to 'improve' things you didn't ask it to touch\n\n## The Philosophy\n\nThere's a real debate about whether giving AI tools like these is a good idea. I get it. But here's my take: these tools exist. They're getting better. The question isn't whether people will use them, it's whether you'll understand how they work when they become mainstream.\n\nI'd rather be the person who built with the early versions than the person trying to catch up later.\n\n## Current Setup\n\nMy Agent Zero instance runs in Docker on the VPS. It has access to the terminal, can browse the web, and maintains long-term memory. I use it for everything from server maintenance to building websites.\n\nYes, including this one.",
-    "tags": ["ai", "agent-zero", "automation", "development"],
+    "content": "## The Rabbit Hole\n\nIt started with a simple question: what if an AI could actually *do* things on my server, not just talk about doing them?\n\nI'd been messing around with LLMs for months \u2014 ChatGPT, Claude, local models on my GPU. They're brilliant at explaining things and writing snippets, but there's always that gap between 'here's the code' and 'it's actually running.' You still have to copy, paste, debug, fix the hallucinated import, debug again.\n\nThen I found Agent Zero.\n\n## What Is It?\n\nAgent Zero is an AI agent framework. You give it access to a terminal, a browser, memory, and tools. Then you tell it what you want. It figures out the steps, writes the code, runs it, checks the output, and iterates until it works.\n\nThe first time I watched it SSH into my VPS, install nginx, write a config file, test it, and reload the service \u2014 all without me touching the keyboard \u2014 I felt something between excitement and genuine unease.\n\n## The Good\n\n- It handles complex multi-step tasks that would take me an hour of googling\n- It remembers previous solutions and applies them to new problems\n- It can debug its own mistakes (most of the time)\n- It never gets frustrated at 3 AM\n\n## The Bad\n\n- It sometimes gets stuck in loops, trying the same failing approach repeatedly\n- Token costs add up fast on complex tasks\n- You need to be specific \u2014 vague instructions produce vague results\n- It occasionally decides to 'improve' things you didn't ask it to touch\n\n## The Philosophy\n\nThere's a real debate about whether giving AI tools like these is a good idea. I get it. But here's my take: these tools exist. They're getting better. The question isn't whether people will use them, it's whether you'll understand how they work when they become mainstream.\n\nI'd rather be the person who built with the early versions than the person trying to catch up later.\n\n## Current Setup\n\nMy Agent Zero instance runs in Docker on the VPS. It has access to the terminal, can browse the web, and maintains long-term memory. I use it for everything from server maintenance to building websites.\n\nYes, including this one.",
+    "tags": [
+      "ai",
+      "agent-zero",
+      "automation",
+      "development"
+    ],
     "mood": 5,
     "energy": 3,
     "motivation": 4,
@@ -56,6 +162,29 @@
     "time_written": "03:22 AM",
     "word_count": 340
   },
+  {
+    "title": "Terminal Ricing: My Kali Workflow in 2026",
+    "slug": "terminal-ricing-2026",
+    "date": "2026-03-20",
+    "time_written": "22:15",
+    "excerpt": "A tour of my terminal setup \u2014 from Zsh to Tmux to custom aliases. Optimised for pentesting, development, and looking absolutely sick.",
+    "tags": [
+      "linux",
+      "terminal",
+      "workflow",
+      "customisation",
+      "dotfiles"
+    ],
+    "content": "# Terminal Ricing: My Kali Workflow in 2026\n\nI spend 90% of my time in a terminal. It better look good and work fast.\n\n## The Shell: Zsh + Oh My Zsh\n\nBash is fine. Zsh is better. With Oh My Zsh and the Powerlevel10k prompt, I get git branch/status, command execution time, Python virtualenv indicator, error code highlighting, and auto-suggestions from history.\n\n## Key Aliases\n\nMy .zshrc has about 200 lines of aliases and functions. Essentials: ll for detailed listing, gs/gp for git status/push, dc for docker compose, serve for quick http server, myip for external IP, ports for open connections.\n\n## Tmux\n\nAlways running with custom config: Ctrl+A prefix, mouse support, custom status bar with hostname/session/time, pipe for vertical split, dash for horizontal. Colours match the cyberpunk theme.\n\n## Tools I Can't Live Without\n\nfzf (fuzzy finder), bat (syntax-highlighted cat), ripgrep (fast grep), htop (process monitor), lazydocker (Docker TUI), nnn (file manager), jq (JSON processing).\n\n## Neovim\n\nRunning LazyVim with Treesitter, LSP for Python/JS/Go, Telescope, Which-key, and a custom cyberpunk colour scheme.\n\n## The Font\n\nJetBrains Mono with Nerd Font patches. Ligatures, readable at small sizes, all the icons Powerlevel10k needs.\n\n## Why It Matters\n\nA good terminal setup isn't just aesthetics \u2014 it's productivity. Every alias saves seconds. Every keybind saves keystrokes. Over thousands of commands a day, it adds up. Plus, it looks absolutely sick in screenshots.",
+    "mood": "zen",
+    "energy": 3,
+    "motivation": 4,
+    "focus": 3,
+    "difficulty": 1,
+    "coffee": 4,
+    "heart_rate": 62,
+    "threat_level": "LOW"
+  },
   {
     "id": 4,
     "title": "The 4AM Deploy: When Everything Goes Wrong",
@@ -63,7 +192,12 @@
     "date": "2026-03-15",
     "excerpt": "A war story about a production deploy that went sideways, the frantic debugging that followed, and what I learned from nuking my own DNS.",
     "content": "## It Was Supposed To Be Quick\n\nFamous last words. All I wanted to do was update the nginx config to add a new subdomain. Five minutes, tops. I'd done it a hundred times before.\n\n```bash\nnginx -t && systemctl reload nginx\n```\n\nExcept this time, `nginx -t` returned an error I'd never seen. Something about a duplicate server name. I'd accidentally created a circular include that referenced itself through a symlink.\n\n## The Cascade\n\nIn my sleep-deprived wisdom, I decided to 'fix' it by removing what I thought was the duplicate config file. Turns out, that was the main config for jaeswift.xyz. Not the duplicate. The main one.\n\nNginx went down. All services went dark. Git, Plex, the docs site, everything. At 4 AM.\n\n## The Panic\n\nMy phone started buzzing. Uptime monitors screaming. I tried to restore from the backup. The backup was three days old because I'd been meaning to set up daily snapshots but hadn't got round to it.\n\nThree days of config changes, gone.\n\n## The Recovery\n\nI spent the next two hours reconstructing the nginx config from memory and bash history. `history | grep nginx` became my best friend. I found most of the server blocks in various terminal scrollback sessions.\n\nBy 6 AM, everything was back online. Mostly. The Plex config took another day to get right because I'd customised the proxy headers and couldn't remember the exact settings.\n\n## The Lessons\n\n1. **Backup your configs to git.** Not tomorrow. Now.\n2. **Never deploy after midnight.** Your brain is lying to you about how awake you are.\n3. **Test in staging.** I know, I know. But actually do it.\n4. **Document everything.** Past-you is the best resource for future-you, but only if past-you wrote things down.\n5. **Set up automated backups.** I now have hourly snapshots of all critical configs.\n\n## Silver Lining\n\nThe reconstructed config was actually cleaner than the original. Sometimes you need to burn it down to build it better.\n\nBut maybe not at 4 AM.",
-    "tags": ["devops", "war-story", "nginx", "lessons"],
+    "tags": [
+      "devops",
+      "war-story",
+      "nginx",
+      "lessons"
+    ],
     "mood": 2,
     "energy": 1,
     "motivation": 2,
@@ -75,4 +209,4 @@
     "time_written": "04:13 AM",
     "word_count": 338
   }
-]
+]
\ No newline at end of file
diff --git a/api/data/seo.json b/api/data/seo.json
new file mode 100644
index 0000000..306477e
--- /dev/null
+++ b/api/data/seo.json
@@ -0,0 +1,7 @@
+{
+  "title": "JAESWIFT // Security Engineer & Developer",
+  "description": "Personal site of JAE - cybersecurity engineer, developer, and hacker based in the UK.",
+  "keywords": "cybersecurity, hacking, developer, pentesting, UK",
+  "og_image": "",
+  "favicon": ""
+}
\ No newline at end of file
diff --git a/api/data/theme.json b/api/data/theme.json
new file mode 100644
index 0000000..e4c9dd6
--- /dev/null
+++ b/api/data/theme.json
@@ -0,0 +1,10 @@
+{
+  "accent_color": "#00ffc8",
+  "bg_color": "#0a0e17",
+  "text_color": "#e0e0e0",
+  "scanlines": true,
+  "particles": true,
+  "glitch": true,
+  "grid_bg": true,
+  "font_size": 14
+}
\ No newline at end of file
diff --git a/css/admin.css b/css/admin.css
index 7b090b0..4355b88 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -1,5 +1,6 @@
 /* ===================================================
    JAESWIFT — Admin Panel Styles
+   Full cyberpunk admin theme
    =================================================== */
 :root {
     --bg: #0a0e17;
@@ -7,16 +8,21 @@
     --bg3: #151b2b;
     --accent: #00ffc8;
     --accent-dim: rgba(0, 255, 200, 0.15);
+    --secondary: #ff006e;
+    --secondary-dim: rgba(255, 0, 110, 0.15);
     --text: #c8d6e5;
     --text-dim: rgba(200, 214, 229, 0.5);
     --danger: #ff4757;
     --warn: #ffa502;
     --success: #00ffc8;
+    --info: #00d4ff;
     --border: rgba(0, 255, 200, 0.08);
+    --border-strong: rgba(0, 255, 200, 0.2);
     --sidebar-w: 220px;
     --topbar-h: 50px;
     --font-mono: 'JetBrains Mono', monospace;
     --font-display: 'Orbitron', sans-serif;
+    --font-share: 'Share Tech Mono', monospace;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -30,6 +36,22 @@ body {
     min-height: 100vh;
 }
 
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: var(--bg);
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 255, 200, 0.15);
+    border: 1px solid var(--border);
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 255, 200, 0.25);
+}
+
 /* ─── Login Screen ─── */
 .admin-login {
     display: flex;
@@ -211,6 +233,40 @@ body {
     background: rgba(255,71,87,0.1);
 }
 
+/* ─── Mobile Menu Button (hamburger) ─── */
+.mobile-menu-btn {
+    display: none;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--accent);
+    font-size: 1.2rem;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    transition: all 0.3s;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+}
+.mobile-menu-btn:hover {
+    border-color: var(--accent);
+    box-shadow: 0 0 8px rgba(0,255,200,0.15);
+}
+.mobile-menu-btn .hamburger-line {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: var(--accent);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: all 0.3s;
+}
+.mobile-menu-btn .hamburger-line:nth-child(1) { top: 10px; }
+.mobile-menu-btn .hamburger-line:nth-child(2) { top: 17px; }
+.mobile-menu-btn .hamburger-line:nth-child(3) { top: 24px; }
+
 /* ─── Sidebar ─── */
 .admin-sidebar {
     background: var(--bg2);
@@ -218,6 +274,34 @@ body {
     padding: 1rem 0;
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-close-btn {
+    display: none;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    font-size: 1rem;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.2s;
+    align-self: flex-end;
+    margin: 0 0.8rem 0.5rem;
+    align-items: center;
+    justify-content: center;
+}
+.sidebar-close-btn:hover {
+    color: var(--danger);
+    border-color: var(--danger);
+}
+
+.sidebar-group-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 0.5rem 1.2rem;
 }
 
 .sidebar-link {
@@ -254,6 +338,22 @@ body {
     border-top: 1px solid var(--border);
 }
 
+/* Sidebar Overlay (mobile backdrop) */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(2px);
+    z-index: 98;
+}
+.sidebar-overlay.active {
+    display: block;
+}
+
 /* ─── Main Content ─── */
 .admin-main {
     padding: 2rem;
@@ -298,6 +398,13 @@ body {
     margin: 2rem 0 1rem;
 }
 
+.section-description {
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    letter-spacing: 1px;
+    margin-bottom: 1.5rem;
+}
+
 /* ─── Action Buttons ─── */
 .action-btn {
     background: transparent;
@@ -337,6 +444,25 @@ body {
 .action-sm.edit:hover { color: var(--accent); border-color: var(--accent); }
 .action-sm.delete:hover { color: var(--danger); border-color: var(--danger); }
 
+/* Danger Button */
+.danger-btn {
+    background: transparent;
+    border: 1px solid rgba(255, 71, 87, 0.4);
+    color: var(--danger);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 2px;
+    padding: 0.5rem 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.danger-btn:hover {
+    background: rgba(255, 71, 87, 0.1);
+    border-color: var(--danger);
+    box-shadow: 0 0 10px rgba(255, 71, 87, 0.2);
+}
+
 /* ─── Dashboard Grid ─── */
 .dash-grid {
     display: grid;
@@ -367,7 +493,7 @@ body {
     text-shadow: 0 0 10px rgba(0,255,200,0.2);
 }
 
-/* ─── Services Grid ─── */
+/* ─── Services Grid (Dashboard) ─── */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -632,7 +758,7 @@ body {
     background: rgba(0,0,0,0.4);
     border: 1px solid var(--border);
     color: var(--text);
-    font-family: 'Share Tech Mono', var(--font-mono);
+    font-family: var(--font-share), var(--font-mono);
     font-size: 0.85rem;
     line-height: 1.7;
     padding: 1.2rem;
@@ -675,7 +801,7 @@ body {
     overflow-x: auto;
 }
 .editor-preview .post-rendered code {
-    font-family: 'Share Tech Mono', monospace;
+    font-family: var(--font-share), monospace;
     color: var(--accent);
 }
 .editor-preview .post-rendered .inline-code {
@@ -756,6 +882,7 @@ body {
     margin-bottom: 1rem;
 }
 
+/* ─── Toggle Switch ─── */
 .toggle-row {
     display: flex;
     align-items: center;
@@ -774,6 +901,7 @@ body {
     position: relative;
     cursor: pointer;
     transition: all 0.3s;
+    flex-shrink: 0;
 }
 .toggle-row input[type="checkbox"]::after {
     content: '';
@@ -800,12 +928,714 @@ body {
     color: var(--text);
 }
 
-/* ─── Notification ─── */
+/* Toggle switch standalone (reusable) */
+.toggle-switch {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 36px;
+    height: 18px;
+    background: rgba(200,214,229,0.1);
+    border: 1px solid var(--border);
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s;
+    flex-shrink: 0;
+}
+.toggle-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    background: var(--text-dim);
+    transition: all 0.3s;
+}
+.toggle-switch:checked {
+    background: rgba(0,255,200,0.15);
+    border-color: var(--accent);
+}
+.toggle-switch:checked::after {
+    left: 20px;
+    background: var(--accent);
+    box-shadow: 0 0 6px rgba(0,255,200,0.4);
+}
+
+/* ===================================================
+   NEW SECTIONS
+   =================================================== */
+
+/* ─── Section Item (reusable row for homepage sections, nav, links, services) ─── */
+.section-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.6rem 0.8rem;
+    background: rgba(0,0,0,0.15);
+    border: 1px solid var(--border);
+    margin-bottom: 0.4rem;
+    transition: all 0.2s;
+    font-size: 0.75rem;
+}
+.section-item:hover {
+    background: rgba(0,255,200,0.03);
+    border-color: var(--border-strong);
+    box-shadow: 0 0 6px rgba(0,255,200,0.05);
+}
+
+.section-item-label {
+    flex: 1;
+    color: #fff;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.section-item-url {
+    flex: 2;
+    color: var(--text-dim);
+    font-size: 0.7rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.section-item-meta {
+    color: var(--text-dim);
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+}
+
+.section-item-actions {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.section-item-actions .action-sm {
+    padding: 0.2rem 0.5rem;
+}
+
+/* Arrow buttons for reorder */
+.arrow-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    font-size: 0.65rem;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.arrow-btn:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+.arrow-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+/* ─── Add Form Row (reusable for services, nav, links) ─── */
+.add-form-row {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+.add-form-row .editor-input {
+    flex: 1;
+    min-width: 120px;
+}
+.add-form-row .editor-input.input-sm {
+    max-width: 80px;
+    min-width: 60px;
+    flex: 0 0 auto;
+}
+
+/* ─── Badges ─── */
+.category-badge {
+    display: inline-block;
+    font-size: 0.55rem;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid rgba(0, 255, 200, 0.2);
+    color: var(--accent);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background: rgba(0, 255, 200, 0.05);
+}
+
+.order-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-display);
+    font-size: 0.6rem;
+    font-weight: 700;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--border);
+    color: var(--accent);
+    background: rgba(0, 255, 200, 0.05);
+    flex-shrink: 0;
+}
+
+.icon-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border);
+    background: rgba(0,0,0,0.2);
+    flex-shrink: 0;
+}
+
+/* ─── Homepage Editor ─── */
+.section-homepage .editor-form {
+    max-width: 700px;
+}
+
+.homepage-sections-list {
+    margin-top: 0.5rem;
+}
+
+.homepage-section-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.6rem 0.8rem;
+    background: rgba(0,0,0,0.15);
+    border: 1px solid var(--border);
+    margin-bottom: 0.4rem;
+    transition: all 0.2s;
+    cursor: grab;
+}
+.homepage-section-item:hover {
+    background: rgba(0,255,200,0.03);
+    border-color: var(--border-strong);
+    box-shadow: 0 0 6px rgba(0,255,200,0.05);
+}
+.homepage-section-item:active {
+    cursor: grabbing;
+}
+
+.homepage-section-item .toggle-switch {
+    flex-shrink: 0;
+}
+
+.homepage-section-item .section-item-label {
+    flex: 1;
+    font-size: 0.75rem;
+    color: #fff;
+}
+
+.homepage-section-item .section-item-actions {
+    display: flex;
+    gap: 0.3rem;
+}
+
+.about-textarea {
+    width: 100%;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    line-height: 1.6;
+    padding: 0.8rem;
+    outline: none;
+    resize: vertical;
+    min-height: 120px;
+    transition: border-color 0.3s;
+}
+.about-textarea:focus {
+    border-color: var(--accent);
+}
+
+/* ─── Services Manager ─── */
+.section-services .add-form-row .editor-input {
+    min-width: 140px;
+}
+
+.services-list {
+    margin-top: 0.5rem;
+}
+
+.service-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.5rem 0.8rem;
+    border-bottom: 1px solid rgba(0,255,200,0.04);
+    font-size: 0.75rem;
+    transition: background 0.2s;
+}
+.service-item:hover {
+    background: rgba(0,255,200,0.02);
+}
+
+.service-item-name {
+    color: #fff;
+    font-weight: 600;
+    flex: 1;
+}
+
+.service-item-url {
+    color: var(--accent);
+    font-size: 0.7rem;
+    flex: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ─── Navigation Editor ─── */
+.section-navigation .add-form-row .editor-input {
+    min-width: 100px;
+}
+
+.nav-list {
+    margin-top: 0.5rem;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.5rem 0.8rem;
+    border-bottom: 1px solid rgba(0,255,200,0.04);
+    font-size: 0.75rem;
+    transition: background 0.2s;
+}
+.nav-item:hover {
+    background: rgba(0,255,200,0.02);
+}
+
+.nav-item-label {
+    color: #fff;
+    font-weight: 600;
+    flex: 1;
+}
+
+.nav-item-url {
+    color: var(--text-dim);
+    font-size: 0.7rem;
+    flex: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ─── Links Manager ─── */
+.section-links .add-form-row .editor-input {
+    min-width: 100px;
+}
+
+.links-list {
+    margin-top: 0.5rem;
+}
+
+.link-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.5rem 0.8rem;
+    border-bottom: 1px solid rgba(0,255,200,0.04);
+    font-size: 0.75rem;
+    transition: background 0.2s;
+}
+.link-item:hover {
+    background: rgba(0,255,200,0.02);
+}
+
+.link-item-icon {
+    font-size: 1rem;
+    width: 28px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.link-item-name {
+    color: #fff;
+    font-weight: 600;
+    flex: 1;
+}
+
+.link-item-url {
+    color: var(--text-dim);
+    font-size: 0.7rem;
+    flex: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ─── API Keys ─── */
+.apikeys-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 1.2rem;
+}
+
+.api-group-card {
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    padding: 1.2rem;
+    transition: all 0.3s;
+}
+.api-group-card:hover {
+    border-left-color: #fff;
+    box-shadow: 0 0 12px rgba(0,255,200,0.06);
+}
+
+.api-group-header {
+    font-family: var(--font-display);
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.api-group-header .api-icon {
+    color: var(--accent);
+    font-size: 0.9rem;
+}
+
+.api-group-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    margin-bottom: 1rem;
+}
+
+.api-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.api-field-label {
+    font-size: 0.55rem;
+    color: var(--text-dim);
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+}
+
+.api-field-input {
+    background: rgba(0,0,0,0.4);
+    border: 1px solid var(--border);
+    color: #fff;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    padding: 0.4rem 0.6rem;
+    outline: none;
+    transition: border-color 0.3s;
+    letter-spacing: 1px;
+}
+.api-field-input:focus {
+    border-color: var(--accent);
+}
+.api-field-input[type="password"] {
+    letter-spacing: 3px;
+}
+
+.api-group-save {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 2px;
+    padding: 0.4rem 1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    width: 100%;
+}
+.api-group-save:hover {
+    background: var(--accent-dim);
+    box-shadow: 0 0 8px rgba(0,255,200,0.15);
+}
+
+/* ─── Theme / Appearance ─── */
+.section-theme .settings-form {
+    max-width: 600px;
+}
+
+.color-picker-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    margin-bottom: 0.8rem;
+}
+
+.color-picker-row label {
+    font-size: 0.6rem;
+    color: var(--accent);
+    letter-spacing: 2px;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.color-picker-row input[type="color"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--border);
+    background: transparent;
+    cursor: pointer;
+    padding: 2px;
+    flex-shrink: 0;
+}
+.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+.color-picker-row input[type="color"]::-webkit-color-swatch {
+    border: none;
+}
+
+.color-picker-row .hex-input {
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--border);
+    color: #fff;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    padding: 0.4rem 0.6rem;
+    width: 100px;
+    outline: none;
+    transition: border-color 0.3s;
+    letter-spacing: 1px;
+}
+.color-picker-row .hex-input:focus {
+    border-color: var(--accent);
+}
+
+.effect-toggles {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    margin: 1rem 0;
+}
+
+.font-size-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.font-size-row label {
+    font-size: 0.6rem;
+    color: var(--accent);
+    letter-spacing: 2px;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.font-size-row .editor-range {
+    flex: 1;
+}
+
+.font-size-row .range-val {
+    font-size: 0.85rem;
+    min-width: 40px;
+    text-align: right;
+}
+
+.preview-hint {
+    background: rgba(0,0,0,0.2);
+    border: 1px dashed var(--border);
+    padding: 1rem;
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    letter-spacing: 1px;
+}
+.preview-hint .hint-icon {
+    display: block;
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+    opacity: 0.5;
+}
+
+/* ─── SEO / Meta ─── */
+.section-seo .editor-form {
+    max-width: 600px;
+}
+
+.char-count {
+    font-size: 0.55rem;
+    color: var(--text-dim);
+    letter-spacing: 1px;
+    text-align: right;
+    margin-top: 0.2rem;
+}
+.char-count.warn {
+    color: var(--warn);
+}
+.char-count.danger {
+    color: var(--danger);
+}
+
+.seo-textarea {
+    width: 100%;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    line-height: 1.6;
+    padding: 0.6rem 0.8rem;
+    outline: none;
+    resize: vertical;
+    min-height: 80px;
+    transition: border-color 0.3s;
+}
+.seo-textarea:focus {
+    border-color: var(--accent);
+}
+
+/* ─── Contact Settings ─── */
+.section-contact .editor-form {
+    max-width: 600px;
+}
+
+.contact-toggle-row {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.8rem 0;
+}
+
+.auto-reply-textarea {
+    width: 100%;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    line-height: 1.6;
+    padding: 0.6rem 0.8rem;
+    outline: none;
+    resize: vertical;
+    min-height: 100px;
+    transition: border-color 0.3s;
+}
+.auto-reply-textarea:focus {
+    border-color: var(--accent);
+}
+
+/* ─── Backups ─── */
+.backup-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.backup-card {
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    padding: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.6rem;
+    transition: all 0.3s;
+}
+.backup-card:hover {
+    border-color: var(--border-strong);
+    box-shadow: 0 0 10px rgba(0,255,200,0.06);
+}
+
+.backup-card.highlight {
+    grid-column: 1 / -1;
+    max-width: 420px;
+    border-color: var(--accent);
+    background: rgba(0, 255, 200, 0.03);
+    box-shadow: 0 0 15px rgba(0,255,200,0.06);
+}
+
+.backup-icon {
+    font-size: 2rem;
+    color: var(--accent);
+    text-shadow: 0 0 12px rgba(0,255,200,0.2);
+}
+
+.backup-card.highlight .backup-icon {
+    font-size: 2.5rem;
+    text-shadow: 0 0 20px rgba(0,255,200,0.3);
+}
+
+.backup-label {
+    font-family: var(--font-display);
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 2px;
+}
+
+.backup-size {
+    font-size: 0.6rem;
+    color: var(--text-dim);
+    letter-spacing: 1px;
+}
+
+.backup-download-btn {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 2px;
+    padding: 0.4rem 1.2rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.3rem;
+}
+.backup-download-btn:hover {
+    background: var(--accent-dim);
+    box-shadow: 0 0 8px rgba(0,255,200,0.15);
+}
+
+.backup-download-btn .dl-icon {
+    font-size: 0.8rem;
+}
+
+.backup-card.highlight .backup-download-btn {
+    padding: 0.5rem 1.5rem;
+    font-size: 0.7rem;
+}
+
+/* ─── Notifications (expanded) ─── */
 .admin-notification {
     position: fixed;
-    top: -60px;
-    left: 50%;
-    transform: translateX(-50%);
+    top: -80px;
+    right: 20px;
+    left: auto;
+    transform: none;
     font-family: var(--font-mono);
     font-size: 0.75rem;
     letter-spacing: 2px;
@@ -813,38 +1643,330 @@ body {
     border: 1px solid var(--accent);
     background: var(--bg2);
     color: var(--accent);
-    z-index: 1000;
+    z-index: 9999;
     transition: top 0.4s ease;
+    max-width: 400px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
 }
 .admin-notification.show {
     top: 15px;
 }
+
+.admin-notification.success {
+    border-color: var(--success);
+    color: var(--success);
+    box-shadow: 0 0 15px rgba(0,255,200,0.1);
+}
+
 .admin-notification.error {
     border-color: var(--danger);
     color: var(--danger);
+    box-shadow: 0 0 15px rgba(255,71,87,0.1);
 }
 
+.admin-notification.info {
+    border-color: var(--info);
+    color: var(--info);
+    box-shadow: 0 0 15px rgba(0,212,255,0.1);
+}
+
+/* Auto-fade animation */
+@keyframes notifSlideIn {
+    0% { top: -80px; opacity: 0; }
+    10% { top: 15px; opacity: 1; }
+    90% { top: 15px; opacity: 1; }
+    100% { top: -80px; opacity: 0; }
+}
+.admin-notification.auto-fade {
+    animation: notifSlideIn 3.5s ease forwards;
+}
+
+/* ─── No Data ─── */
 .no-data {
     font-size: 0.7rem;
     color: var(--text-dim);
     letter-spacing: 1px;
 }
 
-/* ─── Responsive ─── */
-@media (max-width: 768px) {
-    .admin-app {
+/* ─── Loading Spinner ─── */
+.loading-spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--border);
+    border-top-color: var(--accent);
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ─── Scanline Overlay ─── */
+.scanline-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9998;
+    background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(0, 255, 200, 0.008) 2px,
+        rgba(0, 255, 200, 0.008) 4px
+    );
+}
+
+/* ===================================================
+   RESPONSIVE — Tablet
+   =================================================== */
+@media (max-width: 1024px) {
+    .apikeys-grid {
         grid-template-columns: 1fr;
     }
-    .admin-sidebar {
-        display: none;
-    }
-    .admin-main {
-        padding: 1rem;
-    }
-    .dash-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+
     .editor-hud-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .dash-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .backup-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
+
+/* ===================================================
+   RESPONSIVE — Mobile
+   =================================================== */
+@media (max-width: 768px) {
+    /* Layout: single column */
+    .admin-app {
+        grid-template-columns: 1fr;
+    }
+
+    /* Show hamburger */
+    .mobile-menu-btn {
+        display: flex;
+    }
+
+    /* Sidebar: overlay on mobile */
+    .admin-sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: var(--sidebar-w);
+        height: 100%;
+        z-index: 99;
+        transform: translateX(-100%);
+        box-shadow: none;
+        padding-top: 0.5rem;
+    }
+    .admin-sidebar.open {
+        transform: translateX(0);
+        box-shadow: 4px 0 20px rgba(0,0,0,0.5);
+    }
+
+    /* Show close button in sidebar on mobile */
+    .sidebar-close-btn {
+        display: flex;
+    }
+
+    /* Main content full width */
+    .admin-main {
+        padding: 1rem;
+        grid-column: 1;
+        max-height: calc(100vh - var(--topbar-h));
+    }
+
+    /* Dashboard cards: 2 col on tablet done above, 1 col here */
+    .dash-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* Editor: single column */
+    .editor-row {
+        grid-template-columns: 1fr;
+    }
+
+    .editor-hud-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* All form rows stack vertically */
+    .add-form-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .add-form-row .editor-input {
+        min-width: 100%;
+    }
+    .add-form-row .editor-input.input-sm {
+        max-width: 100%;
+    }
+
+    .track-add-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .track-add-form .editor-input {
+        min-width: 100%;
+    }
+
+    /* Section items stack tighter */
+    .section-item {
+        flex-wrap: wrap;
+    }
+    .section-item-url {
+        flex: 100%;
+        order: 3;
+    }
+
+    .track-row {
+        flex-wrap: wrap;
+        gap: 0.4rem;
+    }
+    .track-album {
+        flex: 100%;
+        order: 4;
+    }
+
+    /* API keys cards single col */
+    .apikeys-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* Color picker row stack */
+    .color-picker-row {
+        flex-wrap: wrap;
+    }
+    .color-picker-row label {
+        min-width: 100%;
+    }
+
+    /* Font size row stack */
+    .font-size-row {
+        flex-wrap: wrap;
+    }
+    .font-size-row label {
+        min-width: 100%;
+    }
+
+    /* Backup grid single col */
+    .backup-grid {
+        grid-template-columns: 1fr;
+    }
+    .backup-card.highlight {
+        max-width: 100%;
+    }
+
+    /* Posts table: allow scroll */
+    .posts-table-wrap {
+        margin: 0 -1rem;
+        padding: 0 1rem;
+    }
+
+    /* Nav item row stack */
+    .nav-item {
+        flex-wrap: wrap;
+    }
+    .nav-item-url {
+        flex: 100%;
+        order: 3;
+    }
+
+    /* Link item row stack */
+    .link-item {
+        flex-wrap: wrap;
+    }
+    .link-item-url {
+        flex: 100%;
+        order: 3;
+    }
+
+    /* Editor actions stack */
+    .editor-actions {
+        flex-direction: column;
+    }
+    .editor-actions .action-btn {
+        width: 100%;
+        text-align: center;
+    }
+
+    /* Section heading row stack */
+    .section-heading-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.8rem;
+    }
+
+    /* Topbar adjustments */
+    .topbar-section {
+        display: none;
+    }
+    .topbar-divider {
+        display: none;
+    }
+    .topbar-user {
+        font-size: 0.6rem;
+    }
+}
+
+/* ===================================================
+   RESPONSIVE — Small Mobile
+   =================================================== */
+@media (max-width: 480px) {
+    .dash-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .editor-hud-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .admin-main {
+        padding: 0.8rem;
+    }
+
+    .section-heading {
+        font-size: 0.85rem;
+        letter-spacing: 2px;
+    }
+
+    .login-box {
+        padding: 1.5rem;
+    }
+
+    .admin-notification {
+        right: 10px;
+        left: 10px;
+        max-width: none;
+        font-size: 0.65rem;
+        padding: 0.6rem 1rem;
+    }
+}
+
+/* ===================================================
+   UTILITY CLASSES
+   =================================================== */
+.hidden { display: none !important; }
+.flex-1 { flex: 1; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mt-3 { margin-top: 1.5rem; }
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mb-3 { margin-bottom: 1.5rem; }
+.gap-sm { gap: 0.4rem; }
+.gap-md { gap: 0.8rem; }
+.gap-lg { gap: 1.2rem; }
diff --git a/index.html b/index.html
index a4b9de6..4e4ebf3 100644
--- a/index.html
+++ b/index.html
@@ -523,19 +523,19 @@
                     <form class="contact-form" id="contactForm">
                         <div class="form-group">
                             <label class="form-label">CALLSIGN</label>
-                            <input type="text" class="form-input" placeholder="Enter your name..." required>
+                            <input type="text" class="form-input" id="contactName" placeholder="Enter your name..." required>
                         </div>
                         <div class="form-group">
                             <label class="form-label">FREQUENCY</label>
-                            <input type="email" class="form-input" placeholder="your@email.com" required>
+                            <input type="email" class="form-input" id="contactEmail" placeholder="your@email.com" required>
                         </div>
                         <div class="form-group">
                             <label class="form-label">SUBJECT</label>
-                            <input type="text" class="form-input" placeholder="Transmission subject...">
+                            <input type="text" class="form-input" id="contactSubject" placeholder="Transmission subject...">
                         </div>
                         <div class="form-group">
                             <label class="form-label">MESSAGE PAYLOAD</label>
-                            <textarea class="form-input form-textarea" placeholder="Enter your message..." rows="5" required></textarea>
+                            <textarea class="form-input form-textarea" id="contactMessage" placeholder="Enter your message..." rows="5" required></textarea>
                         </div>
                         <button type="submit" class="form-submit">
                             <span class="submit-text">TRANSMIT</span>
diff --git a/js/admin.js b/js/admin.js
index ced6d9a..489369a 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -1,461 +1,1554 @@
-/* ===================================================
-   JAESWIFT — Admin Panel JS
-   =================================================== */
-const AdminApp = (() => {
-    const API = window.location.hostname === 'localhost' ? 'http://localhost:5000' : '/api';
-    let token = localStorage.getItem('jaeswift_token') || '';
+/* ═══════════════════════════════════════════════════════════════
+ *  JAESWIFT.XYZ — Admin Panel Controller
+ *  Complete admin application object
+ *  ═══════════════════════════════════════════════════════════════ */
 
-    // ─── Auth ───
-    function headers() {
-        return { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token };
-    }
+const AdminApp = {
+    token: localStorage.getItem('admin_token'),
+    API: '/api',
+    currentSection: 'section-dashboard',
+    homepageData: null,
+    servicesData: [],
+    navData: [],
+    linksData: [],
+    themeDefaults: {
+        accent: '#00ffc8',
+        bg: '#0a0e17',
+        text: '#e0e0e0',
+        scanlines: true,
+        particles: true,
+        glitch: false,
+        grid: true,
+        fontSize: 16
+    },
 
-    async function login(e) {
+    /* ───────────────────────── AUTH ───────────────────────── */
+
+    init() {
+        // Login form
+        const loginForm = document.getElementById('loginForm');
+        if (loginForm) {
+            loginForm.addEventListener('submit', (e) => this.login(e));
+        }
+
+        // Check auth state
+        if (this.checkAuth()) {
+            this.showApp();
+            this.loadDashboard();
+        } else {
+            this.showLogin();
+        }
+
+        // Mobile hamburger
+        const mobileBtn = document.getElementById('mobileMenuBtn');
+        if (mobileBtn) {
+            mobileBtn.addEventListener('click', () => this.toggleSidebar());
+        }
+
+        // Sidebar overlay close
+        const overlay = document.getElementById('sidebarOverlay');
+        if (overlay) {
+            overlay.addEventListener('click', () => this.toggleSidebar());
+        }
+
+        // Editor: auto-slug on title input
+        const editTitle = document.getElementById('editTitle');
+        if (editTitle) {
+            editTitle.addEventListener('input', () => this.autoSlug());
+        }
+
+        // Editor: live preview on content input
+        const editContent = document.getElementById('editContent');
+        if (editContent) {
+            editContent.addEventListener('input', () => this.updatePreview());
+        }
+
+        // Editor toolbar buttons
+        document.querySelectorAll('[data-action]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.insertMarkdown(btn.getAttribute('data-action'));
+            });
+        });
+
+        // Operator HUD sliders
+        ['editEnergy', 'editMotivation', 'editFocus', 'editDifficulty'].forEach(id => {
+            const slider = document.getElementById(id);
+            if (slider) {
+                const valId = 'val' + id.replace('edit', '');
+                const valEl = document.getElementById(valId);
+                if (valEl) valEl.textContent = slider.value;
+                slider.addEventListener('input', () => {
+                    if (valEl) valEl.textContent = slider.value;
+                });
+            }
+        });
+
+        // Theme colour sync
+        ['Accent', 'Bg', 'Text'].forEach(name => {
+            const picker = document.getElementById('theme' + name);
+            const hex = document.getElementById('theme' + name + 'Hex');
+            if (picker && hex) {
+                picker.addEventListener('input', () => {
+                    hex.value = picker.value;
+                });
+                hex.addEventListener('input', () => {
+                    if (/^#[0-9a-fA-F]{6}$/.test(hex.value)) {
+                        picker.value = hex.value;
+                    }
+                });
+            }
+        });
+
+        // Theme font size slider
+        const fontSlider = document.getElementById('themeFontSize');
+        const valFont = document.getElementById('valFontSize');
+        if (fontSlider && valFont) {
+            valFont.textContent = fontSlider.value;
+            fontSlider.addEventListener('input', () => {
+                valFont.textContent = fontSlider.value;
+            });
+        }
+    },
+
+    async login(e) {
         e.preventDefault();
-        const user = document.getElementById('loginUser').value;
+        const user = document.getElementById('loginUser').value.trim();
         const pass = document.getElementById('loginPass').value;
         const errEl = document.getElementById('loginError');
         errEl.textContent = '';
+
         try {
-            const r = await fetch(API + '/auth/login', {
+            const res = await fetch(this.API + '/auth', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ username: user, password: pass })
             });
-            const d = await r.json();
-            if (d.token) {
-                token = d.token;
-                localStorage.setItem('jaeswift_token', token);
-                showApp();
+            const data = await res.json();
+            if (res.ok && data.token) {
+                this.token = data.token;
+                localStorage.setItem('admin_token', this.token);
+                this.showApp();
+                this.loadDashboard();
             } else {
-                errEl.textContent = 'ACCESS DENIED: ' + (d.error || 'Invalid credentials');
+                errEl.textContent = data.error || 'Authentication failed';
             }
-        } catch {
-            errEl.textContent = 'CONNECTION FAILED';
+        } catch (err) {
+            errEl.textContent = 'Connection error: ' + err.message;
         }
-    }
+    },
 
-    function logout() {
-        token = '';
-        localStorage.removeItem('jaeswift_token');
-        document.getElementById('adminApp').style.display = 'none';
-        document.getElementById('loginScreen').style.display = '';
-    }
+    logout() {
+        this.token = null;
+        localStorage.removeItem('admin_token');
+        this.showLogin();
+    },
 
-    async function checkAuth() {
-        if (!token) return false;
-        try {
-            const r = await fetch(API + '/auth/check', { headers: headers() });
-            const d = await r.json();
-            return d.valid === true;
-        } catch { return false; }
-    }
+    checkAuth() {
+        return !!this.token;
+    },
 
-    async function showApp() {
-        document.getElementById('loginScreen').style.display = 'none';
-        document.getElementById('adminApp').style.display = '';
-        loadDashboard();
-    }
+    authHeaders() {
+        return {
+            'Authorization': 'Bearer ' + this.token,
+            'Content-Type': 'application/json'
+        };
+    },
 
-    // ─── Section Switching ───
-    function showSection(name) {
-        document.querySelectorAll('.admin-section').forEach(s => s.style.display = 'none');
-        const target = document.getElementById('section-' + name);
-        if (target) target.style.display = '';
+    showLogin() {
+        const login = document.getElementById('loginScreen');
+        const app = document.getElementById('adminApp');
+        if (login) login.style.display = 'flex';
+        if (app) app.style.display = 'none';
+    },
 
-        document.querySelectorAll('.sidebar-link').forEach(l => l.classList.remove('active'));
-        const link = document.querySelector('.sidebar-link[data-section="' + name + '"]');
-        if (link) link.classList.add('active');
+    showApp() {
+        const login = document.getElementById('loginScreen');
+        const app = document.getElementById('adminApp');
+        if (login) login.style.display = 'none';
+        if (app) app.style.display = 'flex';
+    },
 
-        const titles = { dashboard: 'DASHBOARD', posts: 'POSTS', editor: 'EDITOR', tracks: 'TRACKS', settings: 'SETTINGS' };
-        document.getElementById('topbarSection').textContent = titles[name] || name.toUpperCase();
+    /* ─────────────────────── NAVIGATION ─────────────────────── */
 
-        if (name === 'dashboard') loadDashboard();
-        if (name === 'posts') loadPosts();
-        if (name === 'tracks') loadTracks();
-        if (name === 'settings') loadSettings();
-        if (name === 'editor') {
-            if (!document.getElementById('editSlugOriginal').value) {
-                document.getElementById('editorHeading').textContent = 'NEW TRANSMISSION';
-            }
+    showSection(name) {
+        // Hide all sections
+        document.querySelectorAll('[id^="section-"]').forEach(s => {
+            s.style.display = 'none';
+        });
+
+        // Show target
+        const target = document.getElementById(name);
+        if (target) target.style.display = 'block';
+        this.currentSection = name;
+
+        // Update sidebar active
+        document.querySelectorAll('.sidebar a, .sidebar .nav-link').forEach(a => {
+            a.classList.remove('active');
+        });
+        const activeLink = document.querySelector(`[onclick*="'${name}'"]`);
+        if (activeLink) activeLink.classList.add('active');
+
+        // Update topbar title
+        const titleMap = {
+            'section-dashboard': 'Dashboard',
+            'section-posts': 'Posts',
+            'section-editor': 'Editor',
+            'section-tracks': 'Tracks',
+            'section-settings': 'Settings',
+            'section-homepage': 'Homepage',
+            'section-services': 'Services',
+            'section-navigation': 'Navigation',
+            'section-links': 'Links',
+            'section-apikeys': 'API Keys',
+            'section-theme': 'Theme',
+            'section-seo': 'SEO',
+            'section-contact': 'Contact',
+            'section-backups': 'Backups'
+        };
+        const topTitle = document.getElementById('topbarTitle') || document.querySelector('.topbar-title');
+        if (topTitle) topTitle.textContent = titleMap[name] || name.replace('section-', '').toUpperCase();
+
+        // Load data for section
+        switch (name) {
+            case 'section-dashboard': this.loadDashboard(); break;
+            case 'section-posts': this.loadPosts(); break;
+            case 'section-tracks': this.loadTracks(); break;
+            case 'section-settings': this.loadSettings(); break;
+            case 'section-homepage': this.loadHomepage(); break;
+            case 'section-services': this.loadServices(); break;
+            case 'section-navigation': this.loadNavigation(); break;
+            case 'section-links': this.loadLinks(); break;
+            case 'section-apikeys': this.loadApiKeys(); break;
+            case 'section-theme': this.loadTheme(); break;
+            case 'section-seo': this.loadSeo(); break;
+            case 'section-contact': this.loadContactSettings(); break;
         }
-    }
 
-    // ─── Dashboard ───
-    async function loadDashboard() {
+        // Close mobile sidebar
+        const sidebar = document.querySelector('.sidebar');
+        if (sidebar) sidebar.classList.remove('open');
+        const sOverlay = document.getElementById('sidebarOverlay');
+        if (sOverlay) sOverlay.classList.remove('active');
+    },
+
+    toggleSidebar() {
+        const sidebar = document.querySelector('.sidebar');
+        const overlay = document.getElementById('sidebarOverlay');
+        if (sidebar) sidebar.classList.toggle('open');
+        if (overlay) overlay.classList.toggle('active');
+    },
+
+    /* ─────────────────── NOTIFICATIONS ─────────────────── */
+
+    notify(msg, type = 'success') {
+        const container = document.getElementById('notifications') || document.body;
+        const div = document.createElement('div');
+        div.className = 'notification notification-' + type;
+        div.innerHTML = `<span class="notification-icon">${type === 'success' ? '✓' : type === 'error' ? '✗' : 'ℹ'}</span><span>${msg}</span>`;
+
+        // Styles
+        Object.assign(div.style, {
+            position: 'fixed',
+            top: '20px',
+            right: '20px',
+            padding: '14px 24px',
+            borderRadius: '4px',
+            color: '#fff',
+            fontFamily: 'JetBrains Mono, monospace',
+            fontSize: '13px',
+            zIndex: '10000',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            animation: 'slideIn 0.3s ease',
+            border: '1px solid',
+            backdropFilter: 'blur(10px)',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.5)'
+        });
+
+        if (type === 'success') {
+            div.style.background = 'rgba(0,255,200,0.15)';
+            div.style.borderColor = '#00ffc8';
+        } else if (type === 'error') {
+            div.style.background = 'rgba(255,50,50,0.15)';
+            div.style.borderColor = '#ff3232';
+        } else {
+            div.style.background = 'rgba(0,150,255,0.15)';
+            div.style.borderColor = '#0096ff';
+        }
+
+        container.appendChild(div);
+        setTimeout(() => {
+            div.style.opacity = '0';
+            div.style.transition = 'opacity 0.3s ease';
+            setTimeout(() => div.remove(), 300);
+        }, 3000);
+    },
+
+    /* ─────────────────── DASHBOARD ─────────────────── */
+
+    async loadDashboard() {
         try {
-            const [posts, tracks, stats, services, threats] = await Promise.all([
-                fetch(API + '/posts').then(r => r.json()),
-                fetch(API + '/nowplaying').then(r => r.json()).catch(() => null),
-                fetch(API + '/stats').then(r => r.json()),
-                fetch(API + '/services').then(r => r.json()).catch(() => []),
-                fetch(API + '/threats').then(r => r.json()).catch(() => []),
+            const [statsRes, postsRes, tracksRes, servicesRes, threatsRes] = await Promise.all([
+                fetch(this.API + '/stats', { headers: this.authHeaders() }),
+                fetch(this.API + '/posts', { headers: this.authHeaders() }),
+                fetch(this.API + '/tracks', { headers: this.authHeaders() }),
+                fetch(this.API + '/services', { headers: this.authHeaders() }),
+                fetch(this.API + '/threats', { headers: this.authHeaders() })
             ]);
 
-            // Fetch tracks count
-            let trackCount = '--';
-            try {
-                const tr = await fetch(API + '/tracks');
-                if (tr.ok) { trackCount = (await tr.json()).length; }
-            } catch {
-                // tracks endpoint might not exist, try loading from data
-                trackCount = '~35';
+            // Stats
+            if (statsRes.ok) {
+                const stats = await statsRes.json();
+                const cpu = document.getElementById('dashCPU');
+                const mem = document.getElementById('dashMEM');
+                const disk = document.getElementById('dashDISK');
+                if (cpu) cpu.textContent = (stats.cpu_percent || stats.cpu || 0) + '%';
+                if (mem) mem.textContent = (stats.memory_percent || stats.memory || 0) + '%';
+                if (disk) disk.textContent = (stats.disk_percent || stats.disk || 0) + '%';
             }
 
-            document.getElementById('dashPosts').textContent = posts.length;
-            document.getElementById('dashWords').textContent = posts.reduce((sum, p) => sum + (p.word_count || 0), 0).toLocaleString();
-            document.getElementById('dashTracks').textContent = trackCount;
-            document.getElementById('dashCPU').textContent = Math.round(stats.cpu_percent) + '%';
-            document.getElementById('dashMem').textContent = Math.round(stats.memory_percent) + '%';
-            document.getElementById('dashDisk').textContent = stats.disk_percent + '%';
+            // Posts count + word count
+            if (postsRes.ok) {
+                const posts = await postsRes.json();
+                const arr = Array.isArray(posts) ? posts : (posts.posts || []);
+                const dashPosts = document.getElementById('dashPosts');
+                const dashWords = document.getElementById('dashWords');
+                if (dashPosts) dashPosts.textContent = arr.length;
+                if (dashWords) {
+                    const totalWords = arr.reduce((sum, p) => sum + (p.word_count || 0), 0);
+                    dashWords.textContent = totalWords.toLocaleString();
+                }
+            }
 
-            // Services
-            const svcEl = document.getElementById('dashServices');
-            svcEl.innerHTML = services.map(s => `
-                <div class="service-card ${s.status}">
-                    <span class="service-dot">${s.status === 'online' ? '●' : '○'}</span>
-                    <span class="service-name">${s.name}</span>
-                    <span class="service-ms">${s.response_time_ms}ms</span>
-                </div>
-            `).join('');
+            // Tracks count
+            if (tracksRes.ok) {
+                const tracks = await tracksRes.json();
+                const arr = Array.isArray(tracks) ? tracks : (tracks.tracks || []);
+                const dashTracks = document.getElementById('dashTracks');
+                if (dashTracks) dashTracks.textContent = arr.length;
+            }
+
+            // Services grid
+            if (servicesRes.ok) {
+                const services = await servicesRes.json();
+                const arr = Array.isArray(services) ? services : (services.services || []);
+                const grid = document.getElementById('dashServicesGrid');
+                if (grid) {
+                    grid.innerHTML = arr.map(svc => {
+                        const isUp = svc.status === 'up' || svc.status === 'online' || svc.status === true;
+                        const dotColor = isUp ? '#00ffc8' : '#ff3232';
+                        const statusText = isUp ? 'ONLINE' : 'OFFLINE';
+                        return `<div class="service-card">
+                            <span class="service-dot" style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${dotColor};box-shadow:0 0 8px ${dotColor};margin-right:8px;"></span>
+                            <span class="service-name">${this.escapeHtml(svc.name || svc.service || 'Unknown')}</span>
+                            <span class="service-status" style="color:${dotColor};margin-left:auto;font-size:11px;">${statusText}</span>
+                        </div>`;
+                    }).join('');
+                }
+            }
 
             // Threats
-            const threatEl = document.getElementById('dashThreats');
-            threatEl.innerHTML = threats.length ? threats.map(t => `
-                <div class="threat-row">
-                    <span class="threat-id">${t.id}</span>
-                    <span class="threat-summary">${t.summary}</span>
-                    <span class="threat-cvss cvss-${t.cvss >= 9 ? 'crit' : t.cvss >= 7 ? 'high' : t.cvss >= 4 ? 'med' : 'low'}">${t.cvss || '?'}</span>
-                </div>
-            `).join('') : '<span class="no-data">No threats detected</span>';
-
-        } catch (e) {
-            console.error('Dashboard load error:', e);
-        }
-    }
-
-    // ─── Posts ───
-    async function loadPosts() {
-        const posts = await fetch(API + '/posts').then(r => r.json());
-        posts.sort((a, b) => new Date(b.date) - new Date(a.date));
-        const tbody = document.getElementById('postsTableBody');
-        tbody.innerHTML = posts.map(p => `
-            <tr>
-                <td>${p.date || '--'}</td>
-                <td><a href="post.html?slug=${p.slug}" target="_blank" class="post-link">${p.title}</a></td>
-                <td>${(p.tags || []).map(t => '<span class="tag-pill">' + t + '</span>').join(' ')}</td>
-                <td>${p.word_count || 0}</td>
-                <td><span class="threat-badge threat-${p.threat_level || 'low'}">${(p.threat_level || 'low').toUpperCase()}</span></td>
-                <td class="actions-cell">
-                    <button class="action-sm edit" onclick="AdminApp.editPost('${p.slug}')">EDIT</button>
-                    <button class="action-sm delete" onclick="AdminApp.deletePost('${p.slug}')">DEL</button>
-                </td>
-            </tr>
-        `).join('');
-    }
-
-    async function editPost(slug) {
-        const post = await fetch(API + '/posts/' + slug).then(r => r.json());
-        document.getElementById('editSlugOriginal').value = slug;
-        document.getElementById('edTitle').value = post.title || '';
-        document.getElementById('edSlug').value = post.slug || '';
-        document.getElementById('edDate').value = post.date || '';
-        document.getElementById('edTime').value = post.time || '00:00';
-        document.getElementById('edTags').value = (post.tags || []).join(', ');
-        document.getElementById('edExcerpt').value = post.excerpt || '';
-        document.getElementById('edContent').value = post.content || '';
-        document.getElementById('edMood').value = post.mood || 'focused';
-        document.getElementById('edEnergy').value = post.energy || 3;
-        document.getElementById('edEnergyVal').textContent = post.energy || 3;
-        document.getElementById('edMotivation').value = post.motivation || 3;
-        document.getElementById('edMotivationVal').textContent = post.motivation || 3;
-        document.getElementById('edFocus').value = post.focus || 3;
-        document.getElementById('edFocusVal').textContent = post.focus || 3;
-        document.getElementById('edDifficulty').value = post.difficulty || 3;
-        document.getElementById('edDifficultyVal').textContent = post.difficulty || 3;
-        document.getElementById('edCoffee').value = post.coffee || 2;
-        document.getElementById('edBPM').value = post.bpm || post.heart_rate || 72;
-        document.getElementById('edThreat').value = post.threat_level || 'low';
-        document.getElementById('editorHeading').textContent = 'EDIT TRANSMISSION';
-        updateWordCount();
-        updatePreview();
-        showSection('editor');
-    }
-
-    async function savePost(e) {
-        e.preventDefault();
-        const slugOrig = document.getElementById('editSlugOriginal').value;
-        const title = document.getElementById('edTitle').value.trim();
-        const slug = document.getElementById('edSlug').value.trim() || title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
-        const data = {
-            title,
-            slug,
-            date: document.getElementById('edDate').value || new Date().toISOString().split('T')[0],
-            time: document.getElementById('edTime').value || '00:00',
-            time_written: document.getElementById('edTime').value || '00:00',
-            tags: document.getElementById('edTags').value.split(',').map(t => t.trim()).filter(Boolean),
-            excerpt: document.getElementById('edExcerpt').value.trim(),
-            content: document.getElementById('edContent').value,
-            mood: document.getElementById('edMood').value,
-            energy: parseInt(document.getElementById('edEnergy').value),
-            motivation: parseInt(document.getElementById('edMotivation').value),
-            focus: parseInt(document.getElementById('edFocus').value),
-            difficulty: parseInt(document.getElementById('edDifficulty').value),
-            coffee: parseInt(document.getElementById('edCoffee').value),
-            bpm: parseInt(document.getElementById('edBPM').value),
-            heart_rate: parseInt(document.getElementById('edBPM').value),
-            threat_level: document.getElementById('edThreat').value,
-        };
-
-        const method = slugOrig ? 'PUT' : 'POST';
-        const url = slugOrig ? API + '/posts/' + slugOrig : API + '/posts';
-
-        try {
-            const r = await fetch(url, { method, headers: headers(), body: JSON.stringify(data) });
-            if (r.ok) {
-                clearEditor();
-                showSection('posts');
-                showNotification('TRANSMISSION ' + (slugOrig ? 'UPDATED' : 'SENT'));
-            } else {
-                const err = await r.json();
-                showNotification('ERROR: ' + (err.message || r.status), 'error');
-            }
-        } catch (e) {
-            showNotification('TRANSMISSION FAILED: ' + e.message, 'error');
-        }
-    }
-
-    async function deletePost(slug) {
-        if (!confirm('Delete post "' + slug + '"? This cannot be undone.')) return;
-        const r = await fetch(API + '/posts/' + slug, { method: 'DELETE', headers: headers() });
-        if (r.ok) {
-            loadPosts();
-            showNotification('POST DELETED');
-        }
-    }
-
-    function clearEditor() {
-        document.getElementById('editSlugOriginal').value = '';
-        document.getElementById('editorForm').reset();
-        document.getElementById('edEnergyVal').textContent = '3';
-        document.getElementById('edMotivationVal').textContent = '3';
-        document.getElementById('edFocusVal').textContent = '3';
-        document.getElementById('edDifficultyVal').textContent = '3';
-        document.getElementById('edWordCount').textContent = '0 words';
-        document.getElementById('edPreview').innerHTML = '';
-        document.getElementById('editorHeading').textContent = 'NEW TRANSMISSION';
-    }
-
-    // ─── Markdown Helpers ───
-    function insertMD(before, after) {
-        const ta = document.getElementById('edContent');
-        const start = ta.selectionStart;
-        const end = ta.selectionEnd;
-        const sel = ta.value.substring(start, end);
-        ta.value = ta.value.substring(0, start) + before + sel + after + ta.value.substring(end);
-        ta.focus();
-        ta.selectionStart = start + before.length;
-        ta.selectionEnd = start + before.length + sel.length;
-        updateWordCount();
-        updatePreview();
-    }
-
-    function updateWordCount() {
-        const text = document.getElementById('edContent').value.trim();
-        const count = text ? text.split(/\s+/).length : 0;
-        document.getElementById('edWordCount').textContent = count + ' words';
-    }
-
-    function updatePreview() {
-        const md = document.getElementById('edContent').value;
-        document.getElementById('edPreview').innerHTML = renderMarkdown(md);
-    }
-
-    function renderMarkdown(md) {
-        let html = md
-            .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
-            .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
-            .replace(/^#### (.+)$/gm, '<h4>$1</h4>')
-            .replace(/^### (.+)$/gm, '<h3>$1</h3>')
-            .replace(/^## (.+)$/gm, '<h2>$1</h2>')
-            .replace(/^# (.+)$/gm, '<h1>$1</h1>')
-            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-            .replace(/\*(.+?)\*/g, '<em>$1</em>')
-            .replace(/^- (.+)$/gm, '<li>$1</li>')
-            .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
-            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
-            .replace(/^---$/gm, '<hr>')
-            .replace(/\n\n/g, '</p><p>')
-            .replace(/\n/g, '<br>');
-        return '<div class="post-rendered"><p>' + html + '</p></div>';
-    }
-
-    // ─── Tracks ───
-    async function loadTracks() {
-        try {
-            // Try fetching from tracks API endpoint
-            let tracks;
-            try {
-                const r = await fetch(API + '/tracks');
-                if (r.ok) {
-                    tracks = await r.json();
-                } else throw new Error();
-            } catch {
-                // Fallback: load from data file directly
-                tracks = [];
+            if (threatsRes.ok) {
+                const threats = await threatsRes.json();
+                const arr = Array.isArray(threats) ? threats : (threats.threats || threats.items || []);
+                const container = document.getElementById('dashThreats');
+                if (container) {
+                    if (arr.length === 0) {
+                        container.innerHTML = '<div class="threat-empty">No active threats detected ✓</div>';
+                    } else {
+                        container.innerHTML = arr.map(t => {
+                            const severity = (t.severity || t.level || 'low').toLowerCase();
+                            const sevColor = severity === 'critical' ? '#ff0040' : severity === 'high' ? '#ff6600' : severity === 'medium' ? '#ffaa00' : '#00ffc8';
+                            return `<div class="threat-item" style="border-left:3px solid ${sevColor};padding:8px 12px;margin-bottom:6px;background:rgba(255,255,255,0.03);">
+                                <div style="display:flex;justify-content:space-between;align-items:center;">
+                                    <strong style="color:${sevColor};">${this.escapeHtml(t.cve || t.id || t.name || 'Unknown')}</strong>
+                                    <span style="color:${sevColor};font-size:11px;text-transform:uppercase;">${severity}</span>
+                                </div>
+                                <div style="color:#888;font-size:12px;margin-top:4px;">${this.escapeHtml(t.description || t.summary || '')}</div>
+                            </div>`;
+                        }).join('');
+                    }
+                }
             }
 
-            const list = document.getElementById('tracksList');
-            if (!tracks.length) {
-                list.innerHTML = '<span class="no-data">No tracks loaded — API endpoint /api/tracks may need adding.</span>';
+        } catch (err) {
+            console.error('Dashboard load error:', err);
+        }
+    },
+
+    /* ─────────────────── POSTS ─────────────────── */
+
+    async loadPosts() {
+        try {
+            const res = await fetch(this.API + '/posts', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load posts');
+            const data = await res.json();
+            const posts = Array.isArray(data) ? data : (data.posts || []);
+
+            const tbody = document.getElementById('postsTableBody');
+            if (!tbody) return;
+
+            if (posts.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#555;">No posts yet</td></tr>';
                 return;
             }
-            list.innerHTML = tracks.map((t, i) => `
-                <div class="track-row">
-                    <span class="track-num">${String(i + 1).padStart(2, '0')}</span>
-                    <span class="track-title">${t.track}</span>
-                    <span class="track-artist">${t.artist}</span>
-                    <span class="track-album">${t.album || ''}</span>
-                    <button class="action-sm delete" onclick="AdminApp.deleteTrack(${i})">✕</button>
-                </div>
-            `).join('');
-        } catch (e) {
-            console.error('Track load error:', e);
+
+            // Sort by date descending
+            posts.sort((a, b) => new Date(b.date || 0) - new Date(a.date || 0));
+
+            tbody.innerHTML = posts.map(p => {
+                const date = p.date ? new Date(p.date).toLocaleDateString('en-GB') : '—';
+                const words = p.word_count || 0;
+                return `<tr>
+                    <td>${this.escapeHtml(p.title || 'Untitled')}</td>
+                    <td><code>${this.escapeHtml(p.slug || '')}</code></td>
+                    <td>${date}</td>
+                    <td>${words.toLocaleString()}</td>
+                    <td class="post-actions">
+                        <button class="btn-sm btn-edit" onclick="AdminApp.editPost('${this.escapeHtml(p.slug)}')" title="Edit">✎</button>
+                        <button class="btn-sm btn-delete" onclick="AdminApp.deletePost('${this.escapeHtml(p.slug)}')" title="Delete">✗</button>
+                    </td>
+                </tr>`;
+            }).join('');
+        } catch (err) {
+            console.error('Posts load error:', err);
+            this.notify('Failed to load posts', 'error');
         }
-    }
+    },
 
-    function showAddTrack() {
-        const f = document.getElementById('trackAddForm');
-        f.style.display = f.style.display === 'none' ? 'flex' : 'none';
-    }
-
-    async function addTrack() {
-        const artist = document.getElementById('trackArtist').value.trim();
-        const track = document.getElementById('trackTitle').value.trim();
-        const album = document.getElementById('trackAlbum').value.trim();
-        if (!artist || !track) return;
+    newPost() {
+        this.clearEditor();
+        const heading = document.getElementById('editorTitle');
+        if (heading) heading.textContent = 'NEW POST';
+        this.showSection('section-editor');
+    },
 
+    async editPost(slug) {
         try {
-            const r = await fetch(API + '/tracks', {
-                method: 'POST',
-                headers: headers(),
-                body: JSON.stringify({ artist, track, album })
+            const res = await fetch(this.API + '/posts/' + encodeURIComponent(slug), { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load post');
+            const post = await res.json();
+
+            const heading = document.getElementById('editorTitle');
+            if (heading) heading.textContent = 'EDIT POST';
+
+            document.getElementById('postId').value = post.slug || slug;
+            document.getElementById('editTitle').value = post.title || '';
+            document.getElementById('editSlug').value = post.slug || '';
+
+            // Parse date and time
+            if (post.date) {
+                const dt = new Date(post.date);
+                const dateStr = dt.toISOString().split('T')[0];
+                const timeStr = dt.toTimeString().slice(0, 5);
+                document.getElementById('editDate').value = dateStr;
+                document.getElementById('editTime').value = timeStr;
+            } else {
+                document.getElementById('editDate').value = '';
+                document.getElementById('editTime').value = '';
+            }
+
+            document.getElementById('editTags').value = Array.isArray(post.tags) ? post.tags.join(', ') : (post.tags || '');
+            document.getElementById('editExcerpt').value = post.excerpt || '';
+            document.getElementById('editContent').value = post.content || '';
+
+            // Operator HUD fields
+            const moodEl = document.getElementById('editMood');
+            if (moodEl) moodEl.value = post.mood || 'focused';
+
+            const hudFields = [
+                { id: 'editEnergy', key: 'energy', valId: 'valEnergy' },
+                { id: 'editMotivation', key: 'motivation', valId: 'valMotivation' },
+                { id: 'editFocus', key: 'focus', valId: 'valFocus' },
+                { id: 'editDifficulty', key: 'difficulty', valId: 'valDifficulty' }
+            ];
+            hudFields.forEach(f => {
+                const el = document.getElementById(f.id);
+                const valEl = document.getElementById(f.valId);
+                if (el) {
+                    el.value = post[f.key] || 3;
+                    if (valEl) valEl.textContent = el.value;
+                }
             });
-            if (r.ok) {
-                document.getElementById('trackArtist').value = '';
-                document.getElementById('trackTitle').value = '';
-                document.getElementById('trackAlbum').value = '';
-                loadTracks();
-                showNotification('TRACK ADDED');
-            }
-        } catch (e) {
-            showNotification('Failed to add track', 'error');
+
+            const coffeeEl = document.getElementById('editCoffee');
+            if (coffeeEl) coffeeEl.value = post.coffee || 0;
+
+            const bpmEl = document.getElementById('editBPM');
+            if (bpmEl) bpmEl.value = post.bpm || 0;
+
+            const threatEl = document.getElementById('editThreat');
+            if (threatEl) threatEl.value = post.threat_level || 'low';
+
+            this.updatePreview();
+            this.showSection('section-editor');
+        } catch (err) {
+            console.error('Edit post error:', err);
+            this.notify('Failed to load post for editing', 'error');
         }
-    }
+    },
 
-    async function deleteTrack(index) {
+    async deletePost(slug) {
+        if (!confirm('Delete post "' + slug + '"? This cannot be undone.')) return;
         try {
-            const r = await fetch(API + '/tracks/' + index, { method: 'DELETE', headers: headers() });
-            if (r.ok) loadTracks();
-        } catch {}
-    }
+            const res = await fetch(this.API + '/posts/' + encodeURIComponent(slug), {
+                method: 'DELETE',
+                headers: this.authHeaders()
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            this.notify('Post deleted');
+            this.loadPosts();
+        } catch (err) {
+            console.error('Delete post error:', err);
+            this.notify('Failed to delete post', 'error');
+        }
+    },
 
-    // ─── Settings ───
-    async function loadSettings() {
-        try {
-            const settings = await fetch(API + '/settings').then(r => r.json());
-            if (settings.weather !== undefined) document.getElementById('setWeather').checked = settings.weather;
-            if (settings.nowplaying !== undefined) document.getElementById('setNowPlaying').checked = settings.nowplaying;
-            if (settings.threats !== undefined) document.getElementById('setThreats').checked = settings.threats;
-            if (settings.terminal !== undefined) document.getElementById('setTerminal').checked = settings.terminal;
-        } catch {}
-    }
+    async savePost() {
+        const postId = document.getElementById('postId').value;
+        const title = document.getElementById('editTitle').value.trim();
+        const slug = document.getElementById('editSlug').value.trim();
+        const date = document.getElementById('editDate').value;
+        const time = document.getElementById('editTime').value || '00:00';
+        const tags = document.getElementById('editTags').value;
+        const excerpt = document.getElementById('editExcerpt').value.trim();
+        const content = document.getElementById('editContent').value;
 
-    async function saveSettings(e) {
-        e.preventDefault();
-        const data = {
-            weather: document.getElementById('setWeather').checked,
-            nowplaying: document.getElementById('setNowPlaying').checked,
-            threats: document.getElementById('setThreats').checked,
-            terminal: document.getElementById('setTerminal').checked,
+        if (!title) { this.notify('Title is required', 'error'); return; }
+        if (!slug) { this.notify('Slug is required', 'error'); return; }
+        if (!content) { this.notify('Content is required', 'error'); return; }
+
+        // Build datetime
+        const datetime = date ? date + 'T' + time + ':00' : new Date().toISOString();
+
+        // Word count
+        const wordCount = content.trim().split(/\s+/).filter(w => w.length > 0).length;
+
+        // Parse tags
+        const tagList = tags.split(',').map(t => t.trim()).filter(t => t.length > 0);
+
+        // Operator HUD
+        const mood = document.getElementById('editMood')?.value || 'focused';
+        const energy = parseInt(document.getElementById('editEnergy')?.value || 3);
+        const motivation = parseInt(document.getElementById('editMotivation')?.value || 3);
+        const focus = parseInt(document.getElementById('editFocus')?.value || 3);
+        const difficulty = parseInt(document.getElementById('editDifficulty')?.value || 3);
+        const coffee = parseInt(document.getElementById('editCoffee')?.value || 0);
+        const bpm = parseInt(document.getElementById('editBPM')?.value || 0);
+        const threatLevel = document.getElementById('editThreat')?.value || 'low';
+
+        const payload = {
+            title, slug, date: datetime, tags: tagList, excerpt, content,
+            word_count: wordCount,
+            mood, energy, motivation, focus, difficulty, coffee, bpm, threat_level: threatLevel
         };
-        await fetch(API + '/settings', { method: 'PUT', headers: headers(), body: JSON.stringify(data) });
-        showNotification('SETTINGS SAVED');
-    }
 
-    // ─── Notifications ───
-    function showNotification(msg, type = 'success') {
-        let notif = document.querySelector('.admin-notification');
-        if (!notif) {
-            notif = document.createElement('div');
-            notif.className = 'admin-notification';
-            document.body.appendChild(notif);
+        const isEdit = !!postId;
+        const url = isEdit ? this.API + '/posts/' + encodeURIComponent(postId) : this.API + '/posts';
+        const method = isEdit ? 'PUT' : 'POST';
+
+        try {
+            const res = await fetch(url, {
+                method,
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) {
+                const errData = await res.json().catch(() => ({}));
+                throw new Error(errData.error || 'Save failed');
+            }
+            this.notify(isEdit ? 'Post updated' : 'Post created');
+            this.showSection('section-posts');
+        } catch (err) {
+            console.error('Save post error:', err);
+            this.notify('Failed to save: ' + err.message, 'error');
         }
-        notif.textContent = msg;
-        notif.className = 'admin-notification ' + type + ' show';
-        setTimeout(() => notif.classList.remove('show'), 3000);
-    }
+    },
 
-    // ─── Init ───
-    async function init() {
-        // Check if already authed
-        if (await checkAuth()) {
-            showApp();
-        }
+    cancelEdit() {
+        this.clearEditor();
+        this.showSection('section-posts');
+    },
 
-        // Login form
-        document.getElementById('loginForm').addEventListener('submit', login);
+    clearEditor() {
+        document.getElementById('postId').value = '';
+        document.getElementById('editTitle').value = '';
+        document.getElementById('editSlug').value = '';
+        document.getElementById('editDate').value = new Date().toISOString().split('T')[0];
+        document.getElementById('editTime').value = new Date().toTimeString().slice(0, 5);
+        document.getElementById('editTags').value = '';
+        document.getElementById('editExcerpt').value = '';
+        document.getElementById('editContent').value = '';
 
-        // Editor form
-        document.getElementById('editorForm').addEventListener('submit', savePost);
+        const preview = document.getElementById('editorPreview');
+        if (preview) preview.innerHTML = '';
 
-        // Settings form
-        document.getElementById('settingsForm').addEventListener('submit', saveSettings);
+        // Reset HUD
+        const moodEl = document.getElementById('editMood');
+        if (moodEl) moodEl.value = 'focused';
 
-        // Auto slug from title
-        document.getElementById('edTitle').addEventListener('input', (e) => {
-            const slugField = document.getElementById('edSlug');
-            if (!document.getElementById('editSlugOriginal').value) {
-                slugField.value = e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+        ['editEnergy', 'editMotivation', 'editFocus', 'editDifficulty'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el) {
+                el.value = 3;
+                const valId = 'val' + id.replace('edit', '');
+                const valEl = document.getElementById(valId);
+                if (valEl) valEl.textContent = '3';
             }
         });
 
-        // Content updates
-        document.getElementById('edContent').addEventListener('input', () => {
-            updateWordCount();
-            updatePreview();
+        const coffeeEl = document.getElementById('editCoffee');
+        if (coffeeEl) coffeeEl.value = 0;
+        const bpmEl = document.getElementById('editBPM');
+        if (bpmEl) bpmEl.value = 80;
+        const threatEl = document.getElementById('editThreat');
+        if (threatEl) threatEl.value = 'low';
+
+        const heading = document.getElementById('editorTitle');
+        if (heading) heading.textContent = 'NEW POST';
+    },
+
+    /* ─────────────────── EDITOR TOOLBAR ─────────────────── */
+
+    insertMarkdown(action) {
+        const textarea = document.getElementById('editContent');
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const selected = textarea.value.substring(start, end);
+        const before = textarea.value.substring(0, start);
+        const after = textarea.value.substring(end);
+        let insert = '';
+
+        switch (action) {
+            case 'bold':
+                insert = `**${selected || 'bold text'}**`;
+                break;
+            case 'italic':
+                insert = `*${selected || 'italic text'}*`;
+                break;
+            case 'strikethrough':
+                insert = `~~${selected || 'strikethrough'}~~`;
+                break;
+            case 'code':
+                insert = '`' + (selected || 'code') + '`';
+                break;
+            case 'code-block':
+                insert = '\n```\n' + (selected || 'code block') + '\n```\n';
+                break;
+            case 'h1':
+                insert = '\n# ' + (selected || 'Heading 1') + '\n';
+                break;
+            case 'h2':
+                insert = '\n## ' + (selected || 'Heading 2') + '\n';
+                break;
+            case 'h3':
+                insert = '\n### ' + (selected || 'Heading 3') + '\n';
+                break;
+            case 'link':
+                insert = selected ? `[${selected}](url)` : '[link text](url)';
+                break;
+            case 'image':
+                insert = selected ? `![${selected}](url)` : '![alt text](image-url)';
+                break;
+            case 'quote':
+                insert = '\n> ' + (selected || 'blockquote') + '\n';
+                break;
+            case 'list-ul':
+                if (selected) {
+                    insert = '\n' + selected.split('\n').map(l => '- ' + l).join('\n') + '\n';
+                } else {
+                    insert = '\n- Item 1\n- Item 2\n- Item 3\n';
+                }
+                break;
+            case 'list-ol':
+                if (selected) {
+                    insert = '\n' + selected.split('\n').map((l, i) => (i + 1) + '. ' + l).join('\n') + '\n';
+                } else {
+                    insert = '\n1. Item 1\n2. Item 2\n3. Item 3\n';
+                }
+                break;
+            case 'hr':
+                insert = '\n---\n';
+                break;
+            default:
+                insert = selected;
+        }
+
+        textarea.value = before + insert + after;
+        textarea.focus();
+        const newCursor = start + insert.length;
+        textarea.setSelectionRange(newCursor, newCursor);
+        this.updatePreview();
+    },
+
+    updatePreview() {
+        const content = document.getElementById('editContent')?.value || '';
+        const preview = document.getElementById('editorPreview');
+        if (!preview) return;
+
+        let html = this.escapeHtml(content);
+
+        // Code blocks (must process before inline code)
+        html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
+
+        // Inline code
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+        // Headers
+        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+        // Bold and italic
+        html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+        // Strikethrough
+        html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+        // Blockquotes
+        html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
+
+        // Horizontal rule
+        html = html.replace(/^---$/gm, '<hr>');
+
+        // Images
+        html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%;">');
+
+        // Links
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:#00ffc8;">$1</a>');
+
+        // Unordered lists
+        html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+        html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+
+        // Ordered lists
+        html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+
+        // Paragraphs: double newline
+        html = html.replace(/\n\n/g, '</p><p>');
+        html = '<p>' + html + '</p>';
+
+        // Single newlines to br (within paragraphs)
+        html = html.replace(/\n/g, '<br>');
+
+        // Clean empty paragraphs
+        html = html.replace(/<p><\/p>/g, '');
+
+        preview.innerHTML = html;
+    },
+
+    autoSlug() {
+        const title = document.getElementById('editTitle')?.value || '';
+        const slug = title
+            .toLowerCase()
+            .trim()
+            .replace(/[^a-z0-9\s-]/g, '')
+            .replace(/\s+/g, '-')
+            .replace(/-+/g, '-')
+            .replace(/^-|-$/g, '');
+        const slugEl = document.getElementById('editSlug');
+        if (slugEl) slugEl.value = slug;
+    },
+
+    /* ─────────────────── TRACKS ─────────────────── */
+
+    async loadTracks() {
+        try {
+            const res = await fetch(this.API + '/tracks', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load tracks');
+            const data = await res.json();
+            const tracks = Array.isArray(data) ? data : (data.tracks || []);
+
+            const container = document.getElementById('tracksList');
+            if (!container) return;
+
+            if (tracks.length === 0) {
+                container.innerHTML = '<div class="empty-state">No tracks in library</div>';
+                return;
+            }
+
+            container.innerHTML = tracks.map((t, i) => {
+                const coverHtml = t.cover
+                    ? `<img src="${this.escapeHtml(t.cover)}" alt="cover" style="width:40px;height:40px;border-radius:4px;object-fit:cover;margin-right:12px;">`
+                    : '<div style="width:40px;height:40px;border-radius:4px;background:#1a1f2e;margin-right:12px;display:flex;align-items:center;justify-content:center;color:#555;">♪</div>';
+                return `<div class="track-item" style="display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05);">
+                    ${coverHtml}
+                    <div style="flex:1;">
+                        <div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(t.artist || 'Unknown')} — ${this.escapeHtml(t.title || 'Untitled')}</div>
+                        <div style="font-size:12px;color:#555;">${this.escapeHtml(t.album || '')} ${t.genre ? '· ' + this.escapeHtml(t.genre) : ''}</div>
+                    </div>
+                    ${t.url ? `<a href="${this.escapeHtml(t.url)}" target="_blank" style="color:#00ffc8;margin-right:12px;font-size:12px;">▶</a>` : ''}
+                    <button class="btn-sm btn-delete" onclick="AdminApp.deleteTrack(${i})" title="Delete">✗</button>
+                </div>`;
+            }).join('');
+        } catch (err) {
+            console.error('Tracks load error:', err);
+            this.notify('Failed to load tracks', 'error');
+        }
+    },
+
+    async addTrack() {
+        const title = document.getElementById('trackTitle')?.value.trim();
+        const artist = document.getElementById('trackArtist')?.value.trim();
+        const album = document.getElementById('trackAlbum')?.value.trim();
+        const genre = document.getElementById('trackGenre')?.value.trim();
+        const url = document.getElementById('trackUrl')?.value.trim();
+        const cover = document.getElementById('trackCover')?.value.trim();
+
+        if (!title || !artist) {
+            this.notify('Title and artist are required', 'error');
+            return;
+        }
+
+        const payload = { title, artist, album, genre, url, cover };
+
+        try {
+            const res = await fetch(this.API + '/tracks', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Failed to add track');
+            this.notify('Track added');
+
+            // Clear inputs
+            ['trackTitle', 'trackArtist', 'trackAlbum', 'trackGenre', 'trackUrl', 'trackCover'].forEach(id => {
+                const el = document.getElementById(id);
+                if (el) el.value = '';
+            });
+
+            this.loadTracks();
+        } catch (err) {
+            console.error('Add track error:', err);
+            this.notify('Failed to add track', 'error');
+        }
+    },
+
+    async deleteTrack(index) {
+        if (!confirm('Delete this track?')) return;
+        try {
+            const res = await fetch(this.API + '/tracks/' + index, {
+                method: 'DELETE',
+                headers: this.authHeaders()
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            this.notify('Track deleted');
+            this.loadTracks();
+        } catch (err) {
+            console.error('Delete track error:', err);
+            this.notify('Failed to delete track', 'error');
+        }
+    },
+
+    /* ─────────────────── SETTINGS (WIDGET TOGGLES) ─────────────────── */
+
+    async loadSettings() {
+        try {
+            const res = await fetch(this.API + '/settings', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load settings');
+            const settings = await res.json();
+
+            // Set toggle states
+            document.querySelectorAll('[data-key]').forEach(toggle => {
+                const key = toggle.getAttribute('data-key');
+                if (settings.hasOwnProperty(key)) {
+                    toggle.checked = !!settings[key];
+                }
+            });
+        } catch (err) {
+            console.error('Settings load error:', err);
+            this.notify('Failed to load settings', 'error');
+        }
+    },
+
+    async saveSettings() {
+        const settings = {};
+        document.querySelectorAll('[data-key]').forEach(toggle => {
+            settings[toggle.getAttribute('data-key')] = toggle.checked;
         });
 
-        // Energy range display
-        document.getElementById('edEnergy').addEventListener('input', (e) => {
-            document.getElementById('edEnergyVal').textContent = e.target.value;
-        });
-        document.getElementById('edMotivation').addEventListener('input', (e) => {
-            document.getElementById('edMotivationVal').textContent = e.target.value;
-        });
-        document.getElementById('edFocus').addEventListener('input', (e) => {
-            document.getElementById('edFocusVal').textContent = e.target.value;
-        });
-        document.getElementById('edDifficulty').addEventListener('input', (e) => {
-            document.getElementById('edDifficultyVal').textContent = e.target.value;
-        });
+        try {
+            const res = await fetch(this.API + '/settings', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(settings)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Settings saved');
+        } catch (err) {
+            console.error('Save settings error:', err);
+            this.notify('Failed to save settings', 'error');
+        }
+    },
 
-        // Set today's date default
-        document.getElementById('edDate').value = new Date().toISOString().split('T')[0];
+    /* ─────────────────── HOMEPAGE ─────────────────── */
+
+    async loadHomepage() {
+        try {
+            const res = await fetch(this.API + '/homepage', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load homepage config');
+            const data = await res.json();
+            this.homepageData = data;
+
+            document.getElementById('heroTitle').value = data.hero_title || '';
+            document.getElementById('heroSubtitle').value = data.hero_subtitle || '';
+            document.getElementById('heroTagline').value = data.hero_tagline || '';
+            document.getElementById('aboutText').value = data.about_text || '';
+
+            this.renderHomepageSections(data.sections || []);
+        } catch (err) {
+            console.error('Homepage load error:', err);
+            this.notify('Failed to load homepage config', 'error');
+        }
+    },
+
+    renderHomepageSections(sections) {
+        const container = document.getElementById('homepageSections');
+        if (!container) return;
+
+        const defaultSections = [
+            { key: 'about', label: 'About', visible: true },
+            { key: 'blog', label: 'Blog', visible: true },
+            { key: 'dev-cards', label: 'Dev Cards', visible: true },
+            { key: 'links', label: 'Links', visible: true },
+            { key: 'contact', label: 'Contact', visible: true },
+            { key: 'terminal', label: 'Terminal', visible: true }
+        ];
+
+        const sectionList = sections.length > 0 ? sections : defaultSections;
+        if (this.homepageData) this.homepageData.sections = sectionList;
+
+        container.innerHTML = sectionList.map((s, i) => {
+            const key = s.key || s.name || s;
+            const label = s.label || s.name || key;
+            const visible = s.visible !== false;
+            return `<div class="section-item" data-section="${this.escapeHtml(key)}" style="display:flex;align-items:center;padding:10px;border:1px solid rgba(255,255,255,0.08);margin-bottom:6px;border-radius:4px;background:rgba(255,255,255,0.02);">
+                <span style="flex:1;color:#e0e0e0;font-weight:500;">${this.escapeHtml(label)}</span>
+                <label class="toggle-switch" style="margin-right:12px;">
+                    <input type="checkbox" ${visible ? 'checked' : ''} onchange="AdminApp.toggleHomepageSection('${this.escapeHtml(key)}', this.checked)">
+                    <span class="toggle-slider"></span>
+                </label>
+                <button class="btn-sm" onclick="AdminApp.moveSection('${this.escapeHtml(key)}', 'up')" ${i === 0 ? 'disabled' : ''} title="Move up" style="margin-right:4px;">▲</button>
+                <button class="btn-sm" onclick="AdminApp.moveSection('${this.escapeHtml(key)}', 'down')" ${i === sectionList.length - 1 ? 'disabled' : ''} title="Move down">▼</button>
+            </div>`;
+        }).join('');
+    },
+
+    toggleHomepageSection(key, visible) {
+        if (!this.homepageData || !this.homepageData.sections) return;
+        const section = this.homepageData.sections.find(s => (s.key || s.name || s) === key);
+        if (section) section.visible = visible;
+    },
+
+    moveSection(sectionKey, direction) {
+        if (!this.homepageData || !this.homepageData.sections) return;
+        const sections = this.homepageData.sections;
+        const idx = sections.findIndex(s => (s.key || s.name || s) === sectionKey);
+        if (idx === -1) return;
+
+        const targetIdx = direction === 'up' ? idx - 1 : idx + 1;
+        if (targetIdx < 0 || targetIdx >= sections.length) return;
+
+        // Swap
+        [sections[idx], sections[targetIdx]] = [sections[targetIdx], sections[idx]];
+        this.renderHomepageSections(sections);
+    },
+
+    async saveHomepage() {
+        const payload = {
+            hero_title: document.getElementById('heroTitle')?.value.trim() || '',
+            hero_subtitle: document.getElementById('heroSubtitle')?.value.trim() || '',
+            hero_tagline: document.getElementById('heroTagline')?.value.trim() || '',
+            about_text: document.getElementById('aboutText')?.value.trim() || '',
+            sections: this.homepageData?.sections || []
+        };
+
+        try {
+            const res = await fetch(this.API + '/homepage', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Homepage config saved');
+        } catch (err) {
+            console.error('Save homepage error:', err);
+            this.notify('Failed to save homepage config', 'error');
+        }
+    },
+
+    /* ─────────────────── SERVICES ─────────────────── */
+
+    async loadServices() {
+        try {
+            const res = await fetch(this.API + '/services/managed', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load services');
+            const data = await res.json();
+            this.servicesData = Array.isArray(data) ? data : (data.services || []);
+
+            const container = document.getElementById('managedServicesList');
+            if (!container) return;
+
+            if (this.servicesData.length === 0) {
+                container.innerHTML = '<div class="empty-state">No managed services</div>';
+                return;
+            }
+
+            container.innerHTML = this.servicesData.map((s, i) => {
+                return `<div class="service-list-item" style="display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05);">
+                    <div style="flex:1;">
+                        <div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(s.name || 'Unnamed')}</div>
+                        <div style="font-size:12px;color:#555;">${this.escapeHtml(s.url || '')}</div>
+                    </div>
+                    <button class="btn-sm btn-delete" onclick="AdminApp.deleteService(${i})" title="Delete">✗</button>
+                </div>`;
+            }).join('');
+        } catch (err) {
+            console.error('Services load error:', err);
+            this.notify('Failed to load services', 'error');
+        }
+    },
+
+    async addService() {
+        const name = document.getElementById('serviceName')?.value.trim();
+        const url = document.getElementById('serviceUrl')?.value.trim();
+
+        if (!name) {
+            this.notify('Service name is required', 'error');
+            return;
+        }
+
+        this.servicesData.push({ name, url });
+
+        try {
+            const res = await fetch(this.API + '/services/managed', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.servicesData)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Service added');
+            document.getElementById('serviceName').value = '';
+            document.getElementById('serviceUrl').value = '';
+            this.loadServices();
+        } catch (err) {
+            console.error('Add service error:', err);
+            this.servicesData.pop();
+            this.notify('Failed to add service', 'error');
+        }
+    },
+
+    async deleteService(index) {
+        if (!confirm('Delete this service?')) return;
+        this.servicesData.splice(index, 1);
+
+        try {
+            const res = await fetch(this.API + '/services/managed', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.servicesData)
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            this.notify('Service deleted');
+            this.loadServices();
+        } catch (err) {
+            console.error('Delete service error:', err);
+            this.notify('Failed to delete service', 'error');
+        }
+    },
+
+    /* ─────────────────── NAVIGATION EDITOR ─────────────────── */
+
+    async loadNavigation() {
+        try {
+            const res = await fetch(this.API + '/navigation', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load navigation');
+            const data = await res.json();
+            this.navData = Array.isArray(data) ? data : (data.items || []);
+
+            const container = document.getElementById('navItemsList');
+            if (!container) return;
+
+            if (this.navData.length === 0) {
+                container.innerHTML = '<div class="empty-state">No navigation items</div>';
+                return;
+            }
+
+            // Sort by order
+            this.navData.sort((a, b) => (a.order || 0) - (b.order || 0));
+
+            container.innerHTML = this.navData.map((item, i) => {
+                return `<div class="nav-list-item" style="display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05);">
+                    <span style="color:#00ffc8;font-size:12px;margin-right:12px;min-width:30px;">#${item.order || i}</span>
+                    <div style="flex:1;">
+                        <div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(item.label || 'Unnamed')}</div>
+                        <div style="font-size:12px;color:#555;">${this.escapeHtml(item.url || '')}</div>
+                    </div>
+                    <button class="btn-sm btn-delete" onclick="AdminApp.deleteNavItem(${i})" title="Delete">✗</button>
+                </div>`;
+            }).join('');
+        } catch (err) {
+            console.error('Navigation load error:', err);
+            this.notify('Failed to load navigation', 'error');
+        }
+    },
+
+    async addNavItem() {
+        const label = document.getElementById('navLabel')?.value.trim();
+        const url = document.getElementById('navUrl')?.value.trim();
+        const order = parseInt(document.getElementById('navOrder')?.value || 0);
+
+        if (!label || !url) {
+            this.notify('Label and URL are required', 'error');
+            return;
+        }
+
+        this.navData.push({ label, url, order });
+
+        try {
+            const res = await fetch(this.API + '/navigation', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.navData)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Nav item added');
+            document.getElementById('navLabel').value = '';
+            document.getElementById('navUrl').value = '';
+            document.getElementById('navOrder').value = '';
+            this.loadNavigation();
+        } catch (err) {
+            console.error('Add nav item error:', err);
+            this.navData.pop();
+            this.notify('Failed to add nav item', 'error');
+        }
+    },
+
+    async deleteNavItem(index) {
+        if (!confirm('Delete this navigation item?')) return;
+        this.navData.splice(index, 1);
+
+        try {
+            const res = await fetch(this.API + '/navigation', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.navData)
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            this.notify('Nav item deleted');
+            this.loadNavigation();
+        } catch (err) {
+            console.error('Delete nav item error:', err);
+            this.notify('Failed to delete nav item', 'error');
+        }
+    },
+
+    /* ─────────────────── LINKS ─────────────────── */
+
+    async loadLinks() {
+        try {
+            const res = await fetch(this.API + '/links', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load links');
+            const data = await res.json();
+            this.linksData = Array.isArray(data) ? data : (data.links || []);
+
+            const container = document.getElementById('managedLinksList');
+            if (!container) return;
+
+            if (this.linksData.length === 0) {
+                container.innerHTML = '<div class="empty-state">No links configured</div>';
+                return;
+            }
+
+            container.innerHTML = this.linksData.map((link, i) => {
+                return `<div class="link-list-item" style="display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05);">
+                    <span style="font-size:18px;margin-right:12px;">${this.escapeHtml(link.icon || '🔗')}</span>
+                    <div style="flex:1;">
+                        <div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(link.name || 'Unnamed')}</div>
+                        <div style="font-size:12px;color:#555;">${this.escapeHtml(link.url || '')} ${link.category ? '<span style="color:#00ffc8;">· ' + this.escapeHtml(link.category) + '</span>' : ''}</div>
+                    </div>
+                    <button class="btn-sm btn-delete" onclick="AdminApp.deleteLink(${i})" title="Delete">✗</button>
+                </div>`;
+            }).join('');
+        } catch (err) {
+            console.error('Links load error:', err);
+            this.notify('Failed to load links', 'error');
+        }
+    },
+
+    async addLink() {
+        const name = document.getElementById('linkName')?.value.trim();
+        const url = document.getElementById('linkUrl')?.value.trim();
+        const icon = document.getElementById('linkIcon')?.value.trim();
+        const category = document.getElementById('linkCategory')?.value.trim();
+
+        if (!name || !url) {
+            this.notify('Name and URL are required', 'error');
+            return;
+        }
+
+        this.linksData.push({ name, url, icon: icon || '🔗', category: category || 'general' });
+
+        try {
+            const res = await fetch(this.API + '/links', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.linksData)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Link added');
+            ['linkName', 'linkUrl', 'linkIcon', 'linkCategory'].forEach(id => {
+                const el = document.getElementById(id);
+                if (el) el.value = '';
+            });
+            this.loadLinks();
+        } catch (err) {
+            console.error('Add link error:', err);
+            this.linksData.pop();
+            this.notify('Failed to add link', 'error');
+        }
+    },
+
+    async deleteLink(index) {
+        if (!confirm('Delete this link?')) return;
+        this.linksData.splice(index, 1);
+
+        try {
+            const res = await fetch(this.API + '/links', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(this.linksData)
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            this.notify('Link deleted');
+            this.loadLinks();
+        } catch (err) {
+            console.error('Delete link error:', err);
+            this.notify('Failed to delete link', 'error');
+        }
+    },
+
+    /* ─────────────────── API KEYS ─────────────────── */
+
+    async loadApiKeys() {
+        try {
+            const res = await fetch(this.API + '/apikeys', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load API keys');
+            const data = await res.json();
+
+            // Weather
+            this.setVal('weatherApiKey', data.weather_api_key);
+
+            // Spotify
+            this.setVal('spotifyClientId', data.spotify_client_id);
+            this.setVal('spotifyClientSecret', data.spotify_client_secret);
+            this.setVal('spotifyRefreshToken', data.spotify_refresh_token);
+
+            // SMTP
+            this.setVal('smtpHost', data.smtp_host);
+            this.setVal('smtpPort', data.smtp_port);
+            this.setVal('smtpUser', data.smtp_user);
+            this.setVal('smtpPass', data.smtp_pass);
+
+            // Discord / GitHub
+            this.setVal('discordWebhook', data.discord_webhook);
+            this.setVal('githubToken', data.github_token);
+
+            // Custom APIs
+            for (let i = 1; i <= 3; i++) {
+                this.setVal(`customApi${i}Name`, data[`custom_api_${i}_name`]);
+                this.setVal(`customApi${i}Key`, data[`custom_api_${i}_key`]);
+                this.setVal(`customApi${i}Url`, data[`custom_api_${i}_url`]);
+            }
+        } catch (err) {
+            console.error('API keys load error:', err);
+            this.notify('Failed to load API keys', 'error');
+        }
+    },
+
+    async saveApiKey(group) {
+        const payload = { group };
+
+        switch (group) {
+            case 'weather':
+                payload.weather_api_key = this.getVal('weatherApiKey');
+                break;
+            case 'spotify':
+                payload.spotify_client_id = this.getVal('spotifyClientId');
+                payload.spotify_client_secret = this.getVal('spotifyClientSecret');
+                payload.spotify_refresh_token = this.getVal('spotifyRefreshToken');
+                break;
+            case 'smtp':
+                payload.smtp_host = this.getVal('smtpHost');
+                payload.smtp_port = this.getVal('smtpPort');
+                payload.smtp_user = this.getVal('smtpUser');
+                payload.smtp_pass = this.getVal('smtpPass');
+                break;
+            case 'discord':
+                payload.discord_webhook = this.getVal('discordWebhook');
+                break;
+            case 'github':
+                payload.github_token = this.getVal('githubToken');
+                break;
+            case 'custom1':
+                payload.custom_api_1_name = this.getVal('customApi1Name');
+                payload.custom_api_1_key = this.getVal('customApi1Key');
+                payload.custom_api_1_url = this.getVal('customApi1Url');
+                break;
+            case 'custom2':
+                payload.custom_api_2_name = this.getVal('customApi2Name');
+                payload.custom_api_2_key = this.getVal('customApi2Key');
+                payload.custom_api_2_url = this.getVal('customApi2Url');
+                break;
+            case 'custom3':
+                payload.custom_api_3_name = this.getVal('customApi3Name');
+                payload.custom_api_3_key = this.getVal('customApi3Key');
+                payload.custom_api_3_url = this.getVal('customApi3Url');
+                break;
+            default:
+                this.notify('Unknown API key group: ' + group, 'error');
+                return;
+        }
+
+        try {
+            const res = await fetch(this.API + '/apikeys', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('API keys saved (' + group + ')');
+        } catch (err) {
+            console.error('Save API key error:', err);
+            this.notify('Failed to save API keys', 'error');
+        }
+    },
+
+    /* ─────────────────── THEME ─────────────────── */
+
+    async loadTheme() {
+        try {
+            const res = await fetch(this.API + '/theme', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load theme');
+            const data = await res.json();
+
+            // Colours
+            this.setVal('themeAccent', data.accent || this.themeDefaults.accent);
+            this.setVal('themeAccentHex', data.accent || this.themeDefaults.accent);
+            this.setVal('themeBg', data.bg || this.themeDefaults.bg);
+            this.setVal('themeBgHex', data.bg || this.themeDefaults.bg);
+            this.setVal('themeText', data.text || this.themeDefaults.text);
+            this.setVal('themeTextHex', data.text || this.themeDefaults.text);
+
+            // Effect toggles
+            this.setChecked('themeScanlines', data.scanlines !== undefined ? data.scanlines : this.themeDefaults.scanlines);
+            this.setChecked('themeParticles', data.particles !== undefined ? data.particles : this.themeDefaults.particles);
+            this.setChecked('themeGlitch', data.glitch !== undefined ? data.glitch : this.themeDefaults.glitch);
+            this.setChecked('themeGrid', data.grid !== undefined ? data.grid : this.themeDefaults.grid);
+
+            // Font size
+            const fontSize = data.font_size || this.themeDefaults.fontSize;
+            this.setVal('themeFontSize', fontSize);
+            const valFont = document.getElementById('valFontSize');
+            if (valFont) valFont.textContent = fontSize;
+        } catch (err) {
+            console.error('Theme load error:', err);
+            this.notify('Failed to load theme', 'error');
+        }
+    },
+
+    async saveTheme() {
+        const payload = {
+            accent: this.getVal('themeAccentHex') || this.getVal('themeAccent'),
+            bg: this.getVal('themeBgHex') || this.getVal('themeBg'),
+            text: this.getVal('themeTextHex') || this.getVal('themeText'),
+            scanlines: this.getChecked('themeScanlines'),
+            particles: this.getChecked('themeParticles'),
+            glitch: this.getChecked('themeGlitch'),
+            grid: this.getChecked('themeGrid'),
+            font_size: parseInt(this.getVal('themeFontSize') || 16)
+        };
+
+        try {
+            const res = await fetch(this.API + '/theme', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Theme saved');
+        } catch (err) {
+            console.error('Save theme error:', err);
+            this.notify('Failed to save theme', 'error');
+        }
+    },
+
+    resetTheme() {
+        if (!confirm('Reset theme to defaults?')) return;
+
+        this.setVal('themeAccent', this.themeDefaults.accent);
+        this.setVal('themeAccentHex', this.themeDefaults.accent);
+        this.setVal('themeBg', this.themeDefaults.bg);
+        this.setVal('themeBgHex', this.themeDefaults.bg);
+        this.setVal('themeText', this.themeDefaults.text);
+        this.setVal('themeTextHex', this.themeDefaults.text);
+        this.setChecked('themeScanlines', this.themeDefaults.scanlines);
+        this.setChecked('themeParticles', this.themeDefaults.particles);
+        this.setChecked('themeGlitch', this.themeDefaults.glitch);
+        this.setChecked('themeGrid', this.themeDefaults.grid);
+        this.setVal('themeFontSize', this.themeDefaults.fontSize);
+        const valFont = document.getElementById('valFontSize');
+        if (valFont) valFont.textContent = this.themeDefaults.fontSize;
+
+        this.notify('Theme reset to defaults — save to apply', 'info');
+    },
+
+    syncColorInput(pickerId, hexId) {
+        const picker = document.getElementById(pickerId);
+        const hex = document.getElementById(hexId);
+        if (picker && hex) hex.value = picker.value;
+    },
+
+    /* ─────────────────── SEO ─────────────────── */
+
+    async loadSeo() {
+        try {
+            const res = await fetch(this.API + '/seo', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load SEO settings');
+            const data = await res.json();
+
+            this.setVal('seoTitle', data.title);
+            this.setVal('seoDescription', data.description);
+            this.setVal('seoKeywords', data.keywords);
+            this.setVal('seoOgImage', data.og_image);
+            this.setVal('seoFavicon', data.favicon);
+        } catch (err) {
+            console.error('SEO load error:', err);
+            this.notify('Failed to load SEO settings', 'error');
+        }
+    },
+
+    async saveSeo() {
+        const payload = {
+            title: this.getVal('seoTitle'),
+            description: this.getVal('seoDescription'),
+            keywords: this.getVal('seoKeywords'),
+            og_image: this.getVal('seoOgImage'),
+            favicon: this.getVal('seoFavicon')
+        };
+
+        try {
+            const res = await fetch(this.API + '/seo', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('SEO settings saved');
+        } catch (err) {
+            console.error('Save SEO error:', err);
+            this.notify('Failed to save SEO settings', 'error');
+        }
+    },
+
+    /* ─────────────────── CONTACT ─────────────────── */
+
+    async loadContactSettings() {
+        try {
+            const res = await fetch(this.API + '/contact-settings', { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Failed to load contact settings');
+            const data = await res.json();
+
+            this.setVal('contactEmail', data.email);
+            this.setVal('contactAutoReply', data.auto_reply);
+            this.setChecked('contactFormEnabled', data.form_enabled !== false);
+        } catch (err) {
+            console.error('Contact settings load error:', err);
+            this.notify('Failed to load contact settings', 'error');
+        }
+    },
+
+    async saveContactSettings() {
+        const payload = {
+            email: this.getVal('contactEmail'),
+            auto_reply: this.getVal('contactAutoReply'),
+            form_enabled: this.getChecked('contactFormEnabled')
+        };
+
+        try {
+            const res = await fetch(this.API + '/contact-settings', {
+                method: 'POST',
+                headers: this.authHeaders(),
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok) throw new Error('Save failed');
+            this.notify('Contact settings saved');
+        } catch (err) {
+            console.error('Save contact settings error:', err);
+            this.notify('Failed to save contact settings', 'error');
+        }
+    },
+
+    /* ─────────────────── BACKUPS ─────────────────── */
+
+    async downloadBackup(type) {
+        try {
+            const url = this.API + '/backups/' + type;
+            const res = await fetch(url, { headers: this.authHeaders() });
+            if (!res.ok) throw new Error('Download failed');
+
+            const blob = await res.blob();
+            const filename = type === 'all' ? 'jaeswift-backup-all.zip' : type + '.json';
+
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(a.href);
+
+            this.notify('Backup downloaded: ' + filename);
+        } catch (err) {
+            console.error('Backup download error:', err);
+            this.notify('Failed to download backup', 'error');
+        }
+    },
+
+    /* ─────────────────── UTILITIES ─────────────────── */
+
+    escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    },
+
+    setVal(id, value) {
+        const el = document.getElementById(id);
+        if (el) el.value = value || '';
+    },
+
+    getVal(id) {
+        const el = document.getElementById(id);
+        return el ? el.value.trim() : '';
+    },
+
+    setChecked(id, checked) {
+        const el = document.getElementById(id);
+        if (el) el.checked = !!checked;
+    },
+
+    getChecked(id) {
+        const el = document.getElementById(id);
+        return el ? el.checked : false;
     }
+};
 
-    document.addEventListener('DOMContentLoaded', init);
-
-    // Public API
-    return {
-        showSection,
-        logout,
-        editPost,
-        deletePost,
-        clearEditor,
-        insertMD,
-        showAddTrack,
-        addTrack,
-        deleteTrack,
-    };
-})();
+/* ─────────────────── BOOTSTRAP ─────────────────── */
+document.addEventListener('DOMContentLoaded', () => AdminApp.init());
diff --git a/js/main.js b/js/main.js
index 7f3f08e..d117536 100644
--- a/js/main.js
+++ b/js/main.js
@@ -463,29 +463,59 @@
         const form = $('#contactForm');
         if (!form) return;
 
-        form.addEventListener('submit', (e) => {
+        form.addEventListener('submit', async (e) => {
             e.preventDefault();
             const btn = form.querySelector('.form-submit');
-            const originalText = btn.querySelector('.submit-text').textContent;
+            const submitText = btn.querySelector('.submit-text');
+            const originalText = submitText.textContent;
 
-            btn.querySelector('.submit-text').textContent = 'TRANSMITTING...';
+            const name = $('#contactName').value.trim();
+            const email = $('#contactEmail').value.trim();
+            const subject = $('#contactSubject').value.trim();
+            const message = $('#contactMessage').value.trim();
+
+            if (!name || !email || !message) return;
+
+            submitText.textContent = 'TRANSMITTING...';
             btn.disabled = true;
             btn.style.borderColor = 'var(--warning)';
             btn.style.color = 'var(--warning)';
 
-            setTimeout(() => {
-                btn.querySelector('.submit-text').textContent = '✓ TRANSMITTED';
-                btn.style.borderColor = 'var(--accent)';
-                btn.style.color = 'var(--accent)';
+            try {
+                const payload = {
+                    name: name,
+                    email: email,
+                    message: subject ? `[${subject}] ${message}` : message
+                };
+                const res = await fetch('/api/contact', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                const data = await res.json();
 
-                setTimeout(() => {
-                    btn.querySelector('.submit-text').textContent = originalText;
-                    btn.disabled = false;
-                    btn.style.borderColor = '';
-                    btn.style.color = '';
+                if (res.ok) {
+                    submitText.textContent = '✓ TRANSMITTED';
+                    btn.style.borderColor = 'var(--accent)';
+                    btn.style.color = 'var(--accent)';
                     form.reset();
-                }, 2000);
-            }, 1500);
+                } else {
+                    submitText.textContent = '✗ FAILED';
+                    btn.style.borderColor = '#ff006e';
+                    btn.style.color = '#ff006e';
+                }
+            } catch (err) {
+                submitText.textContent = '✗ ERROR';
+                btn.style.borderColor = '#ff006e';
+                btn.style.color = '#ff006e';
+            }
+
+            setTimeout(() => {
+                submitText.textContent = originalText;
+                btn.disabled = false;
+                btn.style.borderColor = '';
+                btn.style.color = '';
+            }, 2500);
         });
     }
 
