diff --git a/backend/src/auth/jwt/jwt.strategy.ts b/backend/src/auth/jwt/jwt.strategy.ts
index 7c74989..d11b349 100644
--- a/backend/src/auth/jwt/jwt.strategy.ts
+++ b/backend/src/auth/jwt/jwt.strategy.ts
@@ -29,6 +29,7 @@ export interface AuthenticatedRequestUser {
    * pending token is `isTwoFactorEnabled: true, tfa: 'pending'`.
    */
   isTwoFactorEnabled: boolean;
+  avatar: string | null;
 }
 
 const cookieExtractor = (req: Request): string | null => {
@@ -68,6 +69,7 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       username: user.username,
       tfa: payload.tfa,
       isTwoFactorEnabled: user.isTwoFactorEnabled,
+	  avatar: user.avatar,
     };
   }
 }
diff --git a/frontend/src/app/components/Avatar.tsx b/frontend/src/app/components/Avatar.tsx
new file mode 100644
index 0000000..03c8186
--- /dev/null
+++ b/frontend/src/app/components/Avatar.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+const isImageUrl = (avatar?: string | null): boolean =>  
+!!avatar && /^(https?:\/\/|\/)/.test(avatar);
+
+interface AvatarProps {
+	src?: string | null;
+	alt?: string;
+	className?: string;
+}
+
+export default function Avatar({
+	src,
+	alt = "avatar",
+		className = "w-10 h-10 text-xl",
+}: AvatarProps) {
+		const [failed, setFailed] = useState(false);
+		const showImage = isImageUrl(src) && !failed;
+		return (
+			<div
+			className={`rounded-full bg-white flex items-center justify-center ring-2 ring-white/50 shadow flex-shrink-0 overflow-hidden ${className}`}
+			>
+			{showImage ? (
+				<img
+				src={src!}
+				alt={alt}
+				className="w-full h-full object-cover"
+				referrerPolicy="no-referrer"
+				onError={() => setFailed(true)}
+				/>
+			) : (
+			<span>{(!isImageUrl(src) && src) || "😊"}</span>
+			)}
+			</div>
+		);
+}
diff --git a/frontend/src/app/components/Layout.tsx b/frontend/src/app/components/Layout.tsx
index 14ec988..2ecbada 100644
--- a/frontend/src/app/components/Layout.tsx
+++ b/frontend/src/app/components/Layout.tsx
@@ -3,6 +3,7 @@ import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useState, useEffect, useRef } from "react";
 import { socket } from "../../socket/socket";
 import { useGame } from "../context/GameContext";
