diff --git a/docs/guides/discord-bot-admin-panel.md b/docs/guides/discord-bot-admin-panel.md
index 4bf4ccb..66fd78c 100644
--- a/docs/guides/discord-bot-admin-panel.md
+++ b/docs/guides/discord-bot-admin-panel.md
@@ -386,20 +386,679 @@ chown firefrost-bot:firefrost-bot /opt/firefrost-discord-bot/.env
## 🎨 PART 5: DEPLOY FRONTEND CODE
-**⚠️ WAITING ON GEMINI:** The frontend HTML/CSS/JS is being written by Gemini (Google AI).
+### Overview
-**Once received, the frontend will include:**
+The frontend provides Holly with a clean, mobile-friendly interface to manage Discord role mappings. It features:
- Discord OAuth login flow
-- Role mapping management form (10 product → role ID pairs)
-- Save functionality with validation feedback
-- Bot status display
-- Recent webhook logs table
-- Logout button
-- Fire/Frost branding
+- 10 product → role ID input fields
+- Per-row save buttons with validation feedback
+- Bot status indicator
+- Recent webhook logs table with manual refresh
+- Fire/Frost branding (#FF6B35 / #4ECDC4)
-**Files will be created in:** `/opt/firefrost-discord-bot/public/`
+**Tech:** Vanilla HTML/CSS/JavaScript (no frameworks)
-**Status:** Awaiting Gemini's response with complete frontend implementation.
+**Design by:** Gemini (Google AI)
+
+---
+
+### Step 1: Create Public Directory
+
+SSH to Command Center:
+
+```bash
+ssh root@63.143.34.217
+cd /opt/firefrost-discord-bot
+
+# Create public directory
+mkdir -p public
+
+# Set ownership
+chown firefrost-bot:firefrost-bot public
+```
+
+---
+
+### Step 2: Enable Static File Serving
+
+Edit `bot.js` to serve static files:
+
+```bash
+nano /opt/firefrost-discord-bot/bot.js
+```
+
+Add this line after `app.use(express.json());`:
+
+```javascript
+app.use(express.static('public'));
+```
+
+**Full context in bot.js:**
+
+```javascript
+const app = express();
+app.use(express.json()); // For parsing application/json
+app.use(express.static('public')); // <-- ADD THIS LINE
+```
+
+Save and exit.
+
+---
+
+### Step 3: Create index.html
+
+Create the main HTML file:
+
+```bash
+nano /opt/firefrost-discord-bot/public/index.html
+```
+
+**Paste this complete HTML:**
+
+```html
+
+
+
+
+
+ Firefrost Gaming - Command Center
+
+
+
+
+
+
🔥 Firefrost Command ❄️
+
Authenticate via Discord to manage role mappings.
+
Login with Discord
+
+
+
+
+
+
+ Discord Role Mappings
+ Update the Discord Role ID assigned to each Paymenter product.
+
+
+
+
+
+
+
+
+
+
+ | Time |
+ Product ID |
+ Status |
+
+
+
+
+
+
+
+ Product ${product.id}: ${product.name}
+ ${product.type}
+
+
+
+
+ `;
+ container.appendChild(row);
+ });
+}
+
+async function saveRole(productId) {
+ const input = document.getElementById(`input-${productId}`);
+ const btn = document.getElementById(`btn-${productId}`);
+ const errorDiv = document.getElementById(`error-${productId}`);
+ const roleId = input.value.trim();
+
+ // Reset UI
+ errorDiv.classList.add('hidden');
+ btn.textContent = 'Saving...';
+ btn.disabled = true;
+
+ try {
+ const response = await fetch('/api/config', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ productId, roleId })
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Failed to save');
+ }
+
+ // Success UX
+ btn.textContent = 'Saved!';
+ btn.style.backgroundColor = 'var(--success)';
+ setTimeout(() => {
+ btn.textContent = 'Save';
+ btn.style.backgroundColor = 'var(--fire)';
+ btn.disabled = false;
+ }, 2000);
+
+ } catch (error) {
+ // Error UX
+ errorDiv.textContent = error.message;
+ errorDiv.classList.remove('hidden');
+ btn.textContent = 'Save';
+ btn.disabled = false;
+ }
+}
+
+function updateBotStatus(status) {
+ const badge = document.getElementById('bot-status');
+ badge.textContent = `Bot Status: ${status}`;
+ badge.style.color = status === 'Online' ? 'var(--success)' : 'var(--error)';
+}
+
+// Webhook Logs Refresh
+document.getElementById('refresh-logs').addEventListener('click', async () => {
+ const btn = document.getElementById('refresh-logs');
+ btn.textContent = 'Refreshing...';
+ btn.disabled = true;
+
+ try {
+ // Fetch logs from backend endpoint
+ const response = await fetch('/api/logs');
+ if (response.ok) {
+ const logs = await response.json();
+ renderLogs(logs);
+ }
+ } catch (error) {
+ console.error('Failed to fetch logs', error);
+ } finally {
+ btn.textContent = 'Refresh Logs';
+ btn.disabled = false;
+ }
+});
+
+function renderLogs(logs) {
+ const tbody = document.getElementById('logs-body');
+ tbody.innerHTML = '';
+
+ if (logs.length === 0) {
+ tbody.innerHTML = '| No recent events. |
';
+ return;
+ }
+
+ // Show most recent first
+ logs.reverse().forEach(log => {
+ const tr = document.createElement('tr');
+ const statusColor = log.success ? 'var(--success)' : 'var(--error)';
+ const statusText = log.status || (log.success ? 'Success' : 'Failed');
+
+ tr.innerHTML = `
+ ${new Date(log.timestamp).toLocaleTimeString()} |
+ Product ${log.productId} |
+ ${statusText} |
+ `;
+ tbody.appendChild(tr);
+ });
+}
+```
+
+Save and exit: `Ctrl+X`, `Y`, `Enter`
+
+---
+
+### Step 6: Set File Permissions
+
+Ensure firefrost-bot user owns all frontend files:
+
+```bash
+chown -R firefrost-bot:firefrost-bot /opt/firefrost-discord-bot/public
+chmod 644 /opt/firefrost-discord-bot/public/*
+```
+
+---
+
+### Step 7: Add Webhook Logging Endpoint
+
+Edit `bot.js` to add the `/api/logs` endpoint:
+
+```bash
+nano /opt/firefrost-discord-bot/bot.js
+```
+
+**Add this endpoint after the `/api/config` routes:**
+
+```javascript
+// Webhook Logs Endpoint
+app.get('/api/logs', isAuthenticated, (req, res) => {
+ res.json(webhookLogs);
+});
+```
+
+**Also update your webhook handler to log events:**
+
+In your `POST /webhook/paymenter` handler, add logging:
+
+```javascript
+app.post('/webhook/paymenter', async (req, res) => {
+ try {
+ const { productId, userId } = req.body; // Adjust based on actual Paymenter payload
+
+ // Log the webhook event
+ webhookLogs.push({
+ timestamp: new Date().toISOString(),
+ productId: productId,
+ userId: userId,
+ success: true,
+ status: 'Success'
+ });
+
+ // Keep only last 50 logs (circular buffer)
+ if (webhookLogs.length > 50) {
+ webhookLogs.shift();
+ }
+
+ // Your existing webhook logic here...
+
+ res.json({ success: true });
+ } catch (error) {
+ // Log failure
+ webhookLogs.push({
+ timestamp: new Date().toISOString(),
+ productId: req.body.productId || 'unknown',
+ success: false,
+ status: 'Failed',
+ error: error.message
+ });
+
+ res.status(500).json({ error: error.message });
+ }
+});
+```
+
+Save and exit.
+
+---
+
+### Step 8: Restart Bot
+
+Apply all frontend changes:
+
+```bash
+# Restart bot service
+sudo systemctl restart firefrost-discord-bot
+
+# Check status
+sudo systemctl status firefrost-discord-bot
+
+# View logs
+sudo journalctl -u firefrost-discord-bot -n 50
+```
+
+Should show: `Active: active (running)` with no errors.
+
+---
+
+### Step 9: Test Frontend Access
+
+**Before OAuth is set up:**
+
+1. Open browser
+2. Go to: `http://localhost:3100` (from Command Center)
+3. Should see login screen with "🔥 Firefrost Command ❄️"
+
+**Note:** Full testing requires OAuth setup (Part 3) and Nginx/SSL (Part 6).
+
+---
+
+## 🎨 FRONTEND FEATURES
+
+### Login Screen
+- Clean card design with Fire/Frost branding
+- "Login with Discord" button
+- Redirects to Discord OAuth
+
+### Dashboard
+- **Navbar:** Bot status indicator + logout button
+- **Role Mappings Section:**
+ - 10 product rows (Awakened → Sovereign)
+ - Each row: Product name, tier price, role ID input, Save button
+ - Per-row save (instant feedback)
+ - Inline error messages
+- **Webhook Logs Section:**
+ - Table: Time, Product ID, Status
+ - Manual refresh button
+ - Last 50 events
+
+### Mobile Responsive
+- Flexbox layout adapts to phone screens
+- Input fields stack vertically on mobile
+- Navbar collapses to single column
+- Touch-friendly button sizes
+
+---
+
+## 🎨 UI/UX DECISIONS (BY GEMINI)
+
+**Save Per Row (Not "Save All"):**
+- If one role ID is invalid, others aren't blocked
+- Instant, precise feedback on which field failed
+- Holly can save valid ones, fix invalid ones, retry
+
+**Validate on Save (Not on Blur):**
+- Prevents API spam while typing
+- Explicit user action required
+- Clear visual feedback (button changes)
+
+**Inline Errors:**
+- Error appears directly under failed field
+- Holly knows exactly what to fix
+- Color-coded: red = error, green = success
+
+**Manual Log Refresh:**
+- Prevents auto-refresh layout shifting
+- Lower browser memory usage
+- Holly controls when to check logs
+
+---
+
+**Frontend deployment complete!** ✅
+
+Next: Configure Nginx & SSL (Part 6)
---