diff --git a/test_client.html b/test_client.html
index ed6cd07..357b04e 100644
--- a/test_client.html
+++ b/test_client.html
@@ -12,45 +12,46 @@
   </head>
   <body>
     <h1>Cards For Humanity Test Client</h1>
-    <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
-    <button id="join-chat" type="button">Join Chat</button>
-    <textarea id="chat" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
-    <input id="input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
+    <div id="status">
+      <p><em>Disconnected...</em></p>
+    </div>
+    <form id="login" onsubmit="loginSubmit();return false">
+      <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
+      <button id="join-chat" type="submit">Join Chat</button>
+    </form>
+    <form id="chat" onsubmit="chatSubmit();return false">
+      <textarea id="chat-history" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
+      <input id="chat-input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
+    </form>
     <script type="text/javascript">
-      const username = document.querySelector("#username");
-      const join_btn = document.querySelector("#join-chat");
-      const textarea = document.querySelector("#chat");
-      const input = document.querySelector("#input");
+      websocket = new WebSocket("ws://localhost:3030/websocket");
 
-      join_btn.addEventListener("click", function(e) {
-          this.disabled = true;
+      function loginSubmit() {
+          document.getElementById("join-chat").disabled = true;
+          websocket.send(username.value);
+      };
 
-          const websocket = new WebSocket("ws://localhost:3000/websocket");
+      websocket.onopen = function() {
+          console.log("connection opened");
+          document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
+      }
 
-          websocket.onopen = function() {
-              console.log("connection opened");
-              websocket.send(username.value);
-          }
+      websocket.onclose = function() {
+          console.log("connection closed");
+          // document.getElementById("join-chat").disabled = false;
+          document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';
+      }
 
-          const btn = this;
+      websocket.onmessage = function(e) {
+          console.log("received message: "+e.data);
+          document.getElementById("chat-history").value += e.data+"\r\n";
+      }
 
-          websocket.onclose = function() {
-              console.log("connection closed");
-              btn.disabled = false;
-          }
-
-          websocket.onmessage = function(e) {
-              console.log("received message: "+e.data);
-              textarea.value += e.data+"\r\n";
-          }
-
-          input.onkeydown = function(e) {
-              if (e.key == "Enter") {
-                  websocket.send(input.value);
-                  input.value = "";
-              }
-          }
-      });
+      function chatSubmit() {
+          let input = document.getElementById("chat-input");
+              websocket.send(input.value);
+              input.value = "";
+      };
     </script>
   </body>
 </html>
