diff --git a/html/index.html b/html/index.html
index a66e829..1fe8c95 100644
--- a/html/index.html
+++ b/html/index.html
@@ -38,6 +38,7 @@
         <label id = "MessageLabel"> Message </label>
         <input id = "ComposedMessage" class="input" type = "text">
         <input id = "SendMessage" onclick="Send()" value = "Send your message" class="button2" type = "submit">
+        <input id="LeaveRoomButton" class="button2" type="submit" value="Leave Room" onclick="LeaveRoom()">
       </div>
       <div class = "other">
         <button id="darkModeToggle" onclick="toggleDarkMode()" class="button">Toggle Dark Mode</button>
diff --git a/html/script.js b/html/script.js
index 3364f92..205f49c 100644
--- a/html/script.js
+++ b/html/script.js
@@ -57,11 +57,30 @@ function Connect(){
     chatRoom.innerHTML = "Chatroom : " + room;
     // Hide the chat div initially when attempting to connect
     document.getElementById("Chat").style.display = "none";
+    document.getElementById('AccessPort').style.display = 'none';
   } else {
     // Maybe show an error message to the user that they need to fill in both fields
   }
 }
 
+function LeaveRoom(){
+  // Show access port to join another chat room.
+  document.getElementById('AccessPort').style.display = 'block';
+
+  // Hide the chat div as the user is leaving the room.
+  document.getElementById('Chat').style.display = 'none';
+
+  // Reset chatRoom text to indicate no room connection.
+  chatRoom.innerHTML = "Chatroom : None";
+
+  // If the user is in a room, emit a leave event.
+  if (rooms[socket.id]) {
+    socket.emit('leave', rooms[socket.id], usernames[socket.id]);
+    rooms[socket.id] = null;
+    usernames[socket.id] = null;
+  }
+}
+
 function Send(){
   if (delay && messageInput.value.replace(/\s/g, "") != ""){
     delay = false;