harden media

apps/website/app/teams/leaderboard/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import {
   Users,
   Trophy,
@@ -25,6 +26,7 @@ import Heading from '@/components/ui/Heading';
 import TopThreePodium from '@/components/teams/TopThreePodium';
 import { useAllTeams } from '@/hooks/useTeamService';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 // ============================================================================
 // TYPES
@@ -407,8 +409,14 @@ export default function TeamLeaderboardPage() {
 
                 {/* Team Info */}
                 <div className="col-span-4 lg:col-span-5 flex items-center gap-3">
-                  <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
-                    <LevelIcon className={`w-5 h-5 ${levelConfig?.color}`} />
+                  <div className="flex h-10 w-10 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={40}
+                      height={40}
+                      className="w-full h-full object-cover"
+                    />
                   </div>
                   <div className="min-w-0 flex-1">
                     <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">