diff --git a/dashboard/dashboard.py b/dashboard/dashboard.py
index 547579a..6d73288 100644
--- a/dashboard/dashboard.py
+++ b/dashboard/dashboard.py
@@ -1,13 +1,18 @@
 from flask import Flask, render_template
+from model.journal import read_journal_entries
 from model.memory import load_dreams
 from model.tokenizer import Tokenizer
+from model.abstraction import cluster_vocab
 from context.context import load_context
 import os
+import time
 
 
 app = Flask(__name__)
 tokenizer = Tokenizer()
 
+next_cycle_time = time.time() + 900  # Example: 15 minutes from now
+
 
 def load_loss_data():
     path = "data/logs/loss.log"
@@ -18,17 +23,36 @@ def load_loss_data():
     return [float(line.strip().split(",")[1]) for line in lines[-50:]]
 
 
+def update_next_cycle(seconds):
+    global next_cycle_time
+    next_cycle_time = time.time() + seconds
+
+
 @app.route("/")
 def index():
     dreams = load_dreams()
     top_dreams = dreams[:5]
     memory_size = len(load_context())
     loss_data = load_loss_data()
+    remaining = max(0, int(next_cycle_time - time.time()))
     return render_template("index.html",
                            vocab_size=len(tokenizer.vocab),
                            top_dreams=top_dreams,
                            memory_size=memory_size,
-                           loss_data=loss_data)
+                           loss_data=loss_data,
+                           next_cycle=remaining)
+
+
+@app.route("/journal")
+def journal():
+    entries = read_journal_entries()
+    return render_template("journal.html", entries=entries)
+
+
+@app.route("/concepts")
+def concepts():
+    clusters = cluster_vocab(n_clusters=10)
+    return render_template("concepts.html", clusters=clusters)
 
 
 def run_dashboard():
diff --git a/dashboard/templates/concepts.html b/dashboard/templates/concepts.html
new file mode 100644
index 0000000..81154fc
--- /dev/null
+++ b/dashboard/templates/concepts.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ruby's Concepts</title>
+    <style>
+        body {
+            background-color: #121212;
+            color: #e0e0e0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            padding: 20px;
+        }
+        h1 {
+            color: #ffffff;
+        }
+        .cluster {
+            margin-bottom: 30px;
+        }
+        .cluster h2 {
+            color: #f0f0f0;
+        }
+        ul {
+            list-style-type: square;
+            padding-left: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>🧠 Ruby's Concept Clusters</h1>
+
+    {% for cluster_id, words in clusters.items() %}
+        <div class="cluster">
+            <h2>Concept {{ cluster_id }}</h2>
+            <ul>
+                {% for word in words %}
+                    <li>{{ word }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endfor %}
+</body>
+</html>
diff --git a/dashboard/templates/index.html b/dashboard/templates/index.html
index e6b323b..e78c99c 100644
--- a/dashboard/templates/index.html
+++ b/dashboard/templates/index.html
@@ -1,24 +1,80 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
     <title>Ruby's Dashboard</title>
+    <style>
+        body {
+            background-color: #121212;
+            color: #e0e0e0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+        h1, h2 {
+            color: #ffffff;
+        }
+        p, li {
+            color: #cccccc;
+        }
+        ul {
+            list-style-type: square;
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        .divider {
+            border-top: 1px solid #333;
+            margin: 20px 0;
+        }
+    </style>
 </head>
 <body>
-    <h1>Ruby is running</h1>
-    <p><strong>Vocabulary Size:</strong> {{ vocab_size }}</p>
-    <p><strong>Memory Entries:</strong> {{ memory_size }}</p>
+    <h1>Ruby is Running 🧠</h1>
+
+    <div class="section">
+        <h2>⏳ Next Cycle Countdown</h2>
+        <p id="countdown">{{ next_cycle }} seconds</p>
+    </div>
+    
+    <script>
+    function updateCountdown() {
+        var countdown = document.getElementById("countdown");
+        var seconds = parseInt(countdown.innerText.split(" ")[0]);
+        if (seconds > 0) {
+            seconds -= 1;
+            countdown.innerText = seconds + " seconds";
+        }
+    }
+    setInterval(updateCountdown, 1000);
+    </script>
+
+    <div class="section">
+        <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>🏆 Highest Scoring Dreams</h2>
+        <ul>
+            {% for dream in top_dreams %}
+                <li><strong>{{ dream.score }}</strong> | {{ dream.sentence }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+
+    <div class="divider"></div>
+
+    <div class="section">
+        <h2>📉 Recent Loss</h2>
+        <ul>
+            {% for loss in loss_data %}
+                <li>{{ loss }}</li>
+            {% endfor %}
+        </ul>
+    </div>
 
-    <h2>🏆 Highest Scoring Dreams</h2>
-    <ul>
-        {% for dream in top_dreams %}
-            <li><strong>{{ dream.score }}</strong> | {{ dream.sentence }}</li>
-        {% endfor %}
-    </ul>
-    <h2>📉 Recent Loss</h2>
-    <ul>
-        {% for loss in loss_data %}
-            <li>{{ loss }}</li>
-        {% endfor %}
-    </ul>
 </body>
 </html>
diff --git a/dashboard/templates/journal.html b/dashboard/templates/journal.html
new file mode 100644
index 0000000..ef6c8ac
--- /dev/null
+++ b/dashboard/templates/journal.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ruby's Journal</title>
+    <style>
+        body {
+            background-color: #121212;
+            color: #e0e0e0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            padding: 20px;
+        }
+        h1 {
+            color: #ffffff;
+        }
+        .entry {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>📓 Ruby's Journal</h1>
+
+    {% for entry in entries %}
+        <div class="entry">{{ entry }}</div>
+    {% endfor %}
+</body>
+</html>
