diff --git a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
index 248ff0966..ae5ae214a 100644
--- a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
@@ -1,14 +1,17 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
-import { Box } from '@/ui/Box';
-import { Image } from '@/ui/Image';
+import { Avatar } from '@/ui/Avatar';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
+import { LeaderboardRow } from '@/ui/LeaderboardRow';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
 
 interface DriverLeaderboardPreviewProps {
+  title?: string;
+  subtitle?: string;
   drivers: {
     id: string;
     name: string;
@@ -24,16 +27,22 @@ interface DriverLeaderboardPreviewProps {
   onNavigateToDrivers: () => void;
 }
 
-export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
+export function DriverLeaderboardPreview({ 
+  title = "Driver Rankings", 
+  subtitle = "Top Performers", 
+  drivers, 
+  onDriverClick, 
+  onNavigateToDrivers 
+}: DriverLeaderboardPreviewProps) {
   const top10 = drivers; // Already sliced in builder
 
   return (
     <LeaderboardPreviewShell
-      title="Driver Rankings"
-      subtitle="Top Performers"
+      title={title}
+      subtitle={subtitle}
       onViewFull={onNavigateToDrivers}
       icon={Trophy}
-      iconColor="var(--primary-blue)"
+      iconColor="var(--ui-color-intent-primary)"
       iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
       viewFullLabel="View All"
     >
@@ -42,71 +51,52 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
           const position = index + 1;
 
           return (
-            <Box
+            <LeaderboardRow
               key={driver.id}
-              as="button"
-              type="button"
               onClick={() => onDriverClick(driver.id)}
-              display="flex"
-              alignItems="center"
-              gap={4}
-              px={5}
-              py={3}
-              w="full"
-              textAlign="left"
-              transition
-              hoverBg="bg-white/[0.02]"
-              group
-            >
-              <Box w="8" display="flex" justifyContent="center">
-                <RankBadge rank={position} />
-              </Box>
-
-              <Box 
-                position="relative" 
-                w="9" 
-                h="9" 
-                rounded="full" 
-                overflow="hidden" 
-                border 
-                borderColor="border-charcoal-outline" 
-                groupHoverBorderColor="primary-blue/50" 
-                transition
-              >
-                <Image src={driver.avatarUrl} alt={driver.name} fullWidth fullHeight objectFit="cover" />
-              </Box>
-
-              <Box flexGrow={1} minWidth="0">
-                <Text 
-                  weight="semibold" 
-                  color="text-white" 
-                  truncate 
-                  groupHoverTextColor="text-primary-blue" 
-                  transition 
-                  block
-                >
-                  {driver.name}
-                </Text>
-                <Box display="flex" alignItems="center" gap={2}>
-                  <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
-                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
-                  <Box as="span" color={SkillLevelDisplay.getColor(driver.skillLevel)}>
-                    <Text size="xs" weight="medium">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
-                  </Box>
-                </Box>
-              </Box>
-
-              <Box display="flex" alignItems="center" gap={6}>
-                <Box textAlign="right">
-                  <Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{RatingDisplay.format(driver.rating)}</Text>
-                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
-                </Box>
-                <Box textAlign="right" minWidth="12">
-                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{driver.wins}</Text>
-                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
-                </Box>
-              </Box>
-            </Box>
+              rank={<RankBadge rank={position} />}
+              identity={
+                <Group gap={4}>
+                  <Avatar src={driver.avatarUrl} alt={driver.name} size="sm" />
+                  <Group direction="column" align="start" gap={0}>
+                    <Text 
+                      weight="bold" 
+                      variant="high"
+                      truncate 
+                      block
+                    >
+                      {driver.name}
+                    </Text>
+                    <Group gap={2}>
+                      <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
+                      <Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
+                        {SkillLevelDisplay.getLabel(driver.skillLevel)}
+                      </Text>
+                    </Group>
+                  </Group>
+                </Group>
+              }
+              stats={
+                <Group gap={8}>
+                  <Group direction="column" align="end" gap={0}>
+                    <Text variant="primary" font="mono" weight="bold" block size="md" align="right">
+                      {RatingDisplay.format(driver.rating)}
+                    </Text>
+                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
+                      Rating
+                    </Text>
+                  </Group>
+                  <Group direction="column" align="end" gap={0}>
+                    <Text variant="success" font="mono" weight="bold" block size="md" align="right">
+                      {driver.wins}
+                    </Text>
+                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
+                      Wins
+                    </Text>
+                  </Group>
+                </Group>
+              }
+            />
           );
         })}
       </LeaderboardList>
diff --git a/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx b/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
index 4f9bbc26a..18c3ce36d 100644
--- a/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
+++ b/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
@@ -2,7 +2,6 @@ import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { ControlBar } from '@/ui/ControlBar';
 import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
 import { Group } from '@/ui/Group';
 import { Filter, Search } from 'lucide-react';
 import React from 'react';
@@ -21,32 +20,30 @@ export function LeaderboardFiltersBar({
   children,
 }: LeaderboardFiltersBarProps) {
   return (
-    <Box marginBottom={6}>
-      <ControlBar
-        leftContent={
-          <Box maxWidth="32rem" fullWidth>
-            <Input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => onSearchChange?.(e.target.value)}
-              placeholder={placeholder}
-              icon={<Icon icon={Search} size={4} intent="low" />}
-              fullWidth
-            />
-          </Box>
-        }
-      >
-        <Group gap={4}>
-          {children}
-          <Button
-            variant="secondary"
-            size="sm"
-            icon={<Icon icon={Filter} size={3.5} intent="low" />}
-          >
-            Filters
-          </Button>
+    <ControlBar
+      leftContent={
+        <Group fullWidth>
+          <Input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            placeholder={placeholder}
+            icon={<Icon icon={Search} size={4} intent="low" />}
+            fullWidth
+          />
         </Group>
-      </ControlBar>
-    </Box>
+      }
+    >
+      <Group gap={4}>
+        {children}
+        <Button
+          variant="secondary"
+          size="sm"
+          icon={<Icon icon={Filter} size={3.5} intent="low" />}
+        >
+          Filters
+        </Button>
+      </Group>
+    </ControlBar>
   );
 }
diff --git a/apps/website/components/leaderboards/LeaderboardHeader.tsx b/apps/website/components/leaderboards/LeaderboardHeader.tsx
index e1c974987..2c5893287 100644
--- a/apps/website/components/leaderboards/LeaderboardHeader.tsx
+++ b/apps/website/components/leaderboards/LeaderboardHeader.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
 import React from 'react';
@@ -24,9 +24,9 @@ export function LeaderboardHeader({
   children,
 }: LeaderboardHeaderProps) {
   return (
-    <Stack mb={8}>
+    <Group direction="column" align="stretch" gap={8}>
       {onBack && (
-        <Stack mb={6}>
+        <Group>
           <Button
             variant="secondary"
             onClick={onBack}
@@ -34,38 +34,32 @@ export function LeaderboardHeader({
           >
             {backLabel}
           </Button>
-        </Stack>
+        </Group>
       )}
 
-      <Stack direction="row" align="center" justify="between" gap={4}>
-        <Stack direction="row" align="center" gap={4}>
+      <Group justify="between" gap={4}>
+        <Group gap={4}>
           {icon && (
-            <Stack 
-              p={3} 
-              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.15), rgba(25, 140, 255, 0.05))" 
-              border 
-              borderColor="border-primary-blue/20"
-              rounded="xl"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
+            <Group 
+              gap={0}
+              justify="center"
             >
-              <Icon icon={icon} size={6} color="text-primary-blue" />
-            </Stack>
+              <Icon icon={icon} size={6} intent="primary" />
+            </Group>
           )}
-          <Stack>
-            <Heading level={1} weight="bold" letterSpacing="tight">{title}</Heading>
+          <Group direction="column" align="start" gap={1}>
+            <Heading level={1} weight="bold">{title}</Heading>
             {description && (
-              <Text color="text-gray-400" block mt={1} size="sm">
+              <Text variant="low" size="sm">
                 {description}
               </Text>
             )}
-          </Stack>
-        </Stack>
-        <Stack>
+          </Group>
+        </Group>
+        <Group>
           {children}
-        </Stack>
-      </Stack>
-    </Stack>
+        </Group>
+      </Group>
+    </Group>
   );
 }
