diff --git a/examples/server/public/simplechat.html b/examples/server/public/simplechat.html
index 8426b384b..9f0ba9831 100644
--- a/examples/server/public/simplechat.html
+++ b/examples/server/public/simplechat.html
@@ -1,12 +1,27 @@
 <html>
     <head>
         <title>Simple LlamaCPP Chat</title>
+        <meta name="message" content="Save Nature Save Earth" />
+        <meta name="description" content="Simple chat / test LLM web service endpoints /completions and /chat/completions" />
+        <meta name="author" content="by Humans for All" />
         <script src="simplechat.js"></script>
+        <style>
+            .role-user {
+                background-color: lightgray;
+            }
+            #user {
+                width: 90vh;
+            }
+        </style>
     </head>
     <body>
-        <div id="chat"></div>
+        <p> SimpleChat </p>
+        <hr>
+        <div id="chat">
+            <p> Enter your text to the ai assistant below</p>
+        </div>
         <hr>
         <input type="text" id="user"/>
         <button id="submit">submit</button>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/server/public/simplechat.js b/examples/server/public/simplechat.js
index 5f27c09bf..9aa5bae38 100644
--- a/examples/server/public/simplechat.js
+++ b/examples/server/public/simplechat.js
@@ -1,4 +1,6 @@
 // @ts-check
+// A simple completions and chat/completions test related web front end logic
+// by Humans for All
 
 class Roles {
     static System = "system";
@@ -39,6 +41,7 @@ class SimpleChat {
         }
         for(const x of this.xchat) {
             let entry = document.createElement("p");
+            entry.className = `role-${x.role}`;
             entry.innerText = `${x.role}: ${x.content}`;
             div.appendChild(entry);
         }
