diff --git a/examples/server/public_simplechat/readme.md b/examples/server/public_simplechat/readme.md
index 860892d4e..caf34b5f5 100644
--- a/examples/server/public_simplechat/readme.md
+++ b/examples/server/public_simplechat/readme.md
@@ -12,12 +12,16 @@ and forth chatting to an extent.
 User can set a system prompt, as well as try and chat with the model over a series of back and forth chat
 messages.
 
+The UI follows a responsive web design so that the layout can adapt to available display space in a usable
+enough manner, in general.
+
 NOTE: Given that the idea is for basic minimal testing, it doesnt bother with any model context length and
 culling of old messages from the chat.
 
 NOTE: It doesnt set any parameters other than temperature for now. However if someone wants they can update
 the js file as needed.
 
+
 ## usage
 
 first run examples/server
diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css
index f7ea6ec23..cee611267 100644
--- a/examples/server/public_simplechat/simplechat.css
+++ b/examples/server/public_simplechat/simplechat.css
@@ -3,32 +3,47 @@
  * by Humans for All
  */
 
- .heading {
+#fullbody {
+    height: 98vh;
+}
+
+.heading {
     background-color: lightgray;
 }
+
 .role-system {
     background-color: lightblue;
 }
 .role-user {
     background-color: lightgray;
 }
+
 .flex-grow {
     flex-grow: 1;
 }
 .float-right {
     float: right;
 }
+
 #chat {
-    height: 75vh;
     overflow: scroll;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 40vh;
 }
 button {
     min-width: 8vw;
 }
+
 .sameline {
     display: flex;
     flex-direction: row;
 }
+.samecolumn {
+    display: flex;
+    flex-direction: column;
+}
+
 * {
     margin: 0.6vmin;
 }
diff --git a/examples/server/public_simplechat/simplechat.html b/examples/server/public_simplechat/simplechat.html
index 85cc73454..b76841938 100644
--- a/examples/server/public_simplechat/simplechat.html
+++ b/examples/server/public_simplechat/simplechat.html
@@ -12,34 +12,38 @@
         <link rel="stylesheet" href="simplechat.css" />
     </head>
     <body>
+        <div class="samecolumn" id="fullbody">
 
-        <div class="sameline">
-            <p class="heading flex-grow" > <b> SimpleChat </b> </p>
             <div class="sameline">
-                <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>
+                <p class="heading flex-grow" > <b> SimpleChat </b> </p>
+                <div class="sameline">
+                    <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>
             </div>
-        </div>
 
-        <div class="sameline">
-            <label for="system">System</label>
-            <input type="text" name="system" id="system" class="flex-grow"/>
-        </div>
-        <hr>
-        <div id="chat">
-            <p> Enter the system prompt above, before entering/submitting any user query.</p>
-            <p> Enter your text to the ai assistant below.</p>
-            <p> Use shift+enter for inserting enter.</p>
-            <p> Refresh the page to start over fresh.</p>
-        </div>
+            <div class="sameline">
+                <label for="system">System</label>
+                <input type="text" name="system" id="system" class="flex-grow"/>
+            </div>
+
+            <hr>
+            <div id="chat">
+                <p> Enter the system prompt above, before entering/submitting any user query.</p>
+                <p> Enter your text to the ai assistant below.</p>
+                <p> Use shift+enter for inserting enter.</p>
+                <p> Refresh the page to start over fresh.</p>
+            </div>
+
+            <hr>
+            <div class="sameline">
+                <textarea id="user" class="flex-grow" rows="3"></textarea>
+                <button id="submit">submit</button>
+            </div>
 
-        <hr>
-        <div class="sameline">
-            <textarea id="user" class="flex-grow" rows="3"></textarea>
-            <button id="submit">submit</button>
         </div>
     </body>
 </html>
