diff --git "a/static/index.html" "b/static/index.html"
--- "a/static/index.html"
+++ "b/static/index.html"
@@ -4,7 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Contract Risk Analyzer - Legal Intelligence Platform</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <style>
+        /* ========== BASE STYLES & COLOR SCHEME ========= */
+        :root {
+            --primary: #0A2463;
+            --secondary: #00B4D8;
+            --accent: #FFD700;
+            --background: #F5F7FA;
+            --text: #333333;
+            --light: #FFFFFF;
+            --danger: #dc2626;
+            --warning: #f97316;
+            --info: #ca8a04;
+            --success: #16a34a;
+            --border: #e5e5e5;
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+
         * {
             margin: 0;
             padding: 0;
@@ -12,17 +29,17 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: #ffffff;
-            color: #333;
-            line-height: 1.5;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--background);
+            color: var(--text);
+            line-height: 1.7;
         }
 
-        /* Header */
+        /* ========== HEADER ========= */
         .header {
-            background: white;
-            border-bottom: 0.2px solid #e5e5e5;
-            padding: 0.3rem 2.0rem;
+            background: var(--light);
+            border-bottom: 1px solid var(--border);
+            padding: 0.8rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -30,233 +47,237 @@
             width: 100%;
             top: 0;
             z-index: 1000;
+            box-shadow: var(--shadow);
         }
 
         .logo {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
-            font-size: 1.25rem;
-            font-weight: 600;
+            gap: 0.8rem;
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: var(--primary);
         }
 
         .logo-icon {
-            width: 28px;
-            height: 28px;
-            background: #4169e1;
-            border-radius: 6px;
+            width: 40px;
+            height: 40px;
+            background: var(--primary);
+            border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: white;
-            font-size: 20px;
+            color: var(--light);
         }
 
         .subtitle {
-            color: #666;
-            font-size: 1.0rem;
-            font-weight: 500;
+            color: var(--text);
+            font-size: 0.9rem;
         }
 
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 0.2rem;
-        }
-
-        /* Landing Page Styles */
-        .landing-screen {
-            padding-top: 50px;
+            padding: 0 1.5rem;
         }
 
+        /* ========== LANDING PAGE ========= */
         .hero-section {
+            background: linear-gradient(135deg, var(--primary) 0%, #1a3a8e 100%);
+            color: var(--light);
+            padding: 5rem 0 3rem;
             text-align: center;
-            padding: 1rem 0 1rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            margin-bottom: 2rem;
         }
 
         .hero-title {
-            font-size: 3rem;
-            font-weight: 700;
+            font-size: 3.5rem;
+            font-weight: 1000;
             margin-bottom: 1.5rem;
-            line-height: 1.2;
         }
 
         .hero-subtitle {
-            font-size: 1.3rem;
-            margin-bottom: 2.5rem;
-            opacity: 0.95;
-            max-width: 1000px;
+            font-size: 1.8rem;
+            margin-bottom: 3rem;
+            max-width: 1200px;
             margin-left: auto;
             margin-right: auto;
         }
 
+        .cta-button-container {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            margin-top: 2rem;
+        }
+
         .cta-button {
-            background: white;
-            color: #4169e1;
+            background: var(--light);
+            color: var(--primary);
             border: none;
-            padding: 1rem 3rem;
+            padding: 1.2rem 3.5rem;
             border-radius: 50px;
-            font-size: 1.1rem;
-            font-weight: 600;
+            font-size: 1.2rem;
+            font-weight: 700;
             cursor: pointer;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            display: inline-flex;
+            align-items: center;
+            gap: 0.8rem;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
         }
 
         .cta-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
         }
 
         .section {
-            padding: 0.5rem 0;
+            padding: 1rem 0;
             text-align: center;
         }
 
         .section-title {
-            font-size: 2.2rem;
-            font-weight: 600;
+            font-size: 2.8rem;
+            font-weight: 700;
             margin-bottom: 1rem;
-            color: #333;
+            color: var(--primary);
         }
 
         .section-subtitle {
-            font-size: 1.2rem;
-            color: #666;
-            margin-bottom: 1rem;
-            max-width: 1000px;
+            font-size: 1.4rem;
+            color: var(--text);
+            margin-bottom: 2rem;
+            max-width: 900px;
             margin-left: auto;
             margin-right: auto;
-            line-height: 0.5;
         }
 
         .features-grid {
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 3rem;
-            margin-bottom: 0.1rem;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 2rem;
+            margin-bottom: 1rem;
         }
 
         .feature-card {
-            text-align: center;
-            padding: 1rem;
+            background: var(--light);
+            border-radius: 12px;
+            padding: 1.0rem;
+            box-shadow: var(--shadow);
+            text-align: left;
+            transition: transform 0.3s ease;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
         }
 
         .feature-icon {
-            font-size: 3rem;
+            font-size: 3.5rem;
             margin-bottom: 1.0rem;
+            color: var(--secondary);
         }
 
         .feature-title {
-            font-size: 1.4rem;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            color: #333;
-        }
-
-        .feature-description {
-            color: #666;
-            line-height: 1.5;
-            font-size: 1rem;
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-bottom: 0.8rem;
+            color: var(--primary);
         }
 
         .steps-section {
-            background: white;
+            background: var(--light);
             padding: 1rem 0;
-            text-align: center;
         }
 
-        .steps-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 3rem;
-            margin-top: 0.5rem;
+        .workflow-steps {
+            display: flex;
+            justify-content: space-between;
+            margin: 1rem auto;
+            max-width: 1000px;
         }
 
-        .step-card {
+        .workflow-step {
             text-align: center;
-            padding: 0.5rem;
+            flex: 1;
+            padding: 0 1rem;
         }
 
-        .step-number {
-            width: 60px;
-            height: 60px;
-            background: #4169e1;
-            color: white;
+        .step-icon {
+            width: 80px;
+            height: 80px;
+            background: var(--primary);
+            color: var(--light);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.5rem;
-            font-weight: 700;
-            margin: 0 auto 1.2rem;
+            font-size: 2rem;
+            margin: 0 auto 1.5rem;
         }
 
         .step-title {
-            font-size: 1.3rem;
-            font-weight: 600;
+            font-size: 1.5rem;
+            font-weight: 700;
             margin-bottom: 1rem;
-            color: #333;
-        }
-
-        .step-description {
-            color: #666;
-            line-height: 1.5;
+            color: var(--primary);
         }
 
         .footer {
             text-align: center;
-            padding: 1rem 0.5rem;
-            color: #999;
-            font-size: 0.9rem;
-            border-top: 0.5px solid #e5e5e5;
-            background: white;
-        }
-
-        /* Analyzer Styles */
-        .analyzer-screen {
-            display: none;
-            padding-top: 80px;
-        }
-
-        .hero-section-analyzer {
-            text-align: center;
-            margin-bottom: 3rem;
-            padding: 2rem 0;
-        }
-
-        .hero-title-analyzer {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            color: #1a1a1a;
+            padding: 1.0rem 1.0rem;
+            color: var(--text);
+            border-top: 1px solid var(--border);
+            background: var(--light);
         }
 
-        .hero-description {
-            font-size: 1.1rem;
-            color: #666;
-            margin-bottom: 2rem;
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin: 1.0rem 0;
         }
 
-        .upload-section {
-            transition: all 0.3s ease;
+        .footer-link {
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: 600;
         }
 
-        .upload-section.hidden {
-            display: none !important;
+        /* ========== ANALYZER SCREEN ========= */
+        .analyzer-screen {
+            display: none;
+            padding-top: 80px;
+            background: var(--background);
+            min-height: 100vh;
         }
 
         .upload-card {
             background: white;
-            border-radius: 12px;
+            border-radius: 16px;
             padding: 2.5rem;
             box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            max-width: 700px;
+            max-width: 1000px;
             margin: 0 auto;
-            position: relative;
+        }
+
+        .back-to-landing {
+            background: none;
+            border: none;
+            color: #4169e1;
+            cursor: pointer;
+            font-size: 1.3rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 2rem;
+            padding: 1.5rem 1.5rem;
+            border-radius: 10px;
+            transition: background 0.2s;
+        }
+
+        .back-to-landing:hover {
+            background: #f8f9ff;
         }
 
         .tabs {
@@ -270,11 +291,10 @@
             padding: 0.75rem 1.5rem;
             background: none;
             border: none;
-            font-size: 1rem;
+            font-size: 1.3rem;
             color: #666;
             cursor: pointer;
             border-bottom: 3px solid transparent;
-            margin-bottom: -2px;
             transition: all 0.2s;
         }
 
@@ -298,9 +318,9 @@
             padding: 1rem;
             border: 2px solid #e5e5e5;
             border-radius: 8px;
-            font-size: 0.95rem;
             font-family: inherit;
             resize: vertical;
+            font-size: 0.95rem;
             transition: border-color 0.2s;
         }
 
@@ -309,10 +329,6 @@
             border-color: #4169e1;
         }
 
-        .textarea::placeholder {
-            color: #999;
-        }
-
         .file-upload-area {
             border: 2px dashed #d0d0d0;
             border-radius: 8px;
@@ -336,23 +352,6 @@
             display: none;
         }
 
-        .upload-icon {
-            font-size: 3rem;
-            color: #999;
-            margin-bottom: 1rem;
-        }
-
-        .upload-text {
-            font-size: 1rem;
-            color: #666;
-            margin-bottom: 0.5rem;
-        }
-
-        .upload-hint {
-            font-size: 0.875rem;
-            color: #999;
-        }
-
         .selected-file {
             display: flex;
             align-items: center;
@@ -394,7 +393,6 @@
             display: flex;
             justify-content: center;
             margin-top: 2rem;
-            width: 100%;
         }
 
         .analyze-btn {
@@ -406,18 +404,12 @@
             font-size: 1.1rem;
             font-weight: 600;
             cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
             transition: all 0.3s ease;
-            min-width: 200px;
-            justify-content: center;
         }
 
         .analyze-btn:hover {
             background: #3154c5;
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(49, 84, 197, 0.3);
         }
 
         .loading-screen {
@@ -426,69 +418,6 @@
             padding: 4rem 2rem;
         }
 
-        .loading-screen.active {
-            display: block;
-        }
-
-        /* Error Display Styles */
-        .error-display {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2000;
-        }
-
-        .error-card {
-            background: white;
-            border-radius: 12px;
-            padding: 2.5rem;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            max-width: 500px;
-            width: 90%;
-            text-align: center;
-        }
-
-        .error-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-        }
-
-        .error-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #dc2626;
-            margin-bottom: 1rem;
-        }
-
-        .error-message {
-            color: #666;
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            font-size: 1rem;
-        }
-
-        .error-ok-btn {
-            background: #4169e1;
-            color: white;
-            border: none;
-            padding: 0.75rem 2rem;
-            border-radius: 8px;
-            font-size: 1rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-
-        .error-ok-btn:hover {
-            background: #3154c5;
-        }
-
         .spinner {
             width: 80px;
             height: 80px;
@@ -509,11 +438,7 @@
             margin-bottom: 0.5rem;
         }
 
-        .loading-text {
-            color: #666;
-            font-size: 1rem;
-        }
-
+        /* ========== RESULTS SCREEN STYLES ========= */
         .results-content {
             display: none;
         }
@@ -522,58 +447,19 @@
             display: block;
         }
 
