diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx
index 104d316..818322a 100644
--- a/src/components/dashboard/Settings.tsx
+++ b/src/components/dashboard/Settings.tsx
@@ -3,7 +3,8 @@
 // import { isSettingsOpen, userInfo } from "~/lib/stores";
 // import { StereoUser } from "~/lib/types";
 
-import { component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import { $, component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import ky from "ky";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { isSettingsOpen } from "~/lib/stores";
 
@@ -34,9 +35,22 @@ const PrivacyAndSecurity = component$(() => {
 });
 
 const DangerZone = component$(() => {
+    const handleLogout = $(() => {
+        ky.get("/api/auth/logout", { credentials: "include" })
+        .then(() => {
+            window.location.href = "/";
+        });
+    });
+
     return (
         <div>
             <p>delete your account and data here</p>
+            <button
+                onClick$={handleLogout}
+                class="text-white bg-stereo hover:bg-stereo/80 transition-colors rounded-lg px-4 py-2"
+            >
+                log out
+            </button>
         </div>
     );
 });