diff --git a/client/src/components/NavBar.vue b/client/src/components/NavBar.vue
index e11af91..64a6d6e 100644
--- a/client/src/components/NavBar.vue
+++ b/client/src/components/NavBar.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
+import { error } from '../error'
+import router from "../router";
+
+async function logOut() {
+    const result = await fetch('/api/v1/auth', {method: 'DELETE'})
+    if(!result.ok) return error('failed to log out')
+    console.debug('logged out')
+    router.push('/login')
+}
 </script>
 <template>
     <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -9,20 +18,27 @@ import { RouterLink } from 'vue-router';
         <div class="navbar-menu"></div>
         <div class="navbar-end">
             <div class="navbar-item">
-                <div class="buttons">
-                    <RouterLink to="/" v-if="$route.path === '/new-track'">
-                        <button class="button is-info">
-                            Go Back
-                        </button>
-                    </RouterLink>
+                <RouterLink to="/" v-if="$route.path === '/new-track'">
+                    <button class="button is-info">
+                        Go Back
+                    </button>
+                </RouterLink>
 
-                    <RouterLink to="/new-track" v-else>
-                        <button class="button is-primary">
-                            Add Track
-                        </button>
-                    </RouterLink>
-                </div>
+                <RouterLink to="/new-track" v-else>
+                    <button class="button is-primary">
+                        Add Track
+                    </button>
+                </RouterLink>
+            </div>
+            <div class="navbar-item">
+                <button class="button is-info" @click="logOut">
+                    Log Out
+                </button>
+            </div>
+            <div class="navbar-item">
+                <!-- spacer -->
+                &nbsp;
             </div>
         </div>
     </nav>
-</template>
\ No newline at end of file
+</template>