diff --git a/index.html b/index.html
index b061ebf..67c0b70 100644
--- a/index.html
+++ b/index.html
@@ -67,14 +67,14 @@
         .card {
             background: var(--surface);
             border-radius: 12px;
-            padding: 30px;
-            margin-bottom: 30px;
+            padding: 20px;
+            margin-bottom: 20px;
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
         
         .card h2 {
-            font-size: 24px;
-            margin-bottom: 20px;
+            font-size: 20px;
+            margin-bottom: 15px;
             color: var(--text);
         }
         
@@ -354,10 +354,23 @@
         
         /* Issues */
         .issue {
-            padding: 20px;
-            margin-bottom: 15px;
-            border-radius: 8px;
-            border-left: 4px solid;
+            padding: 10px 12px;
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border-left: 3px solid;
+        }
+
+        /* Multi-column layout for issues */
+        .issues-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+            gap: 10px;
+        }
+
+        @media (max-width: 1200px) {
+            .issues-grid {
+                grid-template-columns: 1fr;
+            }
         }
         
         .issue.CRITICAL {
@@ -414,25 +427,27 @@
         
         .issue-description {
             color: var(--text);
-            margin-bottom: 10px;
-            line-height: 1.6;
+            margin-bottom: 6px;
+            line-height: 1.4;
+            font-size: 14px;
         }
-        
+
         .issue-meta {
             display: flex;
-            gap: 20px;
-            font-size: 14px;
+            gap: 15px;
+            font-size: 12px;
             color: var(--text-light);
-            margin-bottom: 10px;
+            margin-bottom: 6px;
         }
-        
+
         .issue-recommendation {
-            background: white;
-            padding: 12px;
-            border-radius: 6px;
-            border-left: 3px solid var(--success);
-            font-size: 14px;
+            background: #f0fdf4;
+            padding: 8px 10px;
+            border-radius: 4px;
+            border-left: 2px solid var(--success);
+            font-size: 13px;
             color: var(--text);
+            margin-top: 6px;
         }
         
         .issue-recommendation strong {
@@ -646,7 +661,7 @@
                         </div>
 
                         <div id="pageImageContainer" style="overflow: auto; max-height: 800px; background: white; border-radius: 8px; position: relative;">
-                            <div style="position: relative; display: inline-block;">
+                            <div id="zoomContainer" style="position: relative; display: inline-block; transform-origin: top left;">
                                 <img id="pageImage" src="" alt="PDF Page" style="display: block; max-width: 100%;">
                                 <svg id="markerOverlay" style="position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%;"></svg>
                             </div>
@@ -1031,9 +1046,9 @@
             // Create page overview map
             const pageNumbers = Object.keys(pageGroups).map(Number).sort((a, b) => a - b);
             const pageOverview = pageNumbers.length > 0 ? `
-                <div style="background: white; padding: 20px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                    <h3 style="margin-bottom: 15px; font-size: 18px;">📄 Page Overview</h3>
-                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px;">
+                <div style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                    <h3 style="margin-bottom: 10px; font-size: 16px; font-weight: 600;">📄 Page Overview</h3>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); gap: 8px;">
                         ${pageNumbers.map(pageNum => {
                             const pageIssues = pageGroups[pageNum];
                             const criticalCount = pageIssues.filter(i => i.severity === 'CRITICAL').length;
@@ -1052,10 +1067,10 @@
                             }
 
                             return `
-                                <div onclick="scrollToPage(${pageNum})" style="cursor: pointer; background: ${bgColor}; color: ${iconColor}; padding: 15px 10px; border-radius: 8px; text-align: center; transition: transform 0.2s; font-weight: 600;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-                                    <div style="font-size: 12px; opacity: 0.9;">Page</div>
-                                    <div style="font-size: 20px;">${pageNum}</div>
-                                    <div style="font-size: 11px; margin-top: 5px;">${pageIssues.length} issue${pageIssues.length !== 1 ? 's' : ''}</div>
+                                <div onclick="scrollToPage(${pageNum})" style="cursor: pointer; background: ${bgColor}; color: ${iconColor}; padding: 10px 8px; border-radius: 6px; text-align: center; transition: transform 0.2s; font-weight: 600;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
+                                    <div style="font-size: 10px; opacity: 0.9;">Page</div>
+                                    <div style="font-size: 18px;">${pageNum}</div>
+                                    <div style="font-size: 10px; margin-top: 3px;">${pageIssues.length} ${pageIssues.length === 1 ? 'issue' : 'issues'}</div>
                                 </div>
                             `;
                         }).join('')}
@@ -1070,11 +1085,11 @@
             if (documentWideIssues.length > 0) {
                 issuesHTML += `
                     <div id="page-document" style="margin-bottom: 30px;">
-                        <h3 style="font-size: 20px; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer;" onclick="togglePageSection('document')">
+                        <h3 style="font-size: 18px; margin-bottom: 10px; padding: 10px 12px; background: #f8f9fa; border-radius: 6px; cursor: pointer;" onclick="togglePageSection('document')">
                             📋 Document-Wide Issues (${documentWideIssues.length})
                             <span id="toggle-document" style="float: right;">▼</span>
                         </h3>
-                        <div id="section-document" style="display: block;">
+                        <div id="section-document" class="issues-grid" style="display: block;">
                             ${documentWideIssues.map(issue => createIssueCard(issue)).join('')}
                         </div>
                     </div>
@@ -1089,15 +1104,15 @@
                 const warningCount = pageIssues.filter(i => i.severity === 'WARNING').length;
 
                 issuesHTML += `
-                    <div id="page-${pageNum}" style="margin-bottom: 30px;">
-                        <h3 style="font-size: 20px; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer;" onclick="togglePageSection(${pageNum})">
+                    <div id="page-${pageNum}" style="margin-bottom: 20px;">
+                        <h3 style="font-size: 18px; margin-bottom: 10px; padding: 10px 12px; background: #f8f9fa; border-radius: 6px; cursor: pointer;" onclick="togglePageSection(${pageNum})">
                             📄 Page ${pageNum} - ${pageIssues.length} Issue${pageIssues.length !== 1 ? 's' : ''}
-                            ${criticalCount > 0 ? `<span style="background: #dc2626; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${criticalCount} Critical</span>` : ''}
-                            ${errorCount > 0 ? `<span style="background: #ef4444; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${errorCount} Error${errorCount !== 1 ? 's' : ''}</span>` : ''}
-                            ${warningCount > 0 ? `<span style="background: #f59e0b; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${warningCount} Warning${warningCount !== 1 ? 's' : ''}</span>` : ''}
+                            ${criticalCount > 0 ? `<span style="background: #dc2626; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 8px;">${criticalCount} Critical</span>` : ''}
+                            ${errorCount > 0 ? `<span style="background: #ef4444; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 8px;">${errorCount} Error${errorCount !== 1 ? 's' : ''}</span>` : ''}
+                            ${warningCount > 0 ? `<span style="background: #f59e0b; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 8px;">${warningCount} Warning${warningCount !== 1 ? 's' : ''}</span>` : ''}
                             <span id="toggle-${pageNum}" style="float: right;">▼</span>
                         </h3>
-                        <div id="section-${pageNum}" style="display: block;">
+                        <div id="section-${pageNum}" class="issues-grid" style="display: block;">
                             ${pageIssues.map(issue => createIssueCard(issue)).join('')}
                         </div>
                     </div>
@@ -1140,20 +1155,20 @@
                 : '📌';
 
             return `
-                <div class="issue ${issue.severity}" style="margin-bottom: 15px; border-left: 4px solid var(--${issue.severity.toLowerCase()});">
-                    <div class="issue-header" style="display: flex; justify-content: space-between; align-items: center;">
-                        <div class="issue-category" style="display: flex; align-items: center; gap: 8px;">
-                            <span style="font-size: 20px;">${categoryIcon}</span>
+                <div class="issue ${issue.severity}">
+                    <div class="issue-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+                        <div class="issue-category" style="display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;">
+                            <span style="font-size: 16px;">${categoryIcon}</span>
                             <span>${issue.category}</span>
                         </div>
-                        <span class="issue-badge ${issue.severity}" style="display: flex; align-items: center; gap: 5px;">
+                        <span class="issue-badge ${issue.severity}" style="display: flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 8px;">
                             <span>${icon}</span>
                             <span>${issue.severity}</span>
                         </span>
                     </div>
                     <div class="issue-description">${issue.description}</div>
                     ${issue.wcag_criterion ? `<div class="issue-meta"><span>📋 WCAG ${issue.wcag_criterion}</span></div>` : ''}
-                    ${issue.recommendation ? `<div class="issue-recommendation"><strong>💡 How to Fix:</strong> ${issue.recommendation}</div>` : ''}
+                    ${issue.recommendation ? `<div class="issue-recommendation"><strong>💡</strong> ${issue.recommendation}</div>` : ''}
                 </div>
             `;
         }
@@ -1487,15 +1502,12 @@
         }
 
         function applyZoom() {
-            const pageImage = document.getElementById('pageImage');
-            pageImage.style.transform = `scale(${currentZoom})`;
-            pageImage.style.transformOrigin = 'top left';
+            // Scale the entire container (image + SVG together)
+            const zoomContainer = document.getElementById('zoomContainer');
+            zoomContainer.style.transform = `scale(${currentZoom})`;
             document.getElementById('zoomLevel').textContent = `${Math.round(currentZoom * 100)}%`;
 
-            // Redraw markers at new scale
-            if (currentVisualPage) {
-                setTimeout(() => drawMarkers(currentVisualPage), 50);
-            }
+            // No need to redraw markers - they scale with the container automatically!
         }
     </script>
 </body>