diff --git a/src/App.vue b/src/App.vue
index 97e50a9..165d108 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,8 +25,8 @@
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { useIpc } from "@/modules/ipc";
-import { useAuth } from "@/modules/auth";
 import Splash from "@/components/splash.vue"
+import useMessages from '@/modules/messages';
 
 export default defineComponent({
   components: { Splash },
@@ -34,6 +34,7 @@ export default defineComponent({
   setup() {
     const { invoke } = useIpc();
     const ready = ref(false);
+    const { saveMessages } = useMessages();
 
     onMounted(() => {
         window.ipcRenderer.on('window-ready', (_event, payload: {message: boolean}) => {
@@ -46,6 +47,12 @@ export default defineComponent({
     })
 
     const callNavbar = (action: string) => {
+
+      // save messages before closing.
+      if (action === 'close') {
+        saveMessages();
+      }
+
       invoke('nav-bar', action);
     }
 
diff --git a/src/modules/messages.ts b/src/modules/messages.ts
new file mode 100644
index 0000000..e3c9286
--- /dev/null
+++ b/src/modules/messages.ts
@@ -0,0 +1,41 @@
+import { ref } from 'vue';
+import { RenderMessage, Annotation } from "@/types/message/index";
+
+const messages = ref(new Map());
+
+const messagesKey = "CRIMATA_MESSAGES";
+
+const messagesString = window.localStorage.getItem(messagesKey);
+
+if (messagesString) {
+  // parse stored messages.
+  const parsed = JSON.parse(messagesString);
+  // set messages.
+  messages.value = new Map(Object.entries(parsed));
+}
+
+export default function useMessages() {
+
+    const addMessage = (m: RenderMessage) => messages.value.set(m.uid, m);
+
+    const updateMessage = (m: Annotation) => {
+        // update message if in the map.
+        if (messages.value.has(m.uid)) {
+            messages.value.get(m.uid).context = m.context;
+            messages.value.get(m.uid).content.text = m.text;
+        }
+    }
+
+    const saveMessages = () => {
+        // de-reactivate message data before saving.
+        const messageData = Object.fromEntries(messages.value);
+        window.localStorage.setItem(messagesKey, JSON.stringify(messageData));
+    }
+
+    return {
+      messages,
+      saveMessages,
+      addMessage,
+      updateMessage
+    }
+}
\ No newline at end of file
diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index c19d690..0da4d5e 100644
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -30,34 +30,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, onMounted, onUnmounted } from "vue";
-import { RenderMessage , Annotation } from "@/types/message/index";
+import { defineComponent, ref, onMounted, onUnmounted } from "vue";
 import MessageItem from "@/components/messageItem.vue";
 import InputItem from "@/components/inputItem/inputItem.vue";
 import useMitt from "@/modules/mitt";
 import { useRouter } from "vue-router";
 import { useAuth } from "@/modules/auth";
 import  { useIpc } from "@/modules/ipc";
+import useMessages from '@/modules/messages';
 
 export default defineComponent({
   name: "Messenger",
-
   components: {
     MessageItem,
     InputItem,
   },
-
   setup() {
 
     const { post } = useIpc();
     const { logout } = useAuth();
     const router = useRouter();
+    const { emitter } = useMitt();
+    const { messages, addMessage, updateMessage } = useMessages();
 
-    // Whether or not to show the settings.
+    // controls settings rendering. 
     const toggleSettings = ref(false);
 
     // Listen for escape key to close settings.
-    const onEscape = (e: any) => {
+    const onEscape = (e: KeyboardEvent) => {
       if(e.key === "Escape") {
         toggleSettings.value = false;
       }
@@ -74,42 +74,24 @@ export default defineComponent({
     const onLogout = () => {
       logout();
       router.push({ name: "login" });
-      post("logout", "")
+      post("logout", "");
     } 
 
-    const { emitter } = useMitt();
-
-    // List of messages in the view.
-    // Oldest message first.
-    const messages = reactive(new Map());
-
-    let m: RenderMessage | Annotation;
-
-    const onRenderMessage = (event: any, payload: any) => { 
+    const onRenderMessage = (_event: any, payload: any) => { 
 
       // render message if there is content.
       if (payload.message.content) {
-        m = payload.message as RenderMessage;
-
-        messages.set(m.uid, m);
-
+        addMessage(payload.message);
       } else {
-        // must be an annotation, update messages.
-        m = payload.message as Annotation;
-
-        if (messages.has(m.uid)) {
-          messages.get(m.uid).context = m.context;
-          messages.get(m.uid).content.text = m.text;
-        }
-
+        // must be an annotation, update message.
+        updateMessage(payload.message);
       }
+
     }
 
-    toggleSettings.value = false;
-
     onMounted(() => {
-      emitter.on('self-message', (message) => messages.set(message.uid, message));
       // Listen for new messages to render.
+      emitter.on('self-message', (message) => addMessage(message));
       window.ipcRenderer.on("render-message", onRenderMessage);
     });
 
diff --git a/tests/server.js b/tests/server.js
index edbee04..6731be9 100644
--- a/tests/server.js
+++ b/tests/server.js
@@ -3,6 +3,7 @@ const WebSocket = require("ws");
 const wss = new WebSocket.Server({
   port: 8760
 });
+let auth = false;
 
 wss.on("connection", function connection(ws, req) {
   ws.on("message", function incoming(message) {
@@ -13,7 +14,15 @@ wss.on("connection", function connection(ws, req) {
     } else if (message instanceof String || typeof message === "string") {
       // audio message
       console.log('caught the token', message)
-      ws.send('success');
+      if (!auth) {
+        ws.send('success');
+        auth = true;
+      } else {
+        const parsed = JSON.parse(message);
+        console.log('got a message', message)
+
+      }
+
     } else {
       const parsed = JSON.parse(message);
       console.log('parsed', parsed)