-        .back-to-landing {
-            background: none;
-            border: none;
-            color: #4169e1;
-            cursor: pointer;
-            font-size: 1rem;
+        .results-header {
             display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            justify-content: space-between;
+            align-items: flex-start;
             margin-bottom: 2rem;
-            padding: 0.5rem 1rem;
-            border-radius: 6px;
-            transition: background 0.2s;
-        }
-
-        .back-to-landing:hover {
-            background: #f8f9ff;
-        }
-
-        .api-status {
-            text-align: center;
-            margin: 1rem 0;
-            padding: 1rem;
-            border-radius: 8px;
-            font-size: 0.9rem;
-        }
-
-        .api-status.connected {
-            background: #dcfce7;
-            color: #16a34a;
-            border: 1px solid #bbf7d0;
-        }
-
-        .api-status.disconnected {
-            background: #fee;
-            color: #dc2626;
-            border: 1px solid #fecaca;
-        }
-
-        /* Results screen styles */
-        .results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 2rem;
-            gap: 2rem;
+            gap: 2rem;
         }
 
         .results-title {
             font-size: 2rem;
             font-weight: 700;
             flex: 1;
+            color: #1a1a1a;
         }
 
         .results-actions {
@@ -594,7 +480,6 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            white-space: nowrap;
         }
 
         .btn-primary {
@@ -623,21 +508,22 @@
             margin-bottom: 2rem;
         }
 
