enroll team polish?

src/features/teams/components/team-list.tsx

@@ -1,4 +1,12 @@
-import { Divider, Group, List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
+import {
+  Divider,
+  Group,
+  List,
+  ListItem,
+  Skeleton,
+  Stack,
+  Text,
+} from "@mantine/core";
 import Avatar from "@/components/avatar";
 import { TeamInfo } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
@@ -15,14 +23,14 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
   );
 
   return (
-    <Group justify="space-between" w='100%'>
+    <Group justify="space-between" w="100%">
       <Text fw={500}>{`${team.name}`}</Text>
       <Stack ml="auto" gap={0}>
         {playerNames.map((name) => (
-        <Text size="xs" c="dimmed" ta="right">
-          {name}
-        </Text>
-      ))}
+          <Text size="xs" c="dimmed" ta="right">
+            {name}
+          </Text>
+        ))}
       </Stack>
     </Group>
   );
@@ -62,12 +70,23 @@ const TeamList = ({ teams, loading = false }: TeamListProps) => {
         <div key={team.id}>
           <ListItem
             p="xs"
-            icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
+            icon={
+              <Avatar
+                radius="sm"
+                size={40}
+                name={`${team.name}`}
+                src={
+                  team.logo
+                    ? `/api/files/teams/${team.id}/${team.logo}`
+                    : undefined
+                }
+              />
+            }
             style={{ cursor: "pointer" }}
             onClick={() => handleClick(team.id)}
             styles={{
               itemWrapper: { width: "100%" },
-              itemLabel: { width: "100%" }
+              itemLabel: { width: "100%" },
             }}
             w="100%"
           >