diff --git a/echo_handlers.go b/echo_handlers.go
index 8b85de16..ce938931 100644
--- a/echo_handlers.go
+++ b/echo_handlers.go
@@ -65,7 +65,7 @@ func (svc *Service) RegisterSharedRoutes(e *echo.Echo) {
 	e.POST("/api/apps", svc.AppsCreateHandler)
 	e.DELETE("/api/apps/:pubkey", svc.AppsDeleteHandler)
 	e.GET("/api/info", svc.InfoHandler)
-	e.GET("/api/logout", svc.LogoutHandler)
+	e.POST("/api/logout", svc.LogoutHandler)
 	frontend.RegisterHandlers(e)
 }
 
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 97f24079..4f252667 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useInfo } from "../hooks/useInfo";
 import { logout } from "../utils/logout";
 import { useLogin } from "../hooks/useLogin";
@@ -7,6 +7,9 @@ import caretIcon from "../assets/icons/caret.svg";
 import aboutIcon from "../assets/icons/about.svg";
 import React from "react";
 import { LogoutIcon } from "./icons/LogoutIcon";
+import { handleFetchError, validateFetchResponse } from "../utils/fetch";
+import toast from "./Toast";
+import { useSWRConfig } from "swr";
 
 function Navbar() {
   const { data: info } = useInfo();
@@ -85,6 +88,24 @@ function ProfileDropdown() {
     return null;
   }
 
+  async function logout() {
+    try {
+      if (!info) {
+        throw new Error("info not loaded");
+      }
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        headers: {
+          "X-CSRF-Token": info.csrf,
+        },
+      });
+      await validateFetchResponse(response);
+      window.location.href = "/";
+    } catch (error) {
+      handleFetchError("Failed to logout", error);
+    }
+  }
+
   // TODO: add a proper dropdown component
   return (
     <div className="flex items-center relative">
diff --git a/frontend/src/utils/logout.ts b/frontend/src/utils/logout.ts
deleted file mode 100644
index 14d4d6e3..00000000
--- a/frontend/src/utils/logout.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const logout = async () => {
-  try {
-    await fetch("/api/logout");
-    window.location.href = "/";
-  } catch (error) {
-    // TODO: Handle failure
-    console.error("Error during logout:", error);
-  }
-};