diff --git a/frontend/app/src/components/AuthModal.tsx b/frontend/app/src/components/AuthModal.tsx
index 6ae2abd..eb6631e 100644
--- a/frontend/app/src/components/AuthModal.tsx
+++ b/frontend/app/src/components/AuthModal.tsx
@@ -3,6 +3,7 @@ import "./styles.css";
 import { KeyOutlined, UserAddOutlined } from "@ant-design/icons";
 import React, { useContext, useEffect, useState } from "react";
 import {
+  TokenResponse,
   useGetUserQuery,
   useLoginMutation,
   useRegisterMutation,
@@ -37,7 +38,7 @@ const AuthModal = (props: {
 
     loginUser(formData)
       .unwrap()
-      .then((data) => {
+      .then((data: TokenResponse) => {
         store.dispatch(updateToken(data.access_token));
       })
       .then(() => refetch())
diff --git a/frontend/app/src/components/HeaderComponent.tsx b/frontend/app/src/components/HeaderComponent.tsx
index b91ed21..8ba67cc 100644
--- a/frontend/app/src/components/HeaderComponent.tsx
+++ b/frontend/app/src/components/HeaderComponent.tsx
@@ -1,5 +1,5 @@
 import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Layout, Menu, MenuProps, Tooltip } from "antd";
+import { Button, Layout, Menu, MenuProps, Popover, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
@@ -12,30 +12,32 @@ type NullableUser = { name: string | null; username: string } | null;
 
 const HeaderComponent = () => {
   const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
 
   const user: NullableUser = useSelector(
     (state: StorePrototype) => state.auth.user
   );
 
-  // const userMenuItems: MenuProps["userMenuItems"] = [
-  //   {
-  //     label: <Button>Log out</Button>,
-  //     key: "logout",
-  //     icon: <LogoutOutlined />,
-  //     onClick: () => store.dispatch(logOut()),
-  //   },
-  // ]
+  const userMenuItems: MenuProps["userMenuItems"] = [
+    {
+      label: "Log out",
+      key: "logout",
+      icon: <LogoutOutlined />,
+      onClick: () => store.dispatch(logOut()),
+    },
+  ];
 
   const items: MenuProps["items"] = [
     {
       label: user ? (
-        <Tooltip
-          title={
-            <Button onClick={() => store.dispatch(logOut())}>Log out</Button>
-          }
+        <Popover
+          trigger="click"
+          open={userMenuOpen}
+          onOpenChange={(isOpen) => setUserMenuOpen(isOpen)}
+          content={<Menu theme="dark" mode="vertical" items={userMenuItems} />}
         >
           {user.username}
-        </Tooltip>
+        </Popover>
       ) : (
         "Log In"
       ),
diff --git a/frontend/app/src/config/style.ts b/frontend/app/src/config/style.ts
index 90951ee..ef8f631 100644
--- a/frontend/app/src/config/style.ts
+++ b/frontend/app/src/config/style.ts
@@ -21,6 +21,9 @@ export const theme: ThemeConfig = {
     Message: {
       contentBg: "#001c36",
     },
+    Popover: {
+      colorBgElevated: "#001c36",
+    },
   },
   token: {
     colorText: "#ffffff",
diff --git a/frontend/app/src/slice/AuthApi.ts b/frontend/app/src/slice/AuthApi.ts
index b85c436..52cb5ca 100644
--- a/frontend/app/src/slice/AuthApi.ts
+++ b/frontend/app/src/slice/AuthApi.ts
@@ -19,7 +19,7 @@ export interface RegisterRequest {
   password2: string;
 }
 
-type TokenResponse = {
+export type TokenResponse = {
   access_token: string;
   token_type: string;
 };