website refactor

apps/website/ui/LeagueHeader.tsx

@@ -5,6 +5,7 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Stack } from './Stack';
 import { Text } from './Text';
+import { Image } from './Image';
 
 interface LeagueHeaderProps {
   name: string;
@@ -26,14 +27,14 @@ export function LeagueHeader({
       <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
         <Stack direction="row" align="center" gap={4}>
           <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
-            <img
+            <Image
               src={logoUrl}
               alt={`${name} logo`}
               width={64}
               height={64}
-              className="h-full w-full object-cover"
-              loading="lazy"
-              decoding="async"
+              fullWidth
+              fullHeight
+              objectFit="cover"
             />
           </Box>
           <Box>