diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 3d4e5630d..95ff5d782 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -354,7 +354,11 @@ export function LayoutDataProvider({
 				onChatDelete={handleChatDelete}
 				onViewAllSharedChats={handleViewAllSharedChats}
 				onViewAllPrivateChats={handleViewAllPrivateChats}
-				user={{ email: user?.email || "", name: user?.email?.split("@")[0] }}
+				user={{
+					email: user?.email || "",
+					name: user?.display_name || user?.email?.split("@")[0],
+					avatarUrl: user?.avatar_url || undefined,
+				}}
 				onSettings={handleSettings}
 				onManageMembers={handleManageMembers}
 				onUserSettings={handleUserSettings}
diff --git a/surfsense_web/components/layout/types/layout.types.ts b/surfsense_web/components/layout/types/layout.types.ts
index 73ac98fa5..3eac64e60 100644
--- a/surfsense_web/components/layout/types/layout.types.ts
+++ b/surfsense_web/components/layout/types/layout.types.ts
@@ -12,6 +12,7 @@ export interface SearchSpace {
 export interface User {
 	email: string;
 	name?: string;
+	avatarUrl?: string;
 }
 
 export interface NavItem {
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index d3e97c8eb..30a4d14dc 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -61,6 +61,34 @@ function getInitials(email: string): string {
 	return name.slice(0, 2).toUpperCase();
 }
 
+/**
+ * User avatar component - shows image if available, otherwise falls back to initials
+ */
+function UserAvatar({
+	avatarUrl,
+	initials,
+	bgColor,
+}: {
+	avatarUrl?: string;
+	initials: string;
+	bgColor: string;
+}) {
+	if (avatarUrl) {
+		return (
+			<img src={avatarUrl} alt="User avatar" className="h-8 w-8 shrink-0 rounded-lg object-cover" />
+		);
+	}
+
+	return (
+		<div
+			className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
+			style={{ backgroundColor: bgColor }}
+		>
+			{initials}
+		</div>
+	);
+}
+
 export function SidebarUserProfile({
 	user,
 	onUserSettings,
@@ -88,12 +116,7 @@ export function SidebarUserProfile({
 										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 									)}
 								>
-									<div
-										className="flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold text-white"
-										style={{ backgroundColor: bgColor }}
-									>
-										{initials}
-									</div>
+									<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 									<span className="sr-only">{displayName}</span>
 								</button>
 							</DropdownMenuTrigger>
@@ -104,12 +127,7 @@ export function SidebarUserProfile({
 					<DropdownMenuContent className="w-56" side="right" align="end" sideOffset={8}>
 						<DropdownMenuLabel className="font-normal">
 							<div className="flex items-center gap-2">
-								<div
-									className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-									style={{ backgroundColor: bgColor }}
-								>
-									{initials}
-								</div>
+								<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 								<div className="flex-1 min-w-0">
 									<p className="truncate text-sm font-medium">{displayName}</p>
 									<p className="truncate text-xs text-muted-foreground">{user.email}</p>
@@ -149,13 +167,7 @@ export function SidebarUserProfile({
 							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 						)}
 					>
-						{/* Avatar */}
-						<div
-							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-							style={{ backgroundColor: bgColor }}
-						>
-							{initials}
-						</div>
+						<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 
 						{/* Name and email */}
 						<div className="flex-1 min-w-0">
@@ -171,12 +183,7 @@ export function SidebarUserProfile({
 				<DropdownMenuContent className="w-56" side="top" align="start" sideOffset={4}>
 					<DropdownMenuLabel className="font-normal">
 						<div className="flex items-center gap-2">
-							<div
-								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-								style={{ backgroundColor: bgColor }}
-							>
-								{initials}
-							</div>
+							<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 							<div className="flex-1 min-w-0">
 								<p className="truncate text-sm font-medium">{displayName}</p>
 								<p className="truncate text-xs text-muted-foreground">{user.email}</p>
diff --git a/surfsense_web/contracts/types/user.types.ts b/surfsense_web/contracts/types/user.types.ts
index f2d1f0ffc..0cd8314da 100644
--- a/surfsense_web/contracts/types/user.types.ts
+++ b/surfsense_web/contracts/types/user.types.ts
@@ -8,6 +8,8 @@ export const user = z.object({
 	is_verified: z.boolean(),
 	pages_limit: z.number(),
 	pages_used: z.number(),
+	display_name: z.string().nullable().optional(),
+	avatar_url: z.string().nullable().optional(),
 });
 
 /**