diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index f1b1cdf..a1fa5e5 100644
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -14,7 +14,12 @@
 
   <!-- Settings "page." -->
   <div id="settings" v-show="toggleSettings">
-    <button class="settingsOption">Logout</button>
+    <button 
+      class="settingsOption"
+      @click="onLogout"
+    >
+      Logout
+    </button>
   </div>
 
   <!-- List of message bubbles. -->
@@ -31,6 +36,9 @@ 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";
+
 export default defineComponent({
   name: "Messenger",
 
@@ -41,8 +49,11 @@ export default defineComponent({
 
   setup() {
 
+    const { logout } = useAuth();
+    const router = useRouter();
+
     // Whether or not to show the settings.
-    let toggleSettings = ref(false);
+    const toggleSettings = ref(false);
 
     // Listen for escape key to close settings.
     const onEscape = (e: any) => {
@@ -58,6 +69,12 @@ export default defineComponent({
       window.addEventListener("keydown", onEscape);
     }
 
+    // When user clicks logout button in settings.
+    const onLogout = () => {
+      logout();
+      router.push({ name: "login" });
+    } 
+
 
     const { emitter } = useMitt();
 
@@ -103,7 +120,8 @@ export default defineComponent({
     return {
       toggleSettings,
       messages,
-      onSettings
+      onSettings,
+      onLogout
     };
   },
 });