diff --git a/client/src/components/NavBar.vue b/client/src/components/NavBar.vue
index 9b3699d..9a09c57 100644
--- a/client/src/components/NavBar.vue
+++ b/client/src/components/NavBar.vue
@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
 import { error } from '../error'
-import router from "../router";
 import { state } from '../state'
 
-async function logOut() {
-    const result = await fetch('/api/v1/auth', {method: 'DELETE'})
-    if(!result.ok) return error('failed to log out')
-    state.user = undefined
-    router.push('/login')
-}
 </script>
 <template>
     <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -32,7 +25,7 @@ async function logOut() {
                 </RouterLink>
             </div>
             <div class="navbar-item">
-                <button class="button is-info" @click="logOut">
+                <button class="button is-info" @click="state.logOut()">
                     Log Out
                 </button>
             </div>
diff --git a/client/src/state.ts b/client/src/state.ts
index 9e08abb..b0e94fa 100644
--- a/client/src/state.ts
+++ b/client/src/state.ts
@@ -3,6 +3,7 @@ import { Track } from "./track"
 import { Tick } from './ticks'
 import { error } from "./error"
 import { getCookie } from "./util";
+import router from './router'
 
 enum State {
     Unfetched,
@@ -130,6 +131,13 @@ class AppState {
         const response = await fetch(`/api/v1/tracks/${trackID}`, { method: "DELETE" })
         if (!response.ok) error(`error deleting track with ID ${trackID}: ${response.statusText} (${response.status})`)
     }
+    async logOut() {
+        const result = await fetch('/api/v1/auth', {method: 'DELETE'})
+        if(!result.ok) return error('failed to log out')
+        this.user = undefined
+        router.push('/login')
+    }
 }
 
+
 export const state = reactive(new AppState)