diff --git a/resources/assets/js/prototype/components/Navigation.vue b/resources/assets/js/prototype/components/Navigation.vue
index a9033b51..fa429677 100644
--- a/resources/assets/js/prototype/components/Navigation.vue
+++ b/resources/assets/js/prototype/components/Navigation.vue
@@ -1,13 +1,24 @@
 <script setup>
-//
+import { getCurrentInstance } from 'vue';
+
+const router = getCurrentInstance().proxy.$router;
+
+const logOut = () => {
+    localStorage.removeItem('api_key');
+
+    router.push('login');
+};
 </script>
 
 <template>
     <div class="py-4 border-b border-gray-100">
         <div class="max-w-5xl mx-auto">
-            <div class="flex space-x-4">
-                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
-                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+            <div class="flex justify-between">
+                <div class="flex space-x-4">
+                    <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
+                    <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+                </div>
+                <button class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" @click="logOut()">Log out</button>
             </div>
         </div>
     </div>