diff --git a/frontend/src/App.css b/frontend/src/App.css
index db6eebf..0a287d3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -55,8 +55,12 @@ body.sessions-open .sessions-wrapper {
   filter: saturate(0.95);
 }
 
+.session-table {
+  font-size: 0.85rem;
+}
+
 .offcanvas-start {
-  width: 280px;
+  width: 420px;
   border-right: 1px solid #dee2e6;
 }
 .offcanvas.show {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c8c2589..d26d7de 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -10,7 +10,6 @@ export default function App() {
   const { messages, loading, sendMessage, stopGenerating, setMessages } = useChatStream();
   const [themeName, setThemeName] = useState("light");
   const theme = themes[themeName];
-
   const sessionId = getSessionId();
   const userId = getUserId();
 
@@ -23,12 +22,10 @@ export default function App() {
     localStorage.setItem("preferredTheme", themeName);
   }, [themeName]);
 
-  const toggleTheme = () => {
-    setThemeName((t) => (t === "light" ? "dark" : "light"));
-  };
+  const toggleTheme = () => setThemeName(t => (t === "light" ? "dark" : "light"));
 
-  const reloadHistory = async () => {
-    const res = await fetch(`/v1/history?user_id=${userId}&session_id=${sessionId}`);
+  const reloadHistory = async (id = sessionId) => {
+    const res = await fetch(`/v1/history?user_id=${userId}&session_id=${id}`);
     const history = await res.json();
     setMessages(history);
   };
@@ -62,6 +59,11 @@ export default function App() {
     });
   };
 
+  const handleSelectSession = async (selectedId) => {
+    setSessionId(selectedId);
+    await reloadHistory(selectedId);
+  };
+
   return (
     <ChatLayout
       theme={theme}
@@ -70,10 +72,11 @@ export default function App() {
       onSend={sendMessage}
       onStop={stopGenerating}
       onToggleTheme={toggleTheme}
-      onReloadHistory={reloadHistory}
+      onReloadHistory={() => reloadHistory()}
       onFreshStart={freshStart}
       onCreateSession={createSession}
       onEditSession={editSession}
+      onSelectSession={handleSelectSession}
       userId={userId}
     />
   );
diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index 22072ee..c3815bc 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -85,7 +85,11 @@ export default function ChatLayout({
           ></button>
         </div>
         <div className="offcanvas-body small">
-	  <SessionTable userId={userId} onSelectSession={handleSelectSession} />
+	  <SessionTable
+   	    userId={userId}
+	    onSelectSession={onSelectSession}
+	    onClosePanel={() => setShowOffcanvas(false)}
+	  />
         </div>
       </div>
     </>
diff --git a/frontend/src/SessionTable.jsx b/frontend/src/SessionTable.jsx
index 68550fa..dbef407 100644
--- a/frontend/src/SessionTable.jsx
+++ b/frontend/src/SessionTable.jsx
@@ -1,12 +1,13 @@
 // src/SessionTable.jsx
 import React, { useEffect, useState } from "react";
-import { getSessionId, getUserId, resetSessionId } from "./useSessionId";
+import { getSessionId } from "./useSessionId";
 
-export default function SessionTable({ userId, onSelectSession }) {
+export default function SessionTable({ userId, onSelectSession, onClosePanel }) {
   const [sessions, setSessions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [editingSessionId, setEditingSessionId] = useState(null);
   const [editName, setEditName] = useState("");
+  const activeSessionId = getSessionId();
 
   const fetchSessions = async () => {
     setLoading(true);
@@ -22,9 +23,7 @@ export default function SessionTable({ userId, onSelectSession }) {
   };
 
   useEffect(() => {
-    if (userId) {
-      fetchSessions();
-    }
+    if (userId) fetchSessions();
   }, [userId]);
 
   const startEditing = (session) => {
@@ -57,82 +56,72 @@ export default function SessionTable({ userId, onSelectSession }) {
   };
 
   return (
-    <div className="table-responsive">
+    <div className="table-responsive session-table">
       <table className="table table-striped table-hover align-middle">
         <thead>
           <tr>
             <th>Session Name</th>
             <th>Created</th>
-            <th>#</th>
+            <th>Messages</th>
+            <th>Size (bytes)</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
-          {loading && (
-            <tr>
-              <td colSpan="5" className="text-center">
-                Loading…
-              </td>
-            </tr>
-          )}
+          {loading && <tr><td colSpan="5" className="text-center">Loading…</td></tr>}
           {!loading && sessions.length === 0 && (
-            <tr>
-              <td colSpan="5" className="text-center">
-                No sessions found
+            <tr><td colSpan="5" className="text-center">No sessions found</td></tr>
+          )}
+          {!loading && sessions.map((s) => (
+            <tr
+              key={s.session_id}
+              className={s.session_id === activeSessionId ? "table-primary" : ""}
+            >
+              <td>
+                {editingSessionId === s.session_id ? (
+                  <input
+                    type="text"
+                    className="form-control form-control-sm"
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    onBlur={() => saveName(s.session_id)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") saveName(s.session_id);
+                      if (e.key === "Escape") setEditingSessionId(null);
+                    }}
+                    autoFocus
+                  />
+                ) : (
+                  <span
+                    role="button"
+                    className="text-primary"
+                    onClick={() => {
+                      onSelectSession(s.session_id);
+                      if (typeof onClosePanel === "function") onClosePanel();
+                    }}
+                    title="Click to load this session"
+                  >
+                    {s.session_name}
+                  </span>
+                )}
+              </td>
+              <td>{new Date(s.created_at).toLocaleString()}</td>
+              <td>{s.message_count}</td>
+              <td>{s.history_size_bytes}</td>
+              <td className="text-end">
+                <button
+                  className="btn btn-sm btn-outline-secondary me-1"
+                  onClick={() => startEditing(s)}
+                  title="Rename"
+                >✏️</button>
+                <button
+                  className="btn btn-sm btn-outline-danger"
+                  onClick={() => deleteSession(s.session_id)}
+                  title="Delete"
+                >🗑️</button>
               </td>
             </tr>
-          )}
-          {!loading &&
-            sessions.map((s) => (
-              <tr
-  		key={s.session_id}
-  		className={s.session_id === getSessionId() ? "table-primary" : ""}
-	      >
-                <td>
-                  {editingSessionId === s.session_id ? (
-                    <input
-                      type="text"
-                      className="form-control form-control-sm"
-                      value={editName}
-                      onChange={(e) => setEditName(e.target.value)}
-                      onBlur={() => saveName(s.session_id)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") saveName(s.session_id);
-                        if (e.key === "Escape") setEditingSessionId(null);
-                      }}
-                      autoFocus
-                    />
-                  ) : (
-                    <span
-                      role="button"
-                      className="text-primary"
-                      onClick={() => onSelectSession(s.session_id)}
-                      title="Click to load this session"
-                    >
-                      {s.session_name}
-                    </span>
-                  )}
-                </td>
-                <td>{new Date(s.created_at).toLocaleString()}</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"
-                    onClick={() => startEditing(s)}
-                    title="Rename"
-                  >
-                    ✏️
-                  </button>
-                  <button
-                    className="btn btn-sm btn-outline-danger"
-                    onClick={() => deleteSession(s.session_id)}
-                    title="Delete"
-                  >
-                    🗑️
-                  </button>
-                </td>
-              </tr>
-            ))}
+          ))}
         </tbody>
       </table>
     </div>