diff --git a/src/modules/layout/LayoutUser.tsx b/src/modules/layout/LayoutUser.tsx
index d8a086e..25efc34 100644
--- a/src/modules/layout/LayoutUser.tsx
+++ b/src/modules/layout/LayoutUser.tsx
@@ -7,15 +7,18 @@ import {
   CodeOutlined,
   DashboardOutlined,
   HomeOutlined,
+  LogoutOutlined,
   MessageOutlined,
   ReadOutlined,
   RocketOutlined,
   SmileOutlined,
   SwapOutlined,
   SwitcherOutlined,
+  UserOutlined,
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 import { useMemo } from 'react';
+import { query } from '../query';
 const meun = [
   {
     title: 'Your profile',
@@ -98,6 +101,17 @@ export const LayoutUser = () => {
             );
           })}
         </div>
+        <div
+          className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
+          onClick={() => {
+            query.removeToken();
+            window.open('/user/login', '_self');
+          }}>
+          <div className='mr-4'>
+            <LogoutOutlined />
+          </div>
+          <div>Login Out</div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/modules/query.ts b/src/modules/query.ts
index 1e15221..38f14da 100644
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -15,13 +15,13 @@ query.beforeRequest = async (config) => {
 };
 query.afterResponse = async (res) => {
   if (res.code === 401) {
+    modal.setOpen(true);
+  }
+  if (res.code === 403) {
     if (!res?.message) {
       message.error('Unauthorized');
     }
   }
-  if (res.code === 403) {
-    modal.setOpen(true);
-  }
   return res;
 };
 export const request = query.post;