diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index bc21bff..45b6bda 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -186,9 +186,9 @@
             height: 100vh;
             overflow-y: auto;
             background: var(--bg-color);
-            padding: 3rem 0.75rem 1rem 0.75rem;
-            font-size: 0.75rem;
-            line-height: 1.5;
+            padding: 1.5rem 0.75rem 1rem 0.75rem;
+            font-size: 0.7rem;
+            line-height: 1.3;
             z-index: 100;
             border-right: 1px solid var(--border-color);
             box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
@@ -208,11 +208,11 @@
         }
 
         .nav-sidebar h3 {
-            font-size: 0.7rem;
+            font-size: 0.65rem;
             font-weight: 600;
             font-style: italic;
-            margin: 0 0 0.5rem 0;
-            padding-bottom: 0.4rem;
+            margin: 0 0 0.3rem 0;
+            padding-bottom: 0.25rem;
             border-bottom: 1px solid var(--border-color);
             color: var(--text-secondary);
             text-transform: uppercase;
@@ -222,11 +222,11 @@
         .nav-sidebar ul {
             list-style: none;
             padding: 0;
-            margin: 0 0 1.5rem 0;
+            margin: 0 0 0.75rem 0;
         }
 
         .nav-sidebar li {
-            margin: 0.25rem 0;
+            margin: 0.15rem 0;
         }
 
         .nav-sidebar a {
@@ -234,9 +234,9 @@
             text-decoration: none;
             border-bottom: none;
             display: block;
-            padding: 0.15rem 0;
+            padding: 0.1rem 0;
             transition: color 0.2s;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
         }
 
         .nav-sidebar a:hover {
@@ -249,29 +249,29 @@
         }
 
         .nav-sidebar .testament-section {
-            margin-bottom: 1.5rem;
+            margin-bottom: 0.75rem;
         }
 
         .nav-sidebar .testament-title {
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             text-transform: uppercase;
-            letter-spacing: 0.1em;
+            letter-spacing: 0.08em;
             color: var(--text-tertiary);
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.3rem;
             font-weight: 600;
         }
 
         .nav-sidebar details {
-            margin-bottom: 1.5rem;
+            margin-bottom: 0.75rem;
         }
 
         .nav-sidebar summary {
             cursor: pointer;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             text-transform: uppercase;
-            letter-spacing: 0.1em;
+            letter-spacing: 0.08em;
             color: var(--text-tertiary);
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.3rem;
             font-weight: 600;
             list-style: none;
             user-select: none;
@@ -319,12 +319,12 @@
         }
 
         .nav-sidebar .book-list {
-            font-size: 0.8rem;
+            font-size: 0.7rem;
         }
 
         /* Sidebar search box */
         .sidebar-search {
-            margin-bottom: 1.5rem;
+            margin-bottom: 0.75rem;
             position: relative;
         }
 
@@ -523,8 +523,8 @@
         /* Responsive design for tablets and mobile */
         @media (max-width: 1200px) {
             .nav-sidebar {
-                width: 280px;
-                left: -280px;
+                width: 150px;
+                left: -150px;
                 top: 0;
                 bottom: 0;
                 max-height: 100vh;
diff --git a/kjvstudy_org/templates/biblical_timeline.html b/kjvstudy_org/templates/biblical_timeline.html
index 2f45d73..f22a8a1 100644
--- a/kjvstudy_org/templates/biblical_timeline.html
+++ b/kjvstudy_org/templates/biblical_timeline.html
@@ -7,46 +7,61 @@
 <style>
 .timeline-nav {
     max-width: 75%;
-    margin: 1.5rem 0;
-    padding: 1rem 1.5rem;
-    background: #f9f9f9;
-    border-left: 3px solid #666;
-    font-size: 0.9rem;
-    line-height: 1.8;
-}
-
-.timeline-nav strong {
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-size: 0.85rem;
-    color: #666;
+    margin: 2rem 0 3rem 0;
+    padding: 1.5rem 2rem;
+    background: #fafafa;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.95rem;
+    line-height: 1.6;
 }
 
 .timeline-nav a {
     color: var(--text-color);
     text-decoration: none;
-    border-bottom: 1px solid transparent;
+    border-bottom: 1px dotted #999;
     transition: all 0.2s;
 }
 
 .timeline-nav a:hover {
     color: var(--link-color);
     border-bottom-color: var(--link-color);
+    border-bottom-style: solid;
 }
 
 .timeline-nav-period {
-    margin: 0.5rem 0;
+    margin: 1.25rem 0;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.timeline-nav-period:last-child {
+    border-bottom: none;
 }
 
 .timeline-nav-period-name {
-    font-weight: 600;
+    font-weight: 700;
+    font-size: 1.05rem;
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #111;
 }
 
 .timeline-nav-events {
-    margin-left: 1rem;
-    color: #666;
-    font-size: 0.85rem;
+    margin-left: 1.5rem;
+    color: #555;
+    font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+    .timeline-nav {
+        max-width: 100%;
+        padding: 1rem 1.25rem;
+    }
+
+    .timeline-nav-events {
+        margin-left: 1rem;
+    }
 }
 </style>
 {% endblock %}
@@ -56,11 +71,18 @@
 <p class="subtitle">Major events from Creation to the early Church</p>
 
 <div class="timeline-nav">
-    <strong>Quick Reference:</strong>
+    <h2 style="margin: 0 0 1rem 0; font-size: 1.3rem; font-weight: 600; color: #333;">Table of Contents</h2>
     {% for period_name, events in timeline_events.items() %}
     <div class="timeline-nav-period">
-        <span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span> —
-        <span class="timeline-nav-events">{% for event in events %}<a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>{% if not loop.last %} • {% endif %}{% endfor %}</span>
+        <span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span>
+        <div class="timeline-nav-events">
+            {% for event in events %}
+            <div style="margin: 0.25rem 0;">
+                <a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>
+                {% if event.date %}<span style="color: #999; margin-left: 0.5rem;">({{ event.date }})</span>{% endif %}
+            </div>
+            {% endfor %}
+        </div>
     </div>
     {% endfor %}
 </div>