diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index 4edc3f3..22072ee 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -4,6 +4,15 @@ import ChatHeader from "./ChatHeader";
 import ChatWindow from "./ChatWindow";
 import ChatInput from "./ChatInput";
 import SessionTable from "./SessionTable";
+import { setSessionId, getUserId } from "./useSessionId";
+
+function handleSelectSession(sessionId) {
+  setSessionId(sessionId);          // ✅ overwrite current
+  const userId = getUserId();
+  fetch(`/v1/history?user_id=${userId}&session_id=${sessionId}`)
+    .then(res => res.json())
+    .then(history => setMessages(history));
+}
 
 export default function ChatLayout({
   theme,
@@ -75,14 +84,8 @@ export default function ChatLayout({
             onClick={closeSessionManager}
           ></button>
         </div>
-        <div className="offcanvas-body">
-          <SessionTable
-            userId={userId}
-            onSelectSession={(sessionId) => {
-              onSelectSession(sessionId);
-              closeSessionManager();
-            }}
-          />
+        <div className="offcanvas-body small">
+	  <SessionTable userId={userId} onSelectSession={handleSelectSession} />
         </div>
       </div>
     </>
diff --git a/frontend/src/SessionTable.jsx b/frontend/src/SessionTable.jsx
index bae8b03..68550fa 100644
--- a/frontend/src/SessionTable.jsx
+++ b/frontend/src/SessionTable.jsx
@@ -1,5 +1,6 @@
 // src/SessionTable.jsx
 import React, { useEffect, useState } from "react";
+import { getSessionId, getUserId, resetSessionId } from "./useSessionId";
 
 export default function SessionTable({ userId, onSelectSession }) {
   const [sessions, setSessions] = useState([]);
@@ -62,8 +63,7 @@ export default function SessionTable({ userId, onSelectSession }) {
           <tr>
             <th>Session Name</th>
             <th>Created</th>
-            <th>Messages</th>
-            <th>Size (bytes)</th>
+            <th>#</th>
             <th></th>
           </tr>
         </thead>
@@ -84,7 +84,10 @@ export default function SessionTable({ userId, onSelectSession }) {
           )}
           {!loading &&
             sessions.map((s) => (
-              <tr key={s.session_id}>
+              <tr
+  		key={s.session_id}
+  		className={s.session_id === getSessionId() ? "table-primary" : ""}
+	      >
                 <td>
                   {editingSessionId === s.session_id ? (
                     <input
@@ -111,8 +114,7 @@ export default function SessionTable({ userId, onSelectSession }) {
                   )}
                 </td>
                 <td>{new Date(s.created_at).toLocaleString()}</td>
-                <td>{s.message_count}</td>
-                <td>{s.history_size_bytes}</td>
+                <td title={s.history_size_bytes}>{s.message_count}</td>
                 <td className="text-end">
                   <button
                     className="btn btn-sm btn-outline-secondary me-1"