diff --git a/frontend/chat.css b/frontend/chat.css
new file mode 100644
index 0000000..5ed8007
--- /dev/null
+++ b/frontend/chat.css
@@ -0,0 +1,43 @@
+html {
+ background: #F7A8B8;
+ text-align: center;
+ font-family: "Lucida Console", "Courier New", monospace;
+}
+
+form {
+ width: 100%
+}
+
+input {
+ padding: 3%;
+}
+
+label {
+ visibility: hidden;
+}
+
+#chatbox {
+ background-color: white;
+ padding: 1rem;
+ box-shadow: 10px 10px 10px black;
+ width: 40rem;
+ height: 40rem;
+ display: inline-flex;
+ flex-direction: column;
+}
+
+#innerchatbox {
+ background-color: rgba(60, 60, 60, .75);
+ width: 100%;
+ height: 90%;
+ overflow-y: scroll;
+ text-align: left;
+}
+
+#loggeduser {
+ padding-top: 1%
+}
+
+#error {
+ padding-top: 2.5%;
+}
\ No newline at end of file
diff --git a/frontend/chat.html b/frontend/chat.html
new file mode 100644
index 0000000..62d56fc
--- /dev/null
+++ b/frontend/chat.html
@@ -0,0 +1,37 @@
+
+
+
+
+ Chat Room
+
+
+
+
+
+
+
+
+
+
+ Welcome to the chat!
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/chat.js b/frontend/chat.js
new file mode 100644
index 0000000..f216c0c
--- /dev/null
+++ b/frontend/chat.js
@@ -0,0 +1,75 @@
+// VARIABLES
+let date = '2021-07-22'
+let messageCount = 0;
+let username = localStorage.getItem('username');
+const form = document.querySelector('form');
+
+// SEND A MESSAGE
+
+// GRABS MESSAGE FROM FORM & SENDS
+form.addEventListener("submit", async function (event) {
+ event.preventDefault();
+ const formData = new FormData(form);
+
+ formMessage = formData.get('message');
+
+ sendMessage()
+
+})
+
+//SEND MESSAGE FETCH FUNCTION
+
+async function sendMessage() {
+ sendMessageInfo = { "name": username, "body": formMessage, "date": date }
+ fetch('/api/message/send', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(sendMessageInfo),
+ })
+ form.reset()
+}
+
+
+// RECIEVE MESSAGES
+
+let messageUpdate = window.setInterval(fetchMessages, 500);
+
+async function fetchMessages() {
+ const response = await fetch('/api/message/messages.json');
+ const recievedMessages = await response.json();
+ document.getElementById("innerchatbox").innerHTML = ""
+
+ for (const message of recievedMessages) {
+ printText(message.user.bold() + ": " + message.body);
+ }
+
+
+ if (recievedMessages.length != messageCount) {
+ let scroll = document.getElementById("innerchatbox");
+ scroll.scrollTop = scroll.scrollHeight;
+ }
+
+ messageCount = recievedMessages.length;
+}
+
+
+// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX
+
+function printText(text) {
+ let p = document.createElement("p");
+ const div = document.getElementById("innerchatbox");
+ div.appendChild(p)
+ p.innerHTML = text
+}
+
+
+//LOGGED IN STUFF
+//TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
+if (username === null) {
+ document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
+ username = ''
+} else {
+ document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
+}
\ No newline at end of file
diff --git a/frontend/login.html b/frontend/login.html
index 6915897..48ad76a 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -16,7 +16,7 @@
Login: