diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 547bd8c..01a2f2c 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -91,8 +91,19 @@ export default function Header(data: Props) {
 					<Link href="https://github.com/juanfont/headscale" text="Headscale" />
 					{data.user ? (
 						<Menu>
-							<Menu.IconButton label="User">
-								<CircleUser />
+							<Menu.IconButton
+								label="User"
+								className={cn(data.user.picture ? 'p-0' : '')}
+							>
+								{data.user.picture ? (
+									<img
+										src={data.user.picture}
+										alt={data.user.name}
+										className="w-8 h-8 rounded-full"
+									/>
+								) : (
+									<CircleUser />
+								)}
 							</Menu.IconButton>
 							<Menu.Panel
 								onAction={(key) => {
diff --git a/app/utils/oidc.ts b/app/utils/oidc.ts
index 201c85e..8a69023 100644
--- a/app/utils/oidc.ts
+++ b/app/utils/oidc.ts
@@ -130,6 +130,7 @@ export async function finishAuthFlow(oidc: OidcConfig, options: FlowOptions) {
 		name: getName(user, claims),
 		email: user.email ?? claims.email?.toString(),
 		username: user.preferred_username ?? claims.preferred_username?.toString(),
+		picture: user.picture,
 	};
 }
 
diff --git a/app/utils/sessions.server.ts b/app/utils/sessions.server.ts
index cf6ccf7..dac2f29 100644
--- a/app/utils/sessions.server.ts
+++ b/app/utils/sessions.server.ts
@@ -12,6 +12,7 @@ export type SessionData = {
 		name: string;
 		email?: string;
 		username?: string;
+		picture?: string;
 	};
 };