diff --git a/server/configApi.js b/server/configApi.js
new file mode 100644
index 000000000..4854e541f
--- /dev/null
+++ b/server/configApi.js
@@ -0,0 +1,299 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { loadConfiguration } = require('./configLoader');
+const { initializeApiClients } = require('./apiClients');
+
+class ConfigApi {
+    constructor() {
+        this.envPath = path.join(__dirname, '../.env');
+    }
+
+    /**
+     * Get current configuration (without secrets)
+     */
+    async getConfig() {
+        try {
+            const config = await this.readEnvFile();
+            
+            return {
+                proxmox: config.PROXMOX_HOST ? {
+                    host: config.PROXMOX_HOST,
+                    port: config.PROXMOX_PORT || '8006',
+                    tokenId: config.PROXMOX_TOKEN_ID,
+                    // Don't send the secret
+                } : null,
+                pbs: config.PBS_HOST ? {
+                    host: config.PBS_HOST,
+                    port: config.PBS_PORT || '8007',
+                    tokenId: config.PBS_TOKEN_ID,
+                    // Don't send the secret
+                } : null
+            };
+        } catch (error) {
+            console.error('Error reading configuration:', error);
+            return { proxmox: null, pbs: null };
+        }
+    }
+
+    /**
+     * Save configuration to .env file
+     */
+    async saveConfig(config) {
+        try {
+            // Read existing .env file to preserve other settings
+            const existingConfig = await this.readEnvFile();
+            
+            // Update with new values
+            if (config.proxmox) {
+                existingConfig.PROXMOX_HOST = config.proxmox.host;
+                existingConfig.PROXMOX_PORT = config.proxmox.port || '8006';
+                existingConfig.PROXMOX_TOKEN_ID = config.proxmox.tokenId;
+                existingConfig.PROXMOX_TOKEN_SECRET = config.proxmox.tokenSecret;
+            }
+            
+            if (config.pbs) {
+                existingConfig.PBS_HOST = config.pbs.host;
+                existingConfig.PBS_PORT = config.pbs.port || '8007';
+                existingConfig.PBS_TOKEN_ID = config.pbs.tokenId;
+                existingConfig.PBS_TOKEN_SECRET = config.pbs.tokenSecret;
+            }
+            
+            // Write back to .env file
+            await this.writeEnvFile(existingConfig);
+            
+            // Reload configuration in the application
+            await this.reloadConfiguration();
+            
+            return { success: true };
+        } catch (error) {
+            console.error('Error saving configuration:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Test configuration by attempting to connect
+     */
+    async testConfig(config) {
+        try {
+            // Create temporary endpoint configuration
+            const testEndpoints = [{
+                id: 'test-primary',
+                name: 'Test Primary',
+                host: config.proxmox.host,
+                port: parseInt(config.proxmox.port) || 8006,
+                tokenId: config.proxmox.tokenId,
+                tokenSecret: config.proxmox.tokenSecret,
+                enabled: true
+            }];
+            
+            const testPbsConfigs = config.pbs ? [{
+                id: 'test-pbs',
+                name: 'Test PBS',
+                host: config.pbs.host,
+                port: parseInt(config.pbs.port) || 8007,
+                tokenId: config.pbs.tokenId,
+                tokenSecret: config.pbs.tokenSecret
+            }] : [];
+            
+            // Try to initialize API clients with test config
+            const { apiClients, pbsApiClients } = await initializeApiClients(testEndpoints, testPbsConfigs);
+            
+            // Try a simple API call to verify connection
+            const testClient = apiClients.get('test-primary');
+            if (testClient) {
+                await testClient.client.get('/nodes');
+            }
+            
+            return { success: true };
+        } catch (error) {
+            console.error('Configuration test failed:', error);
+            return { 
+                success: false, 
+                error: error.message || 'Failed to connect to Proxmox server'
+            };
+        }
+    }
+
+    /**
+     * Read .env file and parse it
+     */
+    async readEnvFile() {
+        try {
+            const content = await fs.readFile(this.envPath, 'utf8');
+            const config = {};
+            
+            content.split('\n').forEach(line => {
+                const trimmedLine = line.trim();
+                if (trimmedLine && !trimmedLine.startsWith('#')) {
+                    const [key, ...valueParts] = trimmedLine.split('=');
+                    if (key) {
+                        // Handle values that might contain = signs
+                        let value = valueParts.join('=').trim();
+                        // Remove quotes if present
+                        if ((value.startsWith('"') && value.endsWith('"')) || 
+                            (value.startsWith("'") && value.endsWith("'"))) {
+                            value = value.slice(1, -1);
+                        }
+                        config[key.trim()] = value;
+                    }
+                }
+            });
+            
+            return config;
+        } catch (error) {
+            if (error.code === 'ENOENT') {
+                // .env file doesn't exist yet
+                return {};
+            }
+            throw error;
+        }
+    }
+
+    /**
+     * Write configuration back to .env file
+     */
+    async writeEnvFile(config) {
+        const lines = [];
+        
+        // Add header
+        lines.push('# Pulse Configuration');
+        lines.push('# Generated by Pulse Web Configuration');
+        lines.push('');
+        
+        // Group related settings
+        const groups = {
+            'Proxmox VE Settings': ['PROXMOX_HOST', 'PROXMOX_PORT', 'PROXMOX_TOKEN_ID', 'PROXMOX_TOKEN_SECRET'],
+            'Proxmox Backup Server Settings': ['PBS_HOST', 'PBS_PORT', 'PBS_TOKEN_ID', 'PBS_TOKEN_SECRET'],
+            'Other Settings': [] // Will contain all other keys
+        };
+        
+        // Find other keys not in predefined groups
+        Object.keys(config).forEach(key => {
+            let found = false;
+            Object.values(groups).forEach(groupKeys => {
+                if (groupKeys.includes(key)) found = true;
+            });
+            if (!found && key !== '') {
+                groups['Other Settings'].push(key);
+            }
+        });
+        
+        // Write each group
+        Object.entries(groups).forEach(([groupName, keys]) => {
+            if (keys.length > 0 && keys.some(key => config[key])) {
+                lines.push(`# ${groupName}`);
+                keys.forEach(key => {
+                    if (config[key] !== undefined && config[key] !== '') {
+                        const value = config[key];
+                        // Quote values that contain spaces or special characters
+                        const needsQuotes = value.includes(' ') || value.includes('#') || value.includes('=');
+                        lines.push(`${key}=${needsQuotes ? `"${value}"` : value}`);
+                    }
+                });
+                lines.push('');
+            }
+        });
+        
+        await fs.writeFile(this.envPath, lines.join('\n'), 'utf8');
+    }
+
+    /**
+     * Reload configuration without restarting the server
+     */
+    async reloadConfiguration() {
+        try {
+            // Clear the require cache for dotenv
+            delete require.cache[require.resolve('dotenv')];
+            
+            // Reload environment variables
+            require('dotenv').config();
+            
+            // Reload configuration
+            const { endpoints, pbsConfigs, isConfigPlaceholder } = loadConfiguration();
+            
+            // Get state manager instance
+            const stateManager = require('./state');
+            
+            // Update configuration status
+            stateManager.setConfigPlaceholderStatus(isConfigPlaceholder);
+            stateManager.setEndpointConfigurations(endpoints, pbsConfigs);
+            
+            // Reinitialize API clients
+            const { apiClients, pbsApiClients } = await initializeApiClients(endpoints, pbsConfigs);
+            
+            // Update global references
+            if (global.pulseApiClients) {
+                global.pulseApiClients.apiClients = apiClients;
+                global.pulseApiClients.pbsApiClients = pbsApiClients;
+            }
+            
+            // Update global config placeholder status
+            if (global.pulseConfigStatus) {
+                global.pulseConfigStatus.isPlaceholder = isConfigPlaceholder;
+            }
+            
+            console.log('Configuration reloaded successfully');
+            return true;
+        } catch (error) {
+            console.error('Error reloading configuration:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Set up API routes
+     */
+    setupRoutes(app) {
+        // Get current configuration
+        app.get('/api/config', async (req, res) => {
+            try {
+                const config = await this.getConfig();
+                res.json(config);
+            } catch (error) {
+                res.status(500).json({ error: 'Failed to read configuration' });
+            }
+        });
+
+        // Save configuration
+        app.post('/api/config', async (req, res) => {
+            try {
+                await this.saveConfig(req.body);
+                res.json({ success: true });
+            } catch (error) {
+                res.status(500).json({ 
+                    success: false, 
+                    error: error.message || 'Failed to save configuration' 
+                });
+            }
+        });
+
+        // Test configuration
+        app.post('/api/config/test', async (req, res) => {
+            try {
+                const result = await this.testConfig(req.body);
+                res.json(result);
+            } catch (error) {
+                res.status(500).json({ 
+                    success: false, 
+                    error: error.message || 'Failed to test configuration' 
+                });
+            }
+        });
+
+        // Reload configuration
+        app.post('/api/config/reload', async (req, res) => {
+            try {
+                await this.reloadConfiguration();
+                res.json({ success: true });
+            } catch (error) {
+                res.status(500).json({ 
+                    success: false, 
+                    error: error.message || 'Failed to reload configuration' 
+                });
+            }
+        });
+    }
+}
+
+module.exports = ConfigApi;
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 6d4a2473f..b7d588465 100644
--- a/server/index.js
+++ b/server/index.js
@@ -35,6 +35,9 @@ try {
 // Set the placeholder status in stateManager *after* config loading is complete
 stateManager.setConfigPlaceholderStatus(configIsPlaceholder);
 
+// Store globally for config reload
+global.pulseConfigStatus = { isPlaceholder: configIsPlaceholder };
+
 // Set endpoint configurations for client use
 stateManager.setEndpointConfigurations(endpoints, pbsConfigs);
 
@@ -66,6 +69,10 @@ let pbsApiClients = {};
 // Note: Client initialization is now async and happens in startServer()
 // --- END API Client Initialization ---
 
+// Configuration API
+const ConfigApi = require('./configApi');
+const configApi = new ConfigApi();
+
 // --- REMOVED OLD CLIENT INIT LOGIC --- 
 // The following blocks were moved to apiClients.js
 // endpoints.forEach(endpoint => { ... });
@@ -118,6 +125,12 @@ app.use(express.static(publicDir, { index: false }));
 
 // Route to serve the main HTML file for the root path
 app.get('/', (req, res) => {
+  // Check if configuration is placeholder or missing
+  if (configIsPlaceholder) {
+    // Redirect to setup page
+    return res.redirect('/setup.html');
+  }
+  
   const indexPath = path.join(publicDir, 'index.html');
   res.sendFile(indexPath, (err) => {
     if (err) {
@@ -129,6 +142,9 @@ app.get('/', (req, res) => {
 });
 
 // --- API Routes ---
+// Set up configuration API routes
+configApi.setupRoutes(app);
+
 // Health check endpoint
 app.get('/healthz', (req, res) => {
     res.status(200).send('OK');
@@ -837,6 +853,13 @@ function gracefulShutdown(signal) {
     if (discoveryTimeoutId) clearTimeout(discoveryTimeoutId);
     if (metricTimeoutId) clearTimeout(metricTimeoutId);
     
+    // Clean up file watchers
+    if (envWatcher) {
+        envWatcher.close();
+        envWatcher = null;
+    }
+    clearTimeout(reloadDebounceTimer);
+    
     // Close WebSocket connections
     if (io) {
         io.close();
@@ -881,6 +904,57 @@ function gracefulShutdown(signal) {
 process.on('SIGINT', () => gracefulShutdown('SIGINT'));
 process.on('SIGTERM', () => gracefulShutdown('SIGTERM'));
 
+// --- Environment File Watcher ---
+let envWatcher = null;
+let reloadDebounceTimer = null;
+
+function setupEnvFileWatcher() {
+    const envPath = path.join(__dirname, '../.env');
+    
+    // Check if the file exists
+    if (!fs.existsSync(envPath)) {
+        console.log('No .env file found, skipping file watcher setup');
+        return;
+    }
+    
+    console.log('Setting up .env file watcher for automatic configuration reload');
+    
+    envWatcher = fs.watch(envPath, (eventType, filename) => {
+        if (eventType === 'change') {
+            // Debounce the reload to avoid multiple reloads for rapid changes
+            clearTimeout(reloadDebounceTimer);
+            reloadDebounceTimer = setTimeout(async () => {
+                console.log('.env file changed, reloading configuration...');
+                
+                try {
+                    await configApi.reloadConfiguration();
+                    
+                    // Notify connected clients about configuration change
+                    io.emit('configurationReloaded', { 
+                        message: 'Configuration has been updated',
+                        timestamp: Date.now()
+                    });
+                    
+                    console.log('Configuration reloaded successfully');
+                } catch (error) {
+                    console.error('Failed to reload configuration:', error);
+                    
+                    // Notify clients about the error
+                    io.emit('configurationError', {
+                        message: 'Failed to reload configuration',
+                        error: error.message,
+                        timestamp: Date.now()
+                    });
+                }
+            }, 1000); // Wait 1 second after last change before reloading
+        }
+    });
+    
+    envWatcher.on('error', (error) => {
+        console.error('Error watching .env file:', error);
+    });
+}
+
 // --- Start the server ---
 async function startServer() {
     try {
@@ -888,6 +962,10 @@ async function startServer() {
         const initializedClients = await initializeApiClients(endpoints, pbsConfigs);
         apiClients = initializedClients.apiClients;
         pbsApiClients = initializedClients.pbsApiClients;
+        
+        // Store globally for config reload
+        global.pulseApiClients = { apiClients, pbsApiClients };
+        
         console.log("INFO: All API clients initialized.");
     } catch (initError) {
         console.error("FATAL: Failed to initialize API clients:", initError);
@@ -905,6 +983,10 @@ async function startServer() {
         
         // Schedule the first metric run *after* the initial discovery completes and server is listening
         scheduleNextMetric(); 
+        
+        // Watch .env file for changes
+        setupEnvFileWatcher();
+        
         // Setup hot reload in development mode
         if (process.env.NODE_ENV === 'development' && chokidar) {
           const publicPath = path.join(__dirname, '../src/public');
diff --git a/src/public/index.html b/src/public/index.html
index cb8601093..7571dd9d7 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -944,6 +944,7 @@
   <script src="/js/charts.js" defer></script>
   <script src="/js/ui/thresholds.js" defer></script>
   <script src="/js/ui/empty-states.js" defer></script>
+  <script src="/js/ui/config-banner.js" defer></script>
   <script src="/js/ui/status-icons.js" defer></script>
   <script src="/js/ui/loading-skeletons.js" defer></script>
   <script src="/js/ui/common.js" defer></script>
diff --git a/src/public/js/main.js b/src/public/js/main.js
index 457174877..3172119f9 100644
--- a/src/public/js/main.js
+++ b/src/public/js/main.js
@@ -65,6 +65,9 @@ document.addEventListener('DOMContentLoaded', function() {
         const state = PulseApp.state.getFullState();
         PulseApp.alerts?.updateAlertsFromState?.(state);
         
+        // Check and show configuration banner if needed
+        PulseApp.ui.configBanner?.checkAndShowBanner();
+        
         // Simple and direct scroll preservation - just focus on main table
         const mainTableContainer = document.querySelector('.table-container');
         if (mainTableContainer) {
diff --git a/src/public/js/socketHandler.js b/src/public/js/socketHandler.js
index f483da2a1..070f7261b 100644
--- a/src/public/js/socketHandler.js
+++ b/src/public/js/socketHandler.js
@@ -34,6 +34,10 @@ PulseApp.socketHandler = (() => {
         
         // Development features
         socket.on('hotReload', handleHotReload);
+        
+        // Configuration reload events
+        socket.on('configurationReloaded', handleConfigurationReloaded);
+        socket.on('configurationError', handleConfigurationError);
 
         // Handle connection errors
         socket.on('connect_error', handleConnectError);
@@ -123,6 +127,33 @@ PulseApp.socketHandler = (() => {
             window.location.reload();
         }
     }
+    
+    function handleConfigurationReloaded(data) {
+        console.log('[Socket] Configuration reloaded:', data.message);
+        
+        // Show notification to user
+        if (PulseApp.alerts && PulseApp.alerts.showNotification) {
+            PulseApp.alerts.showNotification({
+                message: 'Configuration has been updated and reloaded',
+                severity: 'info'
+            });
+        }
+        
+        // Request fresh data with new configuration
+        socket.emit('requestData');
+    }
+    
+    function handleConfigurationError(data) {
+        console.error('[Socket] Configuration reload error:', data.error);
+        
+        // Show error notification to user
+        if (PulseApp.alerts && PulseApp.alerts.showNotification) {
+            PulseApp.alerts.showNotification({
+                message: 'Failed to reload configuration: ' + data.error,
+                severity: 'critical'
+            });
+        }
+    }
 
     function handleConnectError(error) {
         console.error('[Socket] Connection error:', error);
diff --git a/src/public/js/ui/config-banner.js b/src/public/js/ui/config-banner.js
new file mode 100644
index 000000000..5b1c2d9e7
--- /dev/null
+++ b/src/public/js/ui/config-banner.js
@@ -0,0 +1,89 @@
+// Configuration banner component
+PulseApp.ui = PulseApp.ui || {};
+
+PulseApp.ui.configBanner = (() => {
+    let bannerElement = null;
+    let isShowing = false;
+
+    function createBanner() {
+        const banner = document.createElement('div');
+        banner.id = 'config-banner';
+        banner.className = 'fixed top-0 left-0 right-0 bg-yellow-500 dark:bg-yellow-600 text-white px-4 py-3 z-50 shadow-lg transform -translate-y-full transition-transform duration-300 ease-in-out';
+        
+        banner.innerHTML = `
+            <div class="container w-[95%] max-w-screen-xl mx-auto flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <svg class="w-6 h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                    </svg>
+                    <div>
+                        <p class="font-medium">Configuration Required</p>
+                        <p class="text-sm opacity-90">Pulse needs to be configured with your Proxmox credentials to start monitoring.</p>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <a href="/setup.html" 
+                       class="bg-white dark:bg-gray-800 text-yellow-600 dark:text-yellow-500 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                        Configure Now
+                    </a>
+                    <button onclick="PulseApp.ui.configBanner.hide()" 
+                            class="text-white hover:text-gray-200 p-1 rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L13.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 13.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(banner);
+        return banner;
+    }
+
+    function show() {
+        if (isShowing) return;
+        
+        if (!bannerElement) {
+            bannerElement = createBanner();
+        }
+        
+        // Add space to the body to prevent content overlap
+        document.body.style.paddingTop = '80px';
+        
+        // Trigger the slide-down animation
+        setTimeout(() => {
+            bannerElement.classList.remove('-translate-y-full');
+        }, 100);
+        
+        isShowing = true;
+    }
+
+    function hide() {
+        if (!isShowing || !bannerElement) return;
+        
+        // Slide up animation
+        bannerElement.classList.add('-translate-y-full');
+        
+        // Remove padding after animation
+        setTimeout(() => {
+            document.body.style.paddingTop = '';
+            isShowing = false;
+        }, 300);
+    }
+
+    function checkAndShowBanner() {
+        const isConfigPlaceholder = PulseApp.state?.get('isConfigPlaceholder');
+        
+        if (isConfigPlaceholder) {
+            show();
+        } else {
+            hide();
+        }
+    }
+
+    return {
+        show,
+        hide,
+        checkAndShowBanner
+    };
+})();
\ No newline at end of file
diff --git a/src/public/js/ui/empty-states.js b/src/public/js/ui/empty-states.js
index 7b31ccd8a..c44615eb5 100644
--- a/src/public/js/ui/empty-states.js
+++ b/src/public/js/ui/empty-states.js
@@ -80,6 +80,19 @@ PulseApp.ui.emptyStates = (() => {
                     text: 'Retry',
                     onclick: 'location.reload()'
                 }]
+            },
+            'config-required': {
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4 text-yellow-500 dark:text-yellow-400">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                    <line x1="12" y1="9" x2="12" y2="13"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>`,
+                title: 'Configuration Required',
+                message: 'Pulse needs to be configured with your Proxmox credentials before it can start monitoring.',
+                actions: [{
+                    text: 'Configure Now',
+                    onclick: 'window.location.href="/setup.html"'
+                }]
             }
         };
 
diff --git a/src/public/setup.html b/src/public/setup.html
new file mode 100644
index 000000000..7fa3683db
--- /dev/null
+++ b/src/public/setup.html
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="en" class="scrollbar">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pulse - Configuration Setup</title>
+  <link rel="icon" href="/logo.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/output.css">
+  <style>
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.7;
+        transform: scale(1.1);
+      }
+    }
+    .pulse-logo-circle {
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      transform-origin: center;
+    }
+    .pulse-logo-outer { fill: #2563eb; }
+    .pulse-logo-inner { fill: #ffffff; }
+    .dark .pulse-logo-outer { fill: #3b82f6; }
+    .dark .pulse-logo-inner { fill: #dbeafe; }
+  </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex items-center justify-center p-4">
+  <div class="max-w-2xl w-full">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+      <!-- Header -->
+      <div class="text-center mb-8">
+        <div class="flex items-center justify-center gap-2 mb-4">
+          <svg width="40" height="40" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="pulse-logo">
+            <title>Pulse Logo</title>
+            <circle class="pulse-logo-outer" cx="50" cy="50" r="45"/>
+            <circle class="pulse-logo-inner pulse-logo-circle" cx="50" cy="50" r="25"/>
+          </svg>
+          <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Pulse Setup</h1>
+        </div>
+        <p class="text-gray-600 dark:text-gray-400">Configure your Proxmox connection to get started</p>
+      </div>
+
+      <!-- Configuration Form -->
+      <form id="config-form" class="space-y-6">
+        <!-- Primary Proxmox VE Configuration -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+          <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Primary Proxmox VE Server</h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label for="proxmox-host" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Host Address <span class="text-red-500">*</span>
+              </label>
+              <input type="text" id="proxmox-host" name="proxmox-host" required
+                     placeholder="192.168.1.100 or proxmox.example.com"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">IP address or hostname of your Proxmox VE server</p>
+            </div>
+
+            <div>
+              <label for="proxmox-port" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Port
+              </label>
+              <input type="number" id="proxmox-port" name="proxmox-port" 
+                     placeholder="8006 (default)"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+
+            <div>
+              <label for="proxmox-token-id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                API Token ID <span class="text-red-500">*</span>
+              </label>
+              <input type="text" id="proxmox-token-id" name="proxmox-token-id" required
+                     placeholder="user@pam!token-name"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Format: username@realm!token-name</p>
+            </div>
+
+            <div>
+              <label for="proxmox-token-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                API Token Secret <span class="text-red-500">*</span>
+              </label>
+              <div class="relative">
+                <input type="password" id="proxmox-token-secret" name="proxmox-token-secret" required
+                       placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                       class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <button type="button" onclick="togglePasswordVisibility('proxmox-token-secret')"
+                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PBS Configuration (Optional) -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+          <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Proxmox Backup Server (Optional)</h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label for="pbs-host" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Host Address
+              </label>
+              <input type="text" id="pbs-host" name="pbs-host"
+                     placeholder="192.168.1.101 or pbs.example.com"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+
+            <div>
+              <label for="pbs-port" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Port
+              </label>
+              <input type="number" id="pbs-port" name="pbs-port"
+                     placeholder="8007 (default)"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+
+            <div>
+              <label for="pbs-token-id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                API Token ID
+              </label>
+              <input type="text" id="pbs-token-id" name="pbs-token-id"
+                     placeholder="user@pbs!token-name"
+                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            </div>
+
+            <div>
+              <label for="pbs-token-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                API Token Secret
+              </label>
+              <div class="relative">
+                <input type="password" id="pbs-token-secret" name="pbs-token-secret"
+                       placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                       class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <button type="button" onclick="togglePasswordVisibility('pbs-token-secret')"
+                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error Display -->
+        <div id="error-message" class="hidden bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Configuration Error</h3>
+              <div class="mt-2 text-sm text-red-700 dark:text-red-300" id="error-text"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Success Display -->
+        <div id="success-message" class="hidden bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-green-800 dark:text-green-200">Success!</h3>
+              <div class="mt-2 text-sm text-green-700 dark:text-green-300">Configuration saved. Redirecting to dashboard...</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex gap-4">
+          <button type="submit" id="save-button"
+                  class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
+            Save Configuration
+          </button>
+          <button type="button" onclick="testConnection()"
+                  class="flex-1 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
+            Test Connection
+          </button>
+        </div>
+      </form>
+
+      <!-- Help Text -->
+      <div class="mt-8 text-center">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
+          Need help? Check out the 
+          <a href="https://github.com/Daemonslayer2048/pulse#configuration" target="_blank" 
+             class="text-blue-600 dark:text-blue-400 hover:underline">configuration guide</a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/theme.js"></script>
+  <script>
+    // Initialize theme
+    PulseApp.theme.init();
+
+    function togglePasswordVisibility(inputId) {
+      const input = document.getElementById(inputId);
+      input.type = input.type === 'password' ? 'text' : 'password';
+    }
+
+    function showError(message) {
+      const errorDiv = document.getElementById('error-message');
+      const errorText = document.getElementById('error-text');
+      const successDiv = document.getElementById('success-message');
+      
+      errorText.textContent = message;
+      errorDiv.classList.remove('hidden');
+      successDiv.classList.add('hidden');
+    }
+
+    function showSuccess() {
+      const errorDiv = document.getElementById('error-message');
+      const successDiv = document.getElementById('success-message');
+      
+      errorDiv.classList.add('hidden');
+      successDiv.classList.remove('hidden');
+    }
+
+    function hideMessages() {
+      document.getElementById('error-message').classList.add('hidden');
+      document.getElementById('success-message').classList.add('hidden');
+    }
+
+    async function testConnection() {
+      const formData = new FormData(document.getElementById('config-form'));
+      const config = {
+        proxmox: {
+          host: formData.get('proxmox-host'),
+          port: formData.get('proxmox-port') || '8006',
+          tokenId: formData.get('proxmox-token-id'),
+          tokenSecret: formData.get('proxmox-token-secret')
+        }
+      };
+
+      if (!config.proxmox.host || !config.proxmox.tokenId || !config.proxmox.tokenSecret) {
+        showError('Please fill in all required Proxmox fields');
+        return;
+      }
+
+      hideMessages();
+      const button = event.target;
+      button.disabled = true;
+      button.textContent = 'Testing...';
+
+      try {
+        const response = await fetch('/api/config/test', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(config)
+        });
+
+        const result = await response.json();
+        
+        if (response.ok && result.success) {
+          showSuccess();
+          setTimeout(() => hideMessages(), 3000);
+        } else {
+          showError(result.error || 'Connection test failed');
+        }
+      } catch (error) {
+        showError('Failed to test connection: ' + error.message);
+      } finally {
+        button.disabled = false;
+        button.textContent = 'Test Connection';
+      }
+    }
+
+    document.getElementById('config-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const formData = new FormData(e.target);
+      const config = {
+        proxmox: {
+          host: formData.get('proxmox-host'),
+          port: formData.get('proxmox-port') || '8006',
+          tokenId: formData.get('proxmox-token-id'),
+          tokenSecret: formData.get('proxmox-token-secret')
+        }
+      };
+
+      // Add PBS config if provided
+      if (formData.get('pbs-host')) {
+        config.pbs = {
+          host: formData.get('pbs-host'),
+          port: formData.get('pbs-port') || '8007',
+          tokenId: formData.get('pbs-token-id'),
+          tokenSecret: formData.get('pbs-token-secret')
+        };
+      }
+
+      hideMessages();
+      const button = document.getElementById('save-button');
+      button.disabled = true;
+      button.textContent = 'Saving...';
+
+      try {
+        const response = await fetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(config)
+        });
+
+        const result = await response.json();
+        
+        if (response.ok && result.success) {
+          showSuccess();
+          setTimeout(() => {
+            window.location.href = '/';
+          }, 2000);
+        } else {
+          showError(result.error || 'Failed to save configuration');
+          button.disabled = false;
+          button.textContent = 'Save Configuration';
+        }
+      } catch (error) {
+        showError('Failed to save configuration: ' + error.message);
+        button.disabled = false;
+        button.textContent = 'Save Configuration';
+      }
+    });
+
+    // Load existing configuration if available
+    async function loadExistingConfig() {
+      try {
+        const response = await fetch('/api/config');
+        if (response.ok) {
+          const config = await response.json();
+          
+          if (config.proxmox) {
+            document.getElementById('proxmox-host').value = config.proxmox.host || '';
+            document.getElementById('proxmox-port').value = config.proxmox.port || '';
+            document.getElementById('proxmox-token-id').value = config.proxmox.tokenId || '';
+          }
+          
+          if (config.pbs) {
+            document.getElementById('pbs-host').value = config.pbs.host || '';
+            document.getElementById('pbs-port').value = config.pbs.port || '';
+            document.getElementById('pbs-token-id').value = config.pbs.tokenId || '';
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load existing configuration:', error);
+      }
+    }
+
+    // Load config on page load
+    loadExistingConfig();
+  </script>
+</body>
+</html>
\ No newline at end of file