diff --git a/public/js/chat.js b/public/js/chat.js
index 987f5fc..f8d15d0 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -10,8 +10,22 @@ $(document).ready(() => {
     //dev
     const socket = new WebSocket('ws://localhost:3000');
 
+    const appendMessageToChat = (author, content) => {
+        const messageDiv = document.createElement('div')//`<div class="chat-message" ><${message.author}> ${message.content}</div><br/>`
+        messageDiv.className = "chat-message"
+        messageDiv.textContent = `<${author}> ${content}`
+        document.getElementsByClassName("messages-container")[0].appendChild(messageDiv)
+    }
+
     socket.onmessage = message => {
-        console.log(message)
+
+        try {
+            message = JSON.parse(message.data)
+        } catch(e) {
+            console.log(e)
+            return;
+        }
+        appendMessageToChat(message.author, message.content)
     }
 
     const sendData = async () => {
@@ -24,6 +38,8 @@ $(document).ready(() => {
         };
 
         socket.send(JSON.stringify(message));
+        appendMessageToChat(message.author, message.content)
+        $("#chat-input").val("")
     }
 
     $("#send-message-button").click(sendData);
diff --git a/src/messages.js b/src/messages.js
index 02934bc..f82ba1a 100644
--- a/src/messages.js
+++ b/src/messages.js
@@ -27,9 +27,14 @@ const startChat = async () => {
 
     await consumer.run({
         eachMessage: async ({topic, partition, message}) => {
-            const jsonMessage = JSON.parse(message.value.toString())
+            let jsonMessage
+            try {
+                jsonMessage = JSON.parse(message.value.toString())
+            } catch (e) {
+                console.log(e)
+                return
+            }
             if (jsonMessage.origin == "website") return;
-            console.log(wsClients.length)
             wsClients.forEach(client => {
                 console.log("sending message to a client")
                 client.send(JSON.stringify({
@@ -38,14 +43,21 @@ const startChat = async () => {
                     timestamp: jsonMessage.timestamp 
                 }));
             });
-            console.log(message.value.toString());
+
+            const datetime = Math.round(Date.now() / 1000);
+
+            await db.query(
+                "INSERT INTO chat_messages(author, datetime, content) VALUES ($1, to_timestamp($2)::timestamp, $3)",
+                [jsonMessage.author, datetime, jsonMessage.content])
+            .catch(e => {
+                console.log("Error on inserting data into the DB: ", e);
+            });
         }
 
     });
 
     const wsServer = new WebSocketServer({ noServer: true });
     wsServer.on('connection', socket => {
-        console.log("Hooray! New socket connection")
         wsClients.push(socket);
         socket.on('message', async (message) => {
             message = JSON.parse(message.toString());
@@ -53,7 +65,6 @@ const startChat = async () => {
                 socket.send("Malformed package.");
                 return;
             }
-            console.log(message);
             const token = message.jwt;
             if (!jwt.verify(token, process.env.SECRET)) {
                 socket.send("JWT is not valid.");