diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 2c18ce2..de0d100 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getUserById } from '@/services/auth';
 import { ProfileForm } from './ProfileForm';
 import { PasswordForm } from './PasswordForm';
+import { getGravatarUrl } from '@/lib/gravatar';
 
 export default async function ProfilePage() {
   const session = await auth();
@@ -19,17 +20,36 @@ export default async function ProfilePage() {
 
   return (
     <main className="mx-auto max-w-2xl px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
-        <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+      <div className="mb-8 flex items-center gap-6">
+        <img
+          src={getGravatarUrl(user.email, 160)}
+          alt={user.name || user.email}
+          width={80}
+          height={80}
+          className="rounded-full border-2 border-border"
+        />
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
+          <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+        </div>
       </div>
 
       <div className="space-y-8">
         {/* Profile Info */}
         <section className="rounded-xl border border-border bg-card p-6">
-          <h2 className="mb-6 text-xl font-semibold text-foreground">
-            Informations personnelles
-          </h2>
+          <div className="mb-6 flex items-start justify-between">
+            <h2 className="text-xl font-semibold text-foreground">
+              Informations personnelles
+            </h2>
+            <a
+              href="https://gravatar.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted hover:text-primary transition-colors"
+            >
+              Changer mon avatar sur Gravatar →
+            </a>
+          </div>
           <ProfileForm
             initialData={{
               name: user.name || '',
diff --git a/src/components/collaboration/SessionLiveWrapper.tsx b/src/components/collaboration/SessionLiveWrapper.tsx
index 1bf02d2..6348611 100644
--- a/src/components/collaboration/SessionLiveWrapper.tsx
+++ b/src/components/collaboration/SessionLiveWrapper.tsx
@@ -5,6 +5,7 @@ import { useSessionLive, type LiveEvent } from '@/hooks/useSessionLive';
 import { LiveIndicator } from './LiveIndicator';
 import { ShareModal } from './ShareModal';
 import { Button } from '@/components/ui/Button';
+import { Avatar } from '@/components/ui/Avatar';
 import type { ShareRole } from '@prisma/client';
 
 interface ShareUser {
@@ -84,13 +85,13 @@ export function SessionLiveWrapper({
           {shares.length > 0 && (
             <div className="flex -space-x-2">
               {shares.slice(0, 3).map((share) => (
-                <div
+                <Avatar
                   key={share.id}
-                  className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-xs font-medium text-primary"
-                  title={share.user.name || share.user.email}
-                >
-                  {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                </div>
+                  email={share.user.email}
+                  name={share.user.name}
+                  size={32}
+                  className="border-2 border-card"
+                />
               ))}
               {shares.length > 3 && (
                 <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted/20 text-xs font-medium text-muted">
diff --git a/src/components/collaboration/ShareModal.tsx b/src/components/collaboration/ShareModal.tsx
index 45eeed5..5dd9e2a 100644
--- a/src/components/collaboration/ShareModal.tsx
+++ b/src/components/collaboration/ShareModal.tsx
@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Avatar } from '@/components/ui/Avatar';
 import { shareSessionAction, removeShareAction } from '@/actions/share';
 import type { ShareRole } from '@prisma/client';
 
@@ -120,9 +121,7 @@ export function ShareModal({
                   className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                    </div>
+                    <Avatar email={share.user.email} name={share.user.name} size={32} />
                     <div>
                       <p className="text-sm font-medium text-foreground">
                         {share.user.name || share.user.email}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e7b6e2d..958be8b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useState } from 'react';
+import { Avatar } from '@/components/ui';
 
 export function Header() {
   const { theme, toggleTheme } = useTheme();
@@ -109,8 +110,13 @@ export function Header() {
             <div className="relative">
               <button
                 onClick={() => setMenuOpen(!menuOpen)}
-                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card px-3 transition-colors hover:bg-card-hover"
+                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
               >
+                <Avatar
+                  email={session.user.email!}
+                  name={session.user.name}
+                  size={24}
+                />
                 <span className="text-sm font-medium text-foreground">
                   {session.user.name || session.user.email?.split('@')[0]}
                 </span>
diff --git a/src/components/moving-motivators/MotivatorLiveWrapper.tsx b/src/components/moving-motivators/MotivatorLiveWrapper.tsx
index 269df27..1116979 100644
--- a/src/components/moving-motivators/MotivatorLiveWrapper.tsx
+++ b/src/components/moving-motivators/MotivatorLiveWrapper.tsx
@@ -5,6 +5,7 @@ import { useMotivatorLive, type MotivatorLiveEvent } from '@/hooks/useMotivatorL
 import { LiveIndicator } from '@/components/collaboration/LiveIndicator';
 import { MotivatorShareModal } from './MotivatorShareModal';
 import { Button } from '@/components/ui/Button';
+import { Avatar } from '@/components/ui/Avatar';
 import type { ShareRole } from '@prisma/client';
 
 interface ShareUser {
@@ -84,13 +85,13 @@ export function MotivatorLiveWrapper({
           {shares.length > 0 && (
             <div className="flex -space-x-2">
               {shares.slice(0, 3).map((share) => (
-                <div
+                <Avatar
                   key={share.id}
-                  className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-xs font-medium text-primary"
-                  title={share.user.name || share.user.email}
-                >
-                  {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                </div>
+                  email={share.user.email}
+                  name={share.user.name}
+                  size={32}
+                  className="border-2 border-card"
+                />
               ))}
               {shares.length > 3 && (
                 <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted/20 text-xs font-medium text-muted">
diff --git a/src/components/moving-motivators/MotivatorShareModal.tsx b/src/components/moving-motivators/MotivatorShareModal.tsx
index f0422a0..73c0341 100644
--- a/src/components/moving-motivators/MotivatorShareModal.tsx
+++ b/src/components/moving-motivators/MotivatorShareModal.tsx
@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Avatar } from '@/components/ui/Avatar';
 import { shareMotivatorSession, removeMotivatorShare } from '@/actions/moving-motivators';
 import type { ShareRole } from '@prisma/client';
 
@@ -120,9 +121,7 @@ export function MotivatorShareModal({
                   className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                    </div>
+                    <Avatar email={share.user.email} name={share.user.name} size={32} />
                     <div>
                       <p className="text-sm font-medium text-foreground">
                         {share.user.name || share.user.email}
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
new file mode 100644
index 0000000..39e43ea
--- /dev/null
+++ b/src/components/ui/Avatar.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { getGravatarUrl, GravatarDefault } from '@/lib/gravatar';
+
+interface AvatarProps {
+  email: string;
+  name?: string | null;
+  size?: number;
+  fallback?: GravatarDefault;
+  className?: string;
+}
+
+export function Avatar({
+  email,
+  name,
+  size = 32,
+  fallback = 'identicon',
+  className = '',
+}: AvatarProps) {
+  return (
+    <img
+      src={getGravatarUrl(email, size * 2, fallback)} // 2x for retina displays
+      alt={name || email}
+      width={size}
+      height={size}
+      className={`rounded-full ${className}`}
+      loading="lazy"
+    />
+  );
+}
+
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 715e659..d30105a 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,7 +1,8 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
 export { Button } from './Button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export { Input } from './Input';
-export { Textarea } from './Textarea';
-export { Badge } from './Badge';
 export { Modal, ModalFooter } from './Modal';
+export { Textarea } from './Textarea';
 
diff --git a/src/lib/gravatar.ts b/src/lib/gravatar.ts
new file mode 100644
index 0000000..9fa5d12
--- /dev/null
+++ b/src/lib/gravatar.ts
@@ -0,0 +1,23 @@
+import { createHash } from 'crypto';
+
+export type GravatarDefault =
+  | 'identicon' // Geometric pattern
+  | 'mp' // Mystery person silhouette
+  | 'retro' // 8-bit pixel art
+  | 'robohash' // Generated robot
+  | 'wavatar' // Stylized face
+  | 'monsterid' // Colorful monster
+  | 'blank'; // Transparent
+
+export function getGravatarUrl(
+  email: string,
+  size: number = 40,
+  fallback: GravatarDefault = 'identicon'
+): string {
+  const hash = createHash('md5')
+    .update(email.toLowerCase().trim())
+    .digest('hex');
+
+  return `https://www.gravatar.com/avatar/${hash}?d=${fallback}&s=${size}`;
+}
+