diff --git a/server/static/index.html b/server/static/index.html
new file mode 100644
index 0000000..d12b7af
--- /dev/null
+++ b/server/static/index.html
@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GuruConnect - Remote Support</title>
+    <style>
+        :root {
+            --background: 222.2 84% 4.9%;
+            --foreground: 210 40% 98%;
+            --card: 222.2 84% 4.9%;
+            --card-foreground: 210 40% 98%;
+            --primary: 217.2 91.2% 59.8%;
+            --primary-foreground: 222.2 47.4% 11.2%;
+            --muted: 217.2 32.6% 17.5%;
+            --muted-foreground: 215 20.2% 65.1%;
+            --border: 217.2 32.6% 17.5%;
+            --input: 217.2 32.6% 17.5%;
+            --ring: 224.3 76.3% 48%;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background-color: hsl(var(--background));
+            color: hsl(var(--foreground));
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 440px;
+            background: hsl(var(--card));
+            border: 1px solid hsl(var(--border));
+            border-radius: 12px;
+            padding: 40px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+
+        .logo {
+            text-align: center;
+            margin-bottom: 32px;
+        }
+
+        .logo h1 {
+            font-size: 28px;
+            font-weight: 700;
+            color: hsl(var(--foreground));
+        }
+
+        .logo p {
+            color: hsl(var(--muted-foreground));
+            margin-top: 8px;
+            font-size: 14px;
+        }
+
+        .code-form {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        label {
+            font-size: 14px;
+            font-weight: 500;
+            color: hsl(var(--foreground));
+        }
+
+        .code-input-wrapper {
+            position: relative;
+        }
+
+        .code-input {
+            width: 100%;
+            padding: 16px 20px;
+            font-size: 32px;
+            font-weight: 600;
+            letter-spacing: 8px;
+            text-align: center;
+            background: hsl(var(--input));
+            border: 1px solid hsl(var(--border));
+            border-radius: 8px;
+            color: hsl(var(--foreground));
+            outline: none;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .code-input:focus {
+            border-color: hsl(var(--ring));
+            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
+        }
+
+        .code-input::placeholder {
+            color: hsl(var(--muted-foreground));
+            letter-spacing: 4px;
+        }
+
+        .connect-btn {
+            width: 100%;
+            padding: 14px 24px;
+            font-size: 16px;
+            font-weight: 600;
+            background: hsl(var(--primary));
+            color: hsl(var(--primary-foreground));
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: opacity 0.2s, transform 0.1s;
+        }
+
+        .connect-btn:hover {
+            opacity: 0.9;
+        }
+
+        .connect-btn:active {
+            transform: scale(0.98);
+        }
+
+        .connect-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .error-message {
+            background: hsla(0, 70%, 50%, 0.1);
+            border: 1px solid hsla(0, 70%, 50%, 0.3);
+            color: hsl(0, 70%, 70%);
+            padding: 12px 16px;
+            border-radius: 8px;
+            font-size: 14px;
+            display: none;
+        }
+
+        .error-message.visible {
+            display: block;
+        }
+
+        .divider {
+            border-top: 1px solid hsl(var(--border));
+            margin: 24px 0;
+        }
+
+        .instructions {
+            display: none;
+            text-align: left;
+        }
+
+        .instructions.visible {
+            display: block;
+        }
+
+        .instructions h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: hsl(var(--foreground));
+        }
+
+        .instructions ol {
+            padding-left: 20px;
+            color: hsl(var(--muted-foreground));
+            font-size: 14px;
+            line-height: 1.8;
+        }
+
+        .instructions li {
+            margin-bottom: 8px;
+        }
+
+        .footer {
+            margin-top: 24px;
+            text-align: center;
+            color: hsl(var(--muted-foreground));
+            font-size: 12px;
+        }
+
+        .footer a {
+            color: hsl(var(--primary));
+            text-decoration: none;
+        }
+
+        .spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid transparent;
+            border-top-color: currentColor;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .loading .spinner {
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">
+            <h1>GuruConnect</h1>
+            <p>Remote Support Portal</p>
+        </div>
+
+        <form class="code-form" id="codeForm">
+            <label for="codeInput">Enter your support code:</label>
+            <div class="code-input-wrapper">
+                <input
+                    type="text"
+                    id="codeInput"
+                    class="code-input"
+                    placeholder="000000"
+                    maxlength="6"
+                    pattern="[0-9]{6}"
+                    inputmode="numeric"
+                    autocomplete="off"
+                    required
+                >
+            </div>
+
+            <div class="error-message" id="errorMessage"></div>
+
+            <button type="submit" class="connect-btn" id="connectBtn">
+                <span class="spinner"></span>
+                <span class="btn-text">Connect</span>
+            </button>
+        </form>
+
+        <div class="divider"></div>
+
+        <div class="instructions" id="instructions">
+            <h3>How to connect:</h3>
+            <ol id="instructionsList">
+                <li>Enter the 6-digit code provided by your technician</li>
+                <li>Click "Connect" to start the session</li>
+                <li>If prompted, allow the download and run the file</li>
+            </ol>
+        </div>
+
+        <div class="footer">
+            <p>Need help? Contact <a href="mailto:support@azcomputerguru.com">support@azcomputerguru.com</a></p>
+        </div>
+    </div>
+
+    <script>
+        const form = document.getElementById('codeForm');
+        const codeInput = document.getElementById('codeInput');
+        const connectBtn = document.getElementById('connectBtn');
+        const errorMessage = document.getElementById('errorMessage');
+        const instructions = document.getElementById('instructions');
+        const instructionsList = document.getElementById('instructionsList');
+
+        // Auto-format input (numbers only)
+        codeInput.addEventListener('input', (e) => {
+            e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 6);
+            errorMessage.classList.remove('visible');
+        });
+
+        // Detect browser
+        function detectBrowser() {
+            const ua = navigator.userAgent;
+            if (ua.includes('Edg/')) return 'edge';
+            if (ua.includes('Chrome/')) return 'chrome';
+            if (ua.includes('Firefox/')) return 'firefox';
+            if (ua.includes('Safari/') && !ua.includes('Chrome')) return 'safari';
+            return 'unknown';
+        }
+
+        // Browser-specific instructions
+        function getBrowserInstructions(browser) {
+            const instrs = {
+                chrome: [
+                    'Click the download in the <strong>bottom-left corner</strong> of your screen',
+                    'Click <strong>"Open"</strong> or <strong>"Keep"</strong> if prompted',
+                    'The support session will start automatically'
+                ],
+                firefox: [
+                    'Click <strong>"Save File"</strong> in the download dialog',
+                    'Open your <strong>Downloads folder</strong>',
+                    'Double-click <strong>GuruConnect.exe</strong> to start'
+                ],
+                edge: [
+                    'Click <strong>"Open file"</strong> in the download notification at the top',
+                    'If you see "Keep" button, click it first, then "Open file"',
+                    'The support session will start automatically'
+                ],
+                safari: [
+                    'Click the <strong>download icon</strong> in the toolbar',
+                    'Double-click the downloaded file',
+                    'Click <strong>"Open"</strong> if macOS asks for confirmation'
+                ],
+                unknown: [
+                    'Your download should start automatically',
+                    'Look for the file in your <strong>Downloads folder</strong>',
+                    'Double-click the file to start the support session'
+                ]
+            };
+            return instrs[browser] || instrs.unknown;
+        }
+
+        // Show browser-specific instructions
+        function showInstructions() {
+            const browser = detectBrowser();
+            const steps = getBrowserInstructions(browser);
+
+            instructionsList.innerHTML = steps.map(step => '<li>' + step + '</li>').join('');
+            instructions.classList.add('visible');
+        }
+
+        // Handle form submission
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const code = codeInput.value.trim();
+
+            if (code.length !== 6) {
+                showError('Please enter a 6-digit code');
+                return;
+            }
+
+            setLoading(true);
+
+            try {
+                // Validate code with server
+                const response = await fetch('/api/codes/' + code + '/validate');
+                const data = await response.json();
+
+                if (!data.valid) {
+                    showError(data.error || 'Invalid code');
+                    setLoading(false);
+                    return;
+                }
+
+                // Try to launch via custom protocol
+                const protocolUrl = 'guruconnect://session/' + code;
+
+                // Attempt protocol launch with timeout fallback
+                let protocolLaunched = false;
+
+                const protocolTimeout = setTimeout(() => {
+                    if (!protocolLaunched) {
+                        // Protocol didn't work, trigger download
+                        triggerDownload(code, data.session_id);
+                    }
+                }, 2500);
+
+                // Try the protocol
+                window.location.href = protocolUrl;
+
+                // Check if we're still here after a moment
+                setTimeout(() => {
+                    protocolLaunched = document.hidden;
+                    if (protocolLaunched) {
+                        clearTimeout(protocolTimeout);
+                    }
+                }, 500);
+
+            } catch (err) {
+                showError('Connection error. Please try again.');
+                setLoading(false);
+            }
+        });
+
+        function triggerDownload(code, sessionId) {
+            // Show instructions
+            showInstructions();
+
+            // For now, show a message that download will be available soon
+            // TODO: Implement actual download endpoint
+            setLoading(false);
+            connectBtn.querySelector('.btn-text').textContent = 'Download Starting...';
+
+            // Placeholder - in production this will download the agent
+            setTimeout(() => {
+                alert('Agent download will be available once the agent is built.\n\nSession ID: ' + sessionId);
+                connectBtn.querySelector('.btn-text').textContent = 'Connect';
+            }, 1000);
+        }
+
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.classList.add('visible');
+        }
+
+        function setLoading(loading) {
+            connectBtn.disabled = loading;
+            connectBtn.classList.toggle('loading', loading);
+            if (loading) {
+                connectBtn.querySelector('.btn-text').textContent = 'Connecting...';
+            } else if (!instructions.classList.contains('visible')) {
+                connectBtn.querySelector('.btn-text').textContent = 'Connect';
+            }
+        }
+
+        // Focus input on load
+        codeInput.focus();
+    </script>
+</body>
+</html>
