diff --git a/webv2/components/body/Sidebar.vue b/webv2/components/body/Sidebar.vue
index 5665e67..5eec4fa 100644
--- a/webv2/components/body/Sidebar.vue
+++ b/webv2/components/body/Sidebar.vue
@@ -15,5 +15,25 @@
       <Icon size="1.5em" name="heroicons:map" class="mr-2" />
       Map
     </NuxtLink>
+    <div class="mb-5 mt-auto flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20" @click="logout">
+      <Icon size="1.5em" name="heroicons:arrow-right-on-rectangle" class="mr-2" />
+      Logout
+    </div>
   </div>
 </template>
+
+<script setup>
+const logout = async () => {
+  try {
+    await useFetch('/api/auth', {
+      method: 'DELETE'
+    })
+
+    navigateTo('/login')
+  } catch (e) {
+    console.error(e)
+
+    useToast().add({ title: e.statusMessage, color: 'red' })
+  }
+}
+</script>
diff --git a/webv2/server/api/auth/index.delete.ts b/webv2/server/api/auth/index.delete.ts
new file mode 100644
index 0000000..3e3525b
--- /dev/null
+++ b/webv2/server/api/auth/index.delete.ts
@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  setCookie(event, 'jwt', '', { httpOnly: true, maxAge: 1 })
+  sendRedirect(event, '/', 302)
+})
diff --git a/webv2/server/api/auth.ts b/webv2/server/api/auth/index.get.ts
similarity index 100%
rename from webv2/server/api/auth.ts
rename to webv2/server/api/auth/index.get.ts