diff --git a/examples/server/public_simplechat/simplechat.html b/examples/server/public_simplechat/simplechat.html
index 806f469fc..f20b79c70 100644
--- a/examples/server/public_simplechat/simplechat.html
+++ b/examples/server/public_simplechat/simplechat.html
@@ -6,30 +6,45 @@
         <meta name="author" content="by Humans for All" />
         <script src="simplechat.js"></script>
         <style>
+            .heading {
+                background-color: lightgray;
+            }
             .role-user {
                 background-color: lightgray;
             }
-            #user {
-                width: 90vh;
+            .wideinput {
+                width: 90vw;
+            }
+            .float-right {
+                float: right;
+            }
+            * {
+                margin: 0.4vh;
             }
         </style>
     </head>
     <body>
-        <p> SimpleChat </p>
 
-        <label for="api-ep">Mode:</label>
-        <select name="api-ep" id="api-ep">
-          <option value="chat" selected>Chat</option>
-          <option value="completion">Completion</option>
-        </select>
+        <div class="float-right">
+            <label for="api-ep">Mode:</label>
+            <select name="api-ep" id="api-ep">
+              <option value="chat" selected>Chat</option>
+              <option value="completion">Completion</option>
+            </select>
+        </div>
+        <p class="heading" > <b> SimpleChat </b> </p>
 
+        <div>
+            <label for="system">System</label>
+            <input type="text" name="system" id="system" class="wideinput"/>
+        </div>
         <hr>
         <div id="chat">
             <p> Enter your text to the ai assistant below</p>
         </div>
 
         <hr>
-        <input type="text" id="user"/>
+        <input type="text" id="user" class="wideinput" />
         <button id="submit">submit</button>
     </body>
 </html>
