diff --git a/frontend/src/App.css b/frontend/src/App.css
index d83407f..1f0ac49 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,4 +1,16 @@
 /* src/App.css */
+
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* avoid double scrollbars */
+}
+
+body {
+  background-color: var(--bs-body-bg);
+}
+
 body, html {
   margin: 0;
   padding: 0;
diff --git a/frontend/src/ChatHeader.jsx b/frontend/src/ChatHeader.jsx
index 8e57116..5b2b22e 100644
--- a/frontend/src/ChatHeader.jsx
+++ b/frontend/src/ChatHeader.jsx
@@ -1,4 +1,4 @@
-// ChatHeader.jsx
+// src/ChatHeader.jsx
 import React from "react";
 
 export default function ChatHeader({
@@ -9,7 +9,7 @@ export default function ChatHeader({
 }) {
   return (
     <header
-      className={`${theme.headerBg} py-3 sticky-top shadow row align-items-center`}
+      className={`${theme.headerBg} p-2 sticky-top shadow row align-items-center`}
     >
       {/* Left column: new buttons */}
       <div className="col-3 d-flex gap-2 justify-content-start">
@@ -20,10 +20,10 @@ export default function ChatHeader({
           🔄 Reload
         </button>
         <button
-          className="btn btn-sm btn-danger"
+          className="btn btn-sm btn-outline-warning"
           onClick={onFreshStart}
         >
-          🆕 Fresh Start
+          🆕 Reset
         </button>
       </div>
 
@@ -38,7 +38,8 @@ export default function ChatHeader({
           className="btn btn-sm btn-outline-light"
           onClick={onToggleTheme}
         >
-          Toggle Theme
+	  <span role="img" aria-label="theme toggle icon">🌓</span>
+          Theme 
         </button>
       </div>
     </header>
diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index a862217..b51f44b 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -1,3 +1,4 @@
+// src/ChatLayout.jsx
 // ChatLayout.jsx
 import React from "react";
 import ChatHeader from "./ChatHeader";
@@ -15,14 +16,16 @@ export default function ChatLayout({
   onFreshStart
 }) {
   return (
-    <div className={`mx-3 d-flex flex-column vh-100 ${theme.bodyBg}`}>
+    <div className={`d-flex flex-column vh-100 ${theme.bodyBg}`}>
       <ChatHeader
         theme={theme}
         onToggleTheme={onToggleTheme}
         onReloadHistory={onReloadHistory}
         onFreshStart={onFreshStart}
       />
-      <ChatWindow messages={messages} loading={loading} theme={theme} />
+      <div className="flex-grow-1 overflow-auto">
+        <ChatWindow messages={messages} loading={loading} theme={theme} />
+      </div>
 
       {loading && (
         <div className="p-2 text-center">
diff --git a/frontend/src/UserMessage.jsx b/frontend/src/UserMessage.jsx
index 9488b52..9cca075 100644
--- a/frontend/src/UserMessage.jsx
+++ b/frontend/src/UserMessage.jsx
@@ -9,7 +9,7 @@ export default function UserMessage({ content, theme }) {
         style={{ maxWidth: "95%" }}
       >
         <pre
-          className="m-0"
+          className="m-0 p-0"
           style={{
             whiteSpace: "pre-wrap",
             fontFamily: "inherit",
diff --git a/frontend/src/themes.js b/frontend/src/themes.js
index 0bd113f..a3e6300 100644
--- a/frontend/src/themes.js
+++ b/frontend/src/themes.js
@@ -1,13 +1,13 @@
 // themes.js
 export const themes = {
   light: {
-    userBg: "bg-primary text-white",
+    userBg: "bg-primary bg-opacity-25 text-dark",
     assistantBg: "bg-white border text-dark",
     bodyBg: "bg-light",
     headerBg: "bg-primary text-white",
   },
   dark: {
-    userBg: "bg-dark text-white",
+    userBg: "bg-primary text-white",
     assistantBg: "bg-secondary text-white",
     bodyBg: "bg-black text-white",
     headerBg: "bg-dark text-white",