diff --git a/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
index 70fdfe0e9..1311e17e1 100644
--- a/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
+++ b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
@@ -1,8 +1,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
 import React from 'react';
@@ -25,9 +24,9 @@ export function LeaderboardHeaderPanel({
   children,
 }: LeaderboardHeaderPanelProps) {
   return (
-    <Stack mb={8}>
+    <Group direction="column" align="stretch" gap={8}>
       {onBack && (
-        <Stack mb={6}>
+        <Group>
           <Button
             variant="secondary"
             onClick={onBack}
@@ -35,34 +34,29 @@ export function LeaderboardHeaderPanel({
           >
             {backLabel}
           </Button>
-        </Stack>
+        </Group>
       )}
 
-      <Stack direction="row" align="center" justify="between" gap={4}>
-        <Stack direction="row" align="center" gap={4}>
+      <Group justify="between" gap={4}>
+        <Group gap={4}>
           {icon && (
-            <Surface 
-              variant="muted" 
-              rounded="xl" 
-              padding={3} 
-              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
-              border 
-              borderColor="border-primary-blue/20"
+            <Group 
+              justify="center"
             >
-              <Icon icon={icon} size={7} color="text-primary-blue" />
-            </Surface>
+              <Icon icon={icon} size={7} intent="primary" />
+            </Group>
           )}
-          <Stack>
+          <Group direction="column" align="start" gap={1}>
             <Heading level={1}>{title}</Heading>
             {description && (
-              <Text color="text-gray-400" block mt={1}>
+              <Text variant="low" block>
                 {description}
               </Text>
             )}
-          </Stack>
-        </Stack>
+          </Group>
+        </Group>
         {children}
-      </Stack>
-    </Stack>
+      </Group>
+    </Group>
   );
 }
diff --git a/apps/website/components/leaderboards/LeaderboardTable.tsx b/apps/website/components/leaderboards/LeaderboardTable.tsx
index 8e6e8f60f..f871636a6 100644
--- a/apps/website/components/leaderboards/LeaderboardTable.tsx
+++ b/apps/website/components/leaderboards/LeaderboardTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { RankingRow } from './RankingRow';
+import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
 
 interface LeaderboardDriver {
@@ -22,23 +22,17 @@ interface LeaderboardTableProps {
 }
 
 export function LeaderboardTable({ drivers, onDriverClick }: LeaderboardTableProps) {
-  const columns = [
-    { key: 'rank', label: 'Rank', width: '8rem' },
-    { key: 'driver', label: 'Driver' },
-    { key: 'races', label: 'Races', align: 'center' as const },
-    { key: 'rating', label: 'Rating', align: 'center' as const },
-    { key: 'wins', label: 'Wins', align: 'center' as const },
-  ];
-
   return (
-    <LeaderboardTableShell columns={columns}>
-      {drivers.map((driver) => (
-        <RankingRow
-          key={driver.id}
-          {...driver}
-          onClick={() => onDriverClick?.(driver.id)}
-        />
-      ))}
+    <LeaderboardTableShell>
+      <LeaderboardList>
+        {drivers.map((driver) => (
+          <RankingRow
+            key={driver.id}
+            {...driver}
+            onClick={() => onDriverClick?.(driver.id)}
+          />
+        ))}
+      </LeaderboardList>
     </LeaderboardTableShell>
   );
 }
diff --git a/apps/website/components/leaderboards/MedalBadge.tsx b/apps/website/components/leaderboards/MedalBadge.tsx
index e01758c96..7761d068b 100644
--- a/apps/website/components/leaderboards/MedalBadge.tsx
+++ b/apps/website/components/leaderboards/MedalBadge.tsx
@@ -1,38 +1,10 @@
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Crown } from 'lucide-react';
+import { RankMedal } from '@/ui/RankMedal';
+import React from 'react';
 
 interface MedalBadgeProps {
   position: number;
 }
 
 export function MedalBadge({ position }: MedalBadgeProps) {
-  const getMedalColor = (pos: number) => {
-    switch (pos) {
-      case 1: return 'var(--warning-amber)';
-      case 2: return 'var(--iron-gray)';
-      case 3: return 'var(--amber-600)';
-      default: return 'var(--charcoal-outline)';
-    }
-  };
-
-  const isMedal = position <= 3;
-
-  return (
-    <Stack 
-      h="10" 
-      w="10" 
-      align="center" 
-      justify="center" 
-      rounded="full" 
-      bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
-    >
-      {isMedal ? (
-        <Icon icon={Crown} size={5} color={getMedalColor(position)} />
-      ) : (
-        <Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
-      )}
-    </Stack>
-  );
+  return <RankMedal rank={position} size="md" />;
 }
diff --git a/apps/website/components/leaderboards/RankBadge.tsx b/apps/website/components/leaderboards/RankBadge.tsx
index 1a01c61bd..578f19d26 100644
--- a/apps/website/components/leaderboards/RankBadge.tsx
+++ b/apps/website/components/leaderboards/RankBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@/ui/Badge';
+import { RankMedal } from '@/ui/RankMedal';
 import { Text } from '@/ui/Text';
 import { Group } from '@/ui/Group';
 import React from 'react';
@@ -9,32 +9,15 @@ interface RankBadgeProps {
 }
 
 export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
-  const badgeSize = size === 'lg' ? 'md' : size;
-
-  const getVariant = (rank: number): 'warning' | 'primary' | 'info' | 'default' => {
-    if (rank <= 3) return 'warning';
-    if (rank <= 10) return 'primary';
-    if (rank <= 50) return 'info';
-    return 'default';
-  };
-
-  const getMedalEmoji = (rank: number) => {
-    switch (rank) {
-      case 1: return '🥇';
-      case 2: return '🥈';
-      case 3: return '🥉';
-      default: return null;
-    }
-  };
-
-  const medal = getMedalEmoji(rank);
+  if (rank <= 3) {
+    return <RankMedal rank={rank} size={size} />;
+  }
 
   return (
-    <Badge variant={getVariant(rank)} size={badgeSize}>
-      <Group gap={1}>
-        {medal && <Text size="xs">{medal}</Text>}
-        <Text size="xs" weight="bold">#{rank}</Text>
-      </Group>
-    </Badge>
+    <Group justify="center" align="center">
+      <Text size={size === 'lg' ? 'md' : 'xs'} weight="bold" variant="low">
+        #{rank}
+      </Text>
+    </Group>
   );
 }
diff --git a/apps/website/components/leaderboards/RankMedal.tsx b/apps/website/components/leaderboards/RankMedal.tsx
index 6f285ea00..a4588a70b 100644
--- a/apps/website/components/leaderboards/RankMedal.tsx
+++ b/apps/website/components/leaderboards/RankMedal.tsx
@@ -1,54 +1,18 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
-import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/Surface';
-import { Crown, Medal } from 'lucide-react';
+import { RankMedal as UiRankMedal, RankMedalProps } from '@/ui/RankMedal';
 import React from 'react';
 
-interface RankMedalProps {
-  rank: number;
-  size?: 'sm' | 'md' | 'lg';
-  showIcon?: boolean;
-}
-
-export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
-  const isTop3 = rank <= 3;
-  const variant = MedalDisplay.getVariant(rank);
-  
-  const sizePx = {
-    sm: '1.75rem',
-    md: '2rem',
-    lg: '2.5rem',
-  };
-
-  const textSizeMap = {
-    sm: 'xs',
-    md: 'xs',
-    lg: 'sm',
-  } as const;
-
-  const iconSize = {
-    sm: 3,
-    md: 3.5,
-    lg: 4.5,
-  };
+export function RankMedal(props: RankMedalProps) {
+  const variant = MedalDisplay.getVariant(props.rank);
+  const bg = MedalDisplay.getBg(props.rank);
+  const color = MedalDisplay.getColor(props.rank);
 
   return (
-    <Surface 
-      variant="muted"
-      rounded="full"
-      border
-      height={sizePx[size]}
-      width={sizePx[size]}
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      {isTop3 && showIcon ? (
-        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} intent={variant as any} />
-      ) : (
-        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
-      )}
-    </Surface>
+    <UiRankMedal 
+      {...props} 
+      variant={variant as any} 
+      bg={bg} 
+      color={color} 
+    />
   );
 }
