diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4360cf6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,171 @@
+{
+  "name": "Software Project",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "axios": "^1.7.9",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
+      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.3.tgz",
+      "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7fad102
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "axios": "^1.7.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3"
+  }
+}
diff --git a/web_server/blueprints/chat.py b/web_server/blueprints/chat.py
index 9ea19ca..f463561 100644
--- a/web_server/blueprints/chat.py
+++ b/web_server/blueprints/chat.py
@@ -4,36 +4,10 @@ from database.database import Database
 
 chat_bp = Blueprint("chat", __name__)
 
-@chat_bp.route("/send_chat", methods=["POST"])
-@login_required
-def send_chat():
-    """
-    Works with react, takes the chat entered by a logged in user and stores in database
-    """
+# <---------------------- ROUTES NEEDS TO BE CHANGED TO VIDEO OR DELETED AS DEEMED APPROPRIATE ---------------------->
+# TODO: Add a route that deletes all chat logs when the stream is finished
 
-    # Take the message information from frontend
-    data = request.get_json()
-    chatter_id = data.get("chatter_id")
-    stream_id = data.get("stream_id")
-    message = data.get("message")
-
-    # Input validation - chatter is logged in, message is not empty, stream exists
-    if not all(chatter_id, message, stream_id):
-        return {"chat_sent": False}
-    
-    # Save chat information to database so other users can see
-    db = Database()
-    cursor = db.create_connection()
-    cursor.execute("""
-                    INSERT INTO chat (chatter_id, stream_id, message)
-                    VALUES (?, ?, ?);""", (chatter_id, stream_id, message))
-    db.commit_data()
-
-    return {"chat_sent": True}
-
-
-# <---------------------- ROUTE NEEDS TO BE CHANGED TO VIDEO OR DELETED AS DEEMED APPROPRIATE ---------------------->
-@chat_bp.route("/chat/<int:stream_id>", methods=["GET"])
+@chat_bp.route("/chat/<int:stream_id>")
 def get_past_chat(stream_id):
     """
     Returns a JSON object to be passed to the server.
@@ -51,11 +25,11 @@ def get_past_chat(stream_id):
     all_chats = cursor.execute("""
                                SELECT *
                                FROM (
-                                SELECT chatter_id, message, time_sent
-                                FROM chat
-                                WHERE stream_id = ?
-                                ORDER BY time_sent DESC
-                                LIMIT 50
+                                    SELECT chatter_id, message, time_sent
+                                    FROM chat
+                                    WHERE stream_id = ?
+                                    ORDER BY time_sent DESC
+                                    LIMIT 50
                                )
                                ORDER BY time_sent ASC;""", (stream_id,)).fetchall()
     db.close_connection()
@@ -64,14 +38,48 @@ def get_past_chat(stream_id):
     chat_history = [{"chatter_id": chat[0], "message": chat[1], "time_sent": chat[2]} for chat in all_chats]
 
     # Pass the chat history to the proxy
-    return jsonify(chat_history)
+    return jsonify({"chat_history": chat_history}), 200
 
+@chat_bp.route("/send_chat", methods=["POST"])
+@login_required
+def send_chat():
+    """
+    Works with react, takes the chat entered by a logged in user and stores in database
+    """
+
+    # Take the message information from frontend
+    data = request.get_json()
+    chatter_id = data.get("chatter_id")
+    stream_id = data.get("stream_id")
+    message = data.get("message")
+
+    # Input validation - chatter is logged in, message is not empty, stream exists
+    if not all([chatter_id, message, stream_id]):
+        return jsonify({"chat_sent": False}), 400
+    
+    # Save chat information to database so other users can see
+    db = Database()
+    cursor = db.create_connection()
+    cursor.execute("""
+                    INSERT INTO chat (chatter_id, stream_id, message)
+                    VALUES (?, ?, ?);""", (chatter_id, stream_id, message))
+    db.commit_data()
+    db.close_connection()
+
+    return jsonify({"chat_sent": True}), 200
+
+
+
+
+@chat_bp.route("/load_new_chat/<int:stream_id>", methods=["GET"])
 def get_recent_chat(stream_id):
     """
     Fetch new chat messages on a stream a user has already loaded in to.
     """
     # Get the last received chat to avoid repeating old chats
     last_received = request.args.get("last_received")   # last_received is a time stamp
+    if not last_received:
+        return jsonify({"error": "last_received timestamp required"}), 400
 
     # Get the most recent chats from the database
     db = Database()
@@ -86,4 +94,5 @@ def get_recent_chat(stream_id):
     db.close_connection()
 
     # Send the new chats to frontend
-    return jsonify(new_chats)
\ No newline at end of file
+    chat_data = [{"chatter_id": chat[0], "message": chat[1], "time_sent": chat[2]} for chat in new_chats]
+    return jsonify(chat_data), 200
\ No newline at end of file
diff --git a/web_server/blueprints/templates/chat.html b/web_server/blueprints/templates/chat.html
new file mode 100644
index 0000000..70d54a2
--- /dev/null
+++ b/web_server/blueprints/templates/chat.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat Interface</title>
+
+    <script>
+
+        let last_received = "";
+        const stream_id = "{{ stream_id }}";
+
+        function add_to_chat(data){
+            const chat_container = document.getElementById("chat_container");
+
+            data.forEach(element => {
+                const div = document.createElement("div");
+                div.textContent = `${element.time_sent} ${element.chatter_id}: ${element.message}`;
+                chat_container.appendChild(div);
+                last_received = element.time_sent;
+            });
+        }
+
+        function loadPrevChat() {
+            const init_chat_logs = JSON.parse('{{ chat_history | tojson }}');
+            add_to_chat(init_chat_logs);
+            
+        }
+
+        function sendChat(){
+            // Get the chat message sent by user
+            const chat_message = document.getElementById("messageInput").value;
+            document.getElementById("messageInput").value = "";
+
+            // Pass the chat message to python to store in chat log db
+            const data = {"chatter_id": "{{ chatter_id }}", "stream_id": "{{ stream_id }}", "message":chat_message};
+            const json_data = JSON.stringify(data);
+
+            fetch("/send_chat", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: json_data
+            })
+
+            // Check if message has been sent
+            .then(response => {
+                if (response.ok){
+                    getRecentChats();
+                }
+            })
+        }
+
+        function getRecentChats(){
+            // Let the backend know the most recent chat message the user has
+            fetch(`/recent_chat/${stream_id}?last_received=${last_received}`)
+                .then(response => {
+                    if (!response.ok){
+                        throw new Error(`Failed to fetch chats`)
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    add_to_chat(data);
+            })
+            .catch(error => {
+                console.error("Error fetching recent chats:", error);
+            });
+        }
+
+        window.addEventListener('DOMContentLoaded', loadPrevChat);
+
+    </script>
+
+</head>
+<body>
+    <h1>Chat for Stream #{{ stream_id }}</h1>
+    <div id="chat_container" style="max-height: 400px; overflow-y: auto;"></div>
+    <input type="text" id="messageInput" placeholder="Type a message" />
+    <button onclick="sendChat()">Send</button>
+</body>
+</html>
diff --git a/web_server/database/app.db b/web_server/database/app.db
index 5c5cf2e..80e83e6 100644
Binary files a/web_server/database/app.db and b/web_server/database/app.db differ
diff --git a/web_server/database/schema.sql b/web_server/database/schema.sql
index ffc4b89..869ccdc 100644
--- a/web_server/database/schema.sql
+++ b/web_server/database/schema.sql
@@ -52,7 +52,7 @@ CREATE TABLE follows
 DROP TABLE IF EXISTS chat;
 CREATE TABLE chat
 (
-    message_id INTEGER,
+    message_id INTEGER PRIMARY KEY AUTOINCREMENT,
     stream_id INTEGER NOT NULL,
     chatter_id VARCHAR(50) NOT NULL,
     message VARCHAR(256) NOT NULL,