harden media

apps/website/components/teams/TeamLeaderboardPreview.tsx

@@ -1,7 +1,9 @@
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { Award, ChevronRight, Crown, Trophy, Users } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 const SKILL_LEVELS: {
   id: string;
@@ -133,8 +135,14 @@ export default function TeamLeaderboardPreview({
                 </div>
 
                 {/* Team Info */}
-                <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
-                  {/* LevelIcon */}
+                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
+                  <Image
+                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                    alt={team.name}
+                    width={36}
+                    height={36}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
                 <div className="flex-1 min-w-0">
                   <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">