diff --git a/apps/website/components/leaderboards/RankingRow.tsx b/apps/website/components/leaderboards/RankingRow.tsx
index 954bb27ae..0bab065be 100644
--- a/apps/website/components/leaderboards/RankingRow.tsx
+++ b/apps/website/components/leaderboards/RankingRow.tsx
@@ -1,10 +1,12 @@
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
-import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
-import { TableCell, TableRow } from '@/ui/Table';
+import { Avatar } from '@/ui/Avatar';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { DeltaChip } from './DeltaChip';
-import { RankMedal } from './RankMedal';
+import { RankBadge } from './RankBadge';
+import { LeaderboardRow } from '@/ui/LeaderboardRow';
+import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
+import React from 'react';
 
 interface RankingRowProps {
   id: string;
@@ -33,82 +35,69 @@ export function RankingRow({
   onClick,
 }: RankingRowProps) {
   return (
-    <TableRow
-      clickable={!!onClick}
+    <LeaderboardRow
       onClick={onClick}
-      group
-    >
-      <TableCell>
-        <Stack direction="row" align="center" gap={4}>
-          <Stack w="8" display="flex" justifyContent="center">
-            <RankMedal rank={rank} size="md" />
-          </Stack>
+      rank={
+        <Group gap={4}>
+          <RankBadge rank={rank} />
           {rankDelta !== undefined && (
-            <Stack w="10">
-              <DeltaChip value={rankDelta} type="rank" />
-            </Stack>
+            <DeltaChip value={rankDelta} type="rank" />
           )}
-        </Stack>
-      </TableCell>
-
-      <TableCell>
-        <Stack display="flex" alignItems="center" gap={3}>
-          <Stack 
-            position="relative" 
-            w="10" 
-            h="10" 
-            rounded="full" 
-            overflow="hidden" 
-            border 
-            borderColor="border-charcoal-outline"
-            groupHoverBorderColor="primary-blue/50"
-            transition
-          >
-            <Image 
-              src={avatarUrl} 
-              alt={name} 
-              width={40} 
-              height={40} 
-              fullWidth
-              fullHeight
-              objectFit="cover" 
-            />
-          </Stack>
-          <Stack minWidth="0">
+        </Group>
+      }
+      identity={
+        <Group gap={4}>
+          <Avatar 
+            src={avatarUrl} 
+            alt={name} 
+            size="md"
+          />
+          <Group direction="column" align="start" gap={0}>
             <Text 
-              weight="semibold" 
-              color="text-white" 
+              weight="bold" 
+              variant="high" 
               block 
               truncate
-              groupHoverTextColor="text-primary-blue"
-              transition
             >
               {name}
             </Text>
-            <Stack direction="row" align="center" gap={2} mt={0.5}>
-              <Text size="xs" color="text-gray-500">{nationality}</Text>
-              <Stack w="1" h="1" rounded="full" bg="bg-gray-700" />
-              <Text size="xs" color="text-gray-500">{skillLevel}</Text>
-            </Stack>
-          </Stack>
-        </Stack>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text color="text-gray-400" font="mono">{racesCompleted}</Text>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text font="mono" weight="bold" color="text-primary-blue">
-          {RatingDisplay.format(rating)}
-        </Text>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text font="mono" weight="bold" color="text-performance-green">
-          {wins}
-        </Text>
-      </TableCell>
-    </TableRow>
+            <Group gap={2}>
+              <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{nationality}</Text>
+              <Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(skillLevel)} uppercase letterSpacing="wider">
+                {SkillLevelDisplay.getLabel(skillLevel)}
+              </Text>
+            </Group>
+          </Group>
+        </Group>
+      }
+      stats={
+        <Group gap={8}>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="low" font="mono" weight="bold" block size="md">
+              {racesCompleted}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Races
+            </Text>
+          </Group>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="primary" font="mono" weight="bold" block size="md">
+              {RatingDisplay.format(rating)}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Rating
+            </Text>
+          </Group>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="success" font="mono" weight="bold" block size="md">
+              {wins}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Wins
+            </Text>
+          </Group>
+        </Group>
+      }
+    />
   );
 }
