various improvements

2025-09-17 09:02:20 -05:00
parent c170e1e1fe
commit 498010e3e2
25 changed files with 733 additions and 643 deletions
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
    "@tanstack/react-router-devtools": "^1.130.13",
    "@tanstack/react-router-with-query": "^1.130.12",
    "@tanstack/react-start": "^1.130.15",
+    "@tiptap/pm": "^3.4.3",
+    "@tiptap/react": "^3.4.3",
+    "@tiptap/starter-kit": "^3.4.3",
    "@types/ioredis": "^4.28.10",
    "embla-carousel-react": "^8.6.0",
    "framer-motion": "^12.23.12",
--- a/pb_migrations/1758049631_updated_player_stats.js
+++ b/pb_migrations/1758049631_updated_player_stats.js
@@ -0,0 +1,37 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1358894712")
+
+  // update collection data
+  unmarshal({
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      COUNT(DISTINCT m.tournament) as tournaments,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended'\n  GROUP BY p.id"
+  }, collection)
+
+  // add field
+  collection.fields.addAt(4, new Field({
+    "hidden": false,
+    "id": "number3837590211",
+    "max": null,
+    "min": null,
+    "name": "tournaments",
+    "onlyInt": false,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1358894712")
+
+  // update collection data
+  unmarshal({
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended'\n  GROUP BY p.id"
+  }, collection)
+
+  // remove field
+  collection.fields.removeById("number3837590211")
+
+  return app.save(collection)
+})
--- a/pb_migrations/1758054877_updated_tournaments.js
+++ b/pb_migrations/1758054877_updated_tournaments.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(11, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3072146508",
+    "hidden": false,
+    "id": "relation1584152981",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "free_agents",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("relation1584152981")
+
+  return app.save(collection)
+})
--- a/pb_migrations/1758081731_created_reactions.js
+++ b/pb_migrations/1758081731_created_reactions.js
@@ -0,0 +1,84 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3058431538",
+        "max": 0,
+        "min": 0,
+        "name": "emoji",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1549310251",
+    "indexes": [],
+    "listRule": null,
+    "name": "reactions",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1549310251");
+
+  return app.delete(collection);
+})
--- a/src/app/routes/__root.tsx
+++ b/src/app/routes/__root.tsx
@@ -1,6 +1,7 @@
 import "@mantine/core/styles.css";
 import "@mantine/dates/styles.css";
 import "@mantine/carousel/styles.css";
