diff --git a/dashboard/templates/index.html b/dashboard/templates/index.html
index fd05db7..184235d 100644
--- a/dashboard/templates/index.html
+++ b/dashboard/templates/index.html
@@ -7,32 +7,42 @@
     <title>Ruby's Dashboard</title>
     <style>
         body {
-            background-color: #121212;
+            font-family: Arial, sans-serif;
+            background-color: #0f0f0f;
             color: #e0e0e0;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
+            padding: 0;
+        }
+        .container {
+            max-width: 1200px;
+            margin: auto;
             padding: 20px;
         }
-        h1, h2 {
-            color: #ffffff;
+        .section {
+            background: #1a1a1a;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
         }
-        p, li {
-            color: #cccccc;
+        h1, h2 {
+            color: #ffd700;
+            margin-bottom: 12px;
+        }
+        p {
+            margin: 5px 0;
+            font-size: 16px;
         }
         ul {
-            list-style-type: square;
+            list-style-type: none;
+            padding-left: 0;
         }
-        .section {
-            margin-bottom: 30px;
-        }
-        .divider {
-            border-top: 1px solid #333;
-            margin: 20px 0;
-        }
-        .entry {
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #333;
+        li {
+            background: #262626;
+            margin: 4px 0;
+            padding: 8px;
+            border-radius: 8px;
+            font-size: 14px;
         }
         .nav {
             background-color: #1e1e1e;
@@ -44,26 +54,35 @@
             margin-right: 20px;
             text-decoration: none;
         }
+        .preview-box {
+            background: #262626;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 10px;
+            font-size: 14px;
+            max-height: 120px;
+            overflow-y: auto;
+        }
     </style>
 </head>
 <body>
-<div class="nav">
-    <a href="/">🏠 Home</a>
-    <a href="/journal">📓 Journal</a>
-    <a href="/concepts">🧠 Concepts</a>
-    <a href="/brainmap">🕸️ Brain Map</a>
-    <a href="/growth">📈 Growth</a>
-    <a href="/dreams">💬 Dreams</a>
-</div>
-
-    <h1>Ruby is Running 🧠</h1>
-
-    <div class="section">
-        <h2>⏳ Next Cycle</h2>
-        <p><strong>Next:</strong> {{ next_action_label }}</p>
-        <p id="countdown">{{ next_cycle }} seconds</p>
+    <div class="nav">
+        <a href="/">🏠 Home</a>
+        <a href="/journal">📓 Journal</a>
+        <a href="/concepts">🧠 Concepts</a>
+        <a href="/brainmap">🕸️ Brain Map</a>
+        <a href="/growth">📈 Growth</a>
+        <a href="/dreams">💬 Dreams</a>
     </div>
-    
+
+    <div class="container">
+        <h1 style="text-align: center;">Ruby is Running 🧠</h1>
+        
+        <div class="section">
+            <h2>⏳ Next Cycle</h2>
+            <p><strong>Next:</strong> {{ next_action_label }}</p>
+            <p id="countdown">{{ next_cycle }} seconds</p>
+        </div>
     <script>
     function updateCountdown() {
         var countdown = document.getElementById("countdown");
@@ -77,15 +96,18 @@
     </script>
 
     <div class="section">
+        <h2>🧠 Brain Stats</h2>
         <p><strong>Vocabulary Size:</strong> {{ vocab_size }}</p>
         <p><strong>Memory Entries:</strong> {{ memory_size }}</p>
     </div>
 
-    <div class="divider"></div>
     <div class="section">
-        <h2>📖 Book Progress</h2>
-        <p>Currently Reading: <strong>{{ current_book }}</strong></p>
-        <p>Line: {{ current_line }}</p>
+        <h2>📖 Current Book Progress</h2>
+        <p><strong>Currently Reading:</strong> {{ current_book }}</p>
+        <p><strong>Line:</strong> {{ current_line }}</p>
+        <div class="preview-box">
+            {{ current_passage }}
+        </div>
     </div>
 
     <div class="section">
@@ -97,15 +119,14 @@
         </ul>
     </div>
 
-    <div class="divider"></div>
-
     <div class="section">
         <h2>📉 Recent Loss</h2>
         <canvas id="lossChart" width="400" height="200"></canvas>
     </div>
+
     <script>
     const ctxLoss = document.getElementById('lossChart').getContext('2d');
-    
+
     const lossData = {
         labels: [
             {% for entry in loss_data[-50:] %}
@@ -124,14 +145,14 @@
             tension: 0.2
         }]
     };
-    
+
     const lossChart = new Chart(ctxLoss, {
         type: 'line',
         data: lossData,
         options: {
             scales: {
                 x: {
-                    display: false  // hide x-axis ticks
+                    display: false
                 },
                 y: {
                     title: {
@@ -149,6 +170,6 @@
         }
     });
     </script>
-
+</div>
 </body>
 </html>
