diff --git a/index.html b/index.html
index 7e8ae4b..034e537 100644
--- a/index.html
+++ b/index.html
@@ -157,6 +157,65 @@
             to { opacity: 1; transform: translateY(0); }
         }
 
+        /* Trading Mode Toggle */
+        .trading-mode-group {
+            margin-bottom: 24px;
+        }
+
+        .mode-options {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .mode-option {
+            position: relative;
+        }
+
+        .mode-option input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .mode-option-label {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 16px 12px;
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .mode-option input[type="radio"]:checked + .mode-option-label {
+            background: rgba(0, 255, 136, 0.1);
+            border-color: var(--accent-green);
+            box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
+        }
+
+        .mode-option-label:hover {
+            border-color: var(--accent-green);
+        }
+
+        .mode-title {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 4px;
+        }
+
+        .mode-description {
+            font-size: 11px;
+            color: var(--text-muted);
+            text-align: center;
+        }
+
         .input-group {
             margin-bottom: 20px;
         }
@@ -171,7 +230,8 @@
             letter-spacing: 0.5px;
         }
 
-        input {
+        input[type="password"],
+        input[type="text"] {
             width: 100%;
             padding: 14px 16px;
             background: var(--bg-secondary);
@@ -183,7 +243,8 @@
             transition: all 0.3s ease;
         }
 
-        input:focus {
+        input[type="password"]:focus,
+        input[type="text"]:focus {
             outline: none;
             border-color: var(--accent-green);
             box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
@@ -506,6 +567,27 @@
         <!-- Login Form -->
         <div id="loginForm">
             <div class="login-card">
+                <!-- Trading Mode Selection -->
+                <div class="trading-mode-group">
+                    <div class="mode-options">
+                        <div class="mode-option">
+                            <input type="radio" id="paperMode" name="tradingMode" value="paper" checked>
+                            <label for="paperMode" class="mode-option-label">
+                                <div class="mode-title">Paper Trading</div>
+                                <div class="mode-description">(Virtual Money)</div>
+                            </label>
+                        </div>
+                        <div class="mode-option">
+                            <input type="radio" id="liveMode" name="tradingMode" value="live">
+                            <label for="liveMode" class="mode-option-label">
+                                <div class="mode-title">Live Trading</div>
+                                <div class="mode-description">(Real Money)</div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- API Credentials -->
                 <div class="input-group">
                     <label for="apiKey">API Key</label>
                     <input 
@@ -576,6 +658,7 @@
             const apiKey = document.getElementById('apiKey').value.trim();
             const apiSecret = document.getElementById('apiSecret').value.trim();
             const errorDiv = document.getElementById('loginError');
+            const tradingMode = document.querySelector('input[name="tradingMode"]:checked').value;
 
             if (!apiKey || !apiSecret) {
                 errorDiv.innerHTML = '<div class="error">Please enter both API Key and Secret</div>';
@@ -584,34 +667,30 @@
 
             API_KEY = apiKey;
             API_SECRET = apiSecret;
+            
+            // Set BASE_URL based on selected trading mode
+            BASE_URL = tradingMode === 'paper' 
+                ? 'https://paper-api.alpaca.markets' 
+                : 'https://api.alpaca.markets';
 
-            // Try paper trading first, then live
-            const endpoints = [
-                { url: 'https://paper-api.alpaca.markets', name: 'Paper' },
-                { url: 'https://api.alpaca.markets', name: 'Live' }
-            ];
-
-            for (const endpoint of endpoints) {
-                BASE_URL = endpoint.url;
-                try {
-                    const response = await fetch(`${BASE_URL}/v2/account`, {
-                        headers: {
-                            'APCA-API-KEY-ID': API_KEY,
-                            'APCA-API-SECRET-KEY': API_SECRET
-                        }
-                    });
-
-                    if (response.ok) {
-                        document.getElementById('loginForm').style.display = 'none';
-                        document.getElementById('dashboard').style.display = 'block';
-                        await loadDashboard();
-                        // Auto-refresh every 30 seconds
-                        setInterval(loadDashboard, 30000);
-                        return;
+            try {
+                const response = await fetch(`${BASE_URL}/v2/account`, {
+                    headers: {
+                        'APCA-API-KEY-ID': API_KEY,
+                        'APCA-API-SECRET-KEY': API_SECRET
                     }
-                } catch (error) {
-                    // Continue to next endpoint
+                });
+
+                if (response.ok) {
+                    document.getElementById('loginForm').style.display = 'none';
+                    document.getElementById('dashboard').style.display = 'block';
+                    await loadDashboard();
+                    // Auto-refresh every 30 seconds
+                    setInterval(loadDashboard, 30000);
+                    return;
                 }
+            } catch (error) {
+                console.error('Login error:', error);
             }
 
             errorDiv.innerHTML = '<div class="error">Invalid credentials. Please check your API Key and Secret.</div>';