wip

apps/website/components/profile/ProfileHeader.tsx

@@ -1,8 +1,9 @@
 'use client';
 
+import Image from 'next/image';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import Button from '../ui/Button';
-import { getDriverTeam } from '@/lib/racingLegacyFacade';
+import { getDriverTeam, getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
 
 interface ProfileHeaderProps {
   driver: DriverDTO;
@@ -14,8 +15,14 @@ export default function ProfileHeader({ driver, isOwnProfile = false, onEditClic
   return (
     <div className="flex items-start justify-between">
       <div className="flex items-start gap-4">
-        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 flex items-center justify-center text-3xl font-bold text-white">
-          {driver.name.charAt(0).toUpperCase()}
+        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 overflow-hidden flex items-center justify-center">
+          <Image
+            src={getDriverAvatarUrl(driver.id)}
+            alt={driver.name}
+            width={80}
+            height={80}
+            className="w-full h-full object-cover"
+          />
         </div>
         
         <div>