diff --git a/src/pages/manage/Header.tsx b/src/pages/manage/Header.tsx
index b9438e709..2d04ce62a 100644
--- a/src/pages/manage/Header.tsx
+++ b/src/pages/manage/Header.tsx
@@ -17,15 +17,26 @@ import {
 import { TiThMenu } from "solid-icons/ti"
 import { IoExit } from "solid-icons/io"
 import { SwitchColorMode, SwitchLanguageWhite } from "~/components"
-import { useRouter, useT } from "~/hooks"
+import { useFetch, useRouter, useT } from "~/hooks"
 import { SideMenu } from "./SideMenu"
 import { side_menu_items } from "./sidemenu_items"
-import { changeToken, notify } from "~/utils"
+import { changeToken, handleResp, notify, r } from "~/utils"
+import { PResp } from "~/types"
 const { isOpen, onOpen, onClose } = createDisclosure()
+const [logOutReqLoading, logOutReq] = useFetch(
+  (): PResp<any> => r.get("/auth/logout"),
+)
 
 const Header = () => {
   const t = useT()
   const { to } = useRouter()
+  const logOut = async () => {
+    handleResp(await logOutReq(), () => {
+      changeToken()
+      notify.success(t("manage.logout_success"))
+      to(`/@login?redirect=${encodeURIComponent(location.pathname)}`)
+    })
+  }
   return (
     <Box
       as="header"
@@ -64,11 +75,8 @@ const Header = () => {
           <IconButton
             aria-label="logout"
             icon={<IoExit />}
-            onClick={() => {
-              changeToken()
-              notify.success(t("manage.logout_success"))
-              to(`/@login?redirect=${encodeURIComponent(location.pathname)}`)
-            }}
+            loading={logOutReqLoading()}
+            onClick={logOut}
             size="sm"
           />
         </HStack>