diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index 305b9d3282..c6f380eca2 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -24,8 +24,8 @@
         <div class="samecolumn" id="fullbody">
 
             <div class="sameline" id="heading">
-                <p class="heading flex-grow" > <b> SimpleChat </b> </p>
-                <div>
+                <div class="heading flex-grow" > <b> SimpleChat </b> </div>
+                <div class="flex-nogrow">
                 <button id="clearchat">&#x1F9F9; ClearChat</button>
                 <button id="settings">&#x2699; Settings</button>
                 </div>
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index d72fedba1f..491b9272b0 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -8,7 +8,7 @@
 }
 
 .heading {
-    background-color: lightgray;
+    background: linear-gradient(135deg, lightblue 0%, white 100%);
 }
 
 .session-selected {
@@ -21,7 +21,11 @@
 .role-user {
     background-color: lightgray;
 }
+.role-assistant {
+    text-align: initial;
+}
 .role-tool {
+    /* background-color: cornsilk; */
     background-color: lightyellow;
 }
 .role-trim {
@@ -41,6 +45,9 @@
     margin-bottom: 2vh;
     /* box-shadow: 1px 1px 4px lightslategray; */
 }
+.chat-message:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
 .chat-message-role {
     border-style: dotted;
     border-color: black;
@@ -98,6 +105,9 @@
 .flex-grow {
     flex-grow: 1;
 }
+.flex-nogrow {
+    flex-grow: 0;
+}
 .float-right {
     float: right;
 }