-        .card {
+        .risk-score-card {
             background: white;
             border-radius: 12px;
             padding: 2rem;
             box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
         }
 
-        .card-title {
+        .risk-score-title {
             font-size: 1.25rem;
             font-weight: 600;
-            margin: 0; 
-        }
-
-        .risk-score-container {
-            text-align: center;
+            margin-bottom: 1rem;
         }
 
         .risk-circle {
@@ -689,8 +575,22 @@
             color: #16a34a;
         }
 
+        .executive-summary-card {
+            background: white;
+            border-radius: 12px;
+            padding: 2rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            min-height: 150px;
+        }
+
+        .executive-summary-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+
         .executive-summary {
-            font-size: 1rem;
+            font-size: 1.0rem;
             line-height: 1.8;
             color: #444;
         }
@@ -702,21 +602,43 @@
             margin-bottom: 2rem;
         }
 
-        .card-icon {
-            font-size: 2.0rem;
-            display: flex;          
-            align-items: center;    
-            gap: 8px;              
-            margin-bottom: 0.5rem;
+        .analysis-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            overflow: hidden;
+        }
+
+        .analysis-card-header {
             display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .analysis-card-icon {
+            font-size: 1.25rem;
+        }
+
+        .analysis-card-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #333;
         }
 
-        .icon-warning { color: #f97316; }
-        .icon-shield { color: #dc2626; }
-        .icon-book { color: #4169e1; }
+        .analysis-card-body {
+            max-height: 300px;
+            overflow-y: auto;
+            padding-right: 0.5rem;
+        }
 
         .item-list {
             list-style: none;
+            margin: 0;
+            padding: 0;
         }
 
         .item-list li {
@@ -741,36 +663,10 @@
             font-size: 0.95rem;
         }
 
-        .category-breakdown {
-            margin-top: 2rem;
-        }
-
-        .category-item {
-            margin-bottom: 2rem;
-        }
-
-        .category-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 0.75rem;
-        }
-
-        .category-name {
+        .item-text strong {
             font-weight: 600;
-            font-size: 1rem;
-        }
-
-        .category-score {
-            font-weight: 700;
-            font-size: 1.1rem;
         }
 
-        .score-critical { color: #dc2626; }
-        .score-high { color: #f97316; }
-        .score-medium { color: #ca8a04; }
-        .score-low { color: #16a34a; }
-
         .progress-bar {
             height: 8px;
             background: #f0f0f0;
@@ -789,141 +685,324 @@
         .progress-medium { background: #ca8a04; }
         .progress-low { background: #16a34a; }
 
-        .category-description {
-            font-size: 0.9rem;
+        .error-display {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+        }
+
+        .error-card {
+            background: white;
+            border-radius: 12px;
+            padding: 2.5rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            max-width: 500px;
+            width: 90%;
+            text-align: center;
+        }
+
+        .error-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+
+        .error-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #dc2626;
+            margin-bottom: 1rem;
+        }
+
+        .error-message {
             color: #666;
             line-height: 1.6;
+            margin-bottom: 2rem;
         }
 
-        .clause-analysis {
-            margin-top: 2rem;
+        .error-ok-btn {
+            background: #4169e1;
+            color: white;
+            border: none;
+            padding: 0.75rem 2rem;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
         }
 
-        .clause-item {
-            border: 1px solid #e5e5e5;
-            border-left: 4px solid #dc2626;
-            border-radius: 8px;
-            padding: 1.5rem;
-            margin-bottom: 1rem;
+        /* ========== NEW RESULTS TAB STYLES ========== */
+        .results-tabs {
+            margin-bottom: 2rem;
+        }
+        .results-tabs-nav {
+            display: flex;
+            border-bottom: 2px solid #e5e5e5;
+            margin-bottom: 1.5rem;
+            overflow-x: auto;
+        }
+        .results-tab {
+            padding: 0.75rem 1.5rem;
+            background: none;
+            border: none;
+            font-size: 1rem;
+            color: #666;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        .results-tab.active {
+            color: #4169e1;
+            border-bottom-color: #4169e1;
+            font-weight: 500;
+        }
+        .results-tab-pane {
+            display: none;
+        }
+        .results-tab-pane.active {
+            display: block;
+        }
+        .risk-category-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .risk-category-card {
             background: white;
+            border-radius: 8px;
+            padding: 1.25rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            border-left: 4px solid #dc2626;
         }
-
-        .clause-item.high {
+        .risk-category-card.high {
             border-left-color: #f97316;
         }
-
-        .clause-item.medium {
+        .risk-category-card.medium {
             border-left-color: #ca8a04;
         }
-
-        .clause-header {
+        .risk-category-card.low {
+            border-left-color: #16a34a;
+        }
+        .risk-category-header {
             display: flex;
             justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 1rem;
+            align-items: center;
+            margin-bottom: 0.75rem;
         }
-
-        .clause-label {
-            font-size: 0.75rem;
-            text-transform: uppercase;
+        .risk-category-name {
             font-weight: 600;
-            color: #999;
+            font-size: 1.1rem;
+        }
+        .risk-category-score {
+            font-weight: 700;
+            font-size: 1.2rem;
+        }
+        .score-critical { color: #dc2626; }
+        .score-high { color: #f97316; }
+        .score-medium { color: #ca8a04; }
+        .score-low { color: #16a34a; }
+        .risk-category-summary {
+            font-size: 0.9rem;
+            color: #666;
             margin-bottom: 0.5rem;
         }
-
-        .clause-text {
-            font-size: 0.95rem;
-            font-weight: 500;
-            color: #333;
-            line-height: 1.6;
+        .risk-findings {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .risk-findings ul {
+            margin: 0.5rem 0;
+            padding-left: 1.25rem;
+        }
+        .risk-findings li {
+            margin-bottom: 0.25rem;
+        }
+        .terms-table, .protections-table, .negotiation-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 1.5rem;
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        }
+        .terms-table th, .protections-table th, .negotiation-table th {
+            background: #f8f9fa;
+            padding: 0.75rem;
+            text-align: left;
+            font-weight: 600;
+            border-bottom: 2px solid #e5e5e5;
+            position: sticky;
+            top: 0;
+        }
+        .terms-table td, .protections-table td, .negotiation-table td {
+            padding: 0.75rem;
+            border-bottom: 1px solid #e5e5e5;
+            vertical-align: top;
+        }
+        .terms-table tr:hover, .protections-table tr:hover, .negotiation-table tr:hover {
+            background: #f8f9ff;
         }
-
         .severity-badge {
-            padding: 0.375rem 0.875rem;
-            border-radius: 6px;
-            font-size: 0.8rem;
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
             font-weight: 600;
         }
-
         .badge-critical {
             background: #fee;
             color: #dc2626;
         }
-
         .badge-high {
             background: #fff4e6;
             color: #f97316;
         }
-
         .badge-medium {
             background: #fef9c3;
             color: #ca8a04;
         }
-
+        .badge-low {
+            background: #dcfce7;
+            color: #16a34a;
+        }
+        .clause-details {
+            background: #f8f9fa;
+            border-radius: 6px;
+            padding: 1rem;
+            margin-top: 0.5rem;
+        }
         .clause-section {
-            margin-top: 1rem;
+            margin-bottom: 1rem;
+        }
+        .clause-section:last-child {
+            margin-bottom: 0;
         }
-
         .clause-section-title {
             font-weight: 600;
             font-size: 0.9rem;
             margin-bottom: 0.5rem;
             color: #333;
         }
-
         .clause-section-text {
             font-size: 0.9rem;
-            color: #555;
-            line-height: 1.7;
+            line-height: 1.5;
         }
-
-        @media (max-width: 1024px) {
-            .features-grid,
-            .steps-grid {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-            }
-            
-            .results-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .three-column-grid {
-                grid-template-columns: 1fr;
-            }
+        .clause-section-text ul {
+            margin: 0.5rem 0;
+            padding-left: 1.25rem;
+        }
+        .clause-section-text li {
+            margin-bottom: 0.25rem;
+        }
+        .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #4169e1;
+            margin-bottom: 0.25rem;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 1rem;
+        }
+        .scrollable-table-container {
+            max-height: 60vh;
+            overflow-y: auto;
+            border: 1px solid #e5e5e5;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+        }
+        .clauses-container {
+            max-height: 70vh;
+            overflow-y: auto;
+            padding-right: 0.5rem;
+        }
+        .clause-item {
+            border: 1px solid #e5e5e5;
+            border-left: 4px solid #dc2626;
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            background: white;
+            transition: background 0.2s;
+        }
+        .clause-item:hover {
+            background: #f8f9ff;
+        }
+        .clause-item.high {
+            border-left-color: #f97316;
+        }
+        .clause-item.medium {
+            border-left-color: #ca8a04;
+        }
+        .clause-item.low {
+            border-left-color: #16a34a;
+        }
+        .clause-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #e5e5e5;
+        }
+        .clause-reference {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: #999;
+            margin-bottom: 0.5rem;
+        }
+        .clause-text {
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: #333;
+            line-height: 1.6;
+            background: #f8f9fa;
+            padding: 0.75rem;
+            border-radius: 4px;
+            border-left: 3px solid #4169e1;
         }
-
         @media (max-width: 768px) {
-            .hero-title {
-                font-size: 2.2rem;
+            .features-grid {
+                grid-template-columns: 1fr;
             }
-
-            .hero-title-analyzer {
-                font-size: 2rem;
+            .workflow-steps {
+                flex-direction: column;
+                gap: 2rem;
             }
-
-            .section-title {
-                font-size: 1.8rem;
+            .results-grid {
+                grid-template-columns: 1fr;
+            }
+            .three-column-grid {
+                grid-template-columns: 1fr;
             }
-
             .results-header {
                 flex-direction: column;
-                align-items: flex-start;
                 gap: 1rem;
             }
-
             .results-actions {
                 width: 100%;
                 flex-direction: column;
             }
-
             .btn {
                 width: 100%;
             }
-
-            .analyze-btn {
-                width: 100%;
-                padding: 1rem 2rem;
+            .risk-category-grid {
+                grid-template-columns: 1fr;
+            }
+            .terms-table, .protections-table, .negotiation-table {
+                display: block;
+                overflow-x: auto;
             }
         }
     </style>
@@ -932,98 +1011,108 @@
     <!-- Header -->
     <header class="header">
         <div class="logo">
-            <div class="logo-icon">✓</div>
+            <div class="logo-icon">
+                <i class="fas fa-shield-alt"></i>
+            </div>
             <span>AI Contract Risk Analyzer</span>
         </div>
         <div class="subtitle">Legal Intelligence Platform</div>
     </header>
 
     <!-- Landing Screen -->
-    <div id="landingScreen" class="landing-screen">
+    <div id="landingScreen">
         <!-- Hero Section -->
         <section class="hero-section">
             <div class="container">
-                <h1 class="hero-title">Unlock Legal Intelligence : Analyze Contracts with AI</h1>
-                <p class="hero-subtitle">
-                    Instantly identify risks, uncover unfavorable terms, and gain actionable negotiation points. 
-                    <br>
-                    Our AI-powered platform gives you the clarity and confidence to sign better contracts.
-                </p>
-                <button class="cta-button" id="getStartedBtn">Try Now for Free</button>
+                <h1 class="hero-title">Transform Contract Review Leveraging AI</h1>
+                <p class="hero-subtitle">Stop signing blind. Our AI-powered Contract Reviewer analyzes your contracts in minutes, identifying hidden risks, unfair terms, clause-by-clause analysis, missing protections, and potential negotiation points; so you can negotiate with confidence.</p>
+                <div class="cta-button-container">
+                    <button class="cta-button" id="getStartedBtn">
+                        <i class="fas fa-bolt"></i> Try Now for Free
+                    </button>
+                </div>
             </div>
         </section>
 
-        <!-- Main Content Section -->
+        <!-- Features -->
         <section class="section">
             <div class="container">
                 <h2 class="section-title">A Smarter Way to Review Legal Documents</h2>
-                <p class="section-subtitle">
-                    Our platform goes beyond simple keyword searches to provide a deep, contextual understanding of your contracts.
-                </p>
-                
+                <p class="section-subtitle">Our platform goes beyond simple keyword searches to provide a deep, contextual understanding of your contracts leveraging Transformers and Artificial Intelligence.</p>
                 <div class="features-grid">
                     <div class="feature-card">
-                        <div class="feature-icon">🔍</div>
-                        <h3 class="feature-title">In-Depth Analysis</h3>
-                        <p class="feature-description">
-                            Our AI performs a comprehensive, clause-by-clause review, assessing risk levels and explaining complex legal jargon in plain English.
-                        </p>
+                        <div class="feature-icon">
+                            <i class="fas fa-search"></i>
+                        </div>
+                        <h3 class="feature-title">Clause-by-Clause Scrutiny</h3>
+                        <p>Get a granular breakdown of every clause, explained in plain English, so you understand exactly what you're agreeing to.</p>
                     </div>
-                    
                     <div class="feature-card">
-                        <div class="feature-icon">💡</div>
-                        <h3 class="feature-title">Actionable Insights</h3>
-                        <p class="feature-description">
-                            Receive a prioritized list of negotiation points, suggestions for missing clauses, and clear recommendations to strengthen your position.
-                        </p>
+                        <div class="feature-icon">
+                            <i class="fas fa-bullhorn"></i>
+                        </div>
+                        <h3 class="feature-title">Negotiation Power</h3>
+                        <p>Receive prioritized talking points and suggested language to strengthen your position before you sign.</p>
                     </div>
-                    
                     <div class="feature-card">
-                        <div class="feature-icon">🔒</div>
-                        <h3 class="feature-title">Secure & Confidential</h3>
-                        <p class="feature-description">
-                            Your documents are encrypted and processed with the utmost privacy. We never store your contract data after analysis.
-                        </p>
+                        <div class="feature-icon">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                        <h3 class="feature-title">Your Data, Your Sovereignty</h3>
+                        <p>We process your documents securely and delete them immediately after analysis. No data retention, ever.</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">
+                            <i class="fas fa-chart-line"></i>
+                        </div>
+                        <h3 class="feature-title">Market Context</h3>
+                        <p>Compare your terms against industry benchmarks to ensure you're getting a fair deal.</p>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Steps Section -->
+        <!-- How It Works -->
         <section class="steps-section">
             <div class="container">
-                <h2 class="section-title">Get Your Analysis in 3 Simple Steps</h2>
-                
-                <div class="steps-grid">
-                    <div class="step-card">
-                        <div class="step-number">1</div>
+                <h2 class="section-title">How It Works</h2>
+                <p class="section-subtitle">A seamless journey from document to decisive action.</p>
+                <div class="workflow-steps">
+                    <div class="workflow-step">
+                        <div class="step-icon">
+                            <i class="fas fa-file-upload"></i>
+                        </div>
                         <h3 class="step-title">Upload or Paste</h3>
-                        <p class="step-description">
-                            Securely provide your contract by pasting the text or uploading a DOCX/PDF file.
-                        </p>
+                        <p>Securely provide your contract by pasting text or uploading a PDF/DOCX file.</p>
                     </div>
-                    
-                    <div class="step-card">
-                        <div class="step-number">2</div>
+                    <div class="workflow-step">
+                        <div class="step-icon">
+                            <i class="fas fa-robot"></i>
+                        </div>
                         <h3 class="step-title">AI Analyzes</h3>
-                        <p class="step-description">
-                            Our intelligent engine scrutinizes every detail of your document in seconds.
-                        </p>
+                        <p>Our intelligent engine scrutinizes every detail of your document in seconds.</p>
                     </div>
-                    
-                    <div class="step-card">
-                        <div class="step-number">3</div>
+                    <div class="workflow-step">
+                        <div class="step-icon">
+                            <span style="font-size: 2rem;">📄</span>
+                        </div>
                         <h3 class="step-title">Get Your Report</h3>
-                        <p class="step-description">
-                            Receive a comprehensive, easy-to-understand report with your risk score and key findings.
-                        </p>
+                        <p>Receive a comprehensive report with your risk score and actionable insights.</p>
                     </div>
                 </div>
             </div>
         </section>
 
+        <!-- Footer -->
         <footer class="footer">
-            © 2025 AI Contract Risk Analyzer. For informational purposes only. Not legal advice.
+            <div class="container">
+                <div class="footer-links">
+                    <a href="#" class="footer-link">API Documentation</a>
+                    <a href="#" class="footer-link">Blog</a>
+                    <a href="#" class="footer-link">GitHub</a>
+                </div>
+                <p>© 2025 AI Contract Risk Analyzer. For informational purposes only. Not legal advice.</p>
+            </div>
         </footer>
     </div>
 
@@ -1034,11 +1123,11 @@
                 ← Back to Overview
             </button>
 
-            <!-- Upload Section - Shown by default -->
-            <div id="uploadSection" class="upload-section">
-                <div class="hero-section-analyzer">
-                    <h1 class="hero-title-analyzer">Analyze Your Contract in Seconds</h1>
-                    <p class="hero-description">Paste your contract or upload a file to get an instant, AI-powered risk assessment.</p>
+            <!-- Upload Section -->
+            <div id="uploadSection">
+                <div style="text-align: center; margin-bottom: 3rem;">
+                    <h1 style="font-size: 2.5rem; margin-bottom: 1rem;">Analyze Your Contract</h1>
+                    <p style="font-size: 1.1rem; color: #666;">Paste your contract or upload a file to get an instant risk assessment.</p>
                 </div>
 
                 <div class="upload-card">
@@ -1054,9 +1143,9 @@
                     <div id="uploadTab" class="tab-content">
                         <div class="file-upload-area" id="fileUploadArea">
                             <input type="file" id="fileInput" class="file-input" accept=".pdf,.docx,.txt">
-                            <div class="upload-icon">📄</div>
-                            <div class="upload-text">Click to upload or drag and drop</div>
-                            <div class="upload-hint">PDF, DOCX, or TXT files (Max 10MB)</div>
+                            <div style="font-size: 3rem; margin-bottom: 1rem;">📄</div>
+                            <div>Click to upload or drag and drop</div>
+                            <div style="font-size: 0.875rem; color: #999; margin-top: 0.5rem;">PDF, DOCX, or TXT files (Max 10MB)</div>
                         </div>
                         <div id="selectedFile" class="selected-file" style="display: none;">
                             <div class="file-icon">📄</div>
@@ -1070,606 +1159,835 @@
 
                     <div class="analyze-btn-container">
                         <button class="analyze-btn" id="analyzeBtn">
-                            <span>🔍</span>
-                            <span>Analyze Contract</span>
+                            Analyze Contract
                         </button>
                     </div>
                 </div>
-
-                <div id="errorDisplay" class="error-display" style="display: none;">
-                    <div class="error-card">
-                        <div class="error-icon">⚠️</div>
-                        <h3 class="error-title">An Error Occurred</h3>
-                        <p class="error-message" id="errorMessageText"></p>
-                        <button class="error-ok-btn" id="errorOkBtn">OK</button>
-                    </div>
-                </div>
             </div>
 
             <!-- Loading Screen -->
             <div id="loadingScreen" class="loading-screen">
                 <div class="spinner"></div>
                 <h2 class="loading-title">Performing in-depth analysis...</h2>
-                <p class="loading-text">This may take a moment for large documents.</p>
+                <p>This may take a moment for large documents.</p>
             </div>
 
-            <!-- Results Content - Hidden by default -->
+            <!-- Results Screen -->
             <div id="resultsContent" class="results-content">
                 <div class="results-header">
                     <h1 class="results-title">Analysis Report</h1>
                     <div class="results-actions">
-                        <button class="btn btn-primary" id="downloadBtn">📥 Download PDF Report</button>
-                        <button class="btn btn-secondary" id="analyzeAnotherBtn">Analyze Another Contract</button>
-                    </div>
-                </div>
-
-                <div class="results-grid">
-                    <div class="card">
-                        <h2 class="card-title">Overall Risk Score</h2>
-                        <div class="risk-score-container">
-                            <div class="risk-circle">
-                                <svg width="200" height="200">
-                                    <circle cx="100" cy="100" r="85" fill="none" stroke="#f0f0f0" stroke-width="20"/>
-                                    <circle id="riskCircle" cx="100" cy="100" r="85" fill="none" stroke="#dc2626" stroke-width="20" stroke-dasharray="534" stroke-dashoffset="534" stroke-linecap="round"/>
-                                </svg>
-                                <div class="risk-score-value" id="riskScoreValue">0</div>
-                            </div>
-                            <div class="risk-level" id="riskLevel">NO RISK</div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <h2 class="card-title">Executive Summary</h2>
-                        <p class="executive-summary" id="executiveSummary">
-                            Analysis results will appear here...
-                        </p>
-                    </div>
-                </div>
-
-                <div class="three-column-grid">
-                    <div class="card">
-                        <div class="card-icon icon-warning">⚠️<h3 class="card-title">Unfavorable Terms</h3></div>
-                        <ul class="item-list" id="unfavorableTermsList">
-                            <li>No unfavorable terms detected yet</li>
-                        </ul>
-                    </div>
-
-                    <div class="card">
-                        <div class="card-icon icon-shield">🛡️<h3 class="card-title">Missing Protections</h3></div>
-                        <ul class="item-list" id="missingProtectionsList">
-                            <li>No missing protections detected yet</li>
-                        </ul>
-                    </div>
-
-                    <div class="card">
-                        <div class="card-icon icon-book">📖<h3 class="card-title">Negotiation Points</h3></div>
-                        <ul class="item-list" id="negotiationPointsList">
-                            <li>No negotiation points generated yet</li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div class="card category-breakdown">
-                    <h2 class="card-title">Risk Category Breakdown</h2>
-                    <div id="categoryBreakdown">
-                        <div class="category-item">
-                            <div class="category-header">
-                                <span class="category-name">Waiting for analysis...</span>
-                                <span class="category-score score-low">0/100</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill progress-low" style="width: 0%"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card clause-analysis">
-                    <h2 class="card-title">Clause-by-Clause Analysis</h2>
-                    <div id="clauseAnalysis">
-                        <div class="clause-item">
-                            <div class="clause-header">
-                                <div>
-                                    <div class="clause-label">STATUS</div>
-                                    <div class="clause-text">Upload a contract to begin analysis</div>
-                                </div>
-                            </div>
-                        </div>
+                        <button class="btn btn-primary" id="downloadBtn">
+                            <i class="fas fa-download"></i> Download PDF Report
+                        </button>
+                        <button class="btn btn-secondary" id="analyzeAnotherBtn">
+                            Analyze Another Contract
+                        </button>
                     </div>
                 </div>
+                <!-- Tabs will be inserted here by JavaScript -->
             </div>
         </div>
     </div>
 
+    <!-- Error Display -->
+    <div id="errorDisplay" class="error-display">
+        <div class="error-card">
+            <div class="error-icon">⚠️</div>
+            <h3 class="error-title">An Error Occurred</h3>
+            <p class="error-message" id="errorMessageText"></p>
+            <button class="error-ok-btn" id="errorOkBtn">OK</button>
+        </div>
+    </div>
+
     <script>
-        // DYNAMIC API BASE URL - Automatically detects current port
-        const API_BASE_URL = `${window.location.protocol}//${window.location.host}/api/v1`;
+        // ========== WORKING JAVASCRIPT WITH REAL API INTEGRATION ==========
         
+        // Global variables
+        const API_BASE_URL = `${window.location.protocol}//${window.location.host}/api/v1`;
         let selectedFile = null;
         let currentAnalysisResult = null;
 
+        // Get elements
+        const landingScreen = document.getElementById('landingScreen');
+        const analyzerScreen = document.getElementById('analyzerScreen');
+        const getStartedBtn = document.getElementById('getStartedBtn');
+        const backToLandingBtn = document.getElementById('backToLandingBtn');
+        const analyzeAnotherBtn = document.getElementById('analyzeAnotherBtn');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const downloadBtn = document.getElementById('downloadBtn');
+        const uploadSection = document.getElementById('uploadSection');
+        const loadingScreen = document.getElementById('loadingScreen');
+        const resultsContent = document.getElementById('resultsContent');
+        const contractText = document.getElementById('contractText');
+        const fileInput = document.getElementById('fileInput');
+        const fileUploadArea = document.getElementById('fileUploadArea');
+        const selectedFileDiv = document.getElementById('selectedFile');
+        const fileNameSpan = document.getElementById('fileName');
+        const fileSizeSpan = document.getElementById('fileSize');
+        const removeFileBtn = document.getElementById('removeFile');
+        const errorDisplay = document.getElementById('errorDisplay');
+        const errorMessageText = document.getElementById('errorMessageText');
+        const errorOkBtn = document.getElementById('errorOkBtn');
+
         // Screen management
-        function showScreen(screenName) {
-            document.getElementById('landingScreen').style.display = 'none';
-            document.getElementById('analyzerScreen').style.display = 'none';
-            document.getElementById('loadingScreen').classList.remove('active');
-            document.getElementById('resultsContent').classList.remove('active');
-            document.getElementById('uploadSection').classList.remove('hidden');
-
-            if (screenName === 'landing') {
-                document.getElementById('landingScreen').style.display = 'block';
-            } else if (screenName === 'analyzer') {
-                document.getElementById('analyzerScreen').style.display = 'block';
-                checkBackendConnection();
-            } else if (screenName === 'loading') {
-                document.getElementById('analyzerScreen').style.display = 'block';
-                document.getElementById('loadingScreen').classList.add('active');
-                document.getElementById('uploadSection').classList.add('hidden');
-            } else if (screenName === 'results') {
-                document.getElementById('analyzerScreen').style.display = 'block';
-                document.getElementById('resultsContent').classList.add('active');
-                document.getElementById('uploadSection').classList.add('hidden');
-            }
+        function showLanding() {
+            landingScreen.style.display = 'block';
+            analyzerScreen.style.display = 'none';
         }
 
-        // Check backend connection
-        async function checkBackendConnection() {
-            const statusElement = document.getElementById('apiStatus');
-            statusElement.style.display = 'block';
-            statusElement.textContent = 'Checking backend connection...';
-            statusElement.className = 'api-status';
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/health`, {
-                    method: 'GET',
-                    headers: {
-                        'Accept': 'application/json'
-                    }
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    statusElement.textContent = `✓ Backend connected (${data.models_loaded} models, ${data.services_loaded} services)`;
-                    statusElement.className = 'api-status connected';
-                } else {
-                    throw new Error('Backend not responding properly');
-                }
-            } catch (error) {
-                console.error('Backend connection failed:', error);
-                statusElement.textContent = '✗ Cannot connect to backend. Make sure the server is running.';
-                statusElement.className = 'api-status disconnected';
-                
-                setTimeout(() => {
-                    statusElement.style.display = 'none';
-                }, 5000);
-            }
+        function showAnalyzer() {
+            landingScreen.style.display = 'none';
+            analyzerScreen.style.display = 'block';
+            showUploadSection();
         }
 
-        // Navigation
-        document.getElementById('getStartedBtn').addEventListener('click', () => {
-            showScreen('analyzer');
-        });
-
-        document.getElementById('backToLandingBtn').addEventListener('click', () => {
-            showScreen('landing');
-        });
-
-        document.getElementById('analyzeAnotherBtn').addEventListener('click', () => {
+        function showUploadSection() {
+            uploadSection.style.display = 'block';
+            loadingScreen.style.display = 'none';
+            resultsContent.style.display = 'none';
+            
             // Reset form
-            document.getElementById('contractText').value = '';
+            contractText.value = '';
             selectedFile = null;
             fileInput.value = '';
             selectedFileDiv.style.display = 'none';
             fileUploadArea.style.display = 'block';
-            
-            // Show upload section again
-            showScreen('analyzer');
-        });
+        }
+
+        function showLoading() {
+            uploadSection.style.display = 'none';
+            loadingScreen.style.display = 'block';
+            resultsContent.style.display = 'none';
+        }
+
+        function showResults() {
+            uploadSection.style.display = 'none';
+            loadingScreen.style.display = 'none';
+            resultsContent.style.display = 'block';
+        }
+
+        function showError(message) {
+            errorMessageText.textContent = message;
+            errorDisplay.style.display = 'flex';
+        }
 
         // Tab switching
-        document.querySelectorAll('.tab').forEach(tab => {
-            tab.addEventListener('click', (e) => {
-                e.preventDefault();
-                const tabName = tab.dataset.tab;
-                
-                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-                
-                tab.classList.add('active');
-                document.getElementById(tabName + 'Tab').classList.add('active');
+        function setupTabs() {
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    const tabName = this.getAttribute('data-tab');
+                    
+                    // Update tabs
+                    tabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    
+                    // Update content
+                    document.querySelectorAll('.tab-content').forEach(content => {
+                        content.classList.remove('active');
+                    });
+                    document.getElementById(tabName + 'Tab').classList.add('active');
+                });
             });
-        });
+        }
 
         // File upload handling
-        const fileUploadArea = document.getElementById('fileUploadArea');
-        const fileInput = document.getElementById('fileInput');
-        const selectedFileDiv = document.getElementById('selectedFile');
-        const fileNameSpan = document.getElementById('fileName');
-        const fileSizeSpan = document.getElementById('fileSize');
-        const removeFileBtn = document.getElementById('removeFile');
+        function setupFileUpload() {
+            // Click to upload
+            fileUploadArea.addEventListener('click', () => fileInput.click());
+
+            // File input change
+            fileInput.addEventListener('change', function(e) {
+                const file = e.target.files[0];
+                handleFileSelect(file);
+            });
 
-        fileUploadArea.addEventListener('click', () => fileInput.click());
+            // Drag and drop
+            fileUploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.add('dragover');
+            });
 
-        fileUploadArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.add('dragover');
-        });
+            fileUploadArea.addEventListener('dragleave', () => {
+                fileUploadArea.classList.remove('dragover');
+            });
 
-        fileUploadArea.addEventListener('dragleave', () => {
-            fileUploadArea.classList.remove('dragover');
-        });
+            fileUploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.remove('dragover');
+                const file = e.dataTransfer.files[0];
+                handleFileSelect(file);
+            });
 
-        fileUploadArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.remove('dragover');
-            const file = e.dataTransfer.files[0];
-            handleFileSelect(file);
-        });
+            // Remove file
+            removeFileBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                selectedFile = null;
+                fileInput.value = '';
+                selectedFileDiv.style.display = 'none';
+                fileUploadArea.style.display = 'block';
+            });
 
-        fileInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            handleFileSelect(file);
-        });
+            function handleFileSelect(file) {
+                if (!file) return;
+                
+                // Validate file type
+                const validTypes = [
+                    'application/pdf',
+                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                    'text/plain'
+                ];
+                const isValidType = validTypes.includes(file.type) || file.name.match(/\.(pdf|docx|txt)$/i);
+
+                if (!isValidType) {
+                    showError('Please upload a PDF, DOCX, or TXT file');
+                    return;
+                }
 
-        removeFileBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            selectedFile = null;
-            fileInput.value = '';
-            selectedFileDiv.style.display = 'none';
-            fileUploadArea.style.display = 'block';
-        });
+                // Validate file size (10MB)
+                if (file.size > 10 * 1024 * 1024) {
+                    showError('File size must be less than 10MB');
+                    return;
+                }
 
-        function handleFileSelect(file) {
-            if (!file) return;
-            
-            const validTypes = [
-                'application/pdf', 
-                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-                'text/plain'
-            ];
-            
-            const isValidType = validTypes.includes(file.type) || 
-                               file.name.match(/\.(pdf|docx|txt)$/i);
-            
-            if (!isValidType) {
-                alert('Please upload a PDF, DOCX, or TXT file');
-                return;
+                selectedFile = file;
+                fileNameSpan.textContent = file.name;
+                fileSizeSpan.textContent = formatFileSize(file.size);
+                fileUploadArea.style.display = 'none';
+                selectedFileDiv.style.display = 'flex';
             }
 
-            if (file.size > 10 * 1024 * 1024) {
-                alert('File size must be less than 10MB');
-                return;
+            function formatFileSize(bytes) {
+                if (bytes < 1024) return bytes + ' B';
+                if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+                return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
             }
-
-            selectedFile = file;
-            fileNameSpan.textContent = file.name;
-            fileSizeSpan.textContent = formatFileSize(file.size);
-            fileUploadArea.style.display = 'none';
-            selectedFileDiv.style.display = 'flex';
         }
 
-        function formatFileSize(bytes) {
-            if (bytes < 1024) return bytes + ' B';
-            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
-            return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
-        }
-
-        // Analyze button
-        document.getElementById('analyzeBtn').addEventListener('click', async () => {
-            const activeTab = document.querySelector('.tab.active').dataset.tab;
-            const analyzeBtn = document.getElementById('analyzeBtn');
-            
-            try {
-                analyzeBtn.disabled = true;
-                analyzeBtn.innerHTML = '<span>⏳</span><span>Processing...</span>';
-
-                if (activeTab === 'paste') {
-                    const text = document.getElementById('contractText').value.trim();
-                    if (!text) {
-                        showErrorDisplay('Please paste contract text');
-                        analyzeBtn.disabled = false;
-                        analyzeBtn.innerHTML = '<span>🔍</span><span>Analyze Contract</span>';
-                        return;
-                    }
-                    await analyzeContractText(text);
-                } else {
-                    if (!selectedFile) {
-                        showErrorDisplay('Please select a file');
-                        analyzeBtn.disabled = false;
-                        analyzeBtn.innerHTML = '<span>🔍</span><span>Analyze Contract</span>';
-                        return;
+        // Analyze button - REAL API CALLS
+        function setupAnalyzeButton() {
+            analyzeBtn.addEventListener('click', async function() {
+                const activeTab = document.querySelector('.tab.active').getAttribute('data-tab');
+                
+                try {
+                    showLoading();
+                    
+                    if (activeTab === 'paste') {
+                        const text = contractText.value.trim();
+                        if (!text) {
+                            showError('Please paste contract text');
+                            showUploadSection();
+                            return;
+                        }
+                        await analyzeContractText(text);
+                    } else {
+                        if (!selectedFile) {
+                            showError('Please select a file');
+                            showUploadSection();
+                            return;
+                        }
+                        await analyzeContractFile(selectedFile);
                     }
-                    await analyzeContractFile(selectedFile);
+                } catch (error) {
+                    console.error('Analysis error:', error);
+                    showError('Error starting analysis: ' + error.message);
+                    showUploadSection();
                 }
-            } catch (error) {
-                console.error('Analysis error:', error);
-                showErrorDisplay('Error starting analysis: ' + error.message);
-            } finally {
-                analyzeBtn.disabled = false;
-                analyzeBtn.innerHTML = '<span>🔍</span><span>Analyze Contract</span>';
-            }
-        });
-
-        // Function to show error display
-        function showErrorDisplay(message) {
-            document.getElementById('errorMessageText').textContent = message;
-            document.getElementById('errorDisplay').style.display = 'flex';
-            
-            // Setup OK button handler
-            document.getElementById('errorOkBtn').onclick = function() {
-                document.getElementById('errorDisplay').style.display = 'none';
-            };
+            });
         }
 
-        // Direct file analysis (synchronous)
-        async function analyzeContractFile(file) {
+        // Real API call for text analysis
+        async function analyzeContractText(text) {
             try {
-                showScreen('loading');
-
                 const formData = new FormData();
-                formData.append('file', file);
+                formData.append('contract_text', text);
                 formData.append('max_clauses', '15');
                 formData.append('interpret_clauses', 'true');
                 formData.append('generate_negotiation_points', 'true');
-                formData.append('compare_to_market', 'true');
+                formData.append('compare_to_market', 'false');
 
-                const response = await fetch(`${API_BASE_URL}/analyze/file`, {
+                const response = await fetch(`${API_BASE_URL}/analyze/text`, {
                     method: 'POST',
                     body: formData
                 });
 
                 if (!response.ok) {
-                    let errorDetail = 'Analysis failed';
-                    try {
-                        const errorData = await response.json();
-                        errorDetail = errorData.detail || errorData.error || errorDetail;
-                    } catch (e) {
-                        errorDetail = `Server error: ${response.status} ${response.statusText}`;
-                    }
-                    
-                    // IMMEDIATELY stop loading and show styled error
-                    showScreen('analyzer');
-                    showErrorDisplay(errorDetail);
-                    return;
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Analysis failed');
                 }
 
                 const result = await response.json();
                 currentAnalysisResult = result;
                 displayResults(result);
-                showScreen('results');
-
+                showResults();
             } catch (error) {
-                console.error('Error:', error);
-                // IMMEDIATELY stop loading and show styled error
-                showScreen('analyzer');
-                showErrorDisplay('Error analyzing contract: ' + error.message);
+                throw error;
             }
         }
 
-        // Direct text analysis (synchronous)
-        async function analyzeContractText(text) {
+        // Real API call for file analysis
+        async function analyzeContractFile(file) {
             try {
-                showScreen('loading');
-
                 const formData = new FormData();
-                formData.append('contract_text', text);
+                formData.append('file', file);
                 formData.append('max_clauses', '15');
                 formData.append('interpret_clauses', 'true');
                 formData.append('generate_negotiation_points', 'true');
-                formData.append('compare_to_market', 'true');
+                formData.append('compare_to_market', 'false');
 
-                const response = await fetch(`${API_BASE_URL}/analyze/text`, {
+                const response = await fetch(`${API_BASE_URL}/analyze/file`, {
                     method: 'POST',
                     body: formData
                 });
 
                 if (!response.ok) {
-                    let errorDetail = 'Analysis failed';
-                    try {
-                        const errorData = await response.json();
-                        errorDetail = errorData.detail || errorData.error || errorDetail;
-                    } catch (e) {
-                        errorDetail = `Server error: ${response.status} ${response.statusText}`;
-                    }
-                    
-                    // IMMEDIATELY stop loading and show styled error
-                    showScreen('analyzer');
-                    showErrorDisplay(errorDetail);
-                    return;
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Analysis failed');
                 }
 
                 const result = await response.json();
                 currentAnalysisResult = result;
                 displayResults(result);
-                showScreen('results');
-
+                showResults();
             } catch (error) {
-                console.error('Error:', error);
-                // IMMEDIATELY stop loading and show styled error
-                showScreen('analyzer');
-                showErrorDisplay('Error analyzing contract: ' + error.message);
+                throw error;
             }
         }
 
-        // Download PDF
-        document.getElementById('downloadBtn').addEventListener('click', async () => {
-            if (!currentAnalysisResult) {
-                alert('No analysis results available to download');
-                return;
-            }
+        // Download PDF - REAL API CALL
+        function setupDownloadButton() {
+            downloadBtn.addEventListener('click', async function() {
+                if (!currentAnalysisResult) {
+                    showError('No analysis results available to download');
+                    return;
+                }
 
-            try {
-                const response = await fetch(`${API_BASE_URL}/generate-pdf`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(currentAnalysisResult)
-                });
+                try {
+                    const response = await fetch(`${API_BASE_URL}/generate-pdf`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(currentAnalysisResult)
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Failed to generate PDF');
+                    }
 
-                if (!response.ok) {
-                    throw new Error('Failed to generate PDF');
+                    const blob = await response.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.style.display = 'none';
+                    a.href = url;
+                    a.download = `contract_analysis_${currentAnalysisResult.analysis_id}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                    document.body.removeChild(a);
+                } catch (error) {
+                    console.error('PDF download error:', error);
+                    showError('Error downloading PDF: ' + error.message);
                 }
+            });
+        }
 
-                const blob = await response.blob();
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.style.display = 'none';
-                a.href = url;
-                a.download = `contract_analysis_${currentAnalysisResult.analysis_id}.pdf`;
-                document.body.appendChild(a);
-                a.click();
-                window.URL.revokeObjectURL(url);
-                document.body.removeChild(a);
+        // ========== RESULTS DISPLAY FUNCTIONS ==========
 
-            } catch (error) {
-                console.error('PDF download error:', error);
-                alert('Error downloading PDF: ' + error.message);
+        function displayResults(result) {
+            // Store the result globally for PDF download
+            currentAnalysisResult = result;
+            
+            // Create tabbed interface for results
+            createResultsTabs();
+            
+            // Populate all sections
+            populateOverview(result);
+            populateUnfavorableTerms(result);
+            populateMissingProtections(result);
+            populateNegotiationPoints(result);
+            populateRiskBreakdown(result);
+            populateClauseAnalysis(result);
+            
+            showResults();
+        }
+
+        // Update the createResultsTabs function to remove the old risk circle update
+        function createResultsTabs() {
+            const resultsContent = document.getElementById('resultsContent');
+            
+            // Clear any existing tabs
+            const existingTabs = resultsContent.querySelector('.results-tabs');
+            if (existingTabs) {
+                existingTabs.remove();
             }
-        });
+            
+            // Create tabs container
+            const tabsContainer = document.createElement('div');
+            tabsContainer.className = 'results-tabs';
+            tabsContainer.innerHTML = `
+                <div class="results-tabs-nav">
+                    <button class="results-tab active" data-tab="overview">Overview</button>
+                    <button class="results-tab" data-tab="risk">Risk Analysis</button>
+                    <button class="results-tab" data-tab="terms">Unfavorable Terms</button>
+                    <button class="results-tab" data-tab="protections">Missing Protections</button>
+                    <button class="results-tab" data-tab="negotiation">Negotiation Points</button>
+                    <button class="results-tab" data-tab="clauses">Clause Analysis</button>
+                </div>
+                <div class="results-tabs-content">
+                    <div id="overviewTab" class="results-tab-pane active">
+                        <!-- Overview content will be populated here -->
+                    </div>
+                    <div id="riskTab" class="results-tab-pane">
+                        <!-- Risk analysis content will be populated here -->
+                    </div>
+                    <div id="termsTab" class="results-tab-pane">
+                        <!-- Unfavorable terms content will be populated here -->
+                    </div>
+                    <div id="protectionsTab" class="results-tab-pane">
+                        <!-- Missing protections content will be populated here -->
+                    </div>
+                    <div id="negotiationTab" class="results-tab-pane">
+                        <!-- Negotiation points content will be populated here -->
+                    </div>
+                    <div id="clausesTab" class="results-tab-pane">
+                        <!-- Clause analysis content will be populated here -->
+                    </div>
+                </div>
+            `;
+            
+            // Insert tabs after the results header
+            const resultsHeader = resultsContent.querySelector('.results-header');
+            resultsHeader.parentNode.insertBefore(tabsContainer, resultsHeader.nextSibling);
+            
+            // Add tab switching functionality
+            const tabs = tabsContainer.querySelectorAll('.results-tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    const tabName = this.getAttribute('data-tab');
+                    
+                    // Update tabs
+                    tabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    
+                    // Update content
+                    document.querySelectorAll('.results-tab-pane').forEach(pane => {
+                        pane.classList.remove('active');
+                    });
+                    document.getElementById(tabName + 'Tab').classList.add('active');
+                });
+            });
+        }
 
-        function displayResults(result) {
+        // Update the populateOverview function to handle the risk circle properly
+        function populateOverview(result) {
+            const overviewTab = document.getElementById('overviewTab');
             const score = result.risk_analysis.overall_score;
             const riskLevel = result.risk_analysis.risk_level;
             
-            // Update risk score
-            document.getElementById('riskScoreValue').textContent = score;
-            document.getElementById('riskLevel').textContent = riskLevel.toUpperCase();
-            document.getElementById('riskLevel').className = 'risk-level risk-' + getRiskClass(score);
+            overviewTab.innerHTML = `
+                <div class="results-grid">
+                    <div class="risk-score-card">
+                        <h2 class="risk-score-title">Overall Risk Score</h2>
+                        <div class="risk-circle">
+                            <svg width="200" height="200">
+                                <circle cx="100" cy="100" r="85" fill="none" stroke="#f0f0f0" stroke-width="20"/>
+                                <circle id="riskCircleOverview" cx="100" cy="100" r="85" fill="none" stroke="#dc2626" stroke-width="20" stroke-dasharray="534" stroke-dashoffset="534" stroke-linecap="round"/>
+                            </svg>
+                            <div class="risk-score-value">${score}</div>
+                        </div>
+                        <div class="risk-level risk-${getRiskClass(score)}">${riskLevel.toUpperCase()}</div>
+                    </div>
+                    <div class="executive-summary-card">
+                        <h2 class="executive-summary-title">Executive Summary</h2>
+                        <p class="executive-summary">${result.executive_summary}</p>
+                    </div>
+                </div>
+                
+                <div class="three-column-grid">
+                    <div class="analysis-card">
+                        <div class="analysis-card-header">
+                            <div class="analysis-card-icon">⚠️</div>
+                            <h3 class="analysis-card-title">Unfavorable Terms</h3>
+                        </div>
+                        <div class="analysis-card-body">
+                            <div class="stat-value">${result.unfavorable_terms ? result.unfavorable_terms.length : 0}</div>
+                            <div class="stat-label">Terms identified</div>
+                            <ul class="item-list">
+                                ${result.unfavorable_terms && result.unfavorable_terms.length > 0 ? 
+                                    result.unfavorable_terms.slice(0, 3).map(term => 
+                                        `<li><span class="item-icon">•</span><span class="item-text">${formatText(term.term)}</span></li>`
+                                    ).join('') : 
+                                    '<li>No unfavorable terms detected</li>'
+                                }
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="analysis-card">
+                        <div class="analysis-card-header">
+                            <div class="analysis-card-icon">🛡️</div>
+                            <h3 class="analysis-card-title">Missing Protections</h3>
+                        </div>
+                        <div class="analysis-card-body">
+                            <div class="stat-value">${result.missing_protections ? result.missing_protections.length : 0}</div>
+                            <div class="stat-label">Protections missing</div>
+                            <ul class="item-list">
+                                ${result.missing_protections && result.missing_protections.length > 0 ? 
+                                    result.missing_protections.slice(0, 3).map(protection => 
+                                        `<li><span class="item-icon">•</span><span class="item-text">${formatText(protection.protection)}</span></li>`
+                                    ).join('') : 
+                                    '<li>No missing protections detected</li>'
+                                }
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="analysis-card">
+                        <div class="analysis-card-header">
+                            <div class="analysis-card-icon">📖</div>
+                            <h3 class="analysis-card-title">Negotiation Points</h3>
+                        </div>
+                        <div class="analysis-card-body">
+                            <div class="stat-value">${result.negotiation_points ? result.negotiation_points.length : 0}</div>
+                            <div class="stat-label">Points to negotiate</div>
+                            <ul class="item-list">
+                                ${result.negotiation_points && result.negotiation_points.length > 0 ? 
+                                    result.negotiation_points.slice(0, 3).map(point => 
+                                        `<li><span class="item-icon">•</span><span class="item-text">${formatText(point.issue)}</span></li>`
+                                    ).join('') : 
+                                    '<li>No negotiation points generated</li>'
+                                }
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="analysis-card">
+                    <div class="analysis-card-header">
+                        <div class="analysis-card-icon">📊</div>
+                        <h3 class="analysis-card-title">Contract Classification</h3>
+                    </div>
+                    <div class="analysis-card-body">
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+                            <div>
+                                <div class="stat-label">Primary Category</div>
+                                <div class="stat-value">${capitalizeFirst(result.classification.category)}</div>
+                            </div>
+                            <div>
+                                <div class="stat-label">Subcategory</div>
+                                <div class="stat-value">${capitalizeFirst(result.classification.subcategory) || 'N/A'}</div>
+                            </div>
+                            <div>
+                                <div class="stat-label">Confidence</div>
+                                <div class="stat-value">${(result.classification.confidence * 100).toFixed(1)}%</div>
+                            </div>
+                            <div>
+                                <div class="stat-label">Contract Keywords Identified</div>
+                                <div class="stat-value">${result.classification.detected_keywords.length}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Update risk circle in overview after the HTML is rendered
+            setTimeout(() => {
+                const circle = document.getElementById('riskCircleOverview');
+                if (circle) {
+                    const circumference = 534;
+                    const offset = circumference - (score / 100) * circumference;
+                    circle.style.strokeDashoffset = offset;
+                    circle.style.stroke = getRiskColor(score);
+                }
+            }, 100);
+        }
+
+        // Populate unfavorable terms in a table
+        function populateUnfavorableTerms(result) {
+            const termsTab = document.getElementById('termsTab');
             
-            // Update risk circle
-            const circumference = 534;
-            const offset = circumference - (score / 100) * circumference;
-            const circle = document.getElementById('riskCircle');
-            circle.style.strokeDashoffset = offset;
+            if (!result.unfavorable_terms || result.unfavorable_terms.length === 0) {
+                termsTab.innerHTML = '<p>No unfavorable terms detected in this contract.</p>';
+                return;
+            }
             
-            // Get risk color and apply to both circle and text
-            const riskColor = getRiskColor(score);
-            circle.style.stroke = riskColor;
+            let tableHTML = `
+                <h3>Unfavorable Terms (${result.unfavorable_terms.length} found)</h3>
+                <div class="scrollable-table-container">
+                <table class="terms-table">
+                    <thead>
+                        <tr>
+                            <th>Term</th>
+                            <th>Category</th>
+                            <th>Severity</th>
+                            <th>Clause Reference</th>
+                            <th>Explanation</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            `;
             
-            // Update text color in the middle of the circle
-            const riskScoreValue = document.getElementById('riskScoreValue');
-            riskScoreValue.style.color = riskColor;
+            result.unfavorable_terms.forEach(term => {
+                tableHTML += `
+                    <tr>
+                        <td><strong>${formatText(term.term)}</strong></td>
+                        <td>${formatCategoryName(term.category)}</td>
+                        <td><span class="severity-badge badge-${term.severity}">${term.severity.toUpperCase()}</span></td>
+                        <td>${term.clause_reference || 'N/A'}</td>
+                        <td>${formatText(term.explanation)}</td>
+                    </tr>
+                `;
+            });
             
-            // Update executive summary
-            document.getElementById('executiveSummary').textContent = result.executive_summary;
-
-            // Update unfavorable terms
-            const unfavorableList = document.getElementById('unfavorableTermsList');
-            unfavorableList.innerHTML = '';
-            if (result.unfavorable_terms && result.unfavorable_terms.length > 0) {
-                result.unfavorable_terms.slice(0, 8).forEach(term => {
-                    const li = document.createElement('li');
-                    li.innerHTML = `<span class="item-icon">›</span><span class="item-text"><strong>${term.term}:</strong> ${term.explanation}</span>`;
-                    unfavorableList.appendChild(li);
-                });
-            } else {
-                unfavorableList.innerHTML = '<li>No unfavorable terms detected</li>';
-            }
+            tableHTML += `
+                    </tbody>
+                </table>
+                </div>
+            `;
+            
+            termsTab.innerHTML = tableHTML;
+        }
 
-            // Update missing protections
-            const missingList = document.getElementById('missingProtectionsList');
-            missingList.innerHTML = '';
-            if (result.missing_protections && result.missing_protections.length > 0) {
-                result.missing_protections.slice(0, 8).forEach(protection => {
-                    const li = document.createElement('li');
-                    li.innerHTML = `<span class="item-icon">›</span><span class="item-text"><strong>${protection.protection}:</strong> ${protection.explanation}</span>`;
-                    missingList.appendChild(li);
-                });
-            } else {
-                missingList.innerHTML = '<li>No missing protections detected</li>';
+        // Populate missing protections in a table
+        function populateMissingProtections(result) {
+            const protectionsTab = document.getElementById('protectionsTab');
+            
+            if (!result.missing_protections || result.missing_protections.length === 0) {
+                protectionsTab.innerHTML = '<p>No missing protections detected in this contract.</p>';
+                return;
             }
+            
+            let tableHTML = `
+                <h3>Missing Protections (${result.missing_protections.length} found)</h3>
+                <div class="scrollable-table-container">
+                <table class="protections-table">
+                    <thead>
+                        <tr>
+                            <th>Protection</th>
+                            <th>Importance</th>
+                            <th>Risk Score</th>
+                            <th>Explanation</th>
+                            <th>Suggested Language</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            `;
+            
+            result.missing_protections.forEach(protection => {
+                tableHTML += `
+                    <tr>
+                        <td><strong>${formatText(protection.protection)}</strong></td>
+                        <td><span class="severity-badge badge-${protection.importance}">${protection.importance.toUpperCase()}</span></td>
+                        <td>${protection.risk_score}/100</td>
+                        <td>${formatText(protection.explanation)}</td>
+                        <td>${formatText(protection.suggested_language || protection.recommendation)}</td>
+                    </tr>
+                `;
+            });
+            
+            tableHTML += `
+                    </tbody>
+                </table>
+                </div>
+            `;
+            
+            protectionsTab.innerHTML = tableHTML;
+        }
 
-            // Update negotiation points
-            const negotiationList = document.getElementById('negotiationPointsList');
-            negotiationList.innerHTML = '';
-            if (result.negotiation_points && result.negotiation_points.length > 0) {
-                // Sort by priority (lower number = higher priority)
-                const sortedPoints = result.negotiation_points
-                    .slice()
-                    .sort((a, b) => a.priority - b.priority)
-                    .slice(0, 8);
-                
-                sortedPoints.forEach(point => {
-                    const li = document.createElement('li');
-                    li.innerHTML = `<span class="item-icon">›</span><span class="item-text"><strong>${point.issue}:</strong> ${point.rationale}</span>`;
-                    negotiationList.appendChild(li);
-                });
-            } else {
-                negotiationList.innerHTML = '<li>No negotiation points generated yet</li>';
+        // Populate negotiation points in a table
+        function populateNegotiationPoints(result) {
+            const negotiationTab = document.getElementById('negotiationTab');
+            
+            if (!result.negotiation_points || result.negotiation_points.length === 0) {
+                negotiationTab.innerHTML = '<p>No negotiation points generated for this contract.</p>';
+                return;
             }
+            
+            let tableHTML = `
+                <h3>Negotiation Points (${result.negotiation_points.length} identified)</h3>
+                <div class="scrollable-table-container">
+                <table class="negotiation-table">
+                    <thead>
+                        <tr>
+                            <th>Priority</th>
+                            <th>Issue</th>
+                            <th>Category</th>
+                            <th>Current Language</th>
+                            <th>Proposed Language</th>
+                            <th>Rationale</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            `;
+            
+            // Sort by priority
+            const sortedPoints = [...result.negotiation_points].sort((a, b) => a.priority - b.priority);
+            
+            sortedPoints.forEach(point => {
+                tableHTML += `
+                    <tr>
+                        <td>${point.priority}</td>
+                        <td><strong>${formatText(point.issue)}</strong></td>
+                        <td>${formatCategoryName(point.category)}</td>
+                        <td>${formatText(point.current_language || 'Not specified')}</td>
+                        <td>${formatText(point.proposed_language || 'Request balanced language')}</td>
+                        <td>${formatText(point.rationale)}</td>
+                    </tr>
+                `;
+            });
+            
+            tableHTML += `
+                    </tbody>
+                </table>
+                </div>
+            `;
+            
+            negotiationTab.innerHTML = tableHTML;
+        }
 
-            // Update category breakdown
-            const categoryBreakdown = document.getElementById('categoryBreakdown');
-            categoryBreakdown.innerHTML = '';
+        // Populate risk breakdown with cards
+        function populateRiskBreakdown(result) {
+            const riskTab = document.getElementById('riskTab');
             
-            if (result.risk_analysis.category_scores) {
-                Object.entries(result.risk_analysis.category_scores).forEach(([category, score]) => {
-                    const categoryItem = document.createElement('div');
-                    categoryItem.className = 'category-item';
-                    
-                    const riskClass = getRiskClass(score);
-                    const riskColor = getRiskColor(score);
-                    
-                    categoryItem.innerHTML = `
-                        <div class="category-header">
-                            <span class="category-name">${formatCategoryName(category)}</span>
-                            <span class="category-score score-${riskClass}">${score}/100</span>
+            if (!result.risk_analysis.category_scores) {
+                riskTab.innerHTML = '<p>No risk breakdown available for this contract.</p>';
+                return;
+            }
+            
+            // Filter out categories with 0 risk and sort by risk score (descending)
+            const filteredCategories = Object.entries(result.risk_analysis.category_scores)
+                .filter(([category, score]) => score > 0)
+                .sort(([, scoreA], [, scoreB]) => scoreB - scoreA);
+            
+            if (filteredCategories.length === 0) {
+                riskTab.innerHTML = '<p>No significant risk categories identified in this contract.</p>';
+                return;
+            }
+            
+            let riskHTML = `
+                <h3>Risk Category Breakdown</h3>
+                <div class="risk-category-grid">
+            `;
+            
+            filteredCategories.forEach(([category, score]) => {
+                const riskClass = getRiskClass(score);
+                const categoryDetails = result.risk_analysis.risk_breakdown?.find(
+                    item => item.category.toLowerCase().replace(/\s+/g, '_') === category
+                ) || { summary: 'Review recommended based on risk score', findings: [] };
+                
+                riskHTML += `
+                    <div class="risk-category-card ${riskClass}">
+                        <div class="risk-category-header">
+                            <span class="risk-category-name">${formatCategoryName(category)}</span>
+                            <span class="risk-category-score score-${riskClass}">${score}/100</span>
                         </div>
                         <div class="progress-bar">
                             <div class="progress-fill progress-${riskClass}" style="width: ${score}%"></div>
                         </div>
-                        <div class="category-description">
-                            ${getCategoryDescription(category, score)}
-                        </div>
-                    `;
-                    
-                    categoryBreakdown.appendChild(categoryItem);
-                });
-            }
+                        <div class="risk-category-summary">${categoryDetails.summary}</div>
+                        ${categoryDetails.findings && categoryDetails.findings.length > 0 ? `
+                            <div class="risk-findings">
+                                <strong>Key Findings:</strong>
+                                <ul>
+                                    ${categoryDetails.findings.slice(0, 3).map(finding => `<li>${formatText(finding)}</li>`).join('')}
+                                </ul>
+                            </div>
+                        ` : ''}
+                    </div>
+                `;
+            });
+            
+            riskHTML += `</div>`;
+            
+            riskTab.innerHTML = riskHTML;
+        }
 
-            // Update clause analysis
-            const clauseAnalysis = document.getElementById('clauseAnalysis');
-            clauseAnalysis.innerHTML = '';
+        // Populate clause analysis with detailed view
+        function populateClauseAnalysis(result) {
+            const clausesTab = document.getElementById('clausesTab');
             
-            if (result.clauses && result.clauses.length > 0) {
-                result.clauses.slice(0, 10).forEach(clause => {
-                    const clauseItem = document.createElement('div');
-                    clauseItem.className = `clause-item ${getRiskClass(clause.confidence * 100)}`;
-                    
-                    // Clean up the text - normalize all whitespace
-                    const cleanText = clause.text ? 
-                        clause.text
-                            .replace(/\n/g, ' ')          // Replace newlines with spaces
-                            .replace(/\s+/g, ' ')         // Replace multiple spaces with single space
-                            .trim() :                     // Remove leading/trailing spaces
-                        'No text available';
-                    
-                    clauseItem.innerHTML = `
-                        <div class="clause-header" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
-                            <div style="flex: 1; min-width: 0;">
-                                <div class="clause-label">${clause.reference} • ${clause.category}</div>
-                                <div class="clause-text" style="line-height: 1.6; margin-top: 0.5rem;">
-                                    ${cleanText}
-                                </div>
+            if (!result.clauses || result.clauses.length === 0) {
+                clausesTab.innerHTML = '<p>No clauses extracted from this contract.</p>';
+                return;
+            }
+            
+            let clausesHTML = `
+                <h3>Clause-by-Clause Analysis (${result.clauses.length} clauses)</h3>
+                <div class="clauses-container">
+            `;
+            
+            result.clauses.forEach(clause => {
+                const riskClass = getRiskClass(clause.risk_score || 0);
+                const interpretation = result.clause_interpretations?.find(
+                    interp => interp.clause_reference === clause.reference
+                );
+                
+                clausesHTML += `
+                    <div class="clause-item ${riskClass}">
+                        <div class="clause-header">
+                            <div>
+                                <div class="clause-reference">${clause.reference || 'CLAUSE'}</div>
+                                <div class="clause-text">${clause.text}</div>
                             </div>
-                            <div class="severity-badge badge-${getRiskClass(clause.confidence * 100)}" style="flex-shrink: 0; white-space: nowrap;">
-                                ${Math.round(clause.confidence * 100)}% confidence
+                            <div class="severity-badge badge-${riskClass}">
+                                ${Math.round(clause.risk_score || 0)}% risk
                             </div>
                         </div>
-                        ${clause.risk_indicators && clause.risk_indicators.length > 0 ? `
+                        <div class="clause-details">
                             <div class="clause-section">
-                                <div class="clause-section-title">Risk Indicators</div>
-                                <div class="clause-section-text">${clause.risk_indicators.join(', ')}</div>
+                                <div class="clause-section-title">Category</div>
+                                <div class="clause-section-text">${formatCategoryName(clause.category)}</div>
                             </div>
-                        ` : ''}
-                    `;
-                    
-                    clauseAnalysis.appendChild(clauseItem);
-                });
-            }
+                            ${interpretation ? `
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Plain English Summary</div>
+                                    <div class="clause-section-text">${interpretation.plain_english_summary}</div>
+                                </div>
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Key Points</div>
+                                    <div class="clause-section-text">
+                                        <ul>
+                                            ${interpretation.key_points.map(point => `<li>${formatText(point)}</li>`).join('')}
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Potential Risks</div>
+                                    <div class="clause-section-text">
+                                        <ul>
+                                            ${interpretation.potential_risks.map(risk => `<li>${formatText(risk)}</li>`).join('')}
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Suggested Improvements</div>
+                                    <div class="clause-section-text">
+                                        <ul>
+                                            ${interpretation.suggested_improvements.map(improvement => `<li>${formatText(improvement)}</li>`).join('')}
+                                        </ul>
+                                    </div>
+                                </div>
+                            ` : `
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Analysis</div>
+                                    <div class="clause-section-text">${clause.explanation || 'Analysis not available.'}</div>
+                                </div>
+                                <div class="clause-section">
+                                    <div class="clause-section-title">Recommendation</div>
+                                    <div class="clause-section-text">${clause.suggested_fix || 'Review with legal counsel.'}</div>
+                                </div>
+                            `}
+                        </div>
+                    </div>
+                `;
+            });
+            
+            clausesHTML += `</div>`;
+            
+            clausesTab.innerHTML = clausesHTML;
         }
 
+        // Helper functions
         function getRiskClass(score) {
             if (score >= 80) return 'critical';
             if (score >= 60) return 'high';
@@ -1690,20 +2008,38 @@
             ).join(' ');
         }
 
-        function getCategoryDescription(category, score) {
-            const descriptions = {
-                'termination': score > 60 ? 'High termination risk detected' : 'Termination terms appear reasonable',
-                'compensation': score > 60 ? 'Compensation structure needs review' : 'Compensation terms are clear',
-                'confidentiality': score > 60 ? 'Confidentiality terms may be overly broad' : 'Confidentiality terms are balanced',
-                'liability': score > 60 ? 'Liability allocation needs attention' : 'Liability terms are reasonable',
-                'intellectual_property': score > 60 ? 'IP rights allocation requires review' : 'IP terms are well-defined'
-            };
+        function formatText(text) {
+            if (!text) return '';
+            return text.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+        }
+
+        function capitalizeFirst(text) {
+            if (!text) return '';
+            return text.charAt(0).toUpperCase() + text.slice(1);
+        }
+
+        // Initialize everything
+        function init() {
+            // Navigation
+            getStartedBtn.addEventListener('click', showAnalyzer);
+            backToLandingBtn.addEventListener('click', showLanding);
+            analyzeAnotherBtn.addEventListener('click', showUploadSection);
+            errorOkBtn.addEventListener('click', () => errorDisplay.style.display = 'none');
+            
+            // Setup features
+            setupTabs();
+            setupFileUpload();
+            setupAnalyzeButton();
+            setupDownloadButton();
+            
+            // Start with landing screen
+            showLanding();
             
-            return descriptions[category] || 'Review recommended based on risk score';
+            console.log('AI Contract Analyzer initialized successfully');
         }
 
-        // Initialize
-        showScreen('landing');
+        // Start when page loads
+        window.addEventListener('load', init);
     </script>
 </body>
 </html>
\ No newline at end of file