+import Avatar from "./Avatar";
 
 interface LayoutProps {
 	username: string;
@@ -128,7 +129,7 @@ return (
               className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 hover:bg-white text-gray-700 hover:text-amber-600 border border-gray-200 transition-all shadow-sm hover:shadow-md"
             >
               <Trophy className="w-4 h-4" />
-              <span className="hidden sm:inline font-medium">Classement</span>
+              <span className="hidden sm:inline font-medium">Ranking</span>
             </button>
 
             {/* Bouton Profil (avec avatar dynamique) */}
@@ -137,13 +138,7 @@ return (
               className="group flex items-center gap-3 px-4 py-2 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg"
             >
               <span className="text-white font-medium">{username}</span>
-              <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-2xl ring-2 ring-white/50 overflow-hidden">
-                {userAvatar ? (
-                  <img src={userAvatar} alt={username} className="w-full h-full object-cover" />
-                ) : (
-                  <span>😊</span>
-                )}
-              </div>
+			  <Avatar src={userAvatar} alt={username} className="w-10 h-10 text-2xl" />
             </button>
 
             {/* Bouton Déconnexion */}
@@ -201,7 +196,7 @@ return (
             <div className="bg-gradient-to-r from-purple-500 to-pink-500 p-4 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <MessageCircle className="w-5 h-5 text-white" />
-                <span className="text-white font-bold">Chat Global</span>
+                <span className="text-white font-bold">Global Chat</span>
                 <span className="bg-white/30 text-white px-2 py-0.5 rounded-full text-sm">
                 {onlineCount} online
                 </span>
@@ -225,22 +220,18 @@ return (
             {/* Messages (Zone de texte) */}
             <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
               {Array.isArray(messages) && messages.length === 0 ? (
-                <p className="text-gray-500 text-sm text-center mt-4">Aucun message pour l'instant...</p>
+                <p className="text-gray-500 text-sm text-center mt-4">No message for now...</p>
               ) : (
                 Array.isArray(messages) && messages.map((msg, index) => {
                   const authorName = msg.author?.username || msg.user || "Inconnu";
-                  
                   return (
                     <div
                       key={msg.id || index}
                       className="flex gap-3 animate-in fade-in slide-in-from-bottom-2"
                     >
                       {/* Avatar */}
-                      <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-400 flex items-center justify-center flex-shrink-0 text-lg">
-                        {msg.avatar || "😊"}
-                      </div>
-                      
-                      <div className="flex-1">
+					  <Avatar src={msg.author?.avatar ?? msg.avatar} alt={authorName} />
+					  <div className="flex-1">
                         <div className="flex items-baseline gap-2">
                           {/* Pseudo Cliquable */}
                           <span
@@ -282,7 +273,7 @@ return (
             <div className="flex gap-2 items-center">
             <input
             type="text"
-            placeholder="Écrire un message..."
+            placeholder="Write a message..."
             value={newMessage}
             maxLength={MAX_MESSAGE_LENGTH}
             onChange={(e) => setNewMessage(e.target.value)}
diff --git a/frontend/src/app/components/LoginPage.tsx b/frontend/src/app/components/LoginPage.tsx
index c07b857..e07850e 100644
--- a/frontend/src/app/components/LoginPage.tsx
+++ b/frontend/src/app/components/LoginPage.tsx
@@ -44,7 +44,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
       if (response.ok) {
         if (isSignUp) {
           setIsSignUp(false);
-          setErrorMsg("Compte créé avec succès ! Connectez-vous.");
+          setErrorMsg("Account created! Please log in.");
           return;
         }
 
@@ -55,11 +55,11 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
 
         if (onLogin) onLogin();
       } else {
-        setErrorMsg(data.message || "Erreur lors de la connexion");
+        setErrorMsg(data.message || "Error while connecting");
       }
     } catch (error) {
       console.error("Network Error:", error);
-      setErrorMsg("Impossible de contacter le serveur NestJS.");
+      setErrorMsg("Impossible to reach NestJS server.");
     }
   };
 
@@ -83,8 +83,8 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
           </h1>
           <p className="text-gray-600">
             {is2FARequired 
-              ? "Vérification en deux étapes" 
-              : (isSignUp ? "Créez votre compte pour commencer" : "Bienvenue ! Connectez-vous pour continuer")}
+              ? "Two steps verification" 
+              : (isSignUp ? "Create your account to start" : "Welcome ! Log in to continue")}
           </p>
         </div>
 
@@ -93,7 +93,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
           
           {/* Banner d'erreur dynamique */}
           {errorMsg && (
-            <div className={`mb-6 p-4 rounded-xl border flex items-center gap-3 animate-in fade-in ${errorMsg.includes("succès") ? "bg-green-50 border-green-200 text-green-600" : "bg-red-50 border-red-200 text-red-600"}`}>
+            <div className={`mb-6 p-4 rounded-xl border flex items-center gap-3 animate-in fade-in ${errorMsg.includes("created") ? "bg-green-50 border-green-200 text-green-600" : "bg-red-50 border-red-200 text-red-600"}`}>
               <AlertCircle className="w-5 h-5 flex-shrink-0" />
               <span className="text-sm">{errorMsg}</span>
             </div>
@@ -103,7 +103,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
             
             {is2FARequired ? (
               <div>
-                <label className="block mb-2 text-gray-700 font-medium text-sm">Code d'authentification (OTP)</label>
+                <label className="block mb-2 text-gray-700 font-medium text-sm">Auth Code(OTP)</label>
                 <div className="relative">
                   <Key className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                   <input
@@ -121,14 +121,14 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
               <>
                 {isSignUp && (
                   <div>
-                    <label className="block mb-2 text-gray-700 font-medium text-sm">Nom d'utilisateur</label>
+                    <label className="block mb-2 text-gray-700 font-medium text-sm">Username</label>
                     <div className="relative">
                       <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                       <input
                         type="text"
                         value={username}
                         onChange={(e) => setUsername(e.target.value)}
-                        placeholder="Votre pseudo"
+                        placeholder="Your username"
                         className="w-full pl-12 pr-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-100 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-200 transition-all"
                         required
                       />
@@ -144,7 +144,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
                       type="email"
                       value={email}
                       onChange={(e) => setEmail(e.target.value)}
-                      placeholder="votre@email.com"
+                      placeholder="your@email.com"
                       className="w-full pl-12 pr-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-100 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-200 transition-all"
                       required
                     />
@@ -152,7 +152,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
                 </div>
 
                 <div>
-                  <label className="block mb-2 text-gray-700 font-medium text-sm">Mot de passe</label>
+                  <label className="block mb-2 text-gray-700 font-medium text-sm">Password</label>
                   <div className="relative">
                     <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                     <input
@@ -171,7 +171,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
             {!isSignUp && !is2FARequired && (
               <div className="flex justify-end">
                 <button type="button" className="text-sm text-purple-600 hover:text-purple-700 font-medium transition-colors">
-                  Mot de passe oublié ?
+                  Forgotten password ?
                 </button>
               </div>
             )}
@@ -180,7 +180,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
               type="submit"
               className="w-full py-4 rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold shadow-lg hover:shadow-xl hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition-all transform hover:-translate-y-0.5 mt-2"
             >
-              {is2FARequired ? "Vérifier le code" : (isSignUp ? "Créer mon compte" : "Se connecter")}
+              {is2FARequired ? "Verify the code" : (isSignUp ? "Create account" : "Log in")}
             </button>
           </form>
 
@@ -191,7 +191,7 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
                   <div className="w-full border-t border-gray-200"></div>
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white text-gray-400 font-medium">ou continuer avec</span>
+                  <span className="px-4 bg-white text-gray-400 font-medium">or continue with</span>
                 </div>
               </div>
 
@@ -201,14 +201,14 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
                 <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center font-bold shadow-sm">
                   <span className="bg-gradient-to-r from-cyan-500 to-blue-600 bg-clip-text text-transparent">42</span>
                 </div>
-                <span>Se connecter avec l'intra 42</span>
+                <span>Log in with 42 intra</span>
               </a>
 
               <a href="/api/auth/github"
                 className="w-full flex items-center justify-center gap-3 py-4 px-6 rounded-xl bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-900 hover:to-black text-decoration-none text-white font-semibold shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5 mt-4"
               >
                 <Github className="w-5 h-5" />
-                <span>Se connecter avec GitHub</span>
+                <span>Log in with GitHub</span>
               </a>
 
               <div className="mt-6 text-center">
@@ -221,9 +221,9 @@ export default function LoginPage({ onLogin, force2FA = false }: LoginPageProps)
                   className="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors"
                 >
                   {isSignUp ? (
-                    <>Vous avez déjà un compte ? <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold underline">Se connecter</span></>
+                    <>Already have an account ? <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold underline">Log in</span></>
                   ) : (
-                    <>Pas encore de compte ? <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold underline">S'inscrire</span></>
+                    <>No account yet ? <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold underline">Sign in</span></>
                   )}
                 </button>
               </div>
diff --git a/frontend/src/app/components/ProfilePage.tsx b/frontend/src/app/components/ProfilePage.tsx
index 3e2a2b0..a07ae5b 100644
--- a/frontend/src/app/components/ProfilePage.tsx
+++ b/frontend/src/app/components/ProfilePage.tsx
@@ -5,6 +5,7 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
 import { socket } from "../../socket/socket";
 import { statsSocket } from "../../socket/socket";
 import { useParams } from "react-router-dom";
+import Avatar from "./Avatar";
 
 interface ProfilePageProps {
   username: string;
@@ -133,7 +134,13 @@ export default function ProfilePage({
   useEffect(() => {
     fetchStats();
     fetchMatchHistory();
-    }, [displayUsername]);
+	if (isMyProfile) {
+		fetch(`/api/auth/me`, { credentials: "include" })
+		.then((res) => (res.ok ? res.json() : null))
+		.then((data) => { if (data?.avatar) setAvatar(data.avatar); })
+		.catch(() => {});
+	}
+  }, [displayUsername]);
 
   // Temps réel : écoute les mises à jour de stats poussées par le serveur
   useEffect(() => {
@@ -283,12 +290,12 @@ export default function ProfilePage({
                 {twoFAModal === "enable" ? <QrCode className="w-8 h-8" /> : <Shield className="w-8 h-8" />}
               </div>
               <h3 className="text-2xl font-bold text-gray-900">
-                {twoFAModal === "enable" ? "Activer le 2FA" : "Désactiver le 2FA"}
+                {twoFAModal === "enable" ? "Activate the 2FA" : "Deactivate the 2FA"}
               </h3>
               <p className="text-gray-500 mt-2 text-sm">
                 {twoFAModal === "enable"
-                  ? "Scannez ce QR Code avec Google Authenticator ou Authy."
-                  : "Saisissez un code de votre application pour confirmer."}
+                  ? "Scan the QR Code with Google Authenticator"
+                  : "Write the code from your app to confirm"}
               </p>
             </div>
 
@@ -297,14 +304,14 @@ export default function ProfilePage({
                 {qrCodeUrl ? (
                   <img src={qrCodeUrl} alt="QR Code 2FA" className="w-48 h-48 rounded-lg shadow-sm" />
                 ) : (
-                  <div className="w-48 h-48 flex items-center justify-center text-gray-400 animate-pulse">Chargement...</div>
+                  <div className="w-48 h-48 flex items-center justify-center text-gray-400 animate-pulse">Loading...</div>
                 )}
               </div>
             )}
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Code de vérification</label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Verification code</label>
                 <input
                   type="text"
                   value={verificationCode}
@@ -322,14 +329,14 @@ export default function ProfilePage({
                   onClick={handleEnable2FA}
                   className="w-full py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5"
                 >
-                  Confirmer l'activation
+                  Confirm activation
                 </button>
               ) : (
                 <button
                   onClick={handleDisable2FA}
                   className="w-full py-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 text-white font-bold shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5"
                 >
-                  Confirmer la désactivation
+                  Confirm deactivation
                 </button>
               )}
             </div>
@@ -354,9 +361,8 @@ export default function ProfilePage({
         <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-8 border border-white/50">
           <div className="flex flex-col md:flex-row items-center gap-8">
             <div className="relative group">
-              <div className="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 shadow-2xl">
-                <div className="w-full h-full rounded-full bg-white flex items-center justify-center text-6xl">
-                  {avatar}
+				<div className="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 shadow-2xl">
+				  <Avatar src={avatar} alt={displayUsername} className="w-full h-full text-6xl" />
                 </div>
               </div>
               {isMyProfile && (
@@ -419,7 +425,7 @@ export default function ProfilePage({
               {/* Progression du niveau */}
               <div className="mt-4 max-w-xs mx-auto md:mx-0">
                 <div className="flex items-center justify-between text-xs font-medium text-gray-500 mb-1">
-                  <span>Niveau {stats?.level ?? 1}</span>
+                  <span>Level {stats?.level ?? 1}</span>
                   <span>{stats?.currentLevelXp ?? 0} / 100 XP</span>
                 </div>
                 <div className="w-full bg-gray-200 rounded-full h-2.5 shadow-inner">
@@ -490,7 +496,7 @@ export default function ProfilePage({
             onClick={fetchStats}
             className="px-5 py-2 rounded-xl bg-gray-900 hover:bg-gray-800 text-white font-semibold transition-all"
           >
-            Filtrer
+            Filter
           </button>
           {(startDate || endDate) && (
             <button
@@ -528,7 +534,7 @@ export default function ProfilePage({
           <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl p-6 border border-white/50">
             <h3 className="mb-6 flex items-center gap-2 text-xl font-bold text-gray-800">
               <TrendingUp className="w-6 h-6 text-purple-600" />
-              Statistiques globales
+              Global Stats
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className="text-center p-6 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-lg">
@@ -577,7 +583,7 @@ export default function ProfilePage({
               </div>
             ))}
             {(stats?.categories ?? []).length === 0 && (
-              <p className="text-gray-400 col-span-2 text-center py-6">Aucune donnée pour l'instant — joue une partie !</p>
+              <p className="text-gray-400 col-span-2 text-center py-6">No data for now, run a game !</p>
             )}
           </div>
         </div>
@@ -586,7 +592,7 @@ export default function ProfilePage({
         <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl p-6 border border-white/50 mb-8">
           <h3 className="mb-6 flex items-center gap-2 text-xl font-bold text-gray-800">
             <Award className="w-6 h-6 text-pink-600" />
-            Badges
+            Achievements
           </h3>
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
             {(stats?.badges ?? []).map((badge) => (
@@ -671,14 +677,14 @@ export default function ProfilePage({
         <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl p-6 border border-white/50 mt-8">
           <h3 className="mb-6 flex items-center gap-2 text-xl font-bold text-gray-800">
             <History className="w-6 h-6 text-blue-600" />
-            Historique des parties
+            Game History
           </h3>
 
           {historyLoading ? (
-            <p className="text-gray-400 text-center py-6">Chargement...</p>
+            <p className="text-gray-400 text-center py-6">Loading...</p>
           ) : matchHistory.length === 0 ? (
             <p className="text-gray-400 text-center py-6">
-              Aucune partie 1v1 pour l'instant — lance-toi !
+              No 1v1 game yet, launch a game! !
             </p>
           ) : (
             <div className="space-y-2">
@@ -740,10 +746,10 @@ export default function ProfilePage({
                       }`}
                     >
                       {match.result === "win"
-                        ? "Victoire"
+                        ? "Victory"
                         : match.result === "loss"
-                        ? "Défaite"
-                        : "Égalité"}
+                        ? "Defeat"
+                        : "Draw"}
                     </p>
                   </div>
                 </div>
@@ -752,6 +758,5 @@ export default function ProfilePage({
           )}
         </div>
       </div>
-    </div>
   );
 }
diff --git a/frontend/src/app/pages/Leaderboard.tsx b/frontend/src/app/pages/Leaderboard.tsx
index d739830..672fb06 100644
--- a/frontend/src/app/pages/Leaderboard.tsx
+++ b/frontend/src/app/pages/Leaderboard.tsx
@@ -24,125 +24,128 @@ const RANK_STYLES: Record<number, string> = {
 };
 
 export default function LeaderboardPage({ userId, onBack }: LeaderboardPageProps) {
-  const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
-  const [myRank, setMyRank] = useState<number | null>(null);
-  const [loading, setLoading] = useState(true);
+	const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
+	const [myRank, setMyRank] = useState<number | null>(null);
+	const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    const load = async () => {
-      setLoading(true);
-      try {
-        const [leaderboardRes, rankRes] = await Promise.all([
-          fetch(`/api/stats/leaderboard?limit=20`, { credentials: "include" }),
-          fetch(`/api/stats/${userId}/rank`, { credentials: "include" }),
-        ]);
+	useEffect(() => {
+		const load = async () => {
+			setLoading(true);
+			try {
+				const [leaderboardRes, rankRes] = await Promise.all([
+					fetch(`/api/stats/leaderboard?limit=20`, { credentials: "include" }),
+						fetch(`/api/stats/${userId}/rank`, { credentials: "include" }),
+				]);
+				if (leaderboardRes.ok) {
+					setEntries(await leaderboardRes.json());
+				}
+				if (rankRes.ok) {
+					const data = await rankRes.json();
+					setMyRank(data.rank);
+				}
+			} catch (err) {
+				console.error("Erreur lors du chargement du classement :", err);
+			} finally {
+				setLoading(false);
+			}
+		};
+		load();
+	}, [userId]);
+	const isMe = (entry: LeaderboardEntry) => entry.userId === userId;
+	const isImageUrl = (avatar: string | null): boolean =>
+	!!avatar && /^(https?:\/\/|\/)/.test(avatar);
+	return (
+	<div className="min-h-screen bg-gradient-to-br from-violet-100 via-pink-50 to-cyan-100 pt-24 pb-12 px-4">
+		<div className="max-w-3xl mx-auto">
+			<div className="flex items-center justify-between mb-6">
+			<button
+				onClick={onBack}
+				className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+				>
+				<ArrowLeft className="w-5 h-5" />
+				Back
+			</button>
+			{myRank !== null && (
+				<div className="px-4 py-2 rounded-full bg-white/80 border border-gray-200 shadow-sm text-sm font-medium text-gray-700">
+				Your rank: <span className="font-black text-indigo-600">#{myRank}</span>
+				</div>
+			)}
+			</div>
+			<div className="text-center mb-8">
+			<div className="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center mx-auto mb-4 shadow-xl">
+			<Trophy className="w-8 h-8 text-white" />
+			</div>
+			<h1 className="text-3xl font-extrabold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+			Ranking
+			</h1>
+			<p className="text-gray-500 mt-1">Best players, ranked by XP</p>
+			</div>
 
-        if (leaderboardRes.ok) {
-          setEntries(await leaderboardRes.json());
-        }
-        if (rankRes.ok) {
-          const data = await rankRes.json();
-          setMyRank(data.rank);
-        }
-      } catch (err) {
-        console.error("Erreur lors du chargement du classement :", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    load();
-  }, [userId]);
-
-  const isMe = (entry: LeaderboardEntry) => entry.userId === userId;
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-violet-100 via-pink-50 to-cyan-100 pt-24 pb-12 px-4">
-      <div className="max-w-3xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={onBack}
-            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
-          >
-            <ArrowLeft className="w-5 h-5" />
-            Retour
-          </button>
-
-          {myRank !== null && (
-            <div className="px-4 py-2 rounded-full bg-white/80 border border-gray-200 shadow-sm text-sm font-medium text-gray-700">
-              Ton rang : <span className="font-black text-indigo-600">#{myRank}</span>
-            </div>
-          )}
-        </div>
-
-        <div className="text-center mb-8">
-          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center mx-auto mb-4 shadow-xl">
-            <Trophy className="w-8 h-8 text-white" />
-          </div>
-          <h1 className="text-3xl font-extrabold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
-            Classement
-          </h1>
-          <p className="text-gray-500 mt-1">Les meilleurs joueurs, classés par XP</p>
-        </div>
-
-        <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 overflow-hidden">
-          {loading ? (
-            <p className="text-gray-400 text-center py-12">Chargement...</p>
-          ) : entries.length === 0 ? (
-            <p className="text-gray-400 text-center py-12">Aucun joueur classé pour l'instant.</p>
-          ) : (
-            <div className="divide-y divide-gray-100">
-              {entries.map((entry) => (
-                <div
-                  key={entry.userId}
-                  className={`flex items-center gap-4 px-6 py-4 transition-colors ${
-                    isMe(entry) ? "bg-indigo-50" : ""
-                  }`}
-                >
-                  <div
-                    className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-white flex-shrink-0 ${
-                      entry.rank <= 3
-                        ? `bg-gradient-to-br ${RANK_STYLES[entry.rank]} shadow-md`
+			<div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 overflow-hidden">
+			{loading ? (
+				<p className="text-gray-400 text-center py-12">Loading...</p>
+			) : entries.length === 0 ? (
+			<p className="text-gray-400 text-center py-12">No players ranked yet.</p>
+			) : (
+			<div className="divide-y divide-gray-100">
+			{entries.map((entry) => (
+				<div
+				key={entry.userId}
+				className={`flex items-center gap-4 px-6 py-4 transition-colors ${
+					isMe(entry) ? "bg-indigo-50" : ""
+				}`}
+				>
+				<div
+				className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-white flex-shrink-0 ${
+					entry.rank <= 3
+						? `bg-gradient-to-br ${RANK_STYLES[entry.rank]} shadow-md`
                         : "bg-gray-300 text-gray-600"
                     }`}
                   >
-                    {entry.rank <= 3 ? (
-                      entry.rank === 1 ? (
-                        <Trophy className="w-5 h-5" />
+				  {entry.rank <= 3 ? (
+						entry.rank === 1 ? (
+						  <Trophy className="w-5 h-5" />
                       ) : (
-                        <Medal className="w-5 h-5" />
-                      )
-                    ) : (
-                      entry.rank
-                    )}
-                  </div>
-
-                  <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-xl ring-2 ring-white/50 shadow flex-shrink-0">
-                    {entry.avatar || "😊"}
-                  </div>
-
-                  <div className="flex-1 min-w-0">
-                    <p className="font-bold text-gray-800 m-0 truncate">
-                      {entry.username}
-                      {isMe(entry) && <span className="text-indigo-500 font-medium"> (toi)</span>}
-                    </p>
-                    <p className="text-xs text-gray-500 m-0 flex items-center gap-1">
-                      <Award className="w-3 h-3" /> Niveau {entry.level} · {entry.gamesPlayed} partie(s) · {entry.wins} victoire(s)
-                    </p>
-                  </div>
-
-                  <div className="text-right flex-shrink-0">
-                    <p className="font-black text-lg bg-gradient-to-r from-yellow-500 to-amber-600 bg-clip-text text-transparent m-0">
-                      {entry.xp}
-                    </p>
-                    <p className="text-xs text-gray-400 m-0">XP</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+					  <Medal className="w-5 h-5" />
+					  )
+					) : (
+					entry.rank
+					)}
+					</div>
+				  <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-xl ring-2 ring-white/50 shadow flex-shrink-0 overflow-hidden">
+				  {isImageUrl(entry.avatar) ? (
+					  <img
+					  src={entry.avatar!}
+					  alt={entry.username}
+					  className="w-full h-full object-cover"
+					  referrerPolicy="no-referrer"
+					  onError={(e) => { e.currentTarget.style.display = "none"; }}
+					  />
+				  ) : (
+				  entry.avatar || "😊"
+				  )}
+				  </div>
+				  <div className="flex-1 min-w-0">
+				  <p className="font-bold text-gray-800 m-0 truncate">
+					{entry.username}
+					  {isMe(entry) && <span className="text-indigo-500 font-medium"> (you)</span>}
+					  </p>
+					<p className="text-xs text-gray-500 m-0 flex items-center gap-1">
+					<Award className="w-3 h-3" /> Level {entry.level} · {entry.gamesPlayed} games · {entry.wins} wins
+					  </p>
+					</div>
+				  <div className="text-right flex-shrink-0">
+				  <p className="font-black text-lg bg-gradient-to-r from-yellow-500 to-amber-600 bg-clip-text text-transparent m-0">
+					{entry.xp}
+					  </p>
+					<p className="text-xs text-gray-400 m-0">XP</p>
+					</div>
+				  </div>
+			))}
+			  </div>
+			)}
+		  </div>
+		</div>
+	  </div>
+	);
 }