diff --git a/client/src/main.jsx b/client/src/main.jsx
index ef3da3a9..7c7c3a5f 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -285,17 +285,90 @@ function Roadmap({ roadmap }) {
 }
 
 function SessionList({ sessions }) {
+  const [expanded, setExpanded] = useState(null);
+
   return (
     <div className="sessions">
-      {sessions.length ? sessions.slice(0, 6).map((session) => (
-        <article key={session._id}>
-          <Play size={16} />
-          <div>
-            <strong>{session.scenario?.title}</strong>
-            <span>{session.masterySignals.join(' / ')}</span>
-          </div>
-        </article>
-      )) : <p>No sessions yet.</p>}
+      {sessions.length ? (
+        sessions.slice(0, 6).map((session) => (
+          <article key={session._id}>
+            <Play size={16} />
+
+            <div>
+              <strong>{session.scenario?.title}</strong>
+
+              <small>
+                📅 {new Date(session.createdAt).toLocaleDateString()}
+              </small>
+
+              <p className="journal-score">
+                ⭐ Prompt Score: {session.promptScore ?? 0}/100
+              </p>
+
+              <div className="journal-mastery">
+                {session.masterySignals?.map((signal) => (
+                  <span key={signal}>
+                    ✅ {signal}
+                  </span>
+                ))}
+              </div>
+
+
+              {session.reflection && (
+                <div className="journal-reflection">
+                  <strong>💭 Reflection</strong>
+                  <p>{session.reflection}</p>
+                </div>
+              )}
+
+
+              <button
+                onClick={() =>
+                  setExpanded(
+                    expanded === session._id ? null : session._id
+                  )
+                }
+              >
+                {expanded === session._id ? "Show Less" : "View More"}
+              </button>
+
+
+              {expanded === session._id && (
+                <div className="journal-details">
+
+                  {session.misconceptions?.length > 0 && (
+                    <div>
+                      <strong>⚠️ Misconceptions</strong>
+
+                      {session.misconceptions.map((item) => (
+                        <p key={item}>
+                          {item}
+                        </p>
+                      ))}
+                    </div>
+                  )}
+
+
+                  <strong>🧠 Code Explanation</strong>
+                  <p>
+                    {session.codeExplanation}
+                  </p>
+
+
+                  <strong>🐍 Generated Code</strong>
+                  <pre>
+                    {session.generatedCode}
+                  </pre>
+
+                </div>
+              )}
+
+            </div>
+          </article>
+        ))
+      ) : (
+        <p>No sessions yet.</p>
+      )}
     </div>
   );
 }
diff --git a/client/src/styles.css b/client/src/styles.css
index 70ac3f18..db7ad2a2 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -491,3 +491,85 @@ meter {
     grid-template-columns: 1fr;
   }
 }
+/* Learning Journal */
+
+.sessions article {
+  padding: 16px;
+  margin-bottom: 14px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+}
+
+.sessions article > div {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sessions small {
+  color: #6b7280;
+}
+
+
+/* Prompt Score */
+
+.journal-score {
+  font-weight: 600;
+}
+
+
+/* Mastery signals */
+
+.journal-mastery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.journal-mastery span {
+  padding: 5px 10px;
+  border-radius: 20px;
+  background: #f3f4f6;
+  font-size: 14px;
+}
+
+
+/* Reflection */
+
+.journal-reflection {
+  margin-top: 10px;
+  padding: 12px;
+  border-left: 4px solid #6366f1;
+  background: #f8fafc;
+}
+
+
+/* Details */
+
+.journal-details {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 10px;
+  background: #f9fafb;
+}
+
+
+/* Code block */
+
+.journal-details pre {
+  padding: 12px;
+  overflow-x: auto;
+  border-radius: 8px;
+}
+
+
+/* Button */
+
+.journal-details button,
+.sessions button {
+  margin-top: 10px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+}