diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index 39ad208..a3af9fb 100755
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -151,7 +151,14 @@ const app = new Vue({
             username: '',
             role: ''
         },
-        gateway: new GatewayConnection()
+        gateway: new GatewayConnection(),
+        viewingChat: {
+            show: false,
+            categoryId: 'X'
+        },
+        messages: {
+            'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
+        }
     },
     mounted: async function() {
         const res = await fetch(`${window.location.origin}/api/v1/users/current/info`, {
@@ -220,14 +227,17 @@ const app = new Vue({
             };
             this.gateway.onConnect = () => {
                 this.gateway.socket.on('message', ({ username, categoryId, content }) => {
-                    this.showMessageNotification(username, content);
+                    this.showMessageNotification(categoryId, username, content);
                 })
             };
             this.gateway.connect(this.loggedInUser.token);
         },
-        showMessageNotification: async function(username, content) {
+        showMessageNotification: async function(categoryId, username, content) {
             this.resetSnackbarButton();
             this.notification(`${username}: ${content}`);
+
+            if (!this.messages[categoryId]) this.messages[categoryId] = []
+            this.messages[categoryId].push({ username, content });
         },
         button: function(text, click) {
             this.cardButtons.push({ text, click });