+import '@mantine/tiptap/styles.css';
 import {
  HeadContent,
  Navigate,
--- a/src/app/routes/_authed/stats.tsx
+++ b/src/app/routes/_authed/stats.tsx
@@ -10,7 +10,7 @@ export const Route = createFileRoute("/_authed/stats")({
    await ensureServerQueryData(queryClient, playerQueries.allStats());
  },
  loader: () => ({
-    withPadding: true,
+    withPadding: false,
    fullWidth: true,
    header: {
      title: "Player Stats"
--- a/src/app/routes/_authed/tournaments/index.tsx
+++ b/src/app/routes/_authed/tournaments/index.tsx
@@ -31,7 +31,7 @@ function RouteComponent() {
  const { roles } = useAuth();
  const sheet = useSheet();

-  return <Page>
+  return (
    <Stack>
      {
        roles?.includes("Admin") ? (
@@ -49,5 +49,5 @@ function RouteComponent() {
        ))
      }
    </Stack>
-  </Page>
+  )
 }
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -22,7 +22,7 @@ const Page = ({ children, noPadding, fullWidth, ...props }: PageProps) => {
      {...props}
    >
      {header.collapsed && header.withBackButton && (
-        <BackButton />
+        <BackButton top={4} />
      )}
      {header.collapsed && header.settingsLink && (
        <SettingsButton to={header.settingsLink} />
--- a/src/components/rich-text-editor.tsx
+++ b/src/components/rich-text-editor.tsx
@@ -0,0 +1,40 @@
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor as MantineRichTextEditor } from '@mantine/tiptap';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function RichTextEditor({
+  value,
+  onChange,
+}: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  return (
+    <MantineRichTextEditor editor={editor}>
+      <MantineRichTextEditor.Toolbar>
+        <MantineRichTextEditor.ControlsGroup>
+          <MantineRichTextEditor.Bold />
+          <MantineRichTextEditor.Italic />
+        </MantineRichTextEditor.ControlsGroup>
+        <MantineRichTextEditor.ControlsGroup>
+          <MantineRichTextEditor.Blockquote />
+          <MantineRichTextEditor.Hr />
+          <MantineRichTextEditor.BulletList />
+          <MantineRichTextEditor.OrderedList />
+        </MantineRichTextEditor.ControlsGroup>
+      </MantineRichTextEditor.Toolbar>
+
+      <MantineRichTextEditor.Content />
+    </MantineRichTextEditor>
+  );
+}
--- a/src/components/swipeable-tabs.tsx
+++ b/src/components/swipeable-tabs.tsx
@@ -98,13 +98,11 @@ function SwipeableTabs({
    updateHeight();
  }, [activeTab, updateHeight]);

-  // Update height when content changes (after render)
  useEffect(() => {
    const timeoutId = setTimeout(updateHeight, 0);
    return () => clearTimeout(timeoutId);
  });

-  // Use ResizeObserver to watch for content size changes
  useEffect(() => {
    const activeSlideRef = slideRefs.current[activeTab];
    if (!activeSlideRef) return;
@@ -142,6 +140,7 @@ function SwipeableTabs({
        top={0}
        style={{
          display: "flex",
+          paddingInline: "var(--mantine-spacing-md)",
          marginBottom: "var(--mantine-spacing-md)",
          zIndex: 100,
          backgroundColor: "var(--mantine-color-body)",
--- a/src/features/core/components/back-button.tsx
+++ b/src/features/core/components/back-button.tsx
@@ -2,7 +2,7 @@ import { Box } from "@mantine/core"
 import { ArrowLeftIcon } from "@phosphor-icons/react"
 import { useRouter } from "@tanstack/react-router"

-const BackButton = () => {
+const BackButton = ({ top=20, left=20 }: { top?: number, left?: number }) => {
  const router = useRouter()

  return (
@@ -10,8 +10,8 @@ const BackButton = () => {
      style={{ cursor: 'pointer', zIndex: 1000 }}
      onClick={() => router.history.back()}
      pos='absolute'
-      left={16}
-      top={0}
+      left={left}
+      top={top}
    >
      <ArrowLeftIcon weight='bold' size={20} />
    </Box>
--- a/src/features/core/components/header.tsx
+++ b/src/features/core/components/header.tsx
@@ -1,12 +1,16 @@
 import { Title, AppShell, Flex } from "@mantine/core";
 import { HeaderConfig } from "../types/header-config";
+import useRouterConfig from "../hooks/use-router-config";
+import BackButton from "./back-button";

 interface HeaderProps extends HeaderConfig {}

 const Header = ({ collapsed, title }: HeaderProps) => {
+  const { header } = useRouterConfig();

  return (
    <AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>
+      { header.withBackButton && <BackButton /> }
      <Flex justify='center' align='center' h='100%' px='md'>
        <Title order={2}>{title}</Title>
      </Flex>
--- a/src/features/core/components/settings-button.tsx
+++ b/src/features/core/components/settings-button.tsx
@@ -5,6 +5,8 @@ import { memo } from "react";

 interface SettingButtonProps {
  to: string;
+  top?: number;
+  right?: number;
 }

 const SettingsButton = ({ to }: SettingButtonProps) => {
@@ -15,8 +17,8 @@ const SettingsButton = ({ to }: SettingButtonProps) => {
      style={{ cursor: 'pointer', zIndex: 1000 }}
      onClick={() => navigate({ to })}
      pos='absolute'
-      right={16}
-      top={0}
+      right={20}
+      top={6}
    >
      <GearIcon weight='bold' size={20} />
    </Box>
--- a/src/features/players/components/player-stats-table.tsx
+++ b/src/features/players/components/player-stats-table.tsx
@@ -1,6 +1,5 @@
 import { useState, useMemo } from "react";
 import {
-  Table,
  Text,
  TextInput,
  Stack,
@@ -9,10 +8,11 @@ import {
  ThemeIcon,
  Container,
  Title,
-  ScrollArea,
-  Paper,
+  Divider,
+  UnstyledButton,
  Popover,
  ActionIcon,
+  Skeleton,
 } from "@mantine/core";
 import {
  MagnifyingGlassIcon,
@@ -22,7 +22,8 @@ import {
  InfoIcon,
 } from "@phosphor-icons/react";
 import { PlayerStats } from "../types";
-import { motion } from "framer-motion";
+import Avatar from "@/components/avatar";
+import { useNavigate } from "@tanstack/react-router";

 interface PlayerStatsTableProps {
  playerStats: PlayerStats[];
@@ -36,7 +37,138 @@ interface SortConfig {
  direction: SortDirection;
 }

+interface PlayerListItemProps {
+  stat: PlayerStats;
+  index: number;
+  onPlayerClick: (playerId: string) => void;
+}
+
+const PlayerListItem = ({ stat, index, onPlayerClick }: PlayerListItemProps) => {
+  const calculateMMR = (stat: PlayerStats): number => {
+    if (stat.matches === 0) return 0;
+
+    const winScore = stat.win_percentage;
+    const matchConfidence = Math.min(stat.matches / 15, 1);
+    const avgCupsScore = Math.min(stat.avg_cups_per_match * 10, 100);
+    const marginScore = stat.margin_of_victory
+      ? Math.min(stat.margin_of_victory * 20, 50)
+      : 0;
+    const volumeBonus = Math.min(stat.matches * 0.5, 10);
+
+    const baseMMR =
+      winScore * 0.5 +
+      avgCupsScore * 0.25 +
+      marginScore * 0.15 +
+      volumeBonus * 0.1;
+
+    const finalMMR = baseMMR * matchConfidence;
+    return Math.round(finalMMR * 10) / 10;
+  };
+
+  const mmr = calculateMMR(stat);
+
+  return (
+    <>
+      <UnstyledButton
+        w="100%"
+        p="md"
+        onClick={() => onPlayerClick(stat.id)}
+        style={{
+          borderRadius: 0,
+          transition: "background-color 0.15s ease",
+        }}
+        styles={{
+          root: {
+            '&:hover': {
+              backgroundColor: 'var(--mantine-color-gray-0)',
+            },
+          },
+        }}
+      >
+        <Group justify="space-between" align="center" w="100%">
+          <Group gap="sm" align="center">
+            <Avatar name={stat.player_name} size={40} />
+            <Stack gap={2}>
+              <Group gap='xs'>
+                <Text size="sm" fw={600}>
+                  {stat.player_name}
+                </Text>
+                <Text size="xs" c="dimmed" ta="right">
+                  {stat.matches} matches
+                </Text>
+                <Text size="xs" c="dimmed" ta="right">
+                  {stat.tournaments} tournaments
+                </Text>
+              </Group>
+              <Group gap="md" ta="center">
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    MMR
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {mmr.toFixed(1)}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    W
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.wins}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    L
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.losses}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    W%
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.win_percentage.toFixed(1)}%
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    AVG
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.avg_cups_per_match.toFixed(1)}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    CF
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.total_cups_made}
+                  </Text>
+                </Stack>
+                <Stack gap={0}>
+                  <Text size="xs" c="dimmed" fw={700}>
+                    CA
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {stat.total_cups_against}
+                  </Text>
+                </Stack>
+              </Group>
+            </Stack>
+          </Group>
+          
+        </Group>
+      </UnstyledButton>
+    </>
+  );
+};
+
 const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
+  const navigate = useNavigate();
  const [search, setSearch] = useState("");
  const [sortConfig, setSortConfig] = useState<SortConfig>({
    key: "mmr" as SortKey,
@@ -47,14 +179,11 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
    if (stat.matches === 0) return 0;

    const winScore = stat.win_percentage;
-
    const matchConfidence = Math.min(stat.matches / 15, 1);
-
    const avgCupsScore = Math.min(stat.avg_cups_per_match * 10, 100);
    const marginScore = stat.margin_of_victory
      ? Math.min(stat.margin_of_victory * 20, 50)
      : 0;
-
    const volumeBonus = Math.min(stat.matches * 0.5, 10);

    const baseMMR =
@@ -64,26 +193,9 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
      volumeBonus * 0.1;

    const finalMMR = baseMMR * matchConfidence;
-
    return Math.round(finalMMR * 10) / 10;
  };

-  const handleSort = (key: SortKey) => {
-    setSortConfig((prev) => ({
-      key,
-      direction: prev.key === key && prev.direction === "desc" ? "asc" : "desc",
-    }));
-  };
-
-  const getSortIcon = (key: SortKey) => {
-    if (sortConfig.key !== key) return null;
-    return sortConfig.direction === "desc" ? (
-      <CaretDownIcon size={14} />
-    ) : (
-      <CaretUpIcon size={14} />
-    );
-  };
-
  const filteredAndSortedStats = useMemo(() => {
    let filtered = playerStats.filter((stat) =>
      stat.player_name.toLowerCase().includes(search.toLowerCase())
@@ -117,78 +229,29 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
    });
  }, [playerStats, search, sortConfig]);

-  const formatPercentage = (value: number) => `${value.toFixed(1)}%`;
-  const formatDecimal = (value: number) => value.toFixed(2);
+  const handlePlayerClick = (playerId: string) => {
+    navigate({ to: `/profile/${playerId}` });
+  };

-  const columns = [
-    { key: "player_name" as SortKey, label: "Player", width: 175 },
-    { key: "mmr" as SortKey, label: "MMR", width: 90 },
-    { key: "win_percentage" as SortKey, label: "Win %", width: 110 },
-    { key: "matches" as SortKey, label: "Matches", width: 90 },
-    { key: "wins" as SortKey, label: "Wins", width: 80 },
-    { key: "losses" as SortKey, label: "Losses", width: 80 },
-    { key: "total_cups_made" as SortKey, label: "Cups Made", width: 110 },
-    { key: "total_cups_against" as SortKey, label: "Cups Against", width: 120 },
-    { key: "avg_cups_per_match" as SortKey, label: "Avg/Match", width: 100 },
-    { key: "margin_of_victory" as SortKey, label: "Win Margin", width: 110 },
-    { key: "margin_of_loss" as SortKey, label: "Loss Margin", width: 110 },
-  ];
+  const handleSort = (key: SortKey) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "desc" ? "asc" : "desc",
+    }));
+  };

-  const renderCellContent = (
-    stat: PlayerStats,
-    column: (typeof columns)[0],
-    index: number
-  ) => {
-    switch (column.key) {
-      case "player_name":
-        return (
-          <Text size="sm" fw={600}>
-            {stat.player_name}
-          </Text>
-        );
-      case "mmr":
-        const mmr = calculateMMR(stat);
-        return (
-          <Box>
-            <Text fw={700} size="md">
-              {mmr.toFixed(1)}
-            </Text>
-          </Box>
-        );
-      case "win_percentage":
-        return <Text size="sm">{formatPercentage(stat.win_percentage)}</Text>;
-      case "wins":
-        return <Text fw={500}>{stat.wins}</Text>;
-      case "losses":
-        return <Text fw={500}>{stat.losses}</Text>;
-      case "total_cups_made":
-        return <Text fw={500}>{stat.total_cups_made}</Text>;
-      case "matches":
-        return <Text fw={500}>{stat.matches}</Text>;
-      case "avg_cups_per_match":
-        return <Text>{formatDecimal(stat.avg_cups_per_match)}</Text>;
-      case "margin_of_victory":
-        return (
-          <Text>
-            {stat.margin_of_victory
-              ? formatDecimal(stat.margin_of_victory)
-              : "N/A"}
-          </Text>
-        );
-      case "margin_of_loss":
-        return (
-          <Text>
-            {stat.margin_of_loss ? formatDecimal(stat.margin_of_loss) : "N/A"}
-          </Text>
-        );
-      default:
-        return <Text>{(stat as any)[column.key]}</Text>;
-    }
+  const getSortIcon = (key: SortKey) => {
+    if (sortConfig.key !== key) return null;
+    return sortConfig.direction === "desc" ? (
+      <CaretDownIcon size={14} />
+    ) : (
+      <CaretUpIcon size={14} />
+    );
  };

  if (playerStats.length === 0) {
    return (
-      <Container size="md">
+      <Container px={0} size="md">
        <Stack align="center" gap="md" py="xl">
          <ThemeIcon size="xl" variant="light" radius="md">
            <ChartBarIcon size={32} />
@@ -196,9 +259,6 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
          <Title order={3} c="dimmed">
            No Stats Available
          </Title>
-          <Text c="dimmed" ta="center">
-            Player statistics will appear here once matches have been played.
-          </Text>
        </Stack>
      </Container>
    );
@@ -207,194 +267,97 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
  return (
    <Container size="100%" px={0}>
      <Stack gap="xs">
-        <Text ml="auto" size="xs" c="dimmed">
-          {filteredAndSortedStats.length} of {playerStats.length} players
-        </Text>
        <TextInput
          placeholder="Search players"
          value={search}
          onChange={(e) => setSearch(e.currentTarget.value)}
          leftSection={<MagnifyingGlassIcon size={16} />}
          size="md"
+          px="md"
        />

-        <Paper withBorder radius="md" p={0} style={{ overflow: "hidden" }}>
-          <ScrollArea>
-            <Table
-              highlightOnHover
-              striped
-              withTableBorder={false}
-              style={{
-                minWidth: 1000,
-                borderRadius: "inherit",
-              }}
+        <Group px="md" justify="space-between" align="center">
+          <Text size="10px" lh={0} c="dimmed">
+            {filteredAndSortedStats.length} of {playerStats.length} players
+          </Text>
+          <Group gap="xs">
+            <Text size="xs" c="dimmed">Sort:</Text>
+            <UnstyledButton
+              onClick={() => handleSort("mmr")}
+              style={{ display: "flex", alignItems: "center", gap: 4 }}
            >
-              <Table.Thead
-                style={{
-                  backgroundColor: "var(--mantine-color-body)",
-                  position: "sticky",
-                  top: 0,
-                  zIndex: 1,
-                }}
-              >
-                <Table.Tr>
-                  {columns.map((column, index) => (
-                    <Table.Th
-                      key={column.key}
-                      style={{
-                        cursor: "pointer",
-                        userSelect: "none",
-                        width: column.width,
-                        minWidth: column.width,
-                        padding: "12px 16px",
-                        fontWeight: 600,
-                        backgroundColor: "var(--mantine-color-body)",
-                        borderBottom:
-                          "2px solid var(--mantine-color-default-border)",
-                        ...(index === 0 && {
-                          position: "sticky",
-                          left: 0,
-                          zIndex: 2,
-                          borderTopLeftRadius: "var(--mantine-radius-md)",
-                        }),
-                        ...(index === columns.length - 1 && {
-                          borderTopRightRadius: "var(--mantine-radius-md)",
-                        }),
-                      }}
-                      onClick={() => handleSort(column.key)}
-                    >
-                      <Group
-                        gap="xs"
-                        wrap="nowrap"
-                        style={{ position: "relative" }}
-                      >
-                        <Text size="sm" fw={600}>
-                          {column.label}
-                        </Text>
-                        {column.key === "mmr" && (
-                          <div
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              e.preventDefault();
-                            }}
-                            onMouseDown={(e) => {
-                              e.stopPropagation();
-                            }}
-                          >
-                            <Popover position="bottom" withArrow shadow="md">
-                              <Popover.Target>
-                                <ActionIcon variant="subtle" size="xs">
-                                  <InfoIcon size={12} />
-                                </ActionIcon>
-                              </Popover.Target>
-                              <Popover.Dropdown>
-                                <Box maw={280}>
-                                  <Text size="sm" fw={500} mb="xs">
-                                    MMR Calculation:
-                                  </Text>
-                                  <Text size="xs" mb={2}>
-                                    • Win Rate (50%)
-                                  </Text>
-                                  <Text size="xs" mb={2}>
-                                    • Average Cups/Match (25%)
-                                  </Text>
-                                  <Text size="xs" mb={2}>
-                                    • Average Win Margin (15%)
-                                  </Text>
-                                  <Text size="xs" mb={2}>
-                                    • Match Volume Bonus (10%)
-                                  </Text>
-                                  <Text size="xs" mt="xs" c="dimmed">
-                                    * Confidence penalty applied for players
-                                    with &lt;15 matches
-                                  </Text>
-                                  <Text size="xs" mt="xs" c="dimmed">
-                                    ** Not an official rating
-                                  </Text>
-                                </Box>
-                              </Popover.Dropdown>
-                            </Popover>
-                          </div>
-                        )}
-                        <Box
-                          style={{
-                            minWidth: 16,
-                            display: "flex",
-                            justifyContent: "center",
-                          }}
-                        >
-                          {getSortIcon(column.key)}
-                        </Box>
-                        {index === 0 && (
-                          <div
-                            style={{
-                              position: "absolute",
-                              top: 0,
-                              right: 0,
-                              bottom: 0,
-                              width: "2px",
-                              backgroundColor:
-                                "var(--mantine-color-default-border)",
-                              zIndex: 1,
-                            }}
-                          />
-                        )}
-                      </Group>
-                    </Table.Th>
-                  ))}
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {filteredAndSortedStats.map((stat, index) => (
-                  <motion.tr
-                    key={stat.id}
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.2, delay: index * 0.01 }}
-                    style={{
-                      borderBottom:
-                        "1px solid var(--mantine-color-default-border)",
-                    }}
-                  >
-                    {columns.map((column, columnIndex) => (
-                      <Table.Td
-                        key={`${stat.id}-${column.key}`}
-                        style={{
-                          padding: "12px 16px",
-                          verticalAlign: "middle",
-                          ...(columnIndex === 0 && {
-                            position: "sticky",
-                            left: 0,
-                            backgroundColor: "var(--mantine-color-body)",
-                            zIndex: 1,
-                          }),
-                        }}
-                      >
-                        <div style={{ position: "relative" }}>
-                          {renderCellContent(stat, column, index)}
-                          {columnIndex === 0 && (
-                            <div
-                              style={{
-                                position: "absolute",
-                                top: 0,
-                                right: 0,
-                                bottom: 0,
-                                width: "2px",
-                                backgroundColor:
-                                  "var(--mantine-color-default-border)",
-                                zIndex: 1,
-                              }}
-                            />
-                          )}
-                        </div>
-                      </Table.Td>
-                    ))}
-                  </motion.tr>
-                ))}
-              </Table.Tbody>
-            </Table>
-          </ScrollArea>
-        </Paper>
+              <Text size="xs" fw={sortConfig.key === "mmr" ? 600 : 400} c={sortConfig.key === "mmr" ? "dark" : "dimmed"}>
+                MMR
+              </Text>
+              {getSortIcon("mmr")}
+            </UnstyledButton>
+            <Text size="xs" c="dimmed">•</Text>
+            <UnstyledButton
+              onClick={() => handleSort("wins")}
+              style={{ display: "flex", alignItems: "center", gap: 4 }}
+            >
+              <Text size="xs" fw={sortConfig.key === "wins" ? 600 : 400} c={sortConfig.key === "wins" ? "dark" : "dimmed"}>
+                Wins
+              </Text>
+              {getSortIcon("wins")}
+            </UnstyledButton>
+            <Text size="xs" c="dimmed">•</Text>
+            <UnstyledButton
+              onClick={() => handleSort("matches")}
+              style={{ display: "flex", alignItems: "center", gap: 4 }}
+            >
+              <Text size="xs" fw={sortConfig.key === "matches" ? 600 : 400} c={sortConfig.key === "matches" ? "dark" : "dimmed"}>
+                Matches
+              </Text>
+              {getSortIcon("matches")}
+            </UnstyledButton>
+            <Popover position="bottom-end" withArrow shadow="md">
+              <Popover.Target>
+                <ActionIcon variant="subtle" size="sm">
+                  <InfoIcon size={14} />
+                </ActionIcon>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <Box maw={280}>
+                  <Text size="sm" fw={500} mb="xs">
+                    MMR Calculation:
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • Win Rate (50%)
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • Average Cups/Match (25%)
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • Average Win Margin (15%)
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • Match Volume Bonus (10%)
+                  </Text>
+                  <Text size="xs" mt="xs" c="dimmed">
+                    * Confidence penalty applied for players with &lt;15 matches
+                  </Text>
+                  <Text size="xs" mt="xs" c="dimmed">
+                    ** Not an official rating
+                  </Text>
+                </Box>
+              </Popover.Dropdown>
+            </Popover>
+          </Group>
+        </Group>
+
+        <Stack gap={0}>
+          {filteredAndSortedStats.map((stat, index) => (
+            <Box key={stat.id}>
+              <PlayerListItem
+                stat={stat}
+                index={index}
+                onPlayerClick={handlePlayerClick}
+              />
+              {index < filteredAndSortedStats.length - 1 && <Divider />}
+            </Box>
+          ))}
+        </Stack>

        {filteredAndSortedStats.length === 0 && search && (
          <Text ta="center" c="dimmed" py="xl">
--- a/src/features/players/components/profile/header.tsx
+++ b/src/features/players/components/profile/header.tsx
@@ -33,7 +33,7 @@ const Header = ({ player }: HeaderProps) => {

  return (
    <>
-      <Flex px='lg' w='100%' align='self-end' gap='md'>
+      <Flex px='xl' w='100%' align='self-end' gap='md'>
        <Avatar name={name} size={100} />
        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
          <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
--- a/src/features/players/components/profile/index.tsx
+++ b/src/features/players/components/profile/index.tsx
@@ -33,7 +33,7 @@ const Profile = ({ id }: ProfileProps) => {
  return (
    <>
      <Header player={player} />
-      <Box m='xs' mt="lg">
+      <Box mt="lg">
        <SwipeableTabs tabs={tabs} />
      </Box>
    </>
--- a/src/features/players/types.ts
+++ b/src/features/players/types.ts
@@ -33,6 +33,7 @@ export interface PlayerStats {
  player_id: string;
  player_name: string;
  matches: number;
+  tournaments: number;
  wins: number;
  losses: number;
  total_cups_made: number;
--- a/src/features/teams/components/team-list.tsx
+++ b/src/features/teams/components/team-list.tsx
@@ -1,4 +1,4 @@
-import { 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,16 +15,16 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
  );

  return (
-    <>
-      <Stack gap={0}>
-        <Text fw={500}>{`${team.name}`}</Text>
+    <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">
-            {name}
-          </Text>
-        ))}
+        <Text size="xs" c="dimmed" ta="right">
+          {name}
+        </Text>
+      ))}
      </Stack>
-    </>
+    </Group>
  );
 });

@@ -59,15 +59,22 @@ const TeamList = ({ teams, loading = false }: TeamListProps) => {
  return (
    <List>
      {teams?.map((team) => (
-        <ListItem
-          key={team.id}
-          py="xs"
-          icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
-          style={{ cursor: "pointer" }}
-          onClick={() => handleClick(team.id)}
-        >
-          <TeamListItem team={team} />
-        </ListItem>
+        <div key={team.id}>
+          <ListItem
+            p="xs"
+            icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
+            style={{ cursor: "pointer" }}
+            onClick={() => handleClick(team.id)}
+            styles={{
+              itemWrapper: { width: "100%" },
+              itemLabel: { width: "100%" }
+            }}
+            w="100%"
+          >
+            <TeamListItem team={team} />
+          </ListItem>
+          <Divider />
+        </div>
      ))}
    </List>
  );
--- a/src/features/teams/components/team-profile/index.tsx
+++ b/src/features/teams/components/team-profile/index.tsx
@@ -37,7 +37,7 @@ const TeamProfile = ({ id }: ProfileProps) => {
  return (
    <>
      <Header name={team.name} logo={team.logo} />
-      <Box m="xs" mt="lg">
+      <Box mt="lg">
        <SwipeableTabs tabs={tabs} />
      </Box>
    </>
--- a/src/features/tournaments/components/manage-tournament.tsx
+++ b/src/features/tournaments/components/manage-tournament.tsx
@@ -12,6 +12,8 @@ import {
 import { useSheet } from "@/hooks/use-sheet";
 import EditEnrolledTeams from "./edit-enrolled-teams";
 import ListLink from "@/components/list-link";
+import { RichTextEditor } from "@/components/rich-text-editor";
+import React from "react";

 interface ManageTournamentProps {
  tournamentId: string;
@@ -37,6 +39,8 @@ const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
    close: closeEditTeams,
  } = useSheet();

+  const [v, setV] = React.useState("");
+
  return (
    <>
      <List>
@@ -86,7 +90,9 @@ const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
        opened={editRulesOpened}
        onChange={closeEditRules}
      >
-        <p>Test</p>
+        <RichTextEditor value={v} onChange={setV} />
+
+        {v}
      </Sheet>

      <Sheet
--- a/src/features/tournaments/components/profile/index.tsx
+++ b/src/features/tournaments/components/profile/index.tsx
@@ -32,7 +32,7 @@ const Profile = ({ id }: ProfileProps) => {

  return <>
    <Header tournament={tournament} />
-    <Box m='sm' mt='lg'>
+    <Box mt='lg'>
      <SwipeableTabs tabs={tabs} />
    </Box>
  </>;
--- a/src/features/tournaments/components/tournament-card.tsx
+++ b/src/features/tournaments/components/tournament-card.tsx
@@ -1,10 +1,23 @@
-import { Badge, Card, Text, Stack, Group, Box, ThemeIcon } from "@mantine/core";
+import {
+  Badge,
+  Card,
+  Text,
+  Stack,
+  Group,
+  Box,
+  ThemeIcon,
+  UnstyledButton,
+} from "@mantine/core";
 import { Tournament } from "@/features/tournaments/types";
 import { useMemo } from "react";
-import { TrophyIcon, CalendarIcon, MapPinIcon, UsersIcon } from "@phosphor-icons/react";
+import {
+  TrophyIcon,
+  CalendarIcon,
+  MapPinIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
-import { motion } from "framer-motion";

 interface TournamentCardProps {
  tournament: Tournament;
@@ -18,9 +31,9 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
    const date = new Date(tournament.start_time);
    if (isNaN(date.getTime())) return null;
    return date.toLocaleDateString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
+      month: "short",
+      day: "numeric",
+      year: "numeric",
    });
  }, [tournament.start_time]);

@@ -31,33 +44,42 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
  const enrolledTeamsCount = tournament.teams?.length || 0;

  return (
-    <motion.div
-      whileHover={{ y: -4, scale: 1.02 }}
-      whileTap={{ scale: 0.98 }}
-      transition={{ type: "spring", stiffness: 300 }}
+    <UnstyledButton
+      w="100%"
+      onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
+      style={{ borderRadius: "var(--mantine-radius-md)" }}
+      styles={{
+        root: {
+          "&:hover": {
+            transform: "translateY(-2px)",
+            transition: "transform 0.15s ease",
+          },
+        },
+      }}
    >
      <Card
        withBorder
-        radius="lg"
+        radius="md"
        p="lg"
+        w="100%"
        style={{
-          cursor: "pointer",
-          height: "100%",
-          transition: "box-shadow 0.2s ease"
+          transition: "all 0.15s ease",
+          border: "1px solid var(--mantine-color-default-border)",
        }}
-        onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.boxShadow = "var(--mantine-shadow-md)";
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.boxShadow = "none";
+        styles={{
+          root: {
+            "&:hover": {
+              borderColor: "var(--mantine-primary-color-filled)",
+              boxShadow: "var(--mantine-shadow-sm)",
+            },
+          },
        }}
      >
-        <Stack gap="md" h="100%">
-          <Group gap="md" align="flex-start">
+        <Group justify="space-between" align="center">
+          <Group gap="md" align="center">
            <Avatar
-              size={60}
-              radius="md"
+              size={120}
+              radius="sm"
              name={tournament.name}
              src={
                tournament.logo
@@ -65,15 +87,41 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
                  : undefined
              }
            >
-              <TrophyIcon size={24} />
+              <TrophyIcon size={20} />
            </Avatar>
+            <Stack gap="xs">
+              <Text fw={600} size="lg" lineClamp={2}>
+                {tournament.name}
+              </Text>
+              {displayDate && (
+                <Group gap="xs">
+                  <ThemeIcon
+                    size="sm"
+                    variant="light"
+                    radius="sm"
+                    color="gray"
+                  >
+                    <CalendarIcon size={12} />
+                  </ThemeIcon>
+                  <Text size="sm" c="dimmed">
+                    {displayDate}
+                  </Text>
+                </Group>
+              )}

-            <Text fw={700} size="lg" lineClamp={2} my='auto'>
-              {tournament.name}
-            </Text>
+              <Group gap="xs">
+                <ThemeIcon size="sm" variant="light" radius="sm" color="gray">
+                  <UsersIcon size={12} />
+                </ThemeIcon>
+                <Text size="sm" c="dimmed">
+                  {enrolledTeamsCount} team
+                  {enrolledTeamsCount !== 1 ? "s" : ""}
+                </Text>
+              </Group>
+            </Stack>
          </Group>
-        </Stack>
+        </Group>
      </Card>
-    </motion.div>
+    </UnstyledButton>
  );
 };
--- a/src/features/tournaments/components/tournament-list.tsx
+++ b/src/features/tournaments/components/tournament-list.tsx
@@ -1,9 +1,9 @@
-import { Stack, Skeleton, Text, Group, Box, ThemeIcon } from "@mantine/core";
+import { List, ListItem, Divider, Skeleton, Text, Group, Box, ThemeIcon, Stack } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { TournamentInfo } from "../types";
 import { useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React from "react";
 import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";

 interface TournamentListProps {
@@ -11,6 +11,50 @@ interface TournamentListProps {
  loading?: boolean;
 }

+interface TournamentListItemProps {
+  tournament: TournamentInfo;
+}
+
+const TournamentListItem = React.memo(({ tournament }: TournamentListItemProps) => {
+  const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
+
+  return (
+    <Group justify="space-between" w="100%">
+      <Stack gap={2}>
+        <Text fw={500} size="sm">
+          {tournament.name}
+        </Text>
+        <Group gap="md">
+          {tournament.location && (
+            <Group gap={4}>
+              <ThemeIcon size="xs" variant="light" radius="sm" color="gray">
+                <MapPinIcon size={10} />
+              </ThemeIcon>
+              <Text size="xs" c="dimmed">
+                {tournament.location}
+              </Text>
+            </Group>
+          )}
+          {startDate && !isNaN(startDate.getTime()) && (
+            <Group gap={4}>
+              <ThemeIcon size="xs" variant="light" radius="sm" color="gray">
+                <CalendarIcon size={10} />
+              </ThemeIcon>
+              <Text size="xs" c="dimmed">
+                {startDate.toLocaleDateString(undefined, {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric'
+                })}
+              </Text>
+            </Group>
+          )}
+        </Group>
+      </Stack>
+    </Group>
+  );
+});
+
 const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
  const navigate = useNavigate();

@@ -19,20 +63,23 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =

  if (loading) {
    return (
-      <Stack gap="sm">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Box key={`skeleton-${i}`} p="md">
-            <Group gap="md">
-              <Skeleton height={60} width={60} radius="md" />
-              <Stack gap="xs" style={{ flex: 1 }}>
-                <Skeleton height={20} width="60%" />
-                <Skeleton height={16} width="40%" />
-                <Skeleton height={16} width="30%" />
-              </Stack>
-            </Group>
-          </Box>
+      <List>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <ListItem
+            key={`skeleton-${i}`}
+            py="xs"
+            icon={<Skeleton height={40} width={40} radius="sm" />}
+          >
+            <Stack gap={4}>
+              <Skeleton height={16} width={200} />
+              <Group gap="md">
+                <Skeleton height={12} width={80} />
+                <Skeleton height={12} width={100} />
+              </Group>
+            </Stack>
+          </ListItem>
        ))}
-      </Stack>
+      </List>
    );
  }

@@ -50,96 +97,40 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
  }

  return (
-    <Stack gap="xs">
-      <AnimatePresence>
-        {tournaments.map((tournament, index) => {
-        const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
-
-        return (
-          <motion.div
-            key={`tournament-${tournament.id}-${index}`}
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{ duration: 0.2, delay: index * 0.01 }}
-            whileHover={{ y: -2 }}
-            whileTap={{ scale: 0.98 }}
+    <List>
+      {tournaments.map((tournament) => (
+        <>
+          <ListItem
+            key={tournament.id}
+            p="xs"
+            icon={
+              <Avatar
+                radius="sm"
+                size={40}
+                name={tournament.name}
+                src={
+                  tournament.logo
+                    ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                    : undefined
+                }
+              >
+                <TrophyIcon size={16} />
+              </Avatar>
+            }
+            style={{ cursor: "pointer" }}
+            onClick={() => handleClick(tournament.id)}
+            styles={{
+              itemWrapper: { width: "100%" },
+              itemLabel: { width: "100%" }
+            }}
+            w="100%"
          >
-            <Box
-              p="md"
-              style={{
-                borderRadius: "var(--mantine-radius-md)",
-                border: "1px solid var(--mantine-color-gray-3)",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-              }}
-              onClick={() => handleClick(tournament.id)}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-0)";
-                e.currentTarget.style.borderColor = "var(--mantine-primary-color-filled)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
-              }}
-            >
-              <Group gap="md" wrap="nowrap">
-                <Avatar
-                  size={60}
-                  radius="md"
-                  name={tournament.name}
-                  src={
-                    tournament.logo
-                      ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
-                      : undefined
-                  }
-                  style={{
-                    border: "2px solid var(--mantine-primary-color-light)",
-                  }}
-                >
-                  <TrophyIcon size={24} />
-                </Avatar>
-
-                <Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
-                  <Text fw={600} size="lg" lineClamp={1}>
-                    {tournament.name}
-                  </Text>
-
-                  <Group gap="lg" wrap="wrap">
-                    {tournament.location && (
-                      <Group gap="xs">
-                        <ThemeIcon size="xs" variant="light" radius="sm">
-                          <MapPinIcon size={12} />
-                        </ThemeIcon>
-                        <Text size="sm" c="dimmed" lineClamp={1}>
-                          {tournament.location}
-                        </Text>
-                      </Group>
-                    )}
-
-                    {startDate && !isNaN(startDate.getTime()) && (
-                      <Group gap="xs">
-                        <ThemeIcon size="xs" variant="light" radius="sm">
-                          <CalendarIcon size={12} />
-                        </ThemeIcon>
-                        <Text size="sm" c="dimmed">
-                          {startDate.toLocaleDateString(undefined, {
-                            month: 'short',
-                            day: 'numeric',
-                            year: 'numeric'
-                          })}
-                        </Text>
-                      </Group>
-                    )}
-                  </Group>
-                </Stack>
-              </Group>
-            </Box>
-          </motion.div>
-        );
-        })}
-      </AnimatePresence>
-    </Stack>
+            <TournamentListItem tournament={tournament} />
+          </ListItem>
+          <Divider />
+        </>
+      ))}
+    </List>
  );
 }

--- a/src/features/tournaments/components/upcoming-tournament/header.tsx
+++ b/src/features/tournaments/components/upcoming-tournament/header.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, ThemeIcon, Text } from "@mantine/core";
+import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
 import { Tournament } from "../../types";
 import Avatar from "@/components/avatar";
 import {
@@ -20,7 +20,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
  );

  return (
-    <Stack align="center" gap="lg">
+    <Stack align="center" gap={0}>
      <Avatar
        name={tournament.name}
        src={
@@ -29,13 +29,13 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
            : undefined
        }
        radius="md"
-        size={200}
+        size={300}
        px="xs"
        withBorder={false}
      >
        <TrophyIcon size={32} />
      </Avatar>
-      <Stack gap="xs">
+      <Flex gap="xs" direction="row" wrap="wrap" justify="space-around">
        {tournament.location && (
          <Group gap="xs">
            <ThemeIcon size="sm" variant="light" radius="sm">
@@ -64,16 +64,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
            })}
          </Text>
        </Group>
-
-        <Group gap="xs">
-          <ThemeIcon size="sm" variant="light" radius="sm">
-            <UsersIcon size={14} />
-          </ThemeIcon>
-          <Text size="sm" c="dimmed">
-            {teamCount} teams enrolled
-          </Text>
-        </Group>
-      </Stack>
+      </Flex>
    </Stack>
  );
 };
--- a/src/shared/components/stats-overview.tsx
+++ b/src/shared/components/stats-overview.tsx
@@ -1,12 +1,11 @@
 import {
  Box,
-  Grid,
  Text,
  Group,
  Stack,
  ThemeIcon,
-  Card,
  Skeleton,
+  Divider,
 } from "@mantine/core";
 import {
  CrownIcon,
@@ -27,69 +26,34 @@ interface StatsOverviewProps {
  isLoading?: boolean;
 }

-const StatCard = ({
+const StatItem = ({
  label,
  value,
  suffix = "",
  Icon,
-  variant = "default",
-  isLoading = false,
 }: {
  label: string;
  value: number | null;
  suffix?: string;
  Icon?: Icon;
-  variant?: "default" | "compact";
  isLoading?: boolean;
 }) => {
-  if (variant === "compact") {
-    return (
-      <Card p="xs" radius="md" withBorder>
-        <Group gap={2} justify="space-between" align="flex-start">
-          <Stack gap={2} flex={1}>
-            <Text size="xs" c="dimmed" fw={600} tt="uppercase" lts="0.3px">
-              {label}
-            </Text>
-            {isLoading ? (
-              <Skeleton height={20} width="60%" />
-            ) : (
-              <Text size="md" fw={700} lh={1}>
-                {value !== null ? `${value}${suffix}` : "—"}
-              </Text>
-            )}
-          </Stack>
-          {Icon && (
-            <ThemeIcon size="sm" variant="light" radius="md">
-              <Icon size={12} />
-            </ThemeIcon>
-          )}
-        </Group>
-      </Card>
-    );
-  }
-
  return (
-    <Card p="sm" radius="md" withBorder>
-      <Stack gap="xs">
-        <Group justify="space-between" align="center">
-          <Text size="xs" c="dimmed" fw={600} tt="uppercase" lts="0.3px">
-            {label}
-          </Text>
-          {Icon && (
-            <ThemeIcon size="sm" variant="light" radius="sm">
-              <Icon size={14} />
-            </ThemeIcon>
-          )}
-        </Group>
-        {isLoading ? (
-          <Skeleton height={28} width="70%" />
-        ) : (
-          <Text size="xl" fw={700} lh={1}>
-            {value !== null ? `${value}${suffix}` : "—"}
-          </Text>
+    <Group justify="space-between" align="center" py="md" px="sm">
+      <Group gap="sm" align="center">
+        {Icon && (
+          <ThemeIcon size="md" variant="light" radius="sm" color="gray">
+            <Icon size={16} />
+          </ThemeIcon>
        )}
-      </Stack>
-    </Card>
+        <Text size="sm" fw={500}>
+          {label}
+        </Text>
+      </Group>
+      <Text size="sm" fw={700} c="dimmed">
+        {value !== null ? `${value}${suffix}` : "—"}
+      </Text>
+    </Group>
  );
 };

@@ -120,157 +84,78 @@ const StatsOverview = ({ statsData, isLoading = false }: StatsOverviewProps) =>

  const avgCupsPerMatch =
    overallStats.matches > 0
-      ? overallStats.total_cups_made / overallStats.matches
+      ? parseFloat((overallStats.total_cups_made / overallStats.matches).toFixed(1))
      : 0;

  const avgCupsAgainstPerMatch =
    overallStats.matches > 0
-      ? overallStats.total_cups_against / overallStats.matches
+      ? parseFloat((overallStats.total_cups_against / overallStats.matches).toFixed(1))
      : 0;

-  const avgMarginOfVictory = statsData.margin_of_victory || 0;
-  const avgMarginOfLoss = statsData.margin_of_loss || 0;
+  const avgMarginOfVictory = statsData.margin_of_victory ? parseFloat(statsData.margin_of_victory.toFixed(1)) : 0;
+  const avgMarginOfLoss = statsData.margin_of_loss ? parseFloat(statsData.margin_of_loss.toFixed(1)) : 0;
+
+  const allStats = [
+    { label: "Matches Played", value: overallStats.matches, Icon: BoxingGloveIcon },
+    { label: "Wins", value: overallStats.wins, Icon: CrownIcon },
+    { label: "Losses", value: overallStats.losses, Icon: XIcon },
+    { label: "Cups Made", value: overallStats.total_cups_made, Icon: FireIcon },
+    { label: "Cups Against", value: overallStats.total_cups_against, Icon: ShieldIcon },
+    { label: "Avg Cups Per Game", value: avgCupsPerMatch > 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
+    { label: "Avg Cups Against", value: avgCupsAgainstPerMatch > 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
+    { label: "Avg Win Margin", value: avgMarginOfVictory > 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
+    { label: "Avg Loss Margin", value: avgMarginOfLoss > 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
+  ];

  return (
-    <Box p="sm" h="auto" mih={400}>
-      <Stack gap="lg">
-        <Stack gap="sm">
-          <Text size="md" fw={600} c="dark">
-            Match Statistics
-          </Text>
-        <Grid gutter="xs">
-          <Grid.Col span={4}>
-            <StatCard
-              label="Matches"
-              value={overallStats.matches}
-              Icon={BoxingGloveIcon}
-              variant="compact"
+    <Box>
+      <Stack gap={0}>
+        {allStats.map((stat, index) => (
+          <Box key={stat.label}>
+            <StatItem
+              label={stat.label}
+              value={stat.value}
+              Icon={stat.Icon}
+              isLoading={isLoading}
            />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StatCard
-              label="Wins"
-              value={overallStats.wins}
-              Icon={CrownIcon}
-              variant="compact"
-            />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StatCard
-              label="Losses"
-              value={overallStats.losses}
-              Icon={XIcon}
-              variant="compact"
-            />
-          </Grid.Col>
-        </Grid>
-      </Stack>
-
-      <Stack gap="sm">
-        <Text size="md" fw={600} c="dark">
-          Metrics
-        </Text>
-        <Grid gutter="xs">
-          <Grid.Col span={6}>
-            <StatCard
-              label="Cups Made"
-              value={overallStats.total_cups_made}
-              Icon={FireIcon}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard
-              label="Cups Against"
-              value={overallStats.total_cups_against}
-              Icon={ShieldIcon}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard
-              label="Avg Per Game"
-              value={parseFloat(avgCupsPerMatch.toFixed(1))}
-              Icon={ChartLineUpIcon}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard
-              label="Avg Against"
-              value={parseFloat(avgCupsAgainstPerMatch.toFixed(1))}
-              Icon={ShieldCheckIcon}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard
-              label="Win Margin"
-              value={
-                avgMarginOfVictory > 0
-                  ? parseFloat(avgMarginOfVictory.toFixed(1))
-                  : null
-              }
-              Icon={ArrowUpIcon}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard
-              label="Loss Margin"
-              value={
-                avgMarginOfLoss > 0
-                  ? parseFloat(avgMarginOfLoss.toFixed(1))
-                  : null
-              }
-              Icon={ArrowDownIcon}
-            />
-          </Grid.Col>
-          </Grid>
-        </Stack>
+            {index < allStats.length - 1 && <Divider />}
+          </Box>
+        ))}
      </Stack>
    </Box>
  );
 };

-const StatsSkeleton = () => (
-  <Box p="sm" h="auto" mih={400}>
-    <Stack gap="lg">
-      <Stack gap="sm">
-        <Skeleton height={20} width="40%" />
-        <Grid gutter="xs">
-          <Grid.Col span={4}>
-            <StatCard label="Matches" value={null} Icon={BoxingGloveIcon} variant="compact" isLoading />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StatCard label="Wins" value={null} Icon={CrownIcon} variant="compact" isLoading />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StatCard label="Losses" value={null} Icon={XIcon} variant="compact" isLoading />
-          </Grid.Col>
-        </Grid>
-      </Stack>
+const StatsSkeleton = () => {
+  const skeletonStats = [
+    { label: "Matches Played", Icon: BoxingGloveIcon },
+    { label: "Wins", Icon: CrownIcon },
+    { label: "Losses", Icon: XIcon },
+    { label: "Cups Made", Icon: FireIcon },
+    { label: "Cups Against", Icon: ShieldIcon },
+    { label: "Avg Cups Per Game", Icon: ChartLineUpIcon },
+    { label: "Avg Cups Against", Icon: ShieldCheckIcon },
+    { label: "Avg Win Margin", Icon: ArrowUpIcon },
+    { label: "Avg Loss Margin", Icon: ArrowDownIcon },
+  ];

-      <Stack gap="sm">
-        <Skeleton height={20} width="30%" />
-        <Grid gutter="xs">
-          <Grid.Col span={6}>
-            <StatCard label="Cups Made" value={null} Icon={FireIcon} isLoading />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard label="Cups Against" value={null} Icon={ShieldIcon} isLoading />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard label="Avg Per Game" value={null} Icon={ChartLineUpIcon} isLoading />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard label="Avg Against" value={null} Icon={ShieldCheckIcon} isLoading />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard label="Win Margin" value={null} Icon={ArrowUpIcon} isLoading />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StatCard label="Loss Margin" value={null} Icon={ArrowDownIcon} isLoading />
-          </Grid.Col>
-        </Grid>
+  return (
+    <Box>
+      <Stack gap={0}>
+        {skeletonStats.map((stat, index) => (
+          <Box key={stat.label}>
+            <StatItem
+              label={stat.label}
+              value={null}
+              Icon={stat.Icon}
+              isLoading={true}
+            />
+            {index < skeletonStats.length - 1 && <Divider />}
+          </Box>
+        ))}
      </Stack>
-    </Stack>
-  </Box>
-)
+    </Box>
+  );
+};

 export default StatsOverview;