diff --git a/apps/website/components/leaderboards/RankingsPodium.tsx b/apps/website/components/leaderboards/RankingsPodium.tsx
index a6660e8fb..bc5853a98 100644
--- a/apps/website/components/leaderboards/RankingsPodium.tsx
+++ b/apps/website/components/leaderboards/RankingsPodium.tsx
@@ -1,8 +1,10 @@
-
-
-import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
+import { Avatar } from '@/ui/Avatar';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
+import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+import { Surface } from '@/ui/Surface';
+import React from 'react';
 
 interface PodiumDriver {
   id: string;
@@ -20,121 +22,67 @@ interface RankingsPodiumProps {
 
 export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
   return (
-    <Stack mb={10}>
-      <Stack display="flex" alignItems="end" justifyContent="center" gap={4}>
-        {[1, 0, 2].map((index) => {
-          const driver = podium[index];
-          if (!driver) return null;
-          
-          const position = index === 1 ? 1 : index === 0 ? 2 : 3;
-          const config = {
-            1: { height: '10rem', color: 'rgba(250, 204, 21, 0.2)', borderColor: 'rgba(250, 204, 21, 0.4)', crown: '#facc15' },
-            2: { height: '8rem', color: 'rgba(209, 213, 219, 0.2)', borderColor: 'rgba(209, 213, 219, 0.4)', crown: '#d1d5db' },
-            3: { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' },
-          }[position] || { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' };
+    <Group justify="center" align="end" gap={4}>
+      {[1, 0, 2].map((index) => {
+        const driver = podium[index];
+        if (!driver) return null;
+        
+        const position = index === 1 ? 1 : index === 0 ? 2 : 3;
+        const isFirst = position === 1;
+        
+        const config = {
+          1: { height: '10rem', variant: 'precision' },
+          2: { height: '8rem', variant: 'muted' },
+          3: { height: '6rem', variant: 'muted' },
+        }[position as 1 | 2 | 3];
 
-          return (
-            <Stack
-              key={driver.id}
-              as="button"
-              type="button"
-              onClick={() => onDriverClick?.(driver.id)}
-              display="flex"
-              flexDirection="col"
-              alignItems="center"
-              bg="transparent"
-              border={false}
-              cursor="pointer"
-            >
-              <Stack position="relative" mb={4}>
-                <Stack 
-                  position="relative" 
-                  w={position === 1 ? '24' : '20'} 
-                  h={position === 1 ? '24' : '20'} 
-                  rounded="full" 
-                  overflow="hidden" 
-                  border 
-                  borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
-                  style={{ borderWidth: '4px', boxShadow: position === 1 ? '0 0 30px rgba(250, 204, 21, 0.3)' : 'none' }}
-                >
-                  <Image
-                    src={driver.avatarUrl}
-                    alt={driver.name}
-                    width={112}
-                    height={112}
-                    objectFit="cover"
-                  />
-                </Stack>
-                <Stack 
-                  position="absolute" 
-                  bottom="-2" 
-                  left="50%" 
-                  w="8" 
-                  h="8" 
-                  rounded="full" 
-                  display="flex" 
-                  alignItems="center" 
-                  justifyContent="center" 
-                  border 
-                  weight="bold"
-                  size="sm"
-                  borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
-                  color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}
-                  style={{ 
-                    transform: 'translateX(-50%)',
-                    borderWidth: '2px', 
-                    background: `linear-gradient(to bottom right, ${config.color}, transparent)`
-                  }}
-                >
-                  {position}
-                </Stack>
-              </Stack>
-
-              <Text weight="semibold" color="text-white" size={position === 1 ? 'lg' : 'base'} mb={1} block>
-                {driver.name}
-              </Text>
-
-              <Text font="mono" weight="bold" size={position === 1 ? 'xl' : 'lg'} block color={position === 1 ? 'text-warning-amber' : 'text-primary-blue'}>
-                {driver.rating.toString()}
-              </Text>
-
-              <Stack direction="row" align="center" gap={2} mt={1}>
-                <Stack direction="row" align="center" gap={1}>
-                  <Text>🏆</Text>
-                  <Text color="text-gray-400">{driver.wins}</Text>
-                </Stack>
-                <Text color="text-gray-500">•</Text>
-                <Stack direction="row" align="center" gap={1}>
-                  <Text>🏅</Text>
-                  <Text color="text-gray-400">{driver.podiums}</Text>
-                </Stack>
-              </Stack>
-
-              <Stack 
-                mt={4} 
-                w={position === 1 ? '28' : '24'} 
-                h={config.height} 
-                rounded="lg" 
-                display="flex" 
-                alignItems="end" 
-                justifyContent="center" 
-                pb={4}
-                style={{ 
-                  borderRadius: '0.5rem 0.5rem 0 0', 
-                  background: `linear-gradient(to top, ${config.color}, transparent)`, 
-                  borderTop: `1px solid ${config.borderColor}`, 
-                  borderLeft: `1px solid ${config.borderColor}`, 
-                  borderRight: `1px solid ${config.borderColor}` 
-                }} 
+        return (
+          <Group
+            key={driver.id}
+            direction="column"
+            align="center"
+            gap={4}
+          >
+            <Group direction="column" align="center" gap={2}>
+              <Group 
+                justify="center" 
+                align="center"
               >
-                <Text weight="bold" size={position === 1 ? '4xl' : '3xl'} color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}>
-                  {position}
-                </Text>
-              </Stack>
-            </Stack>
-          );
-        })}
-      </Stack>
-    </Stack>
+                <Avatar 
+                  src={driver.avatarUrl} 
+                  alt={driver.name} 
+                  size={isFirst ? 'lg' : 'md'} 
+                />
+              </Group>
+              
+              <Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'}>{driver.name}</Text>
+              <Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
+                {RatingDisplay.format(driver.rating)}
+              </Text>
+            </Group>
+            
+            <Surface 
+              variant={config.variant as any}
+              rounded="lg"
+              style={{ 
+                width: '6rem', 
+                height: config.height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: '1px solid var(--ui-color-border-default)',
+                borderBottom: 'none',
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0
+              }}
+            >
+              <Text size="3xl" weight="bold" variant="low" opacity={0.2}>
+                {position}
+              </Text>
+            </Surface>
+          </Group>
+        );
+      })}
+    </Group>
   );
 }
diff --git a/apps/website/components/leaderboards/RankingsTable.tsx b/apps/website/components/leaderboards/RankingsTable.tsx
index fbc688e0c..0b5b41063 100644
--- a/apps/website/components/leaderboards/RankingsTable.tsx
+++ b/apps/website/components/leaderboards/RankingsTable.tsx
@@ -1,11 +1,9 @@
-
-
-import { Icon } from '@/ui/Icon';
-import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { Medal } from 'lucide-react';
+import { RankingRow } from './RankingRow';
+import { EmptyState } from '@/ui/EmptyState';
+import { Trophy } from 'lucide-react';
 
 interface Driver {
   id: string;
@@ -29,88 +27,34 @@ interface RankingsTableProps {
 export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
   if (drivers.length === 0) {
     return (
-      <Stack py={16} align="center" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="xl">
-        <Text color="text-gray-400" block mb={2}>No drivers found</Text>
-        <Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
-      </Stack>
+      <EmptyState
+        title="No drivers found"
+        description="There are no drivers in the system yet"
+        icon={Trophy}
+      />
     );
   }
 
   return (
-    <Stack rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden" gap={0}>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader className="text-center w-16">Rank</TableHeader>
-            <TableHeader>Driver</TableHeader>
-            <TableHeader className="text-center">Races</TableHeader>
-            <TableHeader className="text-center">Rating</TableHeader>
-            <TableHeader className="text-center">Wins</TableHeader>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {drivers.map((driver) => (
-            <TableRow
-              key={driver.id}
-              clickable
-              onClick={() => onDriverClick?.(driver.id)}
-            >
-              <TableCell className="text-center">
-                <Stack 
-                  direction="row"
-                  h="9" 
-                  w="9" 
-                  align="center" 
-                  justify="center" 
-                  rounded="full" 
-                  border 
-                  borderColor="border-charcoal-outline"
-                  bg={driver.medalBg}
-                  fontSize="sm"
-                  fontWeight="bold"
-                >
-                  {driver.rank <= 3 ? <Icon icon={Medal} size={4} color={driver.medalColor} /> : (
-                    <Text color={driver.medalColor}>{driver.rank}</Text>
-                  )}
-                </Stack>
-              </TableCell>
-
-              <TableCell>
-                <Stack direction="row" align="center" gap={3}>
-                  <Stack position="relative" w="10" h="10" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" gap={0}>
-                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} objectFit="cover" fullWidth fullHeight />
-                  </Stack>
-                  <Stack minWidth="0" gap={0}>
-                    <Text weight="semibold" color="text-white" block truncate>
-                      {driver.name}
-                    </Text>
-                    <Stack direction="row" align="center" gap={2} mt={1}>
-                      <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
-                      <Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
-                    </Stack>
-                  </Stack>
-                </Stack>
-              </TableCell>
-
-              <TableCell className="text-center">
-                <Text color="text-gray-400">{driver.racesCompleted}</Text>
-              </TableCell>
-
-              <TableCell className="text-center">
-                <Text font="mono" weight="semibold" color="text-white">
-                  {driver.rating.toString()}
-                </Text>
-              </TableCell>
-
-              <TableCell className="text-center">
-                <Text font="mono" weight="semibold" color="text-performance-green">
-                  {driver.wins}
-                </Text>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Stack>
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader className="text-center w-16">Rank</TableHeader>
+          <TableHeader>Driver</TableHeader>
+          <TableHeader className="text-center">Races</TableHeader>
+          <TableHeader className="text-center">Rating</TableHeader>
+          <TableHeader className="text-center">Wins</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {drivers.map((driver) => (
+          <RankingRow
+            key={driver.id}
+            {...driver}
+            onClick={() => onDriverClick?.(driver.id)}
+          />
+        ))}
+      </TableBody>
+    </Table>
   );
 }
diff --git a/apps/website/components/leaderboards/SeasonSelector.tsx b/apps/website/components/leaderboards/SeasonSelector.tsx
index f03c9c581..b5afad31f 100644
--- a/apps/website/components/leaderboards/SeasonSelector.tsx
+++ b/apps/website/components/leaderboards/SeasonSelector.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Icon } from '@/ui/Icon';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
@@ -23,19 +23,18 @@ export function SeasonSelector({ seasons, selectedSeasonId, onSeasonChange }: Se
   }));
 
   return (
-    <Box display="flex" alignItems="center" gap={3}>
-      <Box display="flex" alignItems="center" gap={2} color="text-gray-500">
-        <Icon icon={Calendar} size={4} />
-        <Text size="xs" weight="bold" uppercase letterSpacing="wider">Season</Text>
-      </Box>
-      <Box width="48">
+    <Group gap={3}>
+      <Group gap={2}>
+        <Icon icon={Calendar} size={4} intent="low" />
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider" variant="low">Season</Text>
+      </Group>
+      <Group>
         <Select
           options={options}
           value={selectedSeasonId}
           onChange={(e) => onSeasonChange(e.target.value)}
-          fullWidth={true}
         />
-      </Box>
-    </Box>
+      </Group>
+    </Group>
   );
 }
