diff --git a/src/client/component/headline.tsx b/src/client/component/headline.tsx
index d5e8f5d..ab16f67 100644
--- a/src/client/component/headline.tsx
+++ b/src/client/component/headline.tsx
@@ -8,7 +8,7 @@ import {
 import { makeStyles, Theme, useTheme, fade } from '@material-ui/core/styles';
 import { ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, AccountCircle } from '@material-ui/icons';
 import { Link as RouterLink, useRouteMatch } from 'react-router-dom';
-import { UserContext } from '../state';
+import { doLogout, UserContext } from '../state';
 
 const drawerWidth = 240;
 
@@ -135,7 +135,7 @@ export const Headline = (prop: {
         onClose={handleProfileMenuClose}
     >
         <MenuItem component={RouterLink} to='/profile'>Profile</MenuItem>
-        <MenuItem>Logout</MenuItem>
+        <MenuItem onClick={async ()=>{handleProfileMenuClose(); await doLogout(); user_ctx.setUsername("");}}>Logout</MenuItem>
     </Menu>);
     const drawer_contents = (<>
         <div className={classes.toolbar}>
diff --git a/src/client/state.tsx b/src/client/state.tsx
index 799c824..5a1fd97 100644
--- a/src/client/state.tsx
+++ b/src/client/state.tsx
@@ -44,4 +44,14 @@ export const getInitialValue = async () => {
         username: r.username,
         permission: r.permission
     }
+}
+export const doLogout = async ()=>{
+    const res = await fetch('/user/logout', {
+        method: 'POST',
+    });
+    await res.json();
+    localObj.refreshExpired = 0;
+    localObj.username = "";
+    localObj.permission = [];
+    window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
 }
\ No newline at end of file