diff --git a/apps/web/src/common/components/Header/User.test.tsx b/apps/web/src/common/components/Header/User.test.tsx
new file mode 100755
index 000000000..383d5dcb8
--- /dev/null
+++ b/apps/web/src/common/components/Header/User.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import User from './User';
+
+jest.mock('next/router', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+}));
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={props.src} alt={props.alt} />;
+  },
+}));
+
+jest.mock('@modules/auth', () => ({
+  useUserInfo: () => ({
+    providerUser: { avatarUrl: 'https://example.com/a.png', name: 'alice' },
+    roleLevel: 0,
+    dashboardRole: false,
+  }),
+}));
+
+jest.mock('@modules/auth/UserInfoStore', () => ({
+  resetUserInfo: jest.fn(),
+}));
+
+jest.mock('@oss-compass/graphql', () => ({
+  useSignOutMutation: () => ({ mutate: jest.fn() }),
+}));
+
+describe('Header User menu', () => {
+  it('exposes the avatar as a focusable menu trigger button', () => {
+    render(<User />);
+
+    const trigger = screen.getByRole('button', { name: 'alice' });
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+  });
+
+  it('exposes the sign-out action as a button', () => {
+    render(<User />);
+
+    expect(
+      screen.getByRole('button', { name: /common:signout/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the menu entries as links reachable after the trigger', () => {
+    render(<User />);
+
+    expect(
+      screen.getByRole('link', { name: /common:profile_setting/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: /common:subscribe/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/src/common/components/Header/User.tsx b/apps/web/src/common/components/Header/User.tsx
index 70d9e1828..a8ad816db 100644
--- a/apps/web/src/common/components/Header/User.tsx
+++ b/apps/web/src/common/components/Header/User.tsx
@@ -34,7 +34,12 @@ const User = () => {
 
   return (
     <div className="group relative flex h-full items-center pl-6 transition">
-      <div className="border-secondary relative flex h-[32px] w-[32px] cursor-pointer items-center justify-center overflow-hidden rounded-full border group-hover:bg-[#333333]">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-label={user?.name || t('common:profile_setting')}
+        className="border-secondary relative flex h-[32px] w-[32px] cursor-pointer items-center justify-center overflow-hidden rounded-full border group-focus-within:bg-[#333333] group-hover:bg-[#333333]"
+      >
         <Image
           src={user?.avatarUrl!}
           referrerPolicy="no-referrer"
@@ -46,9 +51,9 @@ const User = () => {
           }}
           alt=""
         />
-      </div>
+      </button>
 
-      <div className="z-dropdown absolute -right-4 top-[100%] hidden w-auto group-hover:block">
+      <div className="z-dropdown absolute -right-4 top-[100%] hidden w-auto group-focus-within:block group-hover:block">
         <div className="mt-[2px] bg-black/90 text-white">
           <Link
             href="/settings/subscribe"
@@ -93,8 +98,9 @@ const User = () => {
             {t('common:profile_setting')}
           </Link>
 
-          <div
-            className="flex cursor-pointer items-center  whitespace-nowrap border-b border-white/20 py-4 pl-6 text-center last:border-b-0 hover:bg-[#333333]"
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center  whitespace-nowrap border-b border-white/20 py-4 pl-6 text-center last:border-b-0 hover:bg-[#333333]"
             onClick={() => {
               mutation.mutate(
                 {},
@@ -108,7 +114,7 @@ const User = () => {
             }}
           >
             <MdOutlineLogout className="mr-2 text-base" /> {t('common:signout')}
-          </div>
+          </button>
         </div>
       </div>
     </div>