diff --git a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
index caab23391..1653c8514 100644
--- a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
@@ -1,10 +1,11 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { getMediaUrl } from '@/lib/utilities/media';
-import { Box } from '@/ui/Box';
+import { Avatar } from '@/ui/Avatar';
 import { Icon } from '@/ui/Icon';
-import { Image } from '@/ui/Image';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
+import { LeaderboardRow } from '@/ui/LeaderboardRow';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
@@ -43,83 +44,57 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
           const position = team.position;
 
           return (
-            <Box
+            <LeaderboardRow
               key={team.id}
-              as="button"
-              type="button"
               onClick={() => onTeamClick(team.id)}
-              display="flex"
-              alignItems="center"
-              gap={4}
-              px={5}
-              py={3}
-              w="full"
-              textAlign="left"
-              transition
-              hoverBg="bg-white/[0.02]"
-              group
-            >
-              <Box w="8" display="flex" justifyContent="center">
-                <RankBadge rank={position} />
-              </Box>
-
-              <Box 
-                display="flex" 
-                h="9" 
-                w="9" 
-                alignItems="center" 
-                justifyContent="center" 
-                rounded="lg" 
-                bg="bg-graphite-black/50" 
-                border 
-                borderColor="border-charcoal-outline" 
-                overflow="hidden" 
-                groupHoverBorderColor="primary-blue/50" 
-                transition
-              >
-                <Image
-                  src={team.logoUrl || getMediaUrl('team-logo', team.id)}
-                  alt={team.name}
-                  width={36}
-                  height={36}
-                  fullWidth
-                  fullHeight
-                  objectFit="cover"
-                />
-              </Box>
-
-              <Box flexGrow={1} minWidth="0">
-                <Text 
-                  weight="semibold" 
-                  color="text-white" 
-                  truncate 
-                  groupHoverTextColor="text-primary-blue" 
-                  transition 
-                  block
-                >
-                  {team.name}
-                </Text>
-                <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
-                  <Text size="xs" variant="low" uppercase font="mono">{team.performanceLevel}</Text>
-                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
-                  <Box display="flex" alignItems="center" gap={1}>
-                    <Icon icon={Users} size={3} color="text-gray-500" />
-                    <Text size="xs" color="text-gray-500">{team.memberCount}</Text>
-                  </Box>
-                </Box>
-              </Box>
-
-              <Box display="flex" alignItems="center" gap={6}>
-                <Box textAlign="right">
-                  <Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{team.rating?.toFixed(0) || '1000'}</Text>
-                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
-                </Box>
-                <Box textAlign="right" minWidth="12">
-                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>
-                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
-                </Box>
-              </Box>
-            </Box>
+              rank={<RankBadge rank={position} />}
+              identity={
+                <Group gap={4}>
+                  <Avatar 
+                    src={team.logoUrl || getMediaUrl('team-logo', team.id)} 
+                    alt={team.name} 
+                    size="sm" 
+                  />
+                  <Group direction="column" align="start" gap={0}>
+                    <Text 
+                      weight="bold" 
+                      variant="high"
+                      truncate 
+                      block
+                    >
+                      {team.name}
+                    </Text>
+                    <Group gap={2} wrap>
+                      <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider" font="mono">{team.performanceLevel}</Text>
+                      <Group gap={1}>
+                        <Icon icon={Users} size={3} intent="low" />
+                        <Text size="xs" variant="low" weight="bold">{team.memberCount}</Text>
+                      </Group>
+                    </Group>
+                  </Group>
+                </Group>
+              }
+              stats={
+                <Group gap={8}>
+                  <Group direction="column" align="end" gap={0}>
+                    <Text variant="primary" font="mono" weight="bold" block size="md" align="right">
+                      {team.rating?.toFixed(0) || '1000'}
+                    </Text>
+                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
+                      Rating
+                    </Text>
+                  </Group>
+                  <Group direction="column" align="end" gap={0}>
+                    <Text variant="success" font="mono" weight="bold" block size="md" align="right">
+                      {team.totalWins}
+                    </Text>
+                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
+                      Wins
+                    </Text>
+                  </Group>
+                </Group>
+              }
+            />
           );
         })}
       </LeaderboardList>
