diff --git a/kjvstudy_org/static/app.js b/kjvstudy_org/static/app.js
index aa09049..759b06b 100644
--- a/kjvstudy_org/static/app.js
+++ b/kjvstudy_org/static/app.js
@@ -539,4 +539,42 @@ function toggleSidebar() {
             mainContent.style.width = '100%';
         }
     }
-}
\ No newline at end of file
+    
+    // Fix background color issues
+    fixBackgroundColors();
+}
+
+// Fix background color issues in browsers
+function fixBackgroundColors() {
+    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
+    const surfaceColor = getComputedStyle(document.documentElement).getPropertyValue('--surface-color').trim();
+    
+    // Apply background color to main elements
+    document.body.style.backgroundColor = bgColor;
+    
+    // Apply to main content areas
+    const mainContent = document.querySelector('.main-content');
+    if (mainContent) {
+        mainContent.style.backgroundColor = bgColor;
+    }
+    
+    // Apply to containers
+    const containers = document.querySelectorAll('.container, .narrow-container, .commentary-container');
+    containers.forEach(container => {
+        container.style.backgroundColor = bgColor;
+    });
+    
+    // Apply to cards and content areas
+    const surfaceElements = document.querySelectorAll('.verse-card, .commentary-section, .chapter-overview, .verse-text');
+    surfaceElements.forEach(element => {
+        element.style.backgroundColor = surfaceColor;
+    });
+}
+
+// Run background fix on page load
+document.addEventListener('DOMContentLoaded', function() {
+    fixBackgroundColors();
+    
+    // Run again after a slight delay to catch any dynamic content
+    setTimeout(fixBackgroundColors, 100);
+});
\ No newline at end of file
diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css
index 360d1d6..3c32beb 100644
--- a/kjvstudy_org/static/style.css
+++ b/kjvstudy_org/static/style.css
@@ -59,11 +59,11 @@ body {
 }
 
 .sidebar {
-  width: 280px;
+  width: 220px;
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
   color: white;
   overflow-y: auto;
-  padding: 2rem 0;
+  padding: 1.5rem 0;
   box-shadow: var(--shadow-lg);
   position: fixed;
   height: 100vh;
@@ -79,14 +79,14 @@ body {
 }
 
 .sidebar-header {
-  padding: 0 1.5rem 2rem;
+  padding: 0 1rem 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .sidebar-title {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 600;
   margin: 0;
   color: white;
@@ -103,27 +103,27 @@ body {
 }
 
 .sidebar-nav {
-  padding: 0 1rem;
+  padding: 0 0.75rem;
 }
 
 .sidebar-nav h3 {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: rgba(255, 255, 255, 0.6);
-  margin: 1.5rem 0.5rem 0.75rem;
+  margin: 1.25rem 0.5rem 0.5rem;
 }
 
 .sidebar-nav a {
   display: block;
   color: rgba(255, 255, 255, 0.8);
-  padding: 0.625rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   text-decoration: none;
   border-radius: var(--radius-sm);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.15rem;
   transition: all 0.2s ease;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .sidebar-nav a:hover {
@@ -173,7 +173,7 @@ body {
 
 .main-content {
   flex: 1;
-  margin-left: 280px;
+  margin-left: 220px;
   min-height: 100vh;
   position: relative;
   z-index: 10;
@@ -182,7 +182,7 @@ body {
   backface-visibility: hidden;
   will-change: opacity;
   transition: opacity 0.3s ease;
-  width: calc(100% - 280px);
+  width: calc(100% - 220px);
   box-sizing: border-box;
 }
 
@@ -501,9 +501,9 @@ body {
 /* Tablet-specific styles */
 @media (min-width: 769px) and (max-width: 1024px) {
   .sidebar {
-    width: 240px;
-    transform: translateX(-240px);
-    -webkit-transform: translate3d(-240px, 0, 0);
+    width: 200px;
+    transform: translateX(-200px);
+    -webkit-transform: translate3d(-200px, 0, 0);
     position: fixed;
     left: 0;
     top: 0;
@@ -690,7 +690,7 @@ html,
 .layout, 
 .main-content {
   min-height: 100vh;
-  background-color: var(--background-color);
+  background-color: var(--background-color) !important;
   position: relative;
 }
 
@@ -702,7 +702,7 @@ html,
   left: 0;
   right: 0;
   height: 100%;
-  background-color: var(--background-color);
+  background-color: var(--background-color) !important;
   z-index: -1;
 }
 
@@ -711,7 +711,7 @@ html,
 .commentary-content,
 .container,
 .narrow-container {
-  background-color: var(--background-color);
+  background-color: var(--background-color) !important;
   position: relative;
   z-index: 1;
 }
diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index fe96875..3b0e596 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -50,34 +50,50 @@
     <style>
         html, body {
             min-height: 100vh;
-            background-color: var(--background-color);
+            background-color: var(--background-color) !important;
             overflow-x: hidden;
         }
-        
+            
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--background-color) !important;
+            z-index: -2;
+        }
+            
         @media (min-width: 769px) and (max-width: 1024px) {
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
                 height: 100%;
-                width: 240px;
-                transform: translateX(-240px);
+                width: 200px;
+                transform: translateX(-200px);
             }
-            
+                
             .sidebar.open {
                 transform: translateX(0);
             }
-            
+                
             .main-content {
                 margin-left: 0;
                 width: 100%;
+                background-color: var(--background-color) !important;
             }
         }
-    </style>
-    <style>
-        html, body {
-            min-height: 100vh;
-            background-color: var(--background-color);
+            
+        .container, .narrow-container {
+            background-color: var(--background-color) !important;
+            position: relative;
+            z-index: 1;
+        }
+            
+        .main-content {
+            background-color: var(--background-color) !important;
         }
     </style>
     
@@ -293,9 +309,8 @@
         </svg>
     </button>
     <div id="background-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background-color); z-index: -1;"></div>
-    <div id="background-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background-color); z-index: -1;"></div>
 
-    <div class="layout" style="overflow-x: hidden;">
+    <div class="layout" style="overflow-x: hidden; background-color: var(--background-color) !important; position: relative; z-index: 0;">
         <!-- Sidebar -->
         <aside class="sidebar" id="sidebar">
             <div class="sidebar-header">
@@ -303,7 +318,7 @@
                     <span>📖</span>
                     KJV Study
                 </h1>
-                <p class="sidebar-subtitle">Authorized King James Version</p>
+                <p class="sidebar-subtitle" style="font-size: 0.8rem;">Authorized King James Version</p>
             </div>
             
             <nav class="sidebar-nav">
@@ -316,12 +331,12 @@
                 <h3 style="color: var(--torah-color); margin-bottom: 0.5rem;">Old Testament</h3>
                 
                 <!-- Torah/Pentateuch -->
-                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
+                <h4 style="font-size: 0.7rem; margin: 0.4rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
                 {% set torah = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
                 {% for book in books %}
                 {% if book in torah %}
                 <a href="/book/{{ book }}" 
-                   class="bible-book torah {% if request.url and book in request.url.path %}active{% endif %}">
+                   class="bible-book torah {% if request.url and book in request.url.path %}active{% endif %}" style="padding: 0.35rem 0.5rem; font-size: 0.75rem; margin-bottom: 0.1rem;">
                     {{ book }}
                 </a>
                 {% endif %}
@@ -457,10 +472,10 @@
         </aside>
 
         <!-- Main Content -->
-        <main class="main-content">
+        <main class="main-content" style="background-color: var(--background-color) !important;">
             {% block breadcrumb %}{% endblock %}
             
-            <div class="{% block container_class %}container{% endblock %}" style="background-color: var(--background-color);">
+            <div class="{% block container_class %}container{% endblock %}" style="background-color: var(--background-color) !important; position: relative; z-index: 1;">
                 {% block content %}{% endblock %}
             </div>
             
@@ -483,8 +498,9 @@
                 sidebar.classList.remove('open');
                 overlay.classList.remove('open');
                 document.body.style.overflow = '';
-                sidebar.style.transform = 'translateX(-240px)';
-                sidebar.style.webkitTransform = 'translate3d(-240px, 0, 0)';
+                sidebar.style.transform = 'translateX(-200px)';
+                sidebar.style.webkitTransform = 'translate3d(-200px, 0, 0)';
+                document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
                 
                 // For iPad/tablet
                 if (window.innerWidth >= 768 && window.innerWidth <= 1024) {
@@ -514,8 +530,13 @@
             if (isIPad || (window.innerWidth >= 768 && window.innerWidth <= 1024)) {
                 document.querySelector('.main-content').style.marginLeft = '0';
                 document.querySelector('.main-content').style.width = '100%';
-                document.getElementById('sidebar').style.transform = 'translateX(-240px)';
+                document.getElementById('sidebar').style.transform = 'translateX(-200px)';
             }
+            
+            // Fix for black background in some browsers
+            document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
+            document.querySelector('.main-content').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
+            document.querySelector('.container') && (document.querySelector('.container').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color'));
         });
 
         // Close sidebar when clicking on links (mobile)
diff --git a/kjvstudy_org/templates/commentary.html b/kjvstudy_org/templates/commentary.html
index 3a9d809..d72daff 100644
--- a/kjvstudy_org/templates/commentary.html
+++ b/kjvstudy_org/templates/commentary.html
@@ -35,6 +35,8 @@
     margin: 0 auto;
     padding: 0 1rem;
     background-color: var(--background-color);
+    position: relative;
+    z-index: 1;
 }
 
 .verse-card {
@@ -45,7 +47,7 @@
     border: 1px solid var(--border-light);
     background: var(--surface-color);
     position: relative;
-    z-index: 1;
+    z-index: 2;
 }
 
 .verse-header {
@@ -76,6 +78,8 @@
 .commentary-section {
     padding: 1.25rem;
     background-color: var(--surface-color);
+    position: relative;
+    z-index: 2;
 }
 
 .commentary-title {
@@ -140,6 +144,8 @@
     padding: 2rem 1rem;
     text-align: center;
     margin-bottom: 2rem;
+    position: relative;
+    z-index: 2;
 }
 
 .commentary-header h1 {
@@ -240,16 +246,44 @@
 html, body {
     min-height: 100vh;
     background-color: var(--background-color);
+    overflow-x: hidden;
+}
+
+/* Fix for black background in some browsers */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-color);
+    z-index: -1;
 }
 
 .container, .commentary-container, .verse-card, .commentary-section {
     position: relative;
     z-index: 1;
+    background-color: var(--background-color);
 }
 
 /* Ensure background color consistency */
 .commentary-header, .commentary-meta, .chapter-overview, .verse-card {
     background-color: var(--surface-color);
+    position: relative;
+    z-index: 2;
+}
+
+/* Additional black background fix */
+.commentary-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100vw;
+    width: 300vw;
+    height: 100%;
+    background-color: var(--background-color);
+    z-index: -1;
 }
 </style>
 {% endblock %}
@@ -273,9 +307,9 @@ html, body {
     <h1>AI Commentary: {{ book }} {{ chapter }}</h1>
     <p>Verse-by-verse analysis and insights from the Authorized King James Version (KJV)</p>
 </header>
-<div style="background-color: var(--background-color); min-height: 20px;"></div>
+<div style="background-color: var(--background-color); min-height: 20px; position: relative; z-index: 1;"></div>
 
-<div class="commentary-container">
+<div class="commentary-container" style="background-color: var(--background-color); position: relative; z-index: 1;">
     <div class="commentary-meta">
         <p><strong>Note:</strong> This AI-powered commentary is generated based on historical, theological, and scholarly sources. It's designed to assist your study but should not replace personal reflection and traditional commentaries.</p>
     </div>
@@ -377,6 +411,12 @@ html, body {
 
 {% block scripts %}
 <script>
+// Fix for black background in some browsers
+document.addEventListener('DOMContentLoaded', function() {
+    document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
+    document.querySelector('.commentary-container').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
+});
+
 function copyVerseLink(verseNumber) {
     const url = window.location.origin + window.location.pathname + '#verse-' + verseNumber;
     navigator.clipboard.writeText(url).then(() => {