diff --git a/api/main_v2.py b/api/main_v2.py
index 49fde17..cc5ccc0 100644
--- a/api/main_v2.py
+++ b/api/main_v2.py
@@ -343,46 +343,329 @@ async def get_issue(issue_id: int):
         return dict(row)
 
 # Dashboard HTML
+
+# Dashboard HTML
+from app.dashboard_html import DASHBOARD_HTML if False else None  # noqa
+
 DASHBOARD_HTML = """<!DOCTYPE html>
-<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>JIRA AI Fixer</title><script src="https://cdn.tailwindcss.com"></script></head>
-<body class="bg-gray-900 text-white">
-<div class="min-h-screen">
-<header class="bg-gray-800 border-b border-gray-700 p-4">
-<div class="max-w-6xl mx-auto flex items-center justify-between">
-<div class="flex items-center gap-3"><span class="text-3xl">🤖</span><h1 class="text-xl font-bold">JIRA AI Fixer</h1></div>
-<span class="text-sm text-gray-400">Intelligent Support Case Resolution</span>
-</div></header>
-<main class="max-w-6xl mx-auto p-6">
-<div class="grid grid-cols-3 gap-4 mb-6">
-<div class="bg-gray-800 rounded-lg p-4"><div class="text-3xl font-bold" id="total">-</div><div class="text-gray-400">Total Issues</div></div>
-<div class="bg-gray-800 rounded-lg p-4"><div class="text-3xl font-bold text-green-400" id="analyzed">-</div><div class="text-gray-400">Analyzed</div></div>
-<div class="bg-gray-800 rounded-lg p-4"><div class="text-3xl font-bold text-yellow-400" id="pending">-</div><div class="text-gray-400">Pending</div></div>
-</div>
-<div class="bg-gray-800 rounded-lg">
-<div class="p-4 border-b border-gray-700"><h2 class="font-semibold">Recent Issues</h2></div>
-<div id="issues" class="divide-y divide-gray-700"></div>
-</div>
-</main></div>
-<script>
-async function load(){
-const r=await fetch('/api/issues');const issues=await r.json();
-document.getElementById('total').textContent=issues.length;
-document.getElementById('analyzed').textContent=issues.filter(i=>i.status==='analyzed').length;
-document.getElementById('pending').textContent=issues.filter(i=>i.status==='pending').length;
-document.getElementById('issues').innerHTML=issues.length?issues.map(i=>`
-<div class="p-4 hover:bg-gray-700/50">
-<div class="flex justify-between items-start">
-<div><span class="text-blue-400 font-mono">${i.external_key||'#'+i.id}</span>
-<span class="ml-2">${i.title}</span></div>
-<span class="px-2 py-1 rounded text-xs ${i.status==='analyzed'?'bg-green-500/20 text-green-400':i.status==='error'?'bg-red-500/20 text-red-400':'bg-yellow-500/20 text-yellow-400'}">${i.status}</span>
-</div>
-${i.confidence?`<div class="mt-2 text-sm text-gray-400">Confidence: ${Math.round(i.confidence*100)}%</div>`:''}
-${i.analysis?`<div class="mt-2 text-sm text-gray-300 line-clamp-2">${i.analysis.substring(0,200)}...</div>`:''}
-</div>`).join(''):'<div class="p-8 text-center text-gray-500">No issues yet</div>';
-}
-load();setInterval(load,5000);
-</script></body></html>"""
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JIRA AI Fixer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', system-ui, sans-serif; }
+        .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <!-- Header -->
+    <header class="gradient-bg border-b border-white/10">
+        <div class="max-w-7xl mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <span class="text-3xl">🤖</span>
+                    <div>
+                        <h1 class="text-xl font-bold">JIRA AI Fixer</h1>
+                        <p class="text-sm text-blue-200">Intelligent Support Case Resolution</p>
+                    </div>
+                </div>
+                <div class="flex items-center gap-4">
+                    <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm" id="status">● Online</span>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="max-w-7xl mx-auto px-6 py-8">
+        <!-- Stats Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-400 text-sm">Total Issues</p>
+                        <p class="text-3xl font-bold mt-1" id="stat-total">0</p>
+                    </div>
+                    <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
+                        <span class="text-2xl">📋</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-400 text-sm">Analyzed</p>
+                        <p class="text-3xl font-bold mt-1 text-green-400" id="stat-analyzed">0</p>
+                    </div>
+                    <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
+                        <span class="text-2xl">✅</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-400 text-sm">PRs Created</p>
+                        <p class="text-3xl font-bold mt-1 text-purple-400" id="stat-prs">0</p>
+                    </div>
+                    <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
+                        <span class="text-2xl">🔀</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-400 text-sm">Avg Confidence</p>
+                        <p class="text-3xl font-bold mt-1 text-yellow-400" id="stat-confidence">0%</p>
+                    </div>
+                    <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
+                        <span class="text-2xl">🎯</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Issues List -->
+            <div class="lg:col-span-2 bg-gray-800 rounded-xl border border-gray-700">
+                <div class="p-4 border-b border-gray-700 flex items-center justify-between">
+                    <h2 class="font-semibold">Recent Issues</h2>
+                    <select id="filter-status" onchange="loadIssues()" class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-1 text-sm">
+                        <option value="">All Status</option>
+                        <option value="pending">Pending</option>
+                        <option value="analyzed">Analyzed</option>
+                        <option value="error">Error</option>
+                    </select>
+                </div>
+                <div id="issues-list" class="divide-y divide-gray-700 max-h-[600px] overflow-y-auto">
+                    <div class="p-8 text-center text-gray-500">Loading...</div>
+                </div>
+            </div>
+
+            <!-- Sidebar -->
+            <div class="space-y-6">
+                <!-- Integrations -->
+                <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
+                    <h3 class="font-semibold mb-4">Integrations</h3>
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <span>🎫</span>
+                                <span class="text-sm">TicketHub</span>
+                            </div>
+                            <span class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded">Active</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <span>📦</span>
+                                <span class="text-sm">Gitea</span>
+                            </div>
+                            <span class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded">Active</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <span>🔵</span>
+                                <span class="text-sm">JIRA</span>
+                            </div>
+                            <span class="text-xs px-2 py-1 bg-gray-500/20 text-gray-400 rounded">Ready</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <span>⚙️</span>
+                                <span class="text-sm">ServiceNow</span>
+                            </div>
+                            <span class="text-xs px-2 py-1 bg-gray-500/20 text-gray-400 rounded">Ready</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Connected Repos -->
+                <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
+                    <h3 class="font-semibold mb-4">Repositories</h3>
+                    <div class="space-y-3" id="repos-list">
+                        <div class="flex items-center gap-2 p-2 bg-gray-700/50 rounded-lg">
+                            <span>📁</span>
+                            <div>
+                                <p class="text-sm font-medium">cobol-sample-app</p>
+                                <p class="text-xs text-gray-400">4 COBOL files indexed</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
+                    <h3 class="font-semibold mb-4">Webhook Endpoints</h3>
+                    <div class="space-y-2 text-xs">
+                        <div class="p-2 bg-gray-700/50 rounded font-mono break-all">
+                            POST /api/webhook/tickethub
+                        </div>
+                        <div class="p-2 bg-gray-700/50 rounded font-mono break-all">
+                            POST /api/webhook/jira
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Issue Detail Modal -->
+    <div id="issue-modal" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50 p-4">
+        <div class="bg-gray-800 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden border border-gray-700">
+            <div class="p-4 border-b border-gray-700 flex justify-between items-center">
+                <div>
+                    <span class="font-mono text-blue-400" id="modal-key"></span>
+                    <span class="ml-2 px-2 py-1 rounded text-xs" id="modal-status"></span>
+                </div>
+                <button onclick="hideModal()" class="text-gray-400 hover:text-white">
+                    <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="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            <div class="p-6 overflow-y-auto max-h-[70vh]" id="modal-content"></div>
+        </div>
+    </div>
+
+    <script>
+        loadIssues();
+        setInterval(loadIssues, 10000);
+
+        async function loadIssues() {
+            const filter = document.getElementById('filter-status').value;
+            const url = filter ? '/api/issues?status=' + filter : '/api/issues';
+            
+            try {
+                const r = await fetch(url);
+                const issues = await r.json();
+                
+                // Update stats
+                document.getElementById('stat-total').textContent = issues.length;
+                document.getElementById('stat-analyzed').textContent = issues.filter(i => i.status === 'analyzed').length;
+                
+                // Count PRs (issues with suggested_fix that aren't errors)
+                const prs = issues.filter(i => i.status === 'analyzed' && i.suggested_fix).length;
+                document.getElementById('stat-prs').textContent = prs;
+                
+                // Avg confidence
+                const analyzed = issues.filter(i => i.confidence);
+                const avgConf = analyzed.length ? Math.round(analyzed.reduce((a, i) => a + (i.confidence || 0), 0) / analyzed.length * 100) : 0;
+                document.getElementById('stat-confidence').textContent = avgConf + '%';
+                
+                // Render list
+                const list = document.getElementById('issues-list');
+                if (!issues.length) {
+                    list.innerHTML = '<div class="p-8 text-center text-gray-500">No issues found</div>';
+                    return;
+                }
+                
+                list.innerHTML = issues.map(i => `
+                    <div onclick="showIssue(${i.id})" class="p-4 hover:bg-gray-700/50 cursor-pointer">
+                        <div class="flex justify-between items-start">
+                            <div class="flex-1">
+                                <div class="flex items-center gap-2">
+                                    <span class="font-mono text-blue-400 text-sm">${i.external_key || '#' + i.id}</span>
+                                    <span class="text-xs px-2 py-0.5 rounded ${getStatusClass(i.status)}">${i.status}</span>
+                                </div>
+                                <h4 class="font-medium mt-1">${i.title}</h4>
+                                ${i.confidence ? `<div class="mt-2 flex items-center gap-2">
+                                    <div class="flex-1 bg-gray-700 rounded-full h-2">
+                                        <div class="bg-green-500 h-2 rounded-full" style="width: ${Math.round(i.confidence * 100)}%"></div>
+                                    </div>
+                                    <span class="text-xs text-gray-400">${Math.round(i.confidence * 100)}%</span>
+                                </div>` : ''}
+                            </div>
+                        </div>
+                    </div>
+                `).join('');
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        function getStatusClass(status) {
+            switch(status) {
+                case 'analyzed': return 'bg-green-500/20 text-green-400';
+                case 'pending': return 'bg-yellow-500/20 text-yellow-400';
+                case 'error': return 'bg-red-500/20 text-red-400';
+                default: return 'bg-gray-500/20 text-gray-400';
+            }
+        }
+
+        async function showIssue(id) {
+            const r = await fetch('/api/issues/' + id);
+            const issue = await r.json();
+            
+            document.getElementById('modal-key').textContent = issue.external_key || '#' + issue.id;
+            document.getElementById('modal-status').textContent = issue.status;
+            document.getElementById('modal-status').className = 'ml-2 px-2 py-1 rounded text-xs ' + getStatusClass(issue.status);
+            
+            let affectedFiles = [];
+            try {
+                affectedFiles = JSON.parse(issue.affected_files || '[]');
+            } catch(e) {}
+            
+            document.getElementById('modal-content').innerHTML = `
+                <h3 class="text-lg font-semibold">${issue.title}</h3>
+                <p class="text-gray-400 text-sm mt-1">Source: ${issue.source}</p>
+                
+                <div class="mt-4 p-4 bg-gray-700/50 rounded-lg">
+                    <h4 class="text-sm font-medium text-gray-300 mb-2">Description</h4>
+                    <pre class="whitespace-pre-wrap text-sm">${issue.description || 'N/A'}</pre>
+                </div>
+                
+                ${issue.analysis ? `
+                <div class="mt-4 p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+                    <h4 class="text-sm font-medium text-green-400 mb-2">🔍 Analysis</h4>
+                    <pre class="whitespace-pre-wrap text-sm">${issue.analysis}</pre>
+                </div>
+                ` : ''}
+                
+                ${affectedFiles.length ? `
+                <div class="mt-4">
+                    <h4 class="text-sm font-medium text-gray-300 mb-2">📁 Affected Files</h4>
+                    <div class="flex flex-wrap gap-2">
+                        ${affectedFiles.map(f => `<span class="px-2 py-1 bg-gray-700 rounded text-sm font-mono">${f}</span>`).join('')}
+                    </div>
+                </div>
+                ` : ''}
+                
+                ${issue.suggested_fix ? `
+                <div class="mt-4 p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                    <h4 class="text-sm font-medium text-purple-400 mb-2">🔧 Suggested Fix</h4>
+                    <pre class="whitespace-pre-wrap text-sm font-mono bg-gray-900 p-3 rounded">${issue.suggested_fix}</pre>
+                </div>
+                ` : ''}
+                
+                ${issue.confidence ? `
+                <div class="mt-4 flex items-center gap-3">
+                    <span class="text-sm text-gray-400">Confidence:</span>
+                    <div class="flex-1 bg-gray-700 rounded-full h-3">
+                        <div class="bg-green-500 h-3 rounded-full" style="width: ${Math.round(issue.confidence * 100)}%"></div>
+                    </div>
+                    <span class="font-bold text-green-400">${Math.round(issue.confidence * 100)}%</span>
+                </div>
+                ` : ''}
+                
+                <div class="mt-4 text-xs text-gray-500">
+                    Created: ${new Date(issue.created_at).toLocaleString()}
+                    ${issue.analyzed_at ? `<br>Analyzed: ${new Date(issue.analyzed_at).toLocaleString()}` : ''}
+                </div>
+            `;
+            
+            document.getElementById('issue-modal').classList.remove('hidden');
+            document.getElementById('issue-modal').classList.add('flex');
+        }
+
+        function hideModal() {
+            document.getElementById('issue-modal').classList.add('hidden');
+            document.getElementById('issue-modal').classList.remove('flex');
+        }
+    </script>
+</body>
+</html>"""
 
 @app.get("/", response_class=HTMLResponse)
 async def dashboard():
@@ -391,7 +674,6 @@ async def dashboard():
 @app.get("/dashboard", response_class=HTMLResponse)
 async def dashboard_alt():
     return DASHBOARD_HTML
-
 # ============================================
 # GIT INTEGRATION - Create Branch and PR
 # ============================================