diff --git a/apps/website/components/leaderboards/TeamLeaderboardTable.tsx b/apps/website/components/leaderboards/TeamLeaderboardTable.tsx
index 27e958d6a..aaa54e339 100644
--- a/apps/website/components/leaderboards/TeamLeaderboardTable.tsx
+++ b/apps/website/components/leaderboards/TeamLeaderboardTable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { TeamRankingRow } from './TeamRankingRow';
+import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
 
 interface LeaderboardTeam {
@@ -19,30 +20,24 @@ interface TeamLeaderboardTableProps {
 }
 
 export function TeamLeaderboardTable({ teams, onTeamClick }: TeamLeaderboardTableProps) {
-  const columns = [
-    { key: 'rank', label: 'Rank', width: '8rem' },
-    { key: 'team', label: 'Team' },
-    { key: 'rating', label: 'Rating', align: 'center' as const },
-    { key: 'wins', label: 'Wins', align: 'center' as const },
-    { key: 'races', label: 'Races', align: 'center' as const },
-  ];
-
   return (
-    <LeaderboardTableShell columns={columns}>
-      {teams.map((team) => (
-        <TeamRankingRow
-          key={team.id}
-          rank={team.position}
-          id={team.id}
-          name={team.name}
-          logoUrl={team.logoUrl}
-          rating={team.rating}
-          wins={team.totalWins}
-          races={team.totalRaces}
-          memberCount={team.memberCount}
-          onClick={() => onTeamClick?.(team.id)}
-        />
-      ))}
+    <LeaderboardTableShell>
+      <LeaderboardList>
+        {teams.map((team) => (
+          <TeamRankingRow
+            key={team.id}
+            rank={team.position}
+            id={team.id}
+            name={team.name}
+            logoUrl={team.logoUrl}
+            rating={team.rating}
+            wins={team.totalWins}
+            races={team.totalRaces}
+            memberCount={team.memberCount}
+            onClick={() => onTeamClick?.(team.id)}
+          />
+        ))}
+      </LeaderboardList>
     </LeaderboardTableShell>
   );
 }
diff --git a/apps/website/components/leaderboards/TeamRankingRow.tsx b/apps/website/components/leaderboards/TeamRankingRow.tsx
index c67dccc18..1ac7432ec 100644
--- a/apps/website/components/leaderboards/TeamRankingRow.tsx
+++ b/apps/website/components/leaderboards/TeamRankingRow.tsx
@@ -1,12 +1,9 @@
 import { getMediaUrl } from '@/lib/utilities/media';
-import { Image } from '@/ui/Image';
-import { TableCell, TableRow } from '@/ui/Table';
+import { Avatar } from '@/ui/Avatar';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
 import { Group } from '@/ui/Group';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
-import { RankMedal } from './RankMedal';
+import { RankBadge } from './RankBadge';
+import { LeaderboardRow } from '@/ui/LeaderboardRow';
 import React from 'react';
 
 interface TeamRankingRowProps {
@@ -33,66 +30,59 @@ export function TeamRankingRow({
   onClick,
 }: TeamRankingRowProps) {
   return (
-    <TableRow
-      clickable={!!onClick}
+    <LeaderboardRow
       onClick={onClick}
-    >
-      <TableCell>
-        <Box width="2rem" display="flex" justifyContent="center">
-          <RankMedal rank={rank} size="md" />
-        </Box>
-      </TableCell>
-
-      <TableCell>
-        <Group gap={3}>
-          <Surface 
-            position="relative" 
-            width="2.5rem" 
-            height="2.5rem" 
-            rounded="md" 
-            overflow="hidden" 
-            border 
-            variant="muted"
-          >
-            <Image 
-              src={logoUrl || getMediaUrl('team-logo', id)} 
-              alt={name} 
-              width={40} 
-              height={40} 
-              objectFit="cover" 
-            />
-          </Surface>
-          <Stack gap={0} flex={1} minWidth="0">
+      rank={<RankBadge rank={rank} />}
+      identity={
+        <Group gap={4}>
+          <Avatar 
+            src={logoUrl || getMediaUrl('team-logo', id)} 
+            alt={name} 
+            size="md"
+          />
+          <Group direction="column" align="start" gap={0}>
             <Text 
-              weight="semibold" 
+              weight="bold" 
               variant="high" 
               block 
               truncate
             >
               {name}
             </Text>
-            <Text size="xs" variant="low" block>
+            <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">
               {memberCount} Members
             </Text>
-          </Stack>
+          </Group>
         </Group>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text font="mono" weight="bold" variant="primary">
-          {rating}
-        </Text>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text font="mono" weight="bold" variant="success">
-          {wins}
-        </Text>
-      </TableCell>
-
-      <TableCell textAlign="center">
-        <Text variant="low" font="mono">{races}</Text>
-      </TableCell>
-    </TableRow>
+      }
+      stats={
+        <Group gap={8}>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="low" font="mono" weight="bold" block size="md">
+              {races}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Races
+            </Text>
+          </Group>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="primary" font="mono" weight="bold" block size="md">
+              {rating}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Rating
+            </Text>
+          </Group>
+          <Group direction="column" align="end" gap={0}>
+            <Text variant="success" font="mono" weight="bold" block size="md">
+              {wins}
+            </Text>
+            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
+              Wins
+            </Text>
+          </Group>
+        </Group>
+      }
+    />
   );
 }
diff --git a/apps/website/lib/builders/view-data/LeaderboardsViewDataBuilder.ts b/apps/website/lib/builders/view-data/LeaderboardsViewDataBuilder.ts
index b00795ee2..371bf49e7 100644
--- a/apps/website/lib/builders/view-data/LeaderboardsViewDataBuilder.ts
+++ b/apps/website/lib/builders/view-data/LeaderboardsViewDataBuilder.ts
@@ -7,13 +7,15 @@ export class LeaderboardsViewDataBuilder {
     apiDto: { drivers: { drivers: DriverLeaderboardItemDTO[] }; teams: GetTeamsLeaderboardOutputDTO }
   ): LeaderboardsViewData {
     return {
-      drivers: apiDto.drivers.drivers.slice(0, 10).map(driver => ({
+      drivers: apiDto.drivers.drivers.map(driver => ({
         id: driver.id,
         name: driver.name,
         rating: driver.rating,
         skillLevel: driver.skillLevel,
         nationality: driver.nationality,
         wins: driver.wins,
+        podiums: driver.podiums,
+        racesCompleted: driver.racesCompleted,
         rank: driver.rank,
         avatarUrl: driver.avatarUrl || '',
         position: driver.rank,
@@ -25,6 +27,7 @@ export class LeaderboardsViewDataBuilder {
         memberCount: team.memberCount,
         category: undefined,
         totalWins: team.totalWins || 0,
+        totalRaces: team.totalRaces || 0,
         logoUrl: team.logoUrl || '',
         position: index + 1,
         isRecruiting: team.isRecruiting,
diff --git a/apps/website/lib/routing/RouteConfig.ts b/apps/website/lib/routing/RouteConfig.ts
index 3c32fb02b..12192f31b 100644
--- a/apps/website/lib/routing/RouteConfig.ts
+++ b/apps/website/lib/routing/RouteConfig.ts
@@ -252,6 +252,8 @@ export const routeMatchers = {
       routes.public.drivers,
       routes.public.teams,
       routes.public.leaderboards,
+      routes.leaderboards.drivers,
+      routes.leaderboards.teams,
       routes.public.races,
       routes.public.sponsorSignup,
       routes.auth.login,
diff --git a/apps/website/lib/view-data/LeaderboardDriverItem.ts b/apps/website/lib/view-data/LeaderboardDriverItem.ts
index 51cfd02a7..e89a9239a 100644
--- a/apps/website/lib/view-data/LeaderboardDriverItem.ts
+++ b/apps/website/lib/view-data/LeaderboardDriverItem.ts
@@ -5,7 +5,9 @@ export interface LeaderboardDriverItem {
   skillLevel: string;
   nationality: string;
   wins: number;
+  podiums: number;
+  racesCompleted: number;
   rank: number;
   avatarUrl: string;
   position: number;
-}
\ No newline at end of file
+}
diff --git a/apps/website/lib/view-data/LeaderboardTeamItem.ts b/apps/website/lib/view-data/LeaderboardTeamItem.ts
index bd670e668..3d38e48f4 100644
--- a/apps/website/lib/view-data/LeaderboardTeamItem.ts
+++ b/apps/website/lib/view-data/LeaderboardTeamItem.ts
@@ -5,7 +5,7 @@ export interface LeaderboardTeamItem {
   memberCount: number;
   category?: string;
   totalWins: number;
-  totalRaces?: number;
+  totalRaces: number;
   logoUrl: string;
   position: number;
   isRecruiting: boolean;
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
index 4814f6092..7cde56287 100644
--- a/apps/website/tailwind.config.js
+++ b/apps/website/tailwind.config.js
@@ -46,4 +46,23 @@ module.exports = {
     },
   },
   plugins: [],
+  safelist: [
+    {
+      pattern: /^(grid-cols|gap|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr)-/,
+      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    {
+      pattern: /^(w|h|max-w|min-w|max-h|min-h)-/,
+      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    {
+      pattern: /^(flex|items|justify|self)-/,
+      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    'grid',
+    'flex',
+    'block',
+    'inline-block',
+    'none',
+  ],
 }
diff --git a/apps/website/templates/LeaderboardsTemplate.tsx b/apps/website/templates/LeaderboardsTemplate.tsx
index 6cbbd38ad..a01db7d54 100644
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -1,11 +1,14 @@
-'use client';
-
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 import { Section } from '@/ui/Section';
-import { PageHero } from '@/ui/PageHero';
+import { PageHeader } from '@/ui/PageHeader';
 import { FeatureGrid } from '@/ui/FeatureGrid';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
 import { Trophy, Users, Activity } from 'lucide-react';
 import React from 'react';
 
@@ -24,43 +27,86 @@ export function LeaderboardsTemplate({
   onNavigateToDrivers,
   onNavigateToTeams
 }: LeaderboardsTemplateProps) {
-  return (
-    <Section variant="default" padding="lg">
-      <PageHero
-        title="Global Standings"
-        description="Performance metrics for drivers and teams. Rankings are calculated based on competitive results and consistency across all events."
-        icon={Activity}
-        actions={[
-          {
-            label: 'Driver Rankings',
-            onClick: onNavigateToDrivers,
-            icon: Trophy,
-            variant: 'primary'
-          },
-          {
-            label: 'Team Standings',
-            onClick: onNavigateToTeams,
-            icon: Users,
-            variant: 'secondary'
-          }
-        ]}
-      />
+  const top10Drivers = viewData.drivers.slice(0, 10);
+  const top5Teams = viewData.teams.slice(0, 5);
+  
+  // Newcomers: less than 10 races, sorted by rating
+  const topNewcomers = [...viewData.drivers]
+    .filter(d => d.racesCompleted < 10)
+    .sort((a, b) => b.rating - a.rating)
+    .slice(0, 5);
+    
+  // All time: sorted by wins
+  const topAllTime = [...viewData.drivers]
+    .sort((a, b) => b.wins - a.wins)
+    .slice(0, 5);
 
-      <FeatureGrid columns={{ base: 1, lg: 2 }} gap={8}>
-        <DriverLeaderboardPreview 
-          drivers={viewData.drivers} 
-          onDriverClick={onDriverClick} 
-          onNavigateToDrivers={onNavigateToDrivers} 
-        />
-        <TeamLeaderboardPreview 
-          teams={viewData.teams.map(t => ({
-            ...t,
-            logoUrl: t.logoUrl || ''
-          }))} 
-          onTeamClick={onTeamClick} 
-          onNavigateToTeams={onNavigateToTeams} 
-        />
-      </FeatureGrid>
+  return (
+    <Section variant="default" padding="none" py={12}>
+      <Container size="full" padding="lg">
+        <Stack gap={16}>
+          <PageHeader
+            title="Leaderboards"
+            description="Global Performance Standings"
+            icon={Activity}
+            action={
+              <Group gap={4}>
+                <Button
+                  variant="secondary"
+                  onClick={onNavigateToDrivers}
+                  icon={<Icon icon={Trophy} size={4} />}
+                >
+                  Drivers
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={onNavigateToTeams}
+                  icon={<Icon icon={Users} size={4} />}
+                >
+                  Teams
+                </Button>
+              </Group>
+            }
+          />
+
+          {/* Top 10 2026 up top */}
+          <DriverLeaderboardPreview 
+            title="Top 10 Drivers 2026"
+            subtitle="Current Season Standings"
+            drivers={top10Drivers} 
+            onDriverClick={onDriverClick} 
+            onNavigateToDrivers={onNavigateToDrivers} 
+          />
+
+          <FeatureGrid columns={{ base: 1, lg: 2 }} gap={12}>
+            <TeamLeaderboardPreview 
+              teams={top5Teams.map(t => ({
+                ...t,
+                logoUrl: t.logoUrl || ''
+              }))} 
+              onTeamClick={onTeamClick} 
+              onNavigateToTeams={onNavigateToTeams} 
+            />
+            
+            <Stack gap={12}>
+              <DriverLeaderboardPreview 
+                title="Top Newcomers"
+                subtitle="Rising Stars (< 10 Races)"
+                drivers={topNewcomers} 
+                onDriverClick={onDriverClick} 
+                onNavigateToDrivers={onNavigateToDrivers} 
+              />
+              <DriverLeaderboardPreview 
+                title="Top All Time"
+                subtitle="Most Wins"
+                drivers={topAllTime} 
+                onDriverClick={onDriverClick} 
+                onNavigateToDrivers={onNavigateToDrivers} 
+              />
+            </Stack>
+          </FeatureGrid>
+        </Stack>
+      </Container>
     </Section>
   );
 }
diff --git a/apps/website/ui/FeatureGrid.tsx b/apps/website/ui/FeatureGrid.tsx
index 20b7a0d85..51fca86f9 100644
--- a/apps/website/ui/FeatureGrid.tsx
+++ b/apps/website/ui/FeatureGrid.tsx
@@ -3,7 +3,7 @@ import { Grid } from './Grid';
 
 interface FeatureGridProps {
   children: ReactNode;
-  columns?: number | { base: number; md?: number; lg?: number };
+  columns?: number | { base: number; md?: number; lg?: number; xl?: number };
   gap?: number;
 }
 
diff --git a/apps/website/ui/LeaderboardList.tsx b/apps/website/ui/LeaderboardList.tsx
index 8a2529f0c..053b7ff5e 100644
--- a/apps/website/ui/LeaderboardList.tsx
+++ b/apps/website/ui/LeaderboardList.tsx
@@ -8,11 +8,9 @@ export interface LeaderboardListProps {
 
 export const LeaderboardList = ({ children }: LeaderboardListProps) => {
   return (
-    <Surface variant="muted" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
-      <Box display="flex" flexDirection="col">
-        {children}
-      </Box>
-    </Surface>
+    <Box display="flex" flexDirection="col">
+      {children}
+    </Box>
   );
 };
 
diff --git a/apps/website/ui/LeaderboardPreviewShell.tsx b/apps/website/ui/LeaderboardPreviewShell.tsx
index 3f72c20dd..4a0dbc1e2 100644
--- a/apps/website/ui/LeaderboardPreviewShell.tsx
+++ b/apps/website/ui/LeaderboardPreviewShell.tsx
@@ -32,19 +32,19 @@ export const LeaderboardPreviewShell = ({
   viewFullLabel
 }: LeaderboardPreviewShellProps) => {
   return (
-    <Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
-      <Box padding={6} borderBottom>
-        <Box display="flex" alignItems="center" justifyContent="between" marginBottom={4}>
-          <Box display="flex" alignItems="center" gap={4}>
-            <Box padding={2} rounded="lg" bg={iconBgGradient || "var(--ui-color-bg-surface-muted)"} style={iconColor ? { color: iconColor } : undefined}>
-              <Icon icon={icon} size={5} intent={iconColor ? undefined : intent} />
+    <Surface variant="precision" rounded="xl" style={{ overflow: 'hidden' }}>
+      <Box padding={6} borderBottom borderColor="var(--ui-color-border-muted)">
+        <Box display="flex" alignItems="center" justifyContent="between" marginBottom={6}>
+          <Box display="flex" alignItems="center" gap={5}>
+            <Box padding={3} rounded="xl" bg={iconBgGradient || "var(--ui-color-bg-surface-muted)"} style={iconColor ? { color: iconColor } : undefined}>
+              <Icon icon={icon} size={6} intent={iconColor ? undefined : intent} />
             </Box>
             <Box>
-              <Text size="lg" weight="bold" variant="high" block>
+              <Text size="xl" weight="bold" variant="high" block>
                 {title}
               </Text>
               {subtitle && (
-                <Text size="sm" variant="low">
+                <Text size="sm" variant="low" uppercase weight="bold" letterSpacing="widest">
                   {subtitle}
                 </Text>
               )}
@@ -63,7 +63,7 @@ export const LeaderboardPreviewShell = ({
       </Box>
       
       {footer && (
-        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+        <Box padding={4} borderTop borderColor="var(--ui-color-border-muted)" bg="rgba(255,255,255,0.02)">
           {footer}
         </Box>
       )}
diff --git a/apps/website/ui/LeaderboardRow.tsx b/apps/website/ui/LeaderboardRow.tsx
new file mode 100644
index 000000000..b6cfd2c80
--- /dev/null
+++ b/apps/website/ui/LeaderboardRow.tsx
@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Group } from './Group';
+
+export interface LeaderboardRowProps {
+  rank: ReactNode;
+  identity: ReactNode;
+  stats: ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * LeaderboardRow is a semantic UI component for displaying an entry in a leaderboard.
+ * It follows the "Modern Precision" theme with obsessive detail.
+ */
+export const LeaderboardRow = ({ 
+  rank, 
+  identity, 
+  stats, 
+  onClick 
+}: LeaderboardRowProps) => {
+  return (
+    <Surface
+      as={onClick ? 'button' : 'div'}
+      variant="precision"
+      onClick={onClick}
+      padding="none"
+      cursor={onClick ? 'pointer' : 'default'}
+      width="full"
+      textAlign="left"
+      transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+      hoverBg="rgba(25, 140, 255, 0.04)"
+      display="block"
+      style={{ 
+        border: 'none', 
+        borderBottom: '1px solid var(--ui-color-border-muted)',
+        background: 'transparent',
+        position: 'relative'
+      }}
+      className="group"
+    >
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={6} 
+        paddingX={6} 
+        paddingY={4}
+        className="transition-transform duration-200 group-hover:translate-x-1"
+      >
+        <Box width="10" display="flex" justifyContent="center" flexShrink={0}>
+          {rank}
+        </Box>
+        
+        <Box flexGrow={1} minWidth="0">
+          {identity}
+        </Box>
+        
+        <Group gap={8}>
+          {stats}
+        </Group>
+      </Box>
+      
+      {/* Hover indicator */}
+      <Box 
+        position="absolute" 
+        left={0} 
+        top={0} 
+        bottom={0} 
+        width={1} 
+        bg="var(--ui-color-intent-primary)" 
+        className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      />
+    </Surface>
+  );
+};
diff --git a/apps/website/ui/LeaderboardTableShell.tsx b/apps/website/ui/LeaderboardTableShell.tsx
index f7856a8e2..0468a8710 100644
--- a/apps/website/ui/LeaderboardTableShell.tsx
+++ b/apps/website/ui/LeaderboardTableShell.tsx
@@ -9,7 +9,7 @@ export interface LeaderboardTableShellProps {
 
 export const LeaderboardTableShell = ({ children, columns }: LeaderboardTableShellProps) => {
   return (
-    <Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+    <Surface variant="precision" rounded="xl" style={{ overflow: 'hidden' }} marginBottom={8}>
       <Box>
         {children}
       </Box>
diff --git a/apps/website/ui/NavLink.tsx b/apps/website/ui/NavLink.tsx
index 54a775c9b..b26f1a339 100644
--- a/apps/website/ui/NavLink.tsx
+++ b/apps/website/ui/NavLink.tsx
@@ -1,7 +1,6 @@
 import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import Link from 'next/link';
 import { LucideIcon, ChevronRight } from 'lucide-react';
 
 interface NavLinkProps {
@@ -14,7 +13,7 @@ interface NavLinkProps {
   LinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; className?: string }>;
 }
 
-export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent = Link as any }: NavLinkProps) {
+export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent }: NavLinkProps) {
   const isTop = variant === 'top';
 
   // Radical "Game Menu" Style
@@ -72,12 +71,23 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
     </Box>
   );
 
+  if (LinkComponent) {
+    return (
+      <LinkComponent 
+        href={href} 
+        className={`w-full group block ${!isTop ? '' : ''}`}
+      >
+        {content}
+      </LinkComponent>
+    );
+  }
+
   return (
-    <LinkComponent 
+    <a 
       href={href} 
       className={`w-full group block ${!isTop ? '' : ''}`}
     >
       {content}
-    </LinkComponent>
+    </a>
   );
 }
diff --git a/apps/website/ui/PageHeader.tsx b/apps/website/ui/PageHeader.tsx
index f819eb016..f3c276d77 100644
--- a/apps/website/ui/PageHeader.tsx
+++ b/apps/website/ui/PageHeader.tsx
@@ -13,12 +13,14 @@ interface PageHeaderProps {
   title: string;
   description?: string;
   action?: React.ReactNode;
+  icon?: LucideIcon;
 }
 
 export function PageHeader({ 
   title, 
   description,
   action,
+  icon,
 }: PageHeaderProps) {
   return (
     <Box 
@@ -33,7 +35,11 @@ export function PageHeader({
     >
       <Box>
         <Box display="flex" alignItems="center" gap={3} marginBottom={2}>
-          <Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
+          {icon ? (
+            <Icon icon={icon} size={8} intent="primary" />
+          ) : (
+            <Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
+          )}
           <Heading level={1} weight="bold" uppercase>{title}</Heading>
         </Box>
         {description && (
diff --git a/apps/website/ui/RankMedal.tsx b/apps/website/ui/RankMedal.tsx
new file mode 100644
index 000000000..fb2d63c8d
--- /dev/null
+++ b/apps/website/ui/RankMedal.tsx
@@ -0,0 +1,70 @@
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { Surface } from './Surface';
+import { Crown, Medal } from 'lucide-react';
+import React from 'react';
+
+export interface RankMedalProps {
+  rank: number;
+  size?: 'sm' | 'md' | 'lg';
+  showIcon?: boolean;
+  variant?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'default';
+  bg?: string;
+  color?: string;
+}
+
+/**
+ * RankMedal is a semantic UI component for displaying a rank with a medal icon or number.
+ * It follows the "Modern Precision" theme.
+ */
+export const RankMedal = ({ 
+  rank, 
+  size = 'md', 
+  showIcon = true,
+  variant,
+  bg,
+  color
+}: RankMedalProps) => {
+  const isTop3 = rank <= 3;
+  
+  const sizePx = {
+    sm: '1.75rem',
+    md: '2rem',
+    lg: '2.5rem',
+  };
+
+  const textSizeMap = {
+    sm: 'xs',
+    md: 'xs',
+    lg: 'sm',
+  } as const;
+
+  const iconSize = {
+    sm: 3,
+    md: 3.5,
+    lg: 4.5,
+  };
+
+  return (
+    <Surface 
+      variant="muted"
+      rounded="full"
+      style={{ 
+        height: sizePx[size],
+        width: sizePx[size],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid var(--ui-color-border-default)',
+        backgroundColor: bg,
+        color: color
+      }}
+    >
+      {isTop3 && showIcon ? (
+        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size] as any} intent={variant as any} />
+      ) : (
+        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
+      )}
+    </Surface>
+  );
+};
diff --git a/apps/website/ui/Table.tsx b/apps/website/ui/Table.tsx
index b6e3f18ee..2b168ccd9 100644
--- a/apps/website/ui/Table.tsx
+++ b/apps/website/ui/Table.tsx
@@ -73,8 +73,11 @@ export const TableHeaderCell = ({ children, textAlign, w, className }: TableHead
   const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
   return (
     <th 
-      className={`px-4 py-3 text-xs font-bold uppercase tracking-wider text-[var(--ui-color-text-low)] ${alignClass} ${className || ''}`}
-      style={w ? { width: w } : undefined}
+      className={`px-6 py-4 text-[10px] font-bold uppercase tracking-[0.15em] text-[var(--ui-color-text-low)] border-b border-[var(--ui-color-border-muted)] ${alignClass} ${className || ''}`}
+      style={{
+        width: w,
+        background: 'rgba(255, 255, 255, 0.01)'
+      }}
     >
       {children}
     </th>
@@ -96,7 +99,7 @@ export const TableCell = ({ children, textAlign, className, py, colSpan, w, posi
   const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
   return (
     <td 
-      className={`px-4 py-3 text-sm text-[var(--ui-color-text-high)] ${alignClass} ${className || ''}`}
+      className={`px-6 py-4 text-sm text-[var(--ui-color-text-high)] ${alignClass} ${className || ''}`}
       colSpan={colSpan}
       style={{
         ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),