diff --git a/party/main.py b/party/main.py
index 1beb978..cd343a6 100644
--- a/party/main.py
+++ b/party/main.py
@@ -1,13 +1,16 @@
 from flask import Flask, jsonify, render_template, session, redirect
+from flask_socketio import SocketIO, send, emit
 from http import HTTPStatus
 from mate import generate_kiste
 from chat import Chat
+import bson.json_util as json_util
 
 
 app = Flask(__name__,
             template_folder='templates',
             static_folder='static',)
 app.secret_key = 'super secret key 1234 5678 9012 3456 '
+socketio = SocketIO(app)
 
 @app.route('/', methods=['GET'])
 def index():
@@ -70,27 +73,13 @@ def api_chat():
         Chat.init()
     messages = Chat.getAllMessages()
     print(messages)
-    response = jsonify(success=True, messages=messages)
+    response = jsonify(success=True, messages=json_util.dumps(messages))
     response.status_code = 200
     return response
 
-@app.route('/api/chat/messages/<count>', methods=['GET'])
-def api_chat_messages_1(count):
-    response = jsonify(success=True)
-    response.status_code = 200
-    return response
-
-@app.route('/api/chat/messages/<count>/<offset>', methods=['GET'])
-def api_chat_messages_2(count, offset):
-    response = jsonify(success=True)
-    response.status_code = 200
-    return response
-
-@app.route('/api/chat/new_message', methods=['POST'])
-def api_chat_new_message():
-    response = jsonify(success=True)
-    response.status_code = 200
-    return response
+@socketio.on('chat-message')
+def handle_chat_message(data):
+    Chat.insertMessage(data['content'], data['author'], data['timestamp'])
 
 @app.route('/api/music', methods=['GET'])
 def api_music():
@@ -123,5 +112,5 @@ def page_not_found(error):
     return render_template('404.html'), response
 
 if __name__ == '__main__':
-    app.run(debug=True, host='localhost', port=5000) #pragma: no cover
+    socketio.run(app, debug=True, host='localhost', port=5000) #pragma: no cover
 
diff --git a/party/static/js/session.js b/party/static/js/session.js
index e1fc846..bb931be 100644
--- a/party/static/js/session.js
+++ b/party/static/js/session.js
@@ -60,6 +60,7 @@ function handleSwitchDiv(index) {
 
     switch (index) {
         case 4:
+            // get previous messages
             fetch(`/api/chat`, {
                 method: 'GET',
             }).then(response => {
@@ -68,7 +69,14 @@ function handleSwitchDiv(index) {
                     return;
                 }
                 response.json().then(data => {
-                    console.log(data.messages);
+                    data.messages = JSON.parse(data.messages);
+                    let messages = [];
+
+                    for (let message of data.messages) {
+                        messages.push(chatMessage(message.content, message.author, message.timestamp));
+                    }
+
+                    messages.forEach(message => document.getElementById('chatBox').appendChild(message));
                 });
             })
         break;
@@ -123,6 +131,38 @@ function handleSwitchDiv(index) {
 
 }
 
+function chatMessage(content, author, timestap) {
+    console.log(content, author, timestap);
+    const message = document.createElement('div');
+    message.classList.add('chat-message');
+
+    const messageContent = document.createElement('div');
+    messageContent.classList.add('chat-message-content');
+    const content_field = document.createElement('p');
+    content_field.textContent = content;
+    messageContent.appendChild(content_field);
+
+    const messageAuthor = document.createElement('div');
+    messageAuthor.classList.add('chat-message-author');
+    const author_field = document.createElement('p');
+    author_field.textContent = author;
+    messageAuthor.appendChild(author_field);
+
+    const messageTimestamp = document.createElement('div');
+    messageTimestamp.classList.add('chat-message-timestamp');
+    const timestamp_field = document.createElement('p');
+    timestamp_field.textContent = timestap;
+    messageTimestamp.appendChild(timestamp_field);
+
+    message.appendChild(messageContent);
+    message.appendChild(messageAuthor);
+    message.appendChild(messageTimestamp);
+
+    return message;
+}
+
+
+
 // returns x and y
 function flascheIndex(index_1d, rows, columns) {
     return [Math.floor(index_1d / columns), index_1d % columns];
diff --git a/party/templates/session.html b/party/templates/session.html
index 134f11a..baa985c 100644
--- a/party/templates/session.html
+++ b/party/templates/session.html
@@ -66,7 +66,7 @@
 	</tr>
 	</tbody>
 	</table>
-	<form action="/apit/get_events">
+	<form action="/api/get_events">
 		<input class="event_input" typ="text" name="Event" placeholder="Essen" maxlength="20" minlength="1" required>
 		<input class="event_time" type="datetime-local" id="meeting-time"
 	       name="meeting-time" value="2023-12-31T12:00"
@@ -79,8 +79,11 @@
         <p>Spiele</p>
     </div>
     <div class="hidden-div">
-        <h1>Chat</h1>
-        <p>Nachrichten</p>
+        <div id="chat-container">
+            <h1>Chat</h1>
+            <div id="chatBox">
+            </div>
+        </div>
     </div>
     <div class="hidden-div">
         <h1>Musik</h1>
diff --git a/pyproject.toml b/pyproject.toml
index b38908a..a7da541 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -12,6 +12,8 @@ pytest = "^7.4.0"
 pylint = "^2.17.4"
 pytest-cov = "^4.1.0"
 pymongo = "^4.4.0"
+flask-socketio = "^5.3.4"
+faker = "^19.1.0"
 
 
 [build-system]
diff --git a/scripts/generate_mock_messages.py b/scripts/generate_mock_messages.py
new file mode 100644
index 0000000..05c3e79
--- /dev/null
+++ b/scripts/generate_mock_messages.py
@@ -0,0 +1,13 @@
+from party.chat import Chat
+from faker import Faker
+
+fake = Faker()
+
+Chat.init()
+
+def generate_message():
+    Chat.insertMessage(fake.text(), fake.name(), fake.date_time().isoformat())
+
+MESSAGE_COUNT = 10
+for i in range(MESSAGE_COUNT):
+    generate_message()