diff --git a/client/src/components/nav-user.tsx b/client/src/components/nav-user.tsx
index 41a63fc..d21cba2 100644
--- a/client/src/components/nav-user.tsx
+++ b/client/src/components/nav-user.tsx
@@ -23,10 +23,12 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
+import { useLogout } from '@/hooks/useLogout';
 
 export function NavUser() {
   const { isMobile } = useSidebar();
   const { data: user } = useUserInfo();
+  const { logout } = useLogout();
 
   return (
     <SidebarMenu>
@@ -71,7 +73,7 @@ export function NavUser() {
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={logout}>
               <IconLogout />
               登出
             </DropdownMenuItem>
diff --git a/client/src/hooks/useLogout.ts b/client/src/hooks/useLogout.ts
new file mode 100644
index 0000000..ba67f6e
--- /dev/null
+++ b/client/src/hooks/useLogout.ts
@@ -0,0 +1,14 @@
+import { useNavigate } from '@tanstack/react-router';
+import { useCallback } from 'react';
+import { removeToken } from '@/lib/token';
+
+export function useLogout() {
+  const navigate = useNavigate();
+
+  const logout = useCallback(() => {
+    removeToken();
+    void navigate({ to: '/login' });
+  }, [navigate]);
+
+  return { logout };
+}