diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 98e88d99fb..9125771d5b 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -28,6 +28,23 @@
     background-color: lightpink;
 }
 
+.chat-message {
+    border-style: solid;
+    border-color: grey;
+    border-width: thin;
+    border-radius: 2px;
+    display: flex;
+}
+.chat-message-role {
+    border-style: dotted;
+    border-color: black;
+    border-width: thin;
+    border-radius: 4px;
+    writing-mode: vertical-lr;
+    padding-inline: 1vmin;
+}
+
+
 .gridx2 {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 53adbb28d4..cb0d373cc1 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -879,20 +879,35 @@ class MultiChatUI {
      * * Assistant which contains a tool req, shows tool call ui if needed. ie
      *   * if it is the last message OR
      *   * if it is the last but one message and there is a ToolTemp message next
+     * @param {HTMLElement | undefined} elParent
      * @param {ChatMessageEx} msg
      * @param {number} iFromLast
      * @param {ChatMessageEx | undefined} nextMsg
      */
-    show_message(msg, iFromLast, nextMsg) {
+    show_message(elParent, msg, iFromLast, nextMsg) {
+        // Handle ToolTemp
         if (msg.ns.role === Roles.ToolTemp) {
             if (iFromLast == 0) {
                 this.elInUser.value = msg.ns.content;
             }
             return
         }
-        let entry = ui.el_create_append_p(`[[ ${msg.ns.role} ]]: ${msg.content_equiv()}`, this.elDivChat);
-        entry.className = `role-${msg.ns.role}`;
-        this.elLastChatMessage = entry;
+        // Create main section
+        let secMain = document.createElement('section')
+        secMain.classList.add(`role-${msg.ns.role}`)
+        secMain.classList.add('chat-message')
+        elParent?.append(secMain)
+        this.elLastChatMessage = secMain;
+        // Create role para
+        let entry = ui.el_create_append_p(`${msg.ns.role}`, secMain);
+        entry.className = `chat-message-role`;
+        // Create content section
+        let secContent = document.createElement('section')
+        secContent.classList.add('chat-message-content')
+        secMain.append(secContent)
+        // Add the content
+        entry = ui.el_create_append_p(`${msg.content_equiv()}`, secContent);
+        // Handle tool call ui, if reqd
         if (msg.ns.role === Roles.Assistant) {
             let bTC = false
             if (iFromLast == 0) {
@@ -942,7 +957,7 @@ class MultiChatUI {
             if (iFromLast == 1) {
                 nextMsg = chatToShow[i+1]
             }
-            this.show_message(x, iFromLast, nextMsg)
+            this.show_message(this.elDivChat, x, iFromLast, nextMsg)
         }
         if (this.elLastChatMessage != null) {
             /** @type{HTMLElement} */(this.elLastChatMessage).scrollIntoView(false); // Stupid ts-check js-doc intersection ???