diff --git a/compare.html b/compare.html
index 7607e02..3d11e45 100644
--- a/compare.html
+++ b/compare.html
@@ -77,6 +77,23 @@
   margin: 1rem 0;
 }
 
+.cta-section {
+  margin-top: 3rem;
+  padding: 2rem;
+  background: rgba(46, 204, 113, 0.1);
+  border-left: 4px solid var(--acreetion-green);
+  border-radius: 4px;
+}
+
+.cta-section h3 {
+  color: var(--acreetion-green);
+  margin-bottom: 1rem;
+}
+
+.cta-section p {
+  margin-bottom: 1rem;
+}
+
 @media (max-width: 768px) {
   .comparison-table {
     font-size: 0.85rem;
@@ -96,6 +113,26 @@
   .feature-card {
     padding: 1rem;
   }
+  
+  .content-box .box-header h1 {
+    font-size: 1.5rem;
+  }
+  
+  .content-box .box-body h2 {
+    font-size: 1.3rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .content-box .box-body h3 {
+    font-size: 1.1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .content-box .box-body > p:first-child {
+    font-size: 1rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -115,6 +152,40 @@
   .feature-card p {
     font-size: 0.85rem;
   }
+  
+  .content-box .box-header h1 {
+    font-size: 1.3rem;
+  }
+  
+  .content-box .box-body h2 {
+    font-size: 1.1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .content-box .box-body h3 {
+    font-size: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .content-box .box-body > p:first-child {
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .cta-section {
+    margin-top: 2rem;
+    padding: 1rem;
+  }
+  
+  .cta-section h3 {
+    font-size: 1rem;
+  }
+  
+  .cta-section p {
+    font-size: 0.9rem;
+  }
 }
 </style>
 <script>
@@ -227,6 +298,7 @@ <h2 style="color: var(--acreetion-green); margin-top: 2rem; margin-bottom: 1rem;
 <h2 style="color: var(--acreetion-green); margin-top: 3rem; margin-bottom: 1rem;">Detailed Comparisons</h2>
 
 <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Ubuntu</h3>
+<div style="overflow-x: auto;">
 <table class="comparison-table">
 <thead>
 <tr>
@@ -268,8 +340,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
 </tr>
 </tbody>
 </table>
+</div>
 
 <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Linux Mint</h3>
+<div style="overflow-x: auto;">
 <table class="comparison-table">
 <thead>
 <tr>
@@ -306,8 +380,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
 </tr>
 </tbody>
 </table>
+</div>
 
 <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Manjaro</h3>
+<div style="overflow-x: auto;">
 <table class="comparison-table">
 <thead>
 <tr>
@@ -344,8 +420,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
 </tr>
 </tbody>
 </table>
+</div>
 
 <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Arch Linux</h3>
+<div style="overflow-x: auto;">
 <table class="comparison-table">
 <thead>
 <tr>
@@ -387,6 +465,7 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
 </tr>
 </tbody>
 </table>
+</div>
 
 <h2 style="color: var(--acreetion-green); margin-top: 3rem; margin-bottom: 1rem;">Why Choose AcreetionOS?</h2>
 
@@ -422,9 +501,9 @@ <h3>👥 Community Driven</h3>
 </div>
 </div>
 
-<div style="margin-top: 3rem; padding: 2rem; background: rgba(46, 204, 113, 0.1); border-left: 4px solid var(--acreetion-green); border-radius: 4px;">
-<h3 style="color: var(--acreetion-green); margin-bottom: 1rem;">Ready to Switch?</h3>
-<p style="margin-bottom: 1rem;">AcreetionOS combines the power of Arch Linux with the ease of Ubuntu. Try it risk-free with a live USB!</p>
+<div class="cta-section">
+<h3>Ready to Switch?</h3>
+<p>AcreetionOS combines the power of Arch Linux with the ease of Ubuntu. Try it risk-free with a live USB!</p>
 <a href="index.html#manual-downloads" class="btn">Download AcreetionOS</a>
 <a href="install.html" class="btn" style="background-color: var(--storm-color);">Installation Guide</a>
 </div>
diff --git a/tests/basic.spec.js b/tests/basic.spec.js
index 6df3b59..d81ce33 100644
--- a/tests/basic.spec.js
+++ b/tests/basic.spec.js
@@ -122,46 +122,39 @@ test.describe('Mobile Responsiveness', () => {
     await expect(nameInput).toBeVisible();
   });
 
-  test('FAQ page renders correctly on mobile (375px)', async ({ page }) => {
-    // Set mobile viewport (iPhone size)
+  test('compare page tables are scrollable on mobile', async ({ page }) => {
+    // Set mobile viewport (iPhone SE size)
     await page.setViewportSize({ width: 375, height: 667 });
-    await page.goto('/faq.html');
+    await page.goto('/compare.html');
     
     // Verify page loads
-    await expect(page).toHaveTitle(/FAQ/);
+    await expect(page).toHaveTitle(/Compare/);
     
-    // Verify FAQ sections are visible
-    const faqSection = page.locator('.faq-section').first();
-    await expect(faqSection).toBeVisible();
+    // Verify all comparison tables have overflow wrappers
+    const overflowWrappers = page.locator('div[style*="overflow-x: auto"]');
+    const count = await overflowWrappers.count();
+    expect(count).toBeGreaterThanOrEqual(5); // Should have 5 tables with overflow wrappers (1 quick comparison + 4 detailed)
     
-    // Verify FAQ questions are clickable
-    const faqQuestion = page.locator('.faq-question').first();
-    await expect(faqQuestion).toBeVisible();
+    // Verify tables are visible
+    const tables = page.locator('.comparison-table');
+    const tableCount = await tables.count();
+    expect(tableCount).toBeGreaterThan(0);
     
-    // Verify table of contents is visible
-    const faqToc = page.locator('.faq-toc');
-    await expect(faqToc).toBeVisible();
+    // Verify first table is visible
+    await expect(tables.first()).toBeVisible();
   });
 
-  test('FAQ page renders correctly on very small mobile (320px)', async ({ page }) => {
-    // Set very small mobile viewport
-    await page.setViewportSize({ width: 320, height: 568 });
-    await page.goto('/faq.html');
-    
-    // Verify page loads
-    await expect(page).toHaveTitle(/FAQ/);
-    
-    // Verify critical elements are still visible and accessible
-    const faqSection = page.locator('.faq-section').first();
-    await expect(faqSection).toBeVisible();
+  test('compare page feature cards stack on mobile', async ({ page }) => {
+    // Set mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/compare.html');
     
-    // Verify code blocks don't cause horizontal scrolling issues
-    const preBlocks = page.locator('.faq-answer pre');
-    const count = await preBlocks.count();
-    expect(count).toBeGreaterThan(0);
+    // Verify feature cards are visible
+    const featureCards = page.locator('.feature-card');
+    const cardCount = await featureCards.count();
+    expect(cardCount).toBeGreaterThan(0);
     
-    // Verify buttons are visible
-    const buttons = page.locator('.btn');
-    await expect(buttons.first()).toBeVisible();
+    // Verify first card is visible
+    await expect(featureCards.first()).toBeVisible();
   });
 });