diff --git a/apps/app/src/components/Header/LoginNavigationLink.tsx b/apps/app/src/components/Header/LoginNavigationLink.tsx
index 5590cab7..ffc41170 100644
--- a/apps/app/src/components/Header/LoginNavigationLink.tsx
+++ b/apps/app/src/components/Header/LoginNavigationLink.tsx
@@ -12,14 +12,23 @@ export const LoginNavigationLink = ({
 	onClick?: MouseEventHandler<HTMLAnchorElement>;
 }) => {
 	const pathname = usePathname();
-	const { userData, isLoading } = useUser();
+	const { userData, isLoading, logout } = useUser();
 
 	if (isLoading) {
 		return null;
 	}
 
 	if (userData) {
-		return <UserAvatar userData={userData} />;
+		return (
+			<button
+				type="button"
+				className="mx-auto flex transition-opacity hover:opacity-80"
+				onClick={() => logout.mutate({})}
+			>
+				<UserAvatar userData={userData} />
+				<span className="sr-only">wyloguj się</span>
+			</button>
+		);
 	}
 
 	return (
diff --git a/apps/app/src/components/Header/UserAvatar.tsx b/apps/app/src/components/Header/UserAvatar.tsx
index a4087f21..0f106b78 100644
--- a/apps/app/src/components/Header/UserAvatar.tsx
+++ b/apps/app/src/components/Header/UserAvatar.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useUser } from "../../hooks/useUser";
 import { UserData } from "../../types";
 import { GitHubAvatar } from "../GitHubAvatar";
 
@@ -9,7 +8,6 @@ type UserAvatarProps = Readonly<{
 }>;
 
 export const UserAvatar = ({ userData }: UserAvatarProps) => {
-	const { logout } = useUser();
 	const { _user } = userData;
 
 	return (
@@ -18,8 +16,7 @@ export const UserAvatar = ({ userData }: UserAvatarProps) => {
 			width={38}
 			height={38}
 			title="Kliknij, aby się wylogować"
-			onClick={() => logout.mutate({})}
-			className="mx-auto cursor-pointer rounded-full transition-opacity hover:opacity-80"
+			className="mx-auto rounded-full"
 		/>
 	);
 };