From ce7be3915548eb517fd9b72d03e5d6ab4b4bf878 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 15 Jan 2026 19:55:46 +0100
Subject: [PATCH] website refactor

---
 apps/website/app/layout.tsx                   |  2 +-
 apps/website/app/leagues/LeaguesClient.tsx    |  2 +-
 .../[id]/stewarding/StewardingTemplate.tsx    |  2 +-
 .../stewarding/protests/[protestId]/page.tsx  |  2 +-
 apps/website/app/sponsor/signup/page.tsx      |  2 +-
 .../achievements}/AchievementGrid.tsx         |  0
 .../components/auth/AuthWorkflowMockup.tsx    |  2 +-
 .../dashboard}/DashboardHeroWrapper.tsx       |  0
 .../dashboard}/QuickActions.tsx               |  6 +-
 .../dev}/DebugModeToggle.tsx                  | 10 +--
 .../{ui => components/drivers}/DriverCard.tsx |  2 +-
 .../drivers}/DriverEntryRow.tsx               | 12 ++--
 .../drivers}/DriverIdentity.tsx               | 14 ++--
 .../components/drivers/DriverProfile.tsx      |  4 +-
 .../drivers}/DriverRankings.tsx               |  6 +-
 .../drivers}/DriverSummaryPillWrapper.tsx     |  0
 .../drivers}/FeaturedDriverCard.tsx           |  0
 .../drivers}/ProfileHeader.tsx                |  0
 .../drivers}/ProfileHero.tsx                  |  1 +
 .../components/drivers/ProfileRaceHistory.tsx |  4 +-
 .../components/errors/ApiErrorBoundary.tsx    |  2 +-
 .../errors/EnhancedErrorBoundary.tsx          |  2 +-
 .../components/errors/ErrorDisplay.tsx        |  2 +-
 .../{ui => components/feed}/ActivityFeed.tsx  |  4 +-
 .../feed}/ActivityFeedItem.tsx                |  5 +-
 .../feed}/ActivityFeedList.tsx                |  2 +-
 .../{ui => components/feed}/FeedLayout.tsx    |  6 +-
 .../{ui => components/feed}/FeedList.tsx      |  0
 .../feed}/RecentActivity.tsx                  |  0
 .../landing}/AlternatingSection.tsx           |  0
 .../landing}/BenefitCard.tsx                  | 10 +--
 .../landing}/FeatureGrid.tsx                  |  4 +-
 .../landing}/LandingHero.tsx                  |  6 +-
 .../landing}/LandingItems.tsx                 |  0
 .../layout}/HeaderContent.tsx                 |  2 +-
 .../leaderboards}/LeaderboardItem.tsx         | 10 +--
 .../leaderboards}/LeaderboardPreview.tsx      |  2 +-
 .../leaderboards}/RankingList.tsx             |  2 +-
 .../leaderboards}/RankingListItem.tsx         |  6 +-
 .../leagues}/ChampionshipStandings.tsx        |  2 +-
 .../leagues}/ChampionshipStandingsList.tsx    |  2 +-
 .../website/components/leagues/EmptyState.tsx |  2 +-
 .../components/leagues/LeagueActivityFeed.tsx |  2 +-
 .../leagues}/LeagueCardWrapper.tsx            |  0
 .../leagues}/LeagueMemberRow.tsx              | 12 ++--
 .../components/leagues/LeagueMembers.tsx      |  4 +-
 .../leagues/LeagueOwnershipTransfer.tsx       |  2 +-
 .../components/leagues/LeagueSchedule.tsx     |  2 +-
 .../leagues}/LeagueSummaryCardWrapper.tsx     |  0
 .../leagues/LeagueTimingsSection.tsx          |  2 +-
 .../leagues}/PendingProtestsList.tsx          | 24 +++++--
 .../leagues}/ProtestCardWrapper.tsx           |  2 +-
 .../leagues}/ProtestListItem.tsx              | 16 ++---
 .../mockups}/MockupStack.tsx                  |  2 +-
 .../mockups}/WorkflowMockup.tsx               | 10 +--
 .../onboarding/PersonalInfoStep.tsx           |  2 +-
 .../races}/LatestResultsSidebar.tsx           |  0
 .../races}/LiveRacesBanner.tsx                |  0
 .../races}/NextRaceCardWrapper.tsx            |  0
 .../races}/RaceCardWrapper.tsx                |  0
 .../races}/RaceEntryList.tsx                  |  2 +-
 .../races}/RaceFilterBar.tsx                  |  0
 .../{ui => components/races}/RaceList.tsx     |  2 +-
 .../{ui => components/races}/RaceListItem.tsx | 14 ++--
 .../races}/RaceListItemWrapper.tsx            |  2 +-
 .../races}/RaceResultCardWrapper.tsx          |  0
 .../races}/RaceResultRow.tsx                  | 12 ++--
 .../{ui => components/races}/RaceSidebar.tsx  |  0
 .../races}/UpcomingRaces.tsx                  |  4 +-
 .../races}/UpcomingRacesList.tsx              |  2 +-
 .../races}/UpcomingRacesSidebar.tsx           |  0
 .../shared}/CountrySelect.tsx                 |  2 +-
 .../{ui => components/shared}/RangeField.tsx  |  2 +-
 .../shared/state}/EmptyState.tsx              |  4 +-
 .../shared/state}/ErrorDisplay.tsx            | 16 ++---
 .../shared/state}/LoadingWrapper.tsx          |  8 +--
 .../shared/state}/PageWrapper.tsx             |  6 +-
 .../shared/state}/StateContainer.tsx          | 13 ++--
 .../shared/state}/StatefulPageWrapper.tsx     |  4 +-
 .../social}/FriendsPreview.tsx                |  0
 .../social}/FriendsSidebar.tsx                |  2 +-
 .../sponsors/SponsorBenefitCard.tsx           |  2 +-
 .../sponsors}/SponsorHero.tsx                 | 13 ++--
 .../sponsors/SponsorWorkflowMockup.tsx        |  2 +-
 apps/website/components/teams/TeamAdmin.tsx   |  2 +-
 .../{ui => components/teams}/TeamHero.tsx     |  0
 .../teams}/TeamHeroSection.tsx                | 10 +--
 .../teams}/TeamHeroSectionWrapper.tsx         |  4 +-
 .../teams}/TeamHeroStats.tsx                  |  8 +--
 .../{ui => components/teams}/TeamIdentity.tsx | 11 +--
 .../teams}/TeamLeaderboardPreviewWrapper.tsx  |  0
 .../{ui => components/teams}/TeamPodium.tsx   | 14 ++--
 .../teams}/TeamRankingsTable.tsx              | 16 ++---
 apps/website/components/teams/TeamRoster.tsx  |  4 +-
 .../teams}/TeamRosterItem.tsx                 |  8 +--
 .../components/teams/TeamStandings.tsx        |  4 +-
 .../teams}/TopThreePodium.tsx                 |  0
 .../teams}/WhyJoinTeamSection.tsx             |  2 +-
 apps/website/templates/DashboardTemplate.tsx  | 12 ++--
 .../templates/DriverProfileTemplate.tsx       |  6 +-
 apps/website/templates/DriversTemplate.tsx    |  8 +--
 apps/website/templates/HomeTemplate.tsx       |  8 +--
 .../templates/LeaderboardsTemplate.tsx        |  2 +-
 apps/website/templates/ProfileTemplate.tsx    |  4 +-
 apps/website/templates/RaceDetailTemplate.tsx |  4 +-
 .../website/templates/RaceResultsTemplate.tsx |  2 +-
 .../templates/RaceStewardingTemplate.tsx      |  2 +-
 apps/website/templates/RacesAllTemplate.tsx   |  2 +-
 apps/website/templates/RacesTemplate.tsx      |  8 +--
 apps/website/templates/TeamDetailTemplate.tsx |  2 +-
 .../templates/TeamLeaderboardTemplate.tsx     |  4 +-
 apps/website/templates/TeamsTemplate.tsx      |  4 +-
 apps/website/ui/ActivityItem.tsx              |  1 +
 apps/website/ui/AvailableLeagueCard.tsx       |  1 +
 apps/website/ui/Box.tsx                       |  1 +
 apps/website/ui/Button.tsx                    | 14 ++--
 apps/website/ui/Card.tsx                      | 48 ++++++-------
 apps/website/ui/Container.tsx                 |  2 +-
 apps/website/ui/DashboardHero.tsx             |  1 +
 apps/website/ui/DiscordCTA.tsx                |  7 +-
 apps/website/ui/DurationField.tsx             |  4 +-
 apps/website/ui/FeedItem.tsx                  |  8 +--
 apps/website/ui/Footer.tsx                    |  3 -
 apps/website/ui/Grid.tsx                      |  2 +-
 apps/website/ui/InfoBanner.tsx                |  2 +-
 apps/website/ui/Input.tsx                     |  4 +-
 apps/website/ui/JoinRequestItem.tsx           |  2 +-
 apps/website/ui/LeagueCard.tsx                | 22 +++---
 apps/website/ui/LeagueHeader.tsx              |  9 +--
 apps/website/ui/LeagueMemberTable.tsx         |  2 +-
 apps/website/ui/Link.tsx                      |  4 +-
 apps/website/ui/Podium.tsx                    |  2 +-
 apps/website/ui/PresetCard.tsx                |  4 +-
 apps/website/ui/ProfileStatGrid.tsx           |  2 +-
 apps/website/ui/RaceCard.tsx                  |  6 +-
 apps/website/ui/RaceSummaryItem.tsx           |  1 -
 apps/website/ui/RatingHistoryItem.tsx         |  6 ++
 apps/website/ui/SidebarActionLink.tsx         |  1 -
 apps/website/ui/SidebarRaceItem.tsx           |  1 -
 apps/website/ui/SkillDistribution.tsx         |  1 +
 apps/website/ui/SkillLevelHeader.tsx          |  2 +-
 apps/website/ui/SponsorMetricCard.tsx         |  5 +-
 apps/website/ui/SponsorSlotCard.tsx           |  1 -
 apps/website/ui/SponsorshipRequestItem.tsx    |  1 +
 apps/website/ui/Stack.tsx                     | 72 ++++++++++++-------
 apps/website/ui/StatCard.tsx                  |  7 --
 apps/website/ui/StatusIndicator.tsx           |  1 +
 apps/website/ui/Surface.tsx                   |  2 +-
 apps/website/ui/TabNavigation.tsx             |  3 +-
 apps/website/ui/Table.tsx                     |  2 +-
 apps/website/ui/TeamCard.tsx                  |  5 +-
 apps/website/ui/TeamLeaderboardItem.tsx       |  2 +-
 apps/website/ui/Text.tsx                      | 42 ++++++++---
 apps/website/ui/state-types.ts                |  1 +
 154 files changed, 436 insertions(+), 356 deletions(-)
 rename apps/website/{ui => components/achievements}/AchievementGrid.tsx (100%)
 rename apps/website/{ui => components/dashboard}/DashboardHeroWrapper.tsx (100%)
 rename apps/website/{ui => components/dashboard}/QuickActions.tsx (83%)
 rename apps/website/{ui => components/dev}/DebugModeToggle.tsx (98%)
 rename apps/website/{ui => components/drivers}/DriverCard.tsx (95%)
 rename apps/website/{ui => components/drivers}/DriverEntryRow.tsx (92%)
 rename apps/website/{ui => components/drivers}/DriverIdentity.tsx (88%)
 rename apps/website/{ui => components/drivers}/DriverRankings.tsx (86%)
 rename apps/website/{ui => components/drivers}/DriverSummaryPillWrapper.tsx (100%)
 rename apps/website/{ui => components/drivers}/FeaturedDriverCard.tsx (100%)
 rename apps/website/{ui => components/drivers}/ProfileHeader.tsx (100%)
 rename apps/website/{ui => components/drivers}/ProfileHero.tsx (98%)
 rename apps/website/{ui => components/feed}/ActivityFeed.tsx (89%)
 rename apps/website/{ui => components/feed}/ActivityFeedItem.tsx (89%)
 rename apps/website/{ui => components/feed}/ActivityFeedList.tsx (87%)
 rename apps/website/{ui => components/feed}/FeedLayout.tsx (87%)
 rename apps/website/{ui => components/feed}/FeedList.tsx (100%)
 rename apps/website/{ui => components/feed}/RecentActivity.tsx (100%)
 rename apps/website/{ui => components/landing}/AlternatingSection.tsx (100%)
 rename apps/website/{ui => components/landing}/BenefitCard.tsx (94%)
 rename apps/website/{ui => components/landing}/FeatureGrid.tsx (97%)
 rename apps/website/{ui => components/landing}/LandingHero.tsx (99%)
 rename apps/website/{ui => components/landing}/LandingItems.tsx (100%)
 rename apps/website/{ui => components/layout}/HeaderContent.tsx (95%)
 rename apps/website/{ui => components/leaderboards}/LeaderboardItem.tsx (94%)
 rename apps/website/{ui => components/leaderboards}/LeaderboardPreview.tsx (97%)
 rename apps/website/{ui => components/leaderboards}/RankingList.tsx (86%)
 rename apps/website/{ui => components/leaderboards}/RankingListItem.tsx (94%)
 rename apps/website/{ui => components/leagues}/ChampionshipStandings.tsx (94%)
 rename apps/website/{ui => components/leagues}/ChampionshipStandingsList.tsx (88%)
 rename apps/website/{ui => components/leagues}/LeagueCardWrapper.tsx (100%)
 rename apps/website/{ui => components/leagues}/LeagueMemberRow.tsx (89%)
 rename apps/website/{ui => components/leagues}/LeagueSummaryCardWrapper.tsx (100%)
 rename apps/website/{ui => components/leagues}/PendingProtestsList.tsx (72%)
 rename apps/website/{ui => components/leagues}/ProtestCardWrapper.tsx (96%)
 rename apps/website/{ui => components/leagues}/ProtestListItem.tsx (92%)
 rename apps/website/{ui => components/mockups}/MockupStack.tsx (98%)
 rename apps/website/{ui => components/mockups}/WorkflowMockup.tsx (97%)
 rename apps/website/{ui => components/races}/LatestResultsSidebar.tsx (100%)
 rename apps/website/{ui => components/races}/LiveRacesBanner.tsx (100%)
 rename apps/website/{ui => components/races}/NextRaceCardWrapper.tsx (100%)
 rename apps/website/{ui => components/races}/RaceCardWrapper.tsx (100%)
 rename apps/website/{ui => components/races}/RaceEntryList.tsx (96%)
 rename apps/website/{ui => components/races}/RaceFilterBar.tsx (100%)
 rename apps/website/{ui => components/races}/RaceList.tsx (97%)
 rename apps/website/{ui => components/races}/RaceListItem.tsx (94%)
 rename apps/website/{ui => components/races}/RaceListItemWrapper.tsx (95%)
 rename apps/website/{ui => components/races}/RaceResultCardWrapper.tsx (100%)
 rename apps/website/{ui => components/races}/RaceResultRow.tsx (94%)
 rename apps/website/{ui => components/races}/RaceSidebar.tsx (100%)
 rename apps/website/{ui => components/races}/UpcomingRaces.tsx (91%)
 rename apps/website/{ui => components/races}/UpcomingRacesList.tsx (87%)
 rename apps/website/{ui => components/races}/UpcomingRacesSidebar.tsx (100%)
 rename apps/website/{ui => components/shared}/CountrySelect.tsx (99%)
 rename apps/website/{ui => components/shared}/RangeField.tsx (99%)
 rename apps/website/{ui => components/shared/state}/EmptyState.tsx (99%)
 rename apps/website/{ui => components/shared/state}/ErrorDisplay.tsx (95%)
 rename apps/website/{ui => components/shared/state}/LoadingWrapper.tsx (97%)
 rename apps/website/{ui => components/shared/state}/PageWrapper.tsx (96%)
 rename apps/website/{ui => components/shared/state}/StateContainer.tsx (96%)
 rename apps/website/{ui => components/shared/state}/StatefulPageWrapper.tsx (87%)
 rename apps/website/{ui => components/social}/FriendsPreview.tsx (100%)
 rename apps/website/{ui => components/social}/FriendsSidebar.tsx (96%)
 rename apps/website/{ui => components/sponsors}/SponsorHero.tsx (95%)
 rename apps/website/{ui => components/teams}/TeamHero.tsx (100%)
 rename apps/website/{ui => components/teams}/TeamHeroSection.tsx (92%)
 rename apps/website/{ui => components/teams}/TeamHeroSectionWrapper.tsx (95%)
 rename apps/website/{ui => components/teams}/TeamHeroStats.tsx (90%)
 rename apps/website/{ui => components/teams}/TeamIdentity.tsx (85%)
 rename apps/website/{ui => components/teams}/TeamLeaderboardPreviewWrapper.tsx (100%)
 rename apps/website/{ui => components/teams}/TeamPodium.tsx (94%)
 rename apps/website/{ui => components/teams}/TeamRankingsTable.tsx (91%)
 rename apps/website/{ui => components/teams}/TeamRosterItem.tsx (91%)
 rename apps/website/{ui => components/teams}/TopThreePodium.tsx (100%)
 rename apps/website/{ui => components/teams}/WhyJoinTeamSection.tsx (96%)

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
index a22de4009..c882b6c53 100644
--- a/apps/website/app/layout.tsx
+++ b/apps/website/app/layout.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import './globals.css';
 import { AppWrapper } from '@/components/AppWrapper';
 import { Header } from '@/ui/Header';
-import { HeaderContent } from '@/ui/HeaderContent';
+import { HeaderContent } from '@/components/layout/HeaderContent';
 import { MainContent } from '@/ui/MainContent';
 
 export const dynamic = 'force-dynamic';
diff --git a/apps/website/app/leagues/LeaguesClient.tsx b/apps/website/app/leagues/LeaguesClient.tsx
index 44ccdce84..90b1569dc 100644
--- a/apps/website/app/leagues/LeaguesClient.tsx
+++ b/apps/website/app/leagues/LeaguesClient.tsx
@@ -18,7 +18,7 @@ import {
   Target,
   Timer,
 } from 'lucide-react';
-import { LeagueCard } from '@/ui/LeagueCardWrapper';
+import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Input } from '@/ui/Input';
diff --git a/apps/website/app/leagues/[id]/stewarding/StewardingTemplate.tsx b/apps/website/app/leagues/[id]/stewarding/StewardingTemplate.tsx
index 77d0100d1..8e02db512 100644
--- a/apps/website/app/leagues/[id]/stewarding/StewardingTemplate.tsx
+++ b/apps/website/app/leagues/[id]/stewarding/StewardingTemplate.tsx
@@ -19,7 +19,7 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useMemo, useState } from 'react';
-import { PendingProtestsList } from '@/ui/PendingProtestsList';
+import { PendingProtestsList } from '@/components/leagues/PendingProtestsList';
 import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
 
 interface StewardingData {
diff --git a/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx b/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx
index f2de7bc85..40f014c7c 100644
--- a/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx
+++ b/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx
@@ -37,7 +37,7 @@ import { useMemo, useState } from 'react';
 
 // Shared state components
 import { StateContainer } from '@/components/shared/state/StateContainer';
-import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
 import { useLeagueAdminStatus } from "@/lib/hooks/league/useLeagueAdminStatus";
 import { useProtestDetail } from "@/lib/hooks/league/useProtestDetail";
 
diff --git a/apps/website/app/sponsor/signup/page.tsx b/apps/website/app/sponsor/signup/page.tsx
index c8a91b798..ada21f254 100644
--- a/apps/website/app/sponsor/signup/page.tsx
+++ b/apps/website/app/sponsor/signup/page.tsx
@@ -5,7 +5,7 @@ import { motion, useReducedMotion } from 'framer-motion';
 import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
-import { SponsorHero } from '@/ui/SponsorHero';
+import { SponsorHero } from '@/components/sponsors/SponsorHero';
 import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
 import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
 import { siteConfig } from '@/lib/siteConfig';
diff --git a/apps/website/ui/AchievementGrid.tsx b/apps/website/components/achievements/AchievementGrid.tsx
similarity index 100%
rename from apps/website/ui/AchievementGrid.tsx
rename to apps/website/components/achievements/AchievementGrid.tsx
diff --git a/apps/website/components/auth/AuthWorkflowMockup.tsx b/apps/website/components/auth/AuthWorkflowMockup.tsx
index 6f5654b4c..b0aacdbfe 100644
--- a/apps/website/components/auth/AuthWorkflowMockup.tsx
+++ b/apps/website/components/auth/AuthWorkflowMockup.tsx
@@ -8,7 +8,7 @@ import {
   Trophy,
   Car,
 } from 'lucide-react';
-import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';
+import { WorkflowMockup, WorkflowStep } from '@/components/mockups/WorkflowMockup';
 
 const WORKFLOW_STEPS: WorkflowStep[] = [
   {
diff --git a/apps/website/ui/DashboardHeroWrapper.tsx b/apps/website/components/dashboard/DashboardHeroWrapper.tsx
similarity index 100%
rename from apps/website/ui/DashboardHeroWrapper.tsx
rename to apps/website/components/dashboard/DashboardHeroWrapper.tsx
diff --git a/apps/website/ui/QuickActions.tsx b/apps/website/components/dashboard/QuickActions.tsx
similarity index 83%
rename from apps/website/ui/QuickActions.tsx
rename to apps/website/components/dashboard/QuickActions.tsx
index 9d76fd8ff..54a198cbc 100644
--- a/apps/website/ui/QuickActions.tsx
+++ b/apps/website/components/dashboard/QuickActions.tsx
@@ -2,9 +2,9 @@
 
 import { routes } from '@/lib/routing/RouteConfig';
 import { Trophy, Users } from 'lucide-react';
-import { Box } from './Box';
-import { Heading } from './Heading';
-import { QuickActionItem } from './QuickActionItem';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { QuickActionItem } from '@/ui/QuickActionItem';
 
 export function QuickActions() {
   return (
diff --git a/apps/website/ui/DebugModeToggle.tsx b/apps/website/components/dev/DebugModeToggle.tsx
similarity index 98%
rename from apps/website/ui/DebugModeToggle.tsx
rename to apps/website/components/dev/DebugModeToggle.tsx
index 847417120..52f02678f 100644
--- a/apps/website/ui/DebugModeToggle.tsx
+++ b/apps/website/components/dev/DebugModeToggle.tsx
@@ -6,11 +6,11 @@ import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { Bug, Shield, X } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { Box } from './Box';
-import { Button } from './Button';
-import { Icon } from './Icon';
-import { Stack } from './Stack';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 // Extend Window interface for debug globals
 declare global {
diff --git a/apps/website/ui/DriverCard.tsx b/apps/website/components/drivers/DriverCard.tsx
similarity index 95%
rename from apps/website/ui/DriverCard.tsx
rename to apps/website/components/drivers/DriverCard.tsx
index 2fbdf464d..fa981f88a 100644
--- a/apps/website/ui/DriverCard.tsx
+++ b/apps/website/components/drivers/DriverCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card } from '@/ui/Card';
 import { RankBadge } from '@/ui/RankBadge';
-import { DriverIdentity } from '@/ui/DriverIdentity';
+import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Stack } from '@/ui/Stack';
 import { DriverStats } from '@/ui/DriverStats';
diff --git a/apps/website/ui/DriverEntryRow.tsx b/apps/website/components/drivers/DriverEntryRow.tsx
similarity index 92%
rename from apps/website/ui/DriverEntryRow.tsx
rename to apps/website/components/drivers/DriverEntryRow.tsx
index fead0fdb4..62bc60cf1 100644
--- a/apps/website/ui/DriverEntryRow.tsx
+++ b/apps/website/components/drivers/DriverEntryRow.tsx
@@ -2,12 +2,12 @@
 
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Zap } from 'lucide-react';
-import { Badge } from './Badge';
-import { Box } from './Box';
-import { Icon } from './Icon';
-import { Image } from './Image';
-import { Stack } from './Stack';
-import { Text } from './Text';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface DriverEntryRowProps {
   index: number;
diff --git a/apps/website/ui/DriverIdentity.tsx b/apps/website/components/drivers/DriverIdentity.tsx
similarity index 88%
rename from apps/website/ui/DriverIdentity.tsx
rename to apps/website/components/drivers/DriverIdentity.tsx
index b918ac041..49aeb4d83 100644
--- a/apps/website/ui/DriverIdentity.tsx
+++ b/apps/website/components/drivers/DriverIdentity.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
-import Image from 'next/image';
-import { PlaceholderImage } from './PlaceholderImage';
-import { Box } from './Box';
-import { Text } from './Text';
-import { Badge } from './Badge';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { Image } from '@/ui/Image';
 
 export interface DriverIdentityProps {
   driver: {
@@ -43,7 +43,9 @@ export function DriverIdentity(props: DriverIdentityProps) {
             alt={driver.name}
             width={avatarSize}
             height={avatarSize}
-            className="w-full h-full object-cover"
+            fullWidth
+            fullHeight
+            objectFit="cover"
           />
         ) : (
           <PlaceholderImage size={avatarSize} />
diff --git a/apps/website/components/drivers/DriverProfile.tsx b/apps/website/components/drivers/DriverProfile.tsx
index 5d34e9417..f02da4a81 100644
--- a/apps/website/components/drivers/DriverProfile.tsx
+++ b/apps/website/components/drivers/DriverProfile.tsx
@@ -7,10 +7,10 @@ import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
 import { StatCard } from '@/ui/StatCard';
-import { ProfileHeader } from '@/ui/ProfileHeader';
+import { ProfileHeader } from '@/components/drivers/ProfileHeader';
 import { ProfileStats } from './ProfileStats';
 import { CareerHighlights } from '@/ui/CareerHighlights';
-import { DriverRankings } from '@/ui/DriverRankings';
+import { DriverRankings } from '@/components/drivers/DriverRankings';
 import { PerformanceMetrics } from '@/ui/PerformanceMetrics';
 import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
 
diff --git a/apps/website/ui/DriverRankings.tsx b/apps/website/components/drivers/DriverRankings.tsx
similarity index 86%
rename from apps/website/ui/DriverRankings.tsx
rename to apps/website/components/drivers/DriverRankings.tsx
index 16bcead10..acc198ce0 100644
--- a/apps/website/ui/DriverRankings.tsx
+++ b/apps/website/components/drivers/DriverRankings.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { RankingListItem } from '@/ui/RankingListItem';
-import { RankingList } from '@/ui/RankingList';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { RankingListItem } from '@/components/leaderboards/RankingListItem';
+import { RankingList } from '@/components/leaderboards/RankingList';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 
 export interface DriverRanking {
   type: 'overall' | 'league';
diff --git a/apps/website/ui/DriverSummaryPillWrapper.tsx b/apps/website/components/drivers/DriverSummaryPillWrapper.tsx
similarity index 100%
rename from apps/website/ui/DriverSummaryPillWrapper.tsx
rename to apps/website/components/drivers/DriverSummaryPillWrapper.tsx
diff --git a/apps/website/ui/FeaturedDriverCard.tsx b/apps/website/components/drivers/FeaturedDriverCard.tsx
similarity index 100%
rename from apps/website/ui/FeaturedDriverCard.tsx
rename to apps/website/components/drivers/FeaturedDriverCard.tsx
diff --git a/apps/website/ui/ProfileHeader.tsx b/apps/website/components/drivers/ProfileHeader.tsx
similarity index 100%
rename from apps/website/ui/ProfileHeader.tsx
rename to apps/website/components/drivers/ProfileHeader.tsx
diff --git a/apps/website/ui/ProfileHero.tsx b/apps/website/components/drivers/ProfileHero.tsx
similarity index 98%
rename from apps/website/ui/ProfileHero.tsx
rename to apps/website/components/drivers/ProfileHero.tsx
index cca864612..ffcef5320 100644
--- a/apps/website/ui/ProfileHero.tsx
+++ b/apps/website/components/drivers/ProfileHero.tsx
@@ -1,6 +1,7 @@
 
 
 import { mediaConfig } from '@/lib/config/mediaConfig';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
diff --git a/apps/website/components/drivers/ProfileRaceHistory.tsx b/apps/website/components/drivers/ProfileRaceHistory.tsx
index bcf9d1761..557afb09d 100644
--- a/apps/website/components/drivers/ProfileRaceHistory.tsx
+++ b/apps/website/components/drivers/ProfileRaceHistory.tsx
@@ -6,8 +6,8 @@ import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
-import { LoadingWrapper } from '@/ui/LoadingWrapper';
-import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import { Pagination } from '@/ui/Pagination';
 import { Trophy } from 'lucide-react';
 
diff --git a/apps/website/components/errors/ApiErrorBoundary.tsx b/apps/website/components/errors/ApiErrorBoundary.tsx
index 3efc70380..d942d27aa 100644
--- a/apps/website/components/errors/ApiErrorBoundary.tsx
+++ b/apps/website/components/errors/ApiErrorBoundary.tsx
@@ -3,7 +3,7 @@
 import React, { Component, ReactNode, useState } from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
 import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
-import { ErrorDisplay } from './ErrorDisplay';
+import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
 import { DevErrorPanel } from './DevErrorPanel';
 
 interface Props {
diff --git a/apps/website/components/errors/EnhancedErrorBoundary.tsx b/apps/website/components/errors/EnhancedErrorBoundary.tsx
index 601f05a67..a38f51b67 100644
--- a/apps/website/components/errors/EnhancedErrorBoundary.tsx
+++ b/apps/website/components/errors/EnhancedErrorBoundary.tsx
@@ -4,7 +4,7 @@ import React, { Component, ReactNode, ErrorInfo, useState, version } from 'react
 import { ApiError } from '@/lib/api/base/ApiError';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { DevErrorPanel } from './DevErrorPanel';
-import { ErrorDisplay } from './ErrorDisplay';
+import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
 
 interface Props {
   children: ReactNode;
diff --git a/apps/website/components/errors/ErrorDisplay.tsx b/apps/website/components/errors/ErrorDisplay.tsx
index 9baa4d8dc..4349fed1d 100644
--- a/apps/website/components/errors/ErrorDisplay.tsx
+++ b/apps/website/components/errors/ErrorDisplay.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { ErrorDisplay as UiErrorDisplay } from '@/ui/ErrorDisplay';
+import { ErrorDisplay as UiErrorDisplay } from '@/components/shared/state/ErrorDisplay';
 
 interface ErrorDisplayProps {
   error: ApiError;
diff --git a/apps/website/ui/ActivityFeed.tsx b/apps/website/components/feed/ActivityFeed.tsx
similarity index 89%
rename from apps/website/ui/ActivityFeed.tsx
rename to apps/website/components/feed/ActivityFeed.tsx
index 9a48e8fb5..9c33cb0ff 100644
--- a/apps/website/ui/ActivityFeed.tsx
+++ b/apps/website/components/feed/ActivityFeed.tsx
@@ -4,8 +4,8 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { ActivityItem } from '@/ui/ActivityItem';
 import { Icon } from '@/ui/Icon';
-import { ActivityFeedList } from '@/ui/ActivityFeedList';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { ActivityFeedList } from '@/components/feed/ActivityFeedList';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 
 interface FeedItem {
   id: string;
diff --git a/apps/website/ui/ActivityFeedItem.tsx b/apps/website/components/feed/ActivityFeedItem.tsx
similarity index 89%
rename from apps/website/ui/ActivityFeedItem.tsx
rename to apps/website/components/feed/ActivityFeedItem.tsx
index 4a0866210..a64b9acf6 100644
--- a/apps/website/ui/ActivityFeedItem.tsx
+++ b/apps/website/components/feed/ActivityFeedItem.tsx
@@ -1,8 +1,9 @@
 
 
 import { ReactNode } from 'react';
-import { Box } from './Box';
-import { Surface } from './Surface';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 interface ActivityFeedItemProps {
   icon: ReactNode;
diff --git a/apps/website/ui/ActivityFeedList.tsx b/apps/website/components/feed/ActivityFeedList.tsx
similarity index 87%
rename from apps/website/ui/ActivityFeedList.tsx
rename to apps/website/components/feed/ActivityFeedList.tsx
index f2c969919..7e9b7ca9c 100644
--- a/apps/website/ui/ActivityFeedList.tsx
+++ b/apps/website/components/feed/ActivityFeedList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Stack } from './Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ActivityFeedListProps {
   children: ReactNode;
diff --git a/apps/website/ui/FeedLayout.tsx b/apps/website/components/feed/FeedLayout.tsx
similarity index 87%
rename from apps/website/ui/FeedLayout.tsx
rename to apps/website/components/feed/FeedLayout.tsx
index f960fc166..b1d53e2c3 100644
--- a/apps/website/ui/FeedLayout.tsx
+++ b/apps/website/components/feed/FeedLayout.tsx
@@ -1,7 +1,7 @@
 import { Card } from '@/ui/Card';
-import { FeedList } from '@/ui/FeedList';
-import { UpcomingRacesSidebar } from '@/ui/UpcomingRacesSidebar';
-import { LatestResultsSidebar } from '@/ui/LatestResultsSidebar';
+import { FeedList } from '@/components/feed/FeedList';
+import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
+import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
 
 interface FeedItemData {
   id: string;
diff --git a/apps/website/ui/FeedList.tsx b/apps/website/components/feed/FeedList.tsx
similarity index 100%
rename from apps/website/ui/FeedList.tsx
rename to apps/website/components/feed/FeedList.tsx
diff --git a/apps/website/ui/RecentActivity.tsx b/apps/website/components/feed/RecentActivity.tsx
similarity index 100%
rename from apps/website/ui/RecentActivity.tsx
rename to apps/website/components/feed/RecentActivity.tsx
diff --git a/apps/website/ui/AlternatingSection.tsx b/apps/website/components/landing/AlternatingSection.tsx
similarity index 100%
rename from apps/website/ui/AlternatingSection.tsx
rename to apps/website/components/landing/AlternatingSection.tsx
diff --git a/apps/website/ui/BenefitCard.tsx b/apps/website/components/landing/BenefitCard.tsx
similarity index 94%
rename from apps/website/ui/BenefitCard.tsx
rename to apps/website/components/landing/BenefitCard.tsx
index 9fa0982cf..ad0dbf82b 100644
--- a/apps/website/ui/BenefitCard.tsx
+++ b/apps/website/components/landing/BenefitCard.tsx
@@ -3,11 +3,11 @@
 import { motion, useReducedMotion } from 'framer-motion';
 import { LucideIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { Box } from './Box';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { Surface } from './Surface';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 interface BenefitCardProps {
   icon: LucideIcon;
diff --git a/apps/website/ui/FeatureGrid.tsx b/apps/website/components/landing/FeatureGrid.tsx
similarity index 97%
rename from apps/website/ui/FeatureGrid.tsx
rename to apps/website/components/landing/FeatureGrid.tsx
index baabd1a26..71d69272f 100644
--- a/apps/website/ui/FeatureGrid.tsx
+++ b/apps/website/components/landing/FeatureGrid.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useRef, useState, useEffect } from 'react';
 import { Section } from '@/ui/Section';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { MockupStack } from '@/ui/MockupStack';
+import { MockupStack } from '@/components/mockups/MockupStack';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { LeagueHomeMockup } from '@/components/mockups/LeagueHomeMockup';
 import { StandingsTableMockup } from '@/components/mockups/StandingsTableMockup';
 import { TeamCompetitionMockup } from '@/components/mockups/TeamCompetitionMockup';
diff --git a/apps/website/ui/LandingHero.tsx b/apps/website/components/landing/LandingHero.tsx
similarity index 99%
rename from apps/website/ui/LandingHero.tsx
rename to apps/website/components/landing/LandingHero.tsx
index 305515d27..b9648c8a4 100644
--- a/apps/website/ui/LandingHero.tsx
+++ b/apps/website/components/landing/LandingHero.tsx
@@ -1,5 +1,5 @@
 
-
+import { useRef } from 'react';
 import { useParallax } from '@/hooks/useScrollProgress';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
@@ -126,7 +126,7 @@ export function LandingHero() {
           <Box display="flex" alignItems="center" justifyContent="center">
             <Button
               as="a"
-              href="#community"
+              href={discordUrl}
               variant="primary"
               px={8}
               py={4}
@@ -168,4 +168,4 @@ export function LandingHero() {
       </Container>
     </Box>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/ui/LandingItems.tsx b/apps/website/components/landing/LandingItems.tsx
similarity index 100%
rename from apps/website/ui/LandingItems.tsx
rename to apps/website/components/landing/LandingItems.tsx
diff --git a/apps/website/ui/HeaderContent.tsx b/apps/website/components/layout/HeaderContent.tsx
similarity index 95%
rename from apps/website/ui/HeaderContent.tsx
rename to apps/website/components/layout/HeaderContent.tsx
index 4ffd86b34..f9b619be1 100644
--- a/apps/website/ui/HeaderContent.tsx
+++ b/apps/website/components/layout/HeaderContent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Text } from './Text';
+import { Text } from '@/ui/Text';
 
 export function HeaderContent() {
   return (
diff --git a/apps/website/ui/LeaderboardItem.tsx b/apps/website/components/leaderboards/LeaderboardItem.tsx
similarity index 94%
rename from apps/website/ui/LeaderboardItem.tsx
rename to apps/website/components/leaderboards/LeaderboardItem.tsx
index 471ee3de0..3d238f8e0 100644
--- a/apps/website/ui/LeaderboardItem.tsx
+++ b/apps/website/components/leaderboards/LeaderboardItem.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Image from 'next/image';
 import { Crown, Flag } from 'lucide-react';
-import { Box } from './Box';
-import { Text } from './Text';
-import { Stack } from './Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 
 interface LeaderboardItemProps {
@@ -80,7 +80,7 @@ export function LeaderboardItem({
 
       {/* Avatar */}
       <Box position="relative" width="9" height="9" rounded="full" overflow="hidden" border={true} borderColor="border-charcoal-outline">
-        <Image src={avatarUrl || mediaConfig.avatars.defaultFallback} alt={name} fill className="object-cover" />
+        <Image src={avatarUrl || mediaConfig.avatars.defaultFallback} alt={name} fill objectFit="cover" />
       </Box>
 
       {/* Info */}
diff --git a/apps/website/ui/LeaderboardPreview.tsx b/apps/website/components/leaderboards/LeaderboardPreview.tsx
similarity index 97%
rename from apps/website/ui/LeaderboardPreview.tsx
rename to apps/website/components/leaderboards/LeaderboardPreview.tsx
index 86073f2a9..23cb4dd20 100644
--- a/apps/website/ui/LeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/LeaderboardPreview.tsx
@@ -5,7 +5,7 @@ import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { LeaderboardItem } from '@/ui/LeaderboardItem';
+import { LeaderboardItem } from '@/components/leaderboards/LeaderboardItem';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
diff --git a/apps/website/ui/RankingList.tsx b/apps/website/components/leaderboards/RankingList.tsx
similarity index 86%
rename from apps/website/ui/RankingList.tsx
rename to apps/website/components/leaderboards/RankingList.tsx
index 9e0e05a75..2447130f2 100644
--- a/apps/website/ui/RankingList.tsx
+++ b/apps/website/components/leaderboards/RankingList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Stack } from './Stack';
+import { Stack } from '@/ui/Stack';
 
 interface RankingListProps {
   children: ReactNode;
diff --git a/apps/website/ui/RankingListItem.tsx b/apps/website/components/leaderboards/RankingListItem.tsx
similarity index 94%
rename from apps/website/ui/RankingListItem.tsx
rename to apps/website/components/leaderboards/RankingListItem.tsx
index 33b0dbdcb..bbf2206aa 100644
--- a/apps/website/ui/RankingListItem.tsx
+++ b/apps/website/components/leaderboards/RankingListItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box } from './Box';
-import { Text } from './Text';
-import { Stack } from './Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 
 interface RankingListItemProps {
   name: string;
diff --git a/apps/website/ui/ChampionshipStandings.tsx b/apps/website/components/leagues/ChampionshipStandings.tsx
similarity index 94%
rename from apps/website/ui/ChampionshipStandings.tsx
rename to apps/website/components/leagues/ChampionshipStandings.tsx
index 5370d0f86..f6c701923 100644
--- a/apps/website/ui/ChampionshipStandings.tsx
+++ b/apps/website/components/leagues/ChampionshipStandings.tsx
@@ -2,7 +2,7 @@
 
 import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
-import { ChampionshipStandingsList } from '@/ui/ChampionshipStandingsList';
+import { ChampionshipStandingsList } from '@/components/leagues/ChampionshipStandingsList';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
diff --git a/apps/website/ui/ChampionshipStandingsList.tsx b/apps/website/components/leagues/ChampionshipStandingsList.tsx
similarity index 88%
rename from apps/website/ui/ChampionshipStandingsList.tsx
rename to apps/website/components/leagues/ChampionshipStandingsList.tsx
index 8d573d2c5..1d43741a4 100644
--- a/apps/website/ui/ChampionshipStandingsList.tsx
+++ b/apps/website/components/leagues/ChampionshipStandingsList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Stack } from './Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ChampionshipStandingsListProps {
   children: ReactNode;
diff --git a/apps/website/components/leagues/EmptyState.tsx b/apps/website/components/leagues/EmptyState.tsx
index 768c06dd0..f99b92235 100644
--- a/apps/website/components/leagues/EmptyState.tsx
+++ b/apps/website/components/leagues/EmptyState.tsx
@@ -1,6 +1,6 @@
 import { Trophy, Sparkles, LucideIcon } from 'lucide-react';
 import { Card } from '@/ui/Card';
-import { EmptyState as UiEmptyState } from '@/ui/EmptyState';
+import { EmptyState as UiEmptyState } from '@/components/shared/state/EmptyState';
 
 interface EmptyStateProps {
   title: string;
diff --git a/apps/website/components/leagues/LeagueActivityFeed.tsx b/apps/website/components/leagues/LeagueActivityFeed.tsx
index ceda2beb8..f3d2ecb48 100644
--- a/apps/website/components/leagues/LeagueActivityFeed.tsx
+++ b/apps/website/components/leagues/LeagueActivityFeed.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Calendar, UserPlus, UserMinus, Shield, Flag, AlertTriangle } from 'lucide-react';
 import { useLeagueRaces } from "@/hooks/league/useLeagueRaces";
-import { ActivityFeedItem } from '@/ui/ActivityFeedItem';
+import { ActivityFeedItem } from '@/components/feed/ActivityFeedItem';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
diff --git a/apps/website/ui/LeagueCardWrapper.tsx b/apps/website/components/leagues/LeagueCardWrapper.tsx
similarity index 100%
rename from apps/website/ui/LeagueCardWrapper.tsx
rename to apps/website/components/leagues/LeagueCardWrapper.tsx
diff --git a/apps/website/ui/LeagueMemberRow.tsx b/apps/website/components/leagues/LeagueMemberRow.tsx
similarity index 89%
rename from apps/website/ui/LeagueMemberRow.tsx
rename to apps/website/components/leagues/LeagueMemberRow.tsx
index c2774abea..81e7189a6 100644
--- a/apps/website/ui/LeagueMemberRow.tsx
+++ b/apps/website/components/leagues/LeagueMemberRow.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
-import { TableRow, TableCell } from './Table';
-import { Box } from './Box';
-import { Text } from './Text';
-import { Badge } from './Badge';
-import { DriverIdentity } from './DriverIdentity';
+import { TableRow, TableCell } from '@/ui/Table';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 
 interface LeagueMemberRowProps {
@@ -92,7 +92,7 @@ export function LeagueMemberRow({
         </Text>
       </TableCell>
       {actions && (
-        <TableCell align="right">
+        <TableCell textAlign="right">
           {actions}
         </TableCell>
       )}
diff --git a/apps/website/components/leagues/LeagueMembers.tsx b/apps/website/components/leagues/LeagueMembers.tsx
index 97dda4679..956763ad5 100644
--- a/apps/website/components/leagues/LeagueMembers.tsx
+++ b/apps/website/components/leagues/LeagueMembers.tsx
@@ -13,8 +13,8 @@ import { Text } from '@/ui/Text';
 import { Select } from '@/ui/Select';
 import { Button } from '@/ui/Button';
 import { LeagueMemberTable } from '@/ui/LeagueMemberTable';
-import { LeagueMemberRow } from '@/ui/LeagueMemberRow';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { LeagueMemberRow } from '@/components/leagues/LeagueMemberRow';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 
 interface LeagueMembersProps {
   leagueId: string;
diff --git a/apps/website/components/leagues/LeagueOwnershipTransfer.tsx b/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
index 7963c5375..f86ce5a8e 100644
--- a/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
+++ b/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { DriverSummaryPill } from '@/ui/DriverSummaryPillWrapper';
+import { DriverSummaryPill } from '@/components/drivers/DriverSummaryPillWrapper';
 import { Button } from '@/ui/Button';
 import { UserCog } from 'lucide-react';
 import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
diff --git a/apps/website/components/leagues/LeagueSchedule.tsx b/apps/website/components/leagues/LeagueSchedule.tsx
index b812c8819..d3bd3fdbb 100644
--- a/apps/website/components/leagues/LeagueSchedule.tsx
+++ b/apps/website/components/leagues/LeagueSchedule.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react';
 import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
 
 // Shared state components
-import { StateContainer } from '@/ui/StateContainer';
+import { StateContainer } from '@/components/shared/state/StateContainer';
 import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
 import { Calendar } from 'lucide-react';
 import { Box } from '@/ui/Box';
diff --git a/apps/website/ui/LeagueSummaryCardWrapper.tsx b/apps/website/components/leagues/LeagueSummaryCardWrapper.tsx
similarity index 100%
rename from apps/website/ui/LeagueSummaryCardWrapper.tsx
rename to apps/website/components/leagues/LeagueSummaryCardWrapper.tsx
diff --git a/apps/website/components/leagues/LeagueTimingsSection.tsx b/apps/website/components/leagues/LeagueTimingsSection.tsx
index 39927b027..c919b5263 100644
--- a/apps/website/components/leagues/LeagueTimingsSection.tsx
+++ b/apps/website/components/leagues/LeagueTimingsSection.tsx
@@ -21,7 +21,7 @@ import {
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import type { Weekday } from '@/lib/types/Weekday';
 import { Input } from '@/ui/Input';
-import RangeField from '@/ui/RangeField';
+import { RangeField } from '@/components/shared/RangeField';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
diff --git a/apps/website/ui/PendingProtestsList.tsx b/apps/website/components/leagues/PendingProtestsList.tsx
similarity index 72%
rename from apps/website/ui/PendingProtestsList.tsx
rename to apps/website/components/leagues/PendingProtestsList.tsx
index 85af91f30..d4607b8e2 100644
--- a/apps/website/ui/PendingProtestsList.tsx
+++ b/apps/website/components/leagues/PendingProtestsList.tsx
@@ -5,7 +5,7 @@ import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
 import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
 import { Box } from "@/ui/Box";
 import { Card } from "@/ui/Card";
-import { ProtestListItem } from "@/ui/ProtestListItem";
+import { ProtestListItem } from "./ProtestListItem";
 import { Stack } from "@/ui/Stack";
 import { Text } from "@/ui/Text";
 import { Flag } from "lucide-react";
@@ -21,7 +21,9 @@ interface PendingProtestsListProps {
 
 export function PendingProtestsList({
   protests,
+  drivers,
   leagueId,
+  onReviewProtest,
 }: PendingProtestsListProps) {
 
   if (protests.length === 0) {
@@ -49,17 +51,25 @@ export function PendingProtestsList({
         const daysSinceFiled = Math.floor((Date.now() - new Date(filedAt).getTime()) / (1000 * 60 * 60 * 24));
         const isUrgent = daysSinceFiled > 2;
         
+        const protester = drivers[protest.protestingDriverId];
+        const accused = drivers[protest.accusedDriverId];
+        
         return (
           <ProtestListItem
             key={protest.id}
-            id={protest.id}
-            filedAt={filedAt}
-            description={protest.incident?.description || protest.description}
-            lap={protest.incident?.lap}
-            hasVideo={!!protest.proofVideoUrl}
+            protesterName={protester?.name || 'Unknown'}
+            protesterHref={`/drivers/${protest.protestingDriverId}`}
+            accusedName={accused?.name || 'Unknown'}
+            accusedHref={`/drivers/${protest.accusedDriverId}`}
+            status={protest.status}
             isUrgent={isUrgent}
             daysOld={daysSinceFiled}
-            href={`/leagues/${leagueId}/stewarding/protests/${protest.id}`}
+            lap={protest.incident?.lap ?? 0}
+            filedAtLabel={new Date(filedAt).toLocaleDateString()}
+            description={protest.incident?.description || protest.description}
+            proofVideoUrl={protest.proofVideoUrl || undefined}
+            isAdmin={true}
+            onReview={() => onReviewProtest(protest)}
           />
         );
       })}
diff --git a/apps/website/ui/ProtestCardWrapper.tsx b/apps/website/components/leagues/ProtestCardWrapper.tsx
similarity index 96%
rename from apps/website/ui/ProtestCardWrapper.tsx
rename to apps/website/components/leagues/ProtestCardWrapper.tsx
index 1728cb965..17f7e694a 100644
--- a/apps/website/ui/ProtestCardWrapper.tsx
+++ b/apps/website/components/leagues/ProtestCardWrapper.tsx
@@ -1,7 +1,7 @@
 
 
 import { routes } from '@/lib/routing/RouteConfig';
-import { ProtestListItem } from '@/ui/ProtestListItem';
+import { ProtestListItem } from './ProtestListItem';
 
 interface Protest {
   id: string;
diff --git a/apps/website/ui/ProtestListItem.tsx b/apps/website/components/leagues/ProtestListItem.tsx
similarity index 92%
rename from apps/website/ui/ProtestListItem.tsx
rename to apps/website/components/leagues/ProtestListItem.tsx
index c84ba69be..588ea2f66 100644
--- a/apps/website/ui/ProtestListItem.tsx
+++ b/apps/website/components/leagues/ProtestListItem.tsx
@@ -1,14 +1,14 @@
 
 
 import { AlertCircle, AlertTriangle, Video } from 'lucide-react';
-import { Badge } from './Badge';
-import { Box } from './Box';
-import { Button } from './Button';
-import { Card } from './Card';
-import { Icon } from './Icon';
-import { Link } from './Link';
-import { Stack } from './Stack';
-import { Text } from './Text';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface ProtestListItemProps {
   protesterName: string;
diff --git a/apps/website/ui/MockupStack.tsx b/apps/website/components/mockups/MockupStack.tsx
similarity index 98%
rename from apps/website/ui/MockupStack.tsx
rename to apps/website/components/mockups/MockupStack.tsx
index 1c90ed1b5..7870897b5 100644
--- a/apps/website/ui/MockupStack.tsx
+++ b/apps/website/components/mockups/MockupStack.tsx
@@ -8,7 +8,7 @@ interface MockupStackProps {
   index?: number;
 }
 
-export default function MockupStack({ children, index = 0 }: MockupStackProps) {
+export function MockupStack({ children, index = 0 }: MockupStackProps) {
   const shouldReduceMotion = useReducedMotion();
   const [isMounted, setIsMounted] = useState(false);
   const [isMobile, setIsMobile] = useState(true); // Default to mobile (no animations)
diff --git a/apps/website/ui/WorkflowMockup.tsx b/apps/website/components/mockups/WorkflowMockup.tsx
similarity index 97%
rename from apps/website/ui/WorkflowMockup.tsx
rename to apps/website/components/mockups/WorkflowMockup.tsx
index a101ebbc9..7224af897 100644
--- a/apps/website/ui/WorkflowMockup.tsx
+++ b/apps/website/components/mockups/WorkflowMockup.tsx
@@ -3,11 +3,11 @@
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { CheckCircle2, LucideIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { Box } from './Box';
-import { Icon } from './Icon';
-import { Stack } from './Stack';
-import { Surface } from './Surface';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 export interface WorkflowStep {
   id: number;
diff --git a/apps/website/components/onboarding/PersonalInfoStep.tsx b/apps/website/components/onboarding/PersonalInfoStep.tsx
index 42a8e4468..80b9ebb2d 100644
--- a/apps/website/components/onboarding/PersonalInfoStep.tsx
+++ b/apps/website/components/onboarding/PersonalInfoStep.tsx
@@ -1,7 +1,7 @@
 import { User, Clock, ChevronRight } from 'lucide-react';
 import { Input } from '@/ui/Input';
 import { Heading } from '@/ui/Heading';
-import { CountrySelect } from '@/ui/CountrySelect';
+import { CountrySelect } from '@/components/shared/CountrySelect';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
diff --git a/apps/website/ui/LatestResultsSidebar.tsx b/apps/website/components/races/LatestResultsSidebar.tsx
similarity index 100%
rename from apps/website/ui/LatestResultsSidebar.tsx
rename to apps/website/components/races/LatestResultsSidebar.tsx
diff --git a/apps/website/ui/LiveRacesBanner.tsx b/apps/website/components/races/LiveRacesBanner.tsx
similarity index 100%
rename from apps/website/ui/LiveRacesBanner.tsx
rename to apps/website/components/races/LiveRacesBanner.tsx
diff --git a/apps/website/ui/NextRaceCardWrapper.tsx b/apps/website/components/races/NextRaceCardWrapper.tsx
similarity index 100%
rename from apps/website/ui/NextRaceCardWrapper.tsx
rename to apps/website/components/races/NextRaceCardWrapper.tsx
diff --git a/apps/website/ui/RaceCardWrapper.tsx b/apps/website/components/races/RaceCardWrapper.tsx
similarity index 100%
rename from apps/website/ui/RaceCardWrapper.tsx
rename to apps/website/components/races/RaceCardWrapper.tsx
diff --git a/apps/website/ui/RaceEntryList.tsx b/apps/website/components/races/RaceEntryList.tsx
similarity index 96%
rename from apps/website/ui/RaceEntryList.tsx
rename to apps/website/components/races/RaceEntryList.tsx
index 2578429dd..73bed58d4 100644
--- a/apps/website/ui/RaceEntryList.tsx
+++ b/apps/website/components/races/RaceEntryList.tsx
@@ -1,7 +1,7 @@
 
 
 import { Card } from '@/ui/Card';
-import { DriverEntryRow } from '@/ui/DriverEntryRow';
+import { DriverEntryRow } from '@/components/drivers/DriverEntryRow';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
diff --git a/apps/website/ui/RaceFilterBar.tsx b/apps/website/components/races/RaceFilterBar.tsx
similarity index 100%
rename from apps/website/ui/RaceFilterBar.tsx
rename to apps/website/components/races/RaceFilterBar.tsx
diff --git a/apps/website/ui/RaceList.tsx b/apps/website/components/races/RaceList.tsx
similarity index 97%
rename from apps/website/ui/RaceList.tsx
rename to apps/website/components/races/RaceList.tsx
index d7e55ebe6..8d6b04d22 100644
--- a/apps/website/ui/RaceList.tsx
+++ b/apps/website/components/races/RaceList.tsx
@@ -6,7 +6,7 @@ import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { DateHeader } from '@/ui/DateHeader';
 import { Icon } from '@/ui/Icon';
-import { RaceListItem } from '@/ui/RaceListItem';
+import { RaceListItem } from '@/components/races/RaceListItem';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
diff --git a/apps/website/ui/RaceListItem.tsx b/apps/website/components/races/RaceListItem.tsx
similarity index 94%
rename from apps/website/ui/RaceListItem.tsx
rename to apps/website/components/races/RaceListItem.tsx
index 104448c78..2479c83f5 100644
--- a/apps/website/ui/RaceListItem.tsx
+++ b/apps/website/components/races/RaceListItem.tsx
@@ -1,13 +1,13 @@
 
 
 import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
-import { Badge } from './Badge';
-import { Box } from './Box';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { Link } from './Link';
-import { Stack } from './Stack';
-import { Text } from './Text';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface RaceListItemProps {
   track: string;
diff --git a/apps/website/ui/RaceListItemWrapper.tsx b/apps/website/components/races/RaceListItemWrapper.tsx
similarity index 95%
rename from apps/website/ui/RaceListItemWrapper.tsx
rename to apps/website/components/races/RaceListItemWrapper.tsx
index 82f04e3a9..569d8f92b 100644
--- a/apps/website/ui/RaceListItemWrapper.tsx
+++ b/apps/website/components/races/RaceListItemWrapper.tsx
@@ -1,7 +1,7 @@
 
 
 import { routes } from '@/lib/routing/RouteConfig';
-import { RaceListItem as UiRaceListItem } from '@/ui/RaceListItem';
+import { RaceListItem as UiRaceListItem } from '@/components/races/RaceListItem';
 import { CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
 
 interface Race {
diff --git a/apps/website/ui/RaceResultCardWrapper.tsx b/apps/website/components/races/RaceResultCardWrapper.tsx
similarity index 100%
rename from apps/website/ui/RaceResultCardWrapper.tsx
rename to apps/website/components/races/RaceResultCardWrapper.tsx
diff --git a/apps/website/ui/RaceResultRow.tsx b/apps/website/components/races/RaceResultRow.tsx
similarity index 94%
rename from apps/website/ui/RaceResultRow.tsx
rename to apps/website/components/races/RaceResultRow.tsx
index edde4c2dd..1eb42866d 100644
--- a/apps/website/ui/RaceResultRow.tsx
+++ b/apps/website/components/races/RaceResultRow.tsx
@@ -1,11 +1,11 @@
 
 
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Box } from './Box';
-import { Image } from './Image';
-import { Stack } from './Stack';
-import { Surface } from './Surface';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 interface ResultEntry {
   position: number;
@@ -64,7 +64,7 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
         {/* Avatar */}
         <Box position="relative" flexShrink={0}>
           <Box width="10" height="10" rounded="full" overflow="hidden" border={isCurrentUser} borderColor="border-primary-blue/50" className={isCurrentUser ? 'border-2' : ''}>
-            <Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
+            <Image src={driverAvatar} alt={driverName} width={40} height={40} fullWidth fullHeight objectFit="cover" />
           </Box>
           <Box position="absolute" bottom="-0.5" right="-0.5" width="5" height="5" rounded="full" bg="bg-deep-graphite" display="flex" center style={{ fontSize: '0.625rem' }}>
             {CountryFlagDisplay.fromCountryCode(country).toString()}
diff --git a/apps/website/ui/RaceSidebar.tsx b/apps/website/components/races/RaceSidebar.tsx
similarity index 100%
rename from apps/website/ui/RaceSidebar.tsx
rename to apps/website/components/races/RaceSidebar.tsx
diff --git a/apps/website/ui/UpcomingRaces.tsx b/apps/website/components/races/UpcomingRaces.tsx
similarity index 91%
rename from apps/website/ui/UpcomingRaces.tsx
rename to apps/website/components/races/UpcomingRaces.tsx
index 745ea07d6..e0d32ecc2 100644
--- a/apps/website/ui/UpcomingRaces.tsx
+++ b/apps/website/components/races/UpcomingRaces.tsx
@@ -2,14 +2,14 @@
 
 import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
-import { UpcomingRacesList } from '@/ui/UpcomingRacesList';
+import { UpcomingRacesList } from '@/components/races/UpcomingRacesList';
 import { Calendar } from 'lucide-react';
 
 interface UpcomingRace {
diff --git a/apps/website/ui/UpcomingRacesList.tsx b/apps/website/components/races/UpcomingRacesList.tsx
similarity index 87%
rename from apps/website/ui/UpcomingRacesList.tsx
rename to apps/website/components/races/UpcomingRacesList.tsx
index c4c871f09..7c5d4af99 100644
--- a/apps/website/ui/UpcomingRacesList.tsx
+++ b/apps/website/components/races/UpcomingRacesList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Stack } from './Stack';
+import { Stack } from '@/ui/Stack';
 
 interface UpcomingRacesListProps {
   children: ReactNode;
diff --git a/apps/website/ui/UpcomingRacesSidebar.tsx b/apps/website/components/races/UpcomingRacesSidebar.tsx
similarity index 100%
rename from apps/website/ui/UpcomingRacesSidebar.tsx
rename to apps/website/components/races/UpcomingRacesSidebar.tsx
diff --git a/apps/website/ui/CountrySelect.tsx b/apps/website/components/shared/CountrySelect.tsx
similarity index 99%
rename from apps/website/ui/CountrySelect.tsx
rename to apps/website/components/shared/CountrySelect.tsx
index 47c1d5590..d7d6d8cb2 100644
--- a/apps/website/ui/CountrySelect.tsx
+++ b/apps/website/components/shared/CountrySelect.tsx
@@ -2,7 +2,7 @@
 
 import { Check, ChevronDown, Globe, Search } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { CountryFlag } from './CountryFlag';
+import { CountryFlag } from '@/ui/CountryFlag';
 
 export interface Country {
   code: string;
diff --git a/apps/website/ui/RangeField.tsx b/apps/website/components/shared/RangeField.tsx
similarity index 99%
rename from apps/website/ui/RangeField.tsx
rename to apps/website/components/shared/RangeField.tsx
index 3dfd8eda4..1c173574e 100644
--- a/apps/website/ui/RangeField.tsx
+++ b/apps/website/components/shared/RangeField.tsx
@@ -20,7 +20,7 @@ interface RangeFieldProps {
   compact?: boolean;
 }
 
-export default function RangeField({
+export function RangeField({
   label,
   value,
   min,
diff --git a/apps/website/ui/EmptyState.tsx b/apps/website/components/shared/state/EmptyState.tsx
similarity index 99%
rename from apps/website/ui/EmptyState.tsx
rename to apps/website/components/shared/state/EmptyState.tsx
index 3e0b6b3da..f3a9af12d 100644
--- a/apps/website/ui/EmptyState.tsx
+++ b/apps/website/components/shared/state/EmptyState.tsx
@@ -1,7 +1,7 @@
 
 
-import { Button } from './Button';
-import { EmptyStateProps } from './state-types';
+import { Button } from '@/ui/Button';
+import { EmptyStateProps } from '@/ui/state-types';
 
 // Illustration components (simple SVG representations)
 const Illustrations = {
diff --git a/apps/website/ui/ErrorDisplay.tsx b/apps/website/components/shared/state/ErrorDisplay.tsx
similarity index 95%
rename from apps/website/ui/ErrorDisplay.tsx
rename to apps/website/components/shared/state/ErrorDisplay.tsx
index 0b320cbea..a58cbe260 100644
--- a/apps/website/ui/ErrorDisplay.tsx
+++ b/apps/website/components/shared/state/ErrorDisplay.tsx
@@ -2,14 +2,14 @@
 
 import { ApiError } from '@/lib/api/base/ApiError';
 import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react';
-import { Box } from './Box';
-import { Button } from './Button';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { Stack } from './Stack';
-import { ErrorDisplayAction, ErrorDisplayProps } from './state-types';
-import { Surface } from './Surface';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { ErrorDisplayAction, ErrorDisplayProps } from '@/ui/state-types';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 export function ErrorDisplay({
   error,
diff --git a/apps/website/ui/LoadingWrapper.tsx b/apps/website/components/shared/state/LoadingWrapper.tsx
similarity index 97%
rename from apps/website/ui/LoadingWrapper.tsx
rename to apps/website/components/shared/state/LoadingWrapper.tsx
index e770b87c9..b2738cf41 100644
--- a/apps/website/ui/LoadingWrapper.tsx
+++ b/apps/website/components/shared/state/LoadingWrapper.tsx
@@ -1,9 +1,9 @@
 
 
-import { Box } from './Box';
-import { Stack } from './Stack';
-import { LoadingWrapperProps } from './state-types';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { LoadingWrapperProps } from '@/ui/state-types';
+import { Text } from '@/ui/Text';
 
 /**
  * LoadingWrapper Component
diff --git a/apps/website/ui/PageWrapper.tsx b/apps/website/components/shared/state/PageWrapper.tsx
similarity index 96%
rename from apps/website/ui/PageWrapper.tsx
rename to apps/website/components/shared/state/PageWrapper.tsx
index f812f9cc5..5ff872e3f 100644
--- a/apps/website/ui/PageWrapper.tsx
+++ b/apps/website/components/shared/state/PageWrapper.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { LoadingWrapper } from '@/ui/LoadingWrapper';
-import { ErrorDisplay } from '@/ui/ErrorDisplay';
-import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import { Box } from '@/ui/Box';
 import { Inbox, List, LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/ui/StateContainer.tsx b/apps/website/components/shared/state/StateContainer.tsx
similarity index 96%
rename from apps/website/ui/StateContainer.tsx
rename to apps/website/components/shared/state/StateContainer.tsx
index 58d606d31..2c72dfb08 100644
--- a/apps/website/ui/StateContainer.tsx
+++ b/apps/website/components/shared/state/StateContainer.tsx
@@ -2,9 +2,9 @@
 
 import React from 'react';
 import { StateContainerProps, StateContainerConfig } from '@/ui/state-types';
-import { LoadingWrapper } from '@/ui/LoadingWrapper';
-import { ErrorDisplay } from '@/ui/ErrorDisplay';
-import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
@@ -159,6 +159,11 @@ export function StateContainer<T>({
     );
   }
 
+  // Custom success render
+  if (config?.customRender?.success) {
+    return <>{config.customRender.success(data as T)}</>;
+  }
+
   // At this point, data is guaranteed to be non-null and non-undefined
   return <>{children(data as T)}</>;
 }
@@ -383,4 +388,4 @@ export function GridStateContainer<T>({
       {children}
     </StateContainer>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/ui/StatefulPageWrapper.tsx b/apps/website/components/shared/state/StatefulPageWrapper.tsx
similarity index 87%
rename from apps/website/ui/StatefulPageWrapper.tsx
rename to apps/website/components/shared/state/StatefulPageWrapper.tsx
index 38fb019cd..ad62a66c0 100644
--- a/apps/website/ui/StatefulPageWrapper.tsx
+++ b/apps/website/components/shared/state/StatefulPageWrapper.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { PageWrapper, PageWrapperProps } from './PageWrapper';
+import { PageWrapper, PageWrapperProps } from '@/components/shared/state/PageWrapper';
 
 /**
  * Stateful Page Wrapper - CLIENT SIDE ONLY
@@ -56,4 +56,4 @@ export function StatefulPageWrapper<TData>({
 }
 
 // Re-export types for convenience
-export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from './PageWrapper';
\ No newline at end of file
+export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from '@/components/shared/state/PageWrapper';
\ No newline at end of file
diff --git a/apps/website/ui/FriendsPreview.tsx b/apps/website/components/social/FriendsPreview.tsx
similarity index 100%
rename from apps/website/ui/FriendsPreview.tsx
rename to apps/website/components/social/FriendsPreview.tsx
diff --git a/apps/website/ui/FriendsSidebar.tsx b/apps/website/components/social/FriendsSidebar.tsx
similarity index 96%
rename from apps/website/ui/FriendsSidebar.tsx
rename to apps/website/components/social/FriendsSidebar.tsx
index 82c7c7148..36a9c9e28 100644
--- a/apps/website/ui/FriendsSidebar.tsx
+++ b/apps/website/components/social/FriendsSidebar.tsx
@@ -3,7 +3,7 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 import { FriendItem } from '@/ui/FriendItem';
 import { FriendsList } from '@/ui/FriendsList';
 import { Heading } from '@/ui/Heading';
diff --git a/apps/website/components/sponsors/SponsorBenefitCard.tsx b/apps/website/components/sponsors/SponsorBenefitCard.tsx
index 7eda95e05..6794e126b 100644
--- a/apps/website/components/sponsors/SponsorBenefitCard.tsx
+++ b/apps/website/components/sponsors/SponsorBenefitCard.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import { BenefitCard } from '@/ui/BenefitCard';
+import { BenefitCard } from '@/components/landing/BenefitCard';
 
 interface SponsorBenefitCardProps {
   icon: LucideIcon;
diff --git a/apps/website/ui/SponsorHero.tsx b/apps/website/components/sponsors/SponsorHero.tsx
similarity index 95%
rename from apps/website/ui/SponsorHero.tsx
rename to apps/website/components/sponsors/SponsorHero.tsx
index 09a24d165..44ca46333 100644
--- a/apps/website/ui/SponsorHero.tsx
+++ b/apps/website/components/sponsors/SponsorHero.tsx
@@ -3,11 +3,16 @@
 import { motion, useReducedMotion } from 'framer-motion';
 import { Building2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { Box } from './Box';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { Text } from './Text';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
 
+interface SponsorHeroProps {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+}
 
 export function SponsorHero({ title, subtitle, children }: SponsorHeroProps) {
   const shouldReduceMotion = useReducedMotion();
diff --git a/apps/website/components/sponsors/SponsorWorkflowMockup.tsx b/apps/website/components/sponsors/SponsorWorkflowMockup.tsx
index 8e75ea978..cf0dca3f0 100644
--- a/apps/website/components/sponsors/SponsorWorkflowMockup.tsx
+++ b/apps/website/components/sponsors/SponsorWorkflowMockup.tsx
@@ -8,7 +8,7 @@ import {
   Car,
   TrendingUp,
 } from 'lucide-react';
-import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';
+import { WorkflowMockup, WorkflowStep } from '@/components/mockups/WorkflowMockup';
 
 const WORKFLOW_STEPS: WorkflowStep[] = [
   {
diff --git a/apps/website/components/teams/TeamAdmin.tsx b/apps/website/components/teams/TeamAdmin.tsx
index f0765413d..e3ff51a3c 100644
--- a/apps/website/components/teams/TeamAdmin.tsx
+++ b/apps/website/components/teams/TeamAdmin.tsx
@@ -12,7 +12,7 @@ import { Heading } from '@/ui/Heading';
 import { JoinRequestList } from '@/ui/JoinRequestList';
 import { JoinRequestItem } from '@/ui/JoinRequestItem';
 import { DangerZone } from '@/ui/DangerZone';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 import { useTeamJoinRequests, useUpdateTeam, useApproveJoinRequest, useRejectJoinRequest } from "@/hooks/team";
 import type { TeamJoinRequestViewModel } from '@/lib/view-models/TeamJoinRequestViewModel';
 
diff --git a/apps/website/ui/TeamHero.tsx b/apps/website/components/teams/TeamHero.tsx
similarity index 100%
rename from apps/website/ui/TeamHero.tsx
rename to apps/website/components/teams/TeamHero.tsx
diff --git a/apps/website/ui/TeamHeroSection.tsx b/apps/website/components/teams/TeamHeroSection.tsx
similarity index 92%
rename from apps/website/ui/TeamHeroSection.tsx
rename to apps/website/components/teams/TeamHeroSection.tsx
index da8c8c12e..4715a7a72 100644
--- a/apps/website/ui/TeamHeroSection.tsx
+++ b/apps/website/components/teams/TeamHeroSection.tsx
@@ -2,11 +2,11 @@
 
 import { Users } from 'lucide-react';
 import { ReactNode } from 'react';
-import { Badge } from './Badge';
-import { Box } from './Box';
-import { Heading } from './Heading';
-import { Stack } from './Stack';
-import { Text } from './Text';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface TeamHeroSectionProps {
   title: ReactNode;
diff --git a/apps/website/ui/TeamHeroSectionWrapper.tsx b/apps/website/components/teams/TeamHeroSectionWrapper.tsx
similarity index 95%
rename from apps/website/ui/TeamHeroSectionWrapper.tsx
rename to apps/website/components/teams/TeamHeroSectionWrapper.tsx
index 99417ec56..2329897dd 100644
--- a/apps/website/ui/TeamHeroSectionWrapper.tsx
+++ b/apps/website/components/teams/TeamHeroSectionWrapper.tsx
@@ -5,8 +5,8 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { SkillLevelButton } from '@/ui/SkillLevelButton';
 import { Stack } from '@/ui/Stack';
-import { TeamHeroSection as UiTeamHeroSection } from '@/ui/TeamHeroSection';
-import { TeamHeroStats } from '@/ui/TeamHeroStats';
+import { TeamHeroSection as UiTeamHeroSection } from '@/components/teams/TeamHeroSection';
+import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
 import { Text } from '@/ui/Text';
 import {
     Crown,
diff --git a/apps/website/ui/TeamHeroStats.tsx b/apps/website/components/teams/TeamHeroStats.tsx
similarity index 90%
rename from apps/website/ui/TeamHeroStats.tsx
rename to apps/website/components/teams/TeamHeroStats.tsx
index ea4aabfbb..16217d3e5 100644
--- a/apps/website/ui/TeamHeroStats.tsx
+++ b/apps/website/components/teams/TeamHeroStats.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Users, UserPlus } from 'lucide-react';
-import { Box } from './Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
-import { Stack } from './Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
 
 interface TeamHeroStatsProps {
   teamCount: number;
diff --git a/apps/website/ui/TeamIdentity.tsx b/apps/website/components/teams/TeamIdentity.tsx
similarity index 85%
rename from apps/website/ui/TeamIdentity.tsx
rename to apps/website/components/teams/TeamIdentity.tsx
index 7ccb709e2..26e24efd1 100644
--- a/apps/website/ui/TeamIdentity.tsx
+++ b/apps/website/components/teams/TeamIdentity.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Box } from './Box';
-import { Stack } from './Stack';
-import { Text } from './Text';
-import { Image } from './Image';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
 
 interface TeamIdentityProps {
   name: string;
@@ -20,6 +20,9 @@ export function TeamIdentity({ name, logoUrl, performanceLevel, category }: Team
           alt={name}
           width={40}
           height={40}
+          fullWidth
+          fullHeight
+          objectFit="cover"
         />
       </Box>
       <Box flex={1}>
diff --git a/apps/website/ui/TeamLeaderboardPreviewWrapper.tsx b/apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx
similarity index 100%
rename from apps/website/ui/TeamLeaderboardPreviewWrapper.tsx
rename to apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx
diff --git a/apps/website/ui/TeamPodium.tsx b/apps/website/components/teams/TeamPodium.tsx
similarity index 94%
rename from apps/website/ui/TeamPodium.tsx
rename to apps/website/components/teams/TeamPodium.tsx
index 9435f72ce..8185d5807 100644
--- a/apps/website/ui/TeamPodium.tsx
+++ b/apps/website/components/teams/TeamPodium.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { Trophy, Crown, Users } from 'lucide-react';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { getMediaUrl } from '@/lib/utilities/media';
-import { Box } from './Box';
-import { Stack } from './Stack';
-import { Text } from './Text';
-import { Icon } from './Icon';
-import { Button } from './Button';
-import { Image } from './Image';
-import { Podium, PodiumItem } from './Podium';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import { Image } from '@/ui/Image';
+import { Podium, PodiumItem } from '@/ui/Podium';
 
 interface TeamPodiumProps {
   teams: TeamSummaryViewModel[];
diff --git a/apps/website/ui/TeamRankingsTable.tsx b/apps/website/components/teams/TeamRankingsTable.tsx
similarity index 91%
rename from apps/website/ui/TeamRankingsTable.tsx
rename to apps/website/components/teams/TeamRankingsTable.tsx
index 177258b97..fea9f1563 100644
--- a/apps/website/ui/TeamRankingsTable.tsx
+++ b/apps/website/components/teams/TeamRankingsTable.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Users } from 'lucide-react';
-import { Box } from './Box';
-import { Stack } from './Stack';
-import { Text } from './Text';
-import { Icon } from './Icon';
-import { Card } from './Card';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './Table';
-import { RankBadge } from './RankBadge';
-import { TeamIdentity } from './TeamIdentity';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Card } from '@/ui/Card';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { RankBadge } from '@/ui/RankBadge';
+import { TeamIdentity } from '@/components/teams/TeamIdentity';
 import { getMediaUrl } from '@/lib/utilities/media';
 
 interface Team {
diff --git a/apps/website/components/teams/TeamRoster.tsx b/apps/website/components/teams/TeamRoster.tsx
index f70647ae1..8e108e9bb 100644
--- a/apps/website/components/teams/TeamRoster.tsx
+++ b/apps/website/components/teams/TeamRoster.tsx
@@ -12,8 +12,8 @@ import { Select } from '@/ui/Select';
 import { Button } from '@/ui/Button';
 import { routes } from '@/lib/routing/RouteConfig';
 import { TeamRosterList } from '@/ui/TeamRosterList';
-import { TeamRosterItem } from '@/ui/TeamRosterItem';
-import { MinimalEmptyState } from '@/ui/EmptyState';
+import { TeamRosterItem } from '@/components/teams/TeamRosterItem';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 import { sortMembers } from '@/lib/utilities/roster-utils';
 
 export type TeamRole = 'owner' | 'admin' | 'member';
diff --git a/apps/website/ui/TeamRosterItem.tsx b/apps/website/components/teams/TeamRosterItem.tsx
similarity index 91%
rename from apps/website/ui/TeamRosterItem.tsx
rename to apps/website/components/teams/TeamRosterItem.tsx
index 953626c04..a5b63d5f7 100644
--- a/apps/website/ui/TeamRosterItem.tsx
+++ b/apps/website/components/teams/TeamRosterItem.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
-import { Box } from './Box';
-import { Stack } from './Stack';
-import { Text } from './Text';
-import { DriverIdentity } from './DriverIdentity';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 
 interface TeamRosterItemProps {
diff --git a/apps/website/components/teams/TeamStandings.tsx b/apps/website/components/teams/TeamStandings.tsx
index 24ba6df86..66df5a5dd 100644
--- a/apps/website/components/teams/TeamStandings.tsx
+++ b/apps/website/components/teams/TeamStandings.tsx
@@ -5,8 +5,8 @@ import { useTeamStandings } from "@/hooks/team/useTeamStandings";
 import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { StandingsList } from '@/ui/StandingsList';
-import { LoadingWrapper } from '@/ui/LoadingWrapper';
-import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import { Trophy } from 'lucide-react';
 
 interface TeamStandingsProps {
diff --git a/apps/website/ui/TopThreePodium.tsx b/apps/website/components/teams/TopThreePodium.tsx
similarity index 100%
rename from apps/website/ui/TopThreePodium.tsx
rename to apps/website/components/teams/TopThreePodium.tsx
diff --git a/apps/website/ui/WhyJoinTeamSection.tsx b/apps/website/components/teams/WhyJoinTeamSection.tsx
similarity index 96%
rename from apps/website/ui/WhyJoinTeamSection.tsx
rename to apps/website/components/teams/WhyJoinTeamSection.tsx
index 3e7125c5b..f18158667 100644
--- a/apps/website/ui/WhyJoinTeamSection.tsx
+++ b/apps/website/components/teams/WhyJoinTeamSection.tsx
@@ -10,7 +10,7 @@ import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Grid } from '@/ui/Grid';
-import { BenefitCard } from '@/ui/BenefitCard';
+import { BenefitCard } from '@/components/landing/BenefitCard';
 
 interface Benefit {
   icon: LucideIcon;
diff --git a/apps/website/templates/DashboardTemplate.tsx b/apps/website/templates/DashboardTemplate.tsx
index e6da2ecc5..ed49d2126 100644
--- a/apps/website/templates/DashboardTemplate.tsx
+++ b/apps/website/templates/DashboardTemplate.tsx
@@ -6,12 +6,12 @@ import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
-import { DashboardHero } from '@/ui/DashboardHeroWrapper';
-import { NextRaceCard } from '@/ui/NextRaceCardWrapper';
-import { ChampionshipStandings } from '@/ui/ChampionshipStandings';
-import { ActivityFeed } from '@/ui/ActivityFeed';
-import { UpcomingRaces } from '@/ui/UpcomingRaces';
-import { FriendsSidebar } from '@/ui/FriendsSidebar';
+import { DashboardHero } from '@/components/dashboard/DashboardHeroWrapper';
+import { NextRaceCard } from '@/components/races/NextRaceCardWrapper';
+import { ChampionshipStandings } from '@/components/leagues/ChampionshipStandings';
+import { ActivityFeed } from '@/components/feed/ActivityFeed';
+import { UpcomingRaces } from '@/components/races/UpcomingRaces';
+import { FriendsSidebar } from '@/components/social/FriendsSidebar';
 import { Stack } from '@/ui/Stack';
 
 interface DashboardTemplateProps {
diff --git a/apps/website/templates/DriverProfileTemplate.tsx b/apps/website/templates/DriverProfileTemplate.tsx
index 10ffeeaa9..990d16297 100644
--- a/apps/website/templates/DriverProfileTemplate.tsx
+++ b/apps/website/templates/DriverProfileTemplate.tsx
@@ -2,12 +2,12 @@
 
 import { RatingBreakdown } from '@/ui/RatingBreakdown';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { AchievementGrid } from '@/ui/AchievementGrid';
+import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import { CareerStats } from '@/ui/CareerStats';
-import { FriendsPreview } from '@/ui/FriendsPreview';
+import { FriendsPreview } from '@/components/social/FriendsPreview';
 import { PerformanceOverview } from '@/ui/PerformanceOverview';
 import { ProfileBio } from '@/ui/ProfileBio';
-import { ProfileHero } from '@/ui/ProfileHero';
+import { ProfileHero } from '@/components/drivers/ProfileHero';
 import { ProfileTabs, type ProfileTab } from '@/ui/ProfileTabs';
 import { RacingProfile } from '@/ui/RacingProfile';
 import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
diff --git a/apps/website/templates/DriversTemplate.tsx b/apps/website/templates/DriversTemplate.tsx
index 471bef8fa..8c9aecb73 100644
--- a/apps/website/templates/DriversTemplate.tsx
+++ b/apps/website/templates/DriversTemplate.tsx
@@ -16,14 +16,14 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
-import { FeaturedDriverCard } from '@/ui/FeaturedDriverCard';
+import { FeaturedDriverCard } from '@/components/drivers/FeaturedDriverCard';
 import { SkillDistribution } from '@/ui/SkillDistribution';
 import { CategoryDistribution } from '@/ui/CategoryDistribution';
-import { LeaderboardPreview } from '@/ui/LeaderboardPreview';
-import { RecentActivity } from '@/ui/RecentActivity';
+import { LeaderboardPreview } from '@/components/leaderboards/LeaderboardPreview';
+import { RecentActivity } from '@/components/feed/RecentActivity';
 import { PageHero } from '@/ui/PageHero';
 import { DriversSearch } from '@/ui/DriversSearch';
-import { EmptyState } from '@/ui/EmptyState';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 
 interface DriversTemplateProps {
diff --git a/apps/website/templates/HomeTemplate.tsx b/apps/website/templates/HomeTemplate.tsx
index 0cc60d83b..32eb82662 100644
--- a/apps/website/templates/HomeTemplate.tsx
+++ b/apps/website/templates/HomeTemplate.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import React from 'react';
-import { LandingHero } from '@/ui/LandingHero';
-import { AlternatingSection } from '@/ui/AlternatingSection';
-import { FeatureGrid } from '@/ui/FeatureGrid';
+import { LandingHero } from '@/components/landing/LandingHero';
+import { AlternatingSection } from '@/components/landing/AlternatingSection';
+import { FeatureGrid } from '@/components/landing/FeatureGrid';
 import { DiscordCTA } from '@/ui/DiscordCTA';
 import { FAQ } from '@/components/landing/FAQ';
 import { Footer } from '@/ui/Footer';
@@ -24,7 +24,7 @@ import { Grid } from '@/ui/Grid';
 import { Surface } from '@/ui/Surface';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { routes } from '@/lib/routing/RouteConfig';
-import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
+import { FeatureItem, ResultItem, StepItem } from '@/components/landing/LandingItems';
 import { ModeGuard } from '@/components/shared/ModeGuard';
 
 export interface HomeViewData {
diff --git a/apps/website/templates/LeaderboardsTemplate.tsx b/apps/website/templates/LeaderboardsTemplate.tsx
index 87f914a27..cddcd0c1f 100644
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -6,7 +6,7 @@ import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
-import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
+import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 
diff --git a/apps/website/templates/ProfileTemplate.tsx b/apps/website/templates/ProfileTemplate.tsx
index b88730482..b61ab3ecd 100644
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { CreateDriverForm } from '@/components/drivers/CreateDriverForm';
 import { ProfileRaceHistory } from '@/components/drivers/ProfileRaceHistory';
 import { ProfileSettings } from '@/components/drivers/ProfileSettings';
-import { AchievementGrid } from '@/ui/AchievementGrid';
-import { ProfileHero } from '@/ui/ProfileHero';
+import { AchievementGrid } from '@/components/achievements/AchievementGrid';
+import { ProfileHero } from '@/components/drivers/ProfileHero';
 import { ProfileStatGrid } from '@/ui/ProfileStatGrid';
 import { ProfileTabs, type ProfileTab as ProfileTabsType } from '@/ui/ProfileTabs';
 import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
diff --git a/apps/website/templates/RaceDetailTemplate.tsx b/apps/website/templates/RaceDetailTemplate.tsx
index 8d708bad4..3254b3f17 100644
--- a/apps/website/templates/RaceDetailTemplate.tsx
+++ b/apps/website/templates/RaceDetailTemplate.tsx
@@ -15,9 +15,9 @@ import { InfoBox } from '@/ui/InfoBox';
 import { RaceJoinButton } from '@/ui/RaceJoinButton';
 import { RaceHero } from '@/ui/RaceHeroWrapper';
 import { RaceUserResult } from '@/ui/RaceUserResultWrapper';
-import { RaceEntryList } from '@/ui/RaceEntryList';
+import { RaceEntryList } from '@/components/races/RaceEntryList';
 import { RaceDetailCard } from '@/ui/RaceDetailCard';
-import { LeagueSummaryCard } from '@/ui/LeagueSummaryCardWrapper';
+import { LeagueSummaryCard } from '@/components/leagues/LeagueSummaryCardWrapper';
 import {
   AlertTriangle,
   ArrowLeft,
diff --git a/apps/website/templates/RaceResultsTemplate.tsx b/apps/website/templates/RaceResultsTemplate.tsx
index 453929b91..c8421bd19 100644
--- a/apps/website/templates/RaceResultsTemplate.tsx
+++ b/apps/website/templates/RaceResultsTemplate.tsx
@@ -14,7 +14,7 @@ import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { ArrowLeft, Trophy, Zap, type LucideIcon } from 'lucide-react';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
-import { RaceResultRow } from '@/ui/RaceResultRow';
+import { RaceResultRow } from '@/components/races/RaceResultRow';
 import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
 
 export interface RaceResultsTemplateProps {
diff --git a/apps/website/templates/RaceStewardingTemplate.tsx b/apps/website/templates/RaceStewardingTemplate.tsx
index 421a0df5b..e2f74e99f 100644
--- a/apps/website/templates/RaceStewardingTemplate.tsx
+++ b/apps/website/templates/RaceStewardingTemplate.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { RaceStewardingStats } from '@/ui/RaceStewardingStats';
 import { StewardingTabs } from '@/ui/StewardingTabs';
-import { ProtestCard } from '@/ui/ProtestCardWrapper';
+import { ProtestCard } from '@/components/leagues/ProtestCardWrapper';
 import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
 import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
diff --git a/apps/website/templates/RacesAllTemplate.tsx b/apps/website/templates/RacesAllTemplate.tsx
index ee7fefda7..5d9626e88 100644
--- a/apps/website/templates/RacesAllTemplate.tsx
+++ b/apps/website/templates/RacesAllTemplate.tsx
@@ -19,7 +19,7 @@ import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { Skeleton } from '@/ui/Skeleton';
-import { RaceListItem } from '@/ui/RaceListItemWrapper';
+import { RaceListItem } from '@/components/races/RaceListItemWrapper';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
 
 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
diff --git a/apps/website/templates/RacesTemplate.tsx b/apps/website/templates/RacesTemplate.tsx
index 068597a18..16d954118 100644
--- a/apps/website/templates/RacesTemplate.tsx
+++ b/apps/website/templates/RacesTemplate.tsx
@@ -7,10 +7,10 @@ import { Container } from '@/ui/Container';
 import { RaceFilterModal } from '@/ui/RaceFilterModal';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
 import { RacePageHeader } from '@/ui/RacePageHeader';
-import { LiveRacesBanner } from '@/ui/LiveRacesBanner';
-import { RaceFilterBar } from '@/ui/RaceFilterBar';
-import { RaceList } from '@/ui/RaceList';
-import { RaceSidebar } from '@/ui/RaceSidebar';
+import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
+import { RaceFilterBar } from '@/components/races/RaceFilterBar';
+import { RaceList } from '@/components/races/RaceList';
+import { RaceSidebar } from '@/components/races/RaceSidebar';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 
diff --git a/apps/website/templates/TeamDetailTemplate.tsx b/apps/website/templates/TeamDetailTemplate.tsx
index fc7ea8d5d..d4c58439f 100644
--- a/apps/website/templates/TeamDetailTemplate.tsx
+++ b/apps/website/templates/TeamDetailTemplate.tsx
@@ -17,7 +17,7 @@ import { Text } from '@/ui/Text';
 import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
 
 import { TeamAdmin } from '@/components/teams/TeamAdmin';
-import { TeamHero } from '@/ui/TeamHero';
+import { TeamHero } from '@/components/teams/TeamHero';
 import { TeamRoster } from '@/components/teams/TeamRoster';
 import { TeamStandings } from '@/components/teams/TeamStandings';
 import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
diff --git a/apps/website/templates/TeamLeaderboardTemplate.tsx b/apps/website/templates/TeamLeaderboardTemplate.tsx
index a0d69cc85..b03011846 100644
--- a/apps/website/templates/TeamLeaderboardTemplate.tsx
+++ b/apps/website/templates/TeamLeaderboardTemplate.tsx
@@ -10,9 +10,9 @@ import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { ModalIcon } from '@/ui/ModalIcon';
-import { TeamPodium } from '@/ui/TeamPodium';
+import { TeamPodium } from '@/components/teams/TeamPodium';
 import { TeamFilter } from '@/ui/TeamFilter';
-import { TeamRankingsTable } from '@/ui/TeamRankingsTable';
+import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
 import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
 
 interface TeamLeaderboardTemplateProps {
diff --git a/apps/website/templates/TeamsTemplate.tsx b/apps/website/templates/TeamsTemplate.tsx
index 8b6386ccd..39abe1f96 100644
--- a/apps/website/templates/TeamsTemplate.tsx
+++ b/apps/website/templates/TeamsTemplate.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Users } from 'lucide-react';
-import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
+import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
@@ -11,7 +11,7 @@ import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { TeamCard } from '@/ui/TeamCardWrapper';
-import { EmptyState } from '@/ui/EmptyState';
+import { EmptyState } from '@/components/shared/state/EmptyState';
 import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';
 
 interface TeamsTemplateProps {
diff --git a/apps/website/ui/ActivityItem.tsx b/apps/website/ui/ActivityItem.tsx
index 73ea20385..73c9a2eca 100644
--- a/apps/website/ui/ActivityItem.tsx
+++ b/apps/website/ui/ActivityItem.tsx
@@ -3,6 +3,7 @@
 import { Box } from './Box';
 import { Link } from './Link';
 import { Text } from './Text';
+import { Surface } from './Surface';
 
 interface ActivityItemProps {
   headline: string;
diff --git a/apps/website/ui/AvailableLeagueCard.tsx b/apps/website/ui/AvailableLeagueCard.tsx
index 6426b2572..a17350693 100644
--- a/apps/website/ui/AvailableLeagueCard.tsx
+++ b/apps/website/ui/AvailableLeagueCard.tsx
@@ -9,6 +9,7 @@ import { Heading } from './Heading';
 import { Icon } from './Icon';
 import { Link } from './Link';
 import { Stack } from './Stack';
+import { Text } from './Text';
 
 interface AvailableLeague {
   id: string;
diff --git a/apps/website/ui/Box.tsx b/apps/website/ui/Box.tsx
index 9c8a13a48..3a34395b0 100644
--- a/apps/website/ui/Box.tsx
+++ b/apps/website/ui/Box.tsx
@@ -334,6 +334,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     blur ? `blur-${blur}` : '',
     animate ? `animate-${animate}` : '',
     translateX ? `translate-x-${translateX}` : '',
+    textAlign ? `text-${textAlign}` : '',
     hoverScale ? 'hover:scale-[1.02]' : '',
     group ? 'group' : '',
     groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
diff --git a/apps/website/ui/Button.tsx b/apps/website/ui/Button.tsx
index 9750f11ff..5d9dcacb5 100644
--- a/apps/website/ui/Button.tsx
+++ b/apps/website/ui/Button.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, ElementType } from 'react';
+import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, forwardRef } from 'react';
 import { Stack } from './Stack';
 import { Box, BoxProps } from './Box';
 
@@ -18,7 +18,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'
   rel?: string;
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ 
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ 
   children, 
   onClick, 
   className = '',
@@ -79,7 +79,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
         target={target}
         rel={rel}
         className={classes}
-        {...(props as any)}
+        {...props}
       >
         {content}
       </Box>
@@ -89,12 +89,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   return (
     <Box 
       as="button"
-      ref={ref as any}
+      ref={ref}
       type={type}
       className={classes}
-      onClick={onClick as any}
+      onClick={onClick}
       disabled={disabled}
-      {...(props as any)}
+      {...props}
     >
       {content}
     </Box>
@@ -102,5 +102,3 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 });
 
 Button.displayName = 'Button';
-
-export default Button;
diff --git a/apps/website/ui/Card.tsx b/apps/website/ui/Card.tsx
index 3631a050e..47abfa97a 100644
--- a/apps/website/ui/Card.tsx
+++ b/apps/website/ui/Card.tsx
@@ -1,20 +1,26 @@
-import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
+import React, { ReactNode, MouseEventHandler } from 'react';
 import { Box, BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
+interface ResponsiveSpacing {
+  base?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+}
+
 interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'onClick'> {
   children: ReactNode;
   className?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
   variant?: 'default' | 'highlight';
-  p?: Spacing | any;
-  px?: Spacing | any;
-  py?: Spacing | any;
-  pt?: Spacing | any;
-  pb?: Spacing | any;
-  pl?: Spacing | any;
-  pr?: Spacing | any;
+  p?: Spacing | ResponsiveSpacing;
+  px?: Spacing | ResponsiveSpacing;
+  py?: Spacing | ResponsiveSpacing;
+  pt?: Spacing | ResponsiveSpacing;
+  pb?: Spacing | ResponsiveSpacing;
+  pl?: Spacing | ResponsiveSpacing;
+  pr?: Spacing | ResponsiveSpacing;
 }
 
 export function Card({ 
@@ -22,7 +28,6 @@ export function Card({
   className = '', 
   onClick,
   variant = 'default',
-  p, px, py, pt, pb, pl, pr,
   ...props
 }: CardProps) {
   const baseClasses = 'rounded-lg shadow-card border duration-200';
@@ -32,29 +37,24 @@ export function Card({
     highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 border-blue-500/30'
   };
 
-  const spacingMap: Record<number, string> = {
-    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
-    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
-    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
-    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
-  };
-  
   const classes = [
     baseClasses,
     variantClasses[variant],
     onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
-    p !== undefined ? `p-${spacingMap[p]}` : (px === undefined && py === undefined && pt === undefined && pb === undefined && pl === undefined && pr === undefined ? 'p-6' : ''),
-    px !== undefined ? `px-${spacingMap[px]}` : '',
-    py !== undefined ? `py-${spacingMap[py]}` : '',
-    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
-    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
-    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
-    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
     className
   ].filter(Boolean).join(' ');
   
+  // Default padding if none provided
+  const hasPadding = props.p !== undefined || props.px !== undefined || props.py !== undefined || 
+                    props.pt !== undefined || props.pb !== undefined || props.pl !== undefined || props.pr !== undefined;
+  
   return (
-    <Box className={classes} onClick={onClick as any} {...props}>
+    <Box 
+      className={classes} 
+      onClick={onClick} 
+      p={hasPadding ? undefined : 6}
+      {...props}
+    >
       {children}
     </Box>
   );
diff --git a/apps/website/ui/Container.tsx b/apps/website/ui/Container.tsx
index 3c467d748..551365f0e 100644
--- a/apps/website/ui/Container.tsx
+++ b/apps/website/ui/Container.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode } from 'react';
 import { Box, BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
diff --git a/apps/website/ui/DashboardHero.tsx b/apps/website/ui/DashboardHero.tsx
index d432aa02b..f95f3058e 100644
--- a/apps/website/ui/DashboardHero.tsx
+++ b/apps/website/ui/DashboardHero.tsx
@@ -6,6 +6,7 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Image } from './Image';
 import { Stack } from './Stack';
+import { Text } from './Text';
 
 interface DashboardHeroProps {
   driverName: string;
diff --git a/apps/website/ui/DiscordCTA.tsx b/apps/website/ui/DiscordCTA.tsx
index 7311442b8..6205df69e 100644
--- a/apps/website/ui/DiscordCTA.tsx
+++ b/apps/website/ui/DiscordCTA.tsx
@@ -7,6 +7,7 @@ import { DiscordIcon } from '@/ui/icons/DiscordIcon';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/Grid';
 import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
 
 export function DiscordCTA() {
@@ -77,7 +78,7 @@ export function DiscordCTA() {
             <Box maxWidth="672px" mx="auto">
               <Stack gap={3}>
                 <Text size="sm" color="text-gray-300" weight="normal" leading="relaxed">
-                  GridPilot is a <Text weight="bold" color="text-white">solo developer project</Text>, and I'm building it because I got tired of the chaos in league racing.
+                  GridPilot is a <Text weight="bold" color="text-white">solo developer project</Text>, and I&apos;m building it because I got tired of the chaos in league racing.
                 </Text>
                 <Text size="sm" color="text-gray-400" weight="normal" leading="relaxed">
                   This is <Text weight="bold" color="text-gray-300">early days</Text>, and I need your help. Join the Discord to:
@@ -143,7 +144,7 @@ export function DiscordCTA() {
             {/* Footer note */}
             <Box maxWidth="xl" mx="auto" pt={4}>
               <Text size="xs" color="text-gray-500" weight="light" leading="relaxed" align="center" block>
-                This is a community effort. Every voice matters. Let's build something that actually works for league racing.
+                This is a community effort. Every voice matters. Let&apos;s build something that actually works for league racing.
               </Text>
             </Box>
           </Stack>
@@ -186,5 +187,3 @@ function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: st
     </Surface>
   );
 }
-
-import { Grid } from '@/ui/Grid';
diff --git a/apps/website/ui/DurationField.tsx b/apps/website/ui/DurationField.tsx
index 133b6e282..91124f1fc 100644
--- a/apps/website/ui/DurationField.tsx
+++ b/apps/website/ui/DurationField.tsx
@@ -1,6 +1,6 @@
 
 
-import Input from '@/ui/Input';
+import { Input } from '@/ui/Input';
 
 interface DurationFieldProps {
   label: string;
@@ -13,7 +13,7 @@ interface DurationFieldProps {
   error?: string;
 }
 
-export default function DurationField({
+export function DurationField({
   label,
   value,
   onChange,
diff --git a/apps/website/ui/FeedItem.tsx b/apps/website/ui/FeedItem.tsx
index 126004c6b..1b4730481 100644
--- a/apps/website/ui/FeedItem.tsx
+++ b/apps/website/ui/FeedItem.tsx
@@ -1,9 +1,7 @@
 import React, { ReactNode } from 'react';
-import Image from 'next/image';
 import { Box } from './Box';
-import { Stack } from './Stack';
 import { Text } from './Text';
-import { Card } from './Card';
+import { Image } from './Image';
 
 interface FeedItemProps {
   actorName?: string;
@@ -34,7 +32,9 @@ export function FeedItem({
               alt={actorName || ''}
               width={40}
               height={40}
-              className="w-full h-full object-cover"
+              fullWidth
+              fullHeight
+              objectFit="cover"
             />
           </Box>
         ) : (
diff --git a/apps/website/ui/Footer.tsx b/apps/website/ui/Footer.tsx
index 35f61d5a1..c067d1a13 100644
--- a/apps/website/ui/Footer.tsx
+++ b/apps/website/ui/Footer.tsx
@@ -1,9 +1,6 @@
-'use client';
-
 import { Image } from '@/ui/Image';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Link } from '@/ui/Link';
 
 const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
diff --git a/apps/website/ui/Grid.tsx b/apps/website/ui/Grid.tsx
index 20db27813..1bc863c8a 100644
--- a/apps/website/ui/Grid.tsx
+++ b/apps/website/ui/Grid.tsx
@@ -6,7 +6,7 @@ interface GridProps extends Omit<BoxProps<'div'>, 'children' | 'display'> {
   cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  gap?: any;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
 }
 
 export function Grid({ 
diff --git a/apps/website/ui/InfoBanner.tsx b/apps/website/ui/InfoBanner.tsx
index 9aaa1bbb4..0c54ec67a 100644
--- a/apps/website/ui/InfoBanner.tsx
+++ b/apps/website/ui/InfoBanner.tsx
@@ -75,7 +75,7 @@ export function InfoBanner({
         <Icon icon={BannerIcon} size={5} color={config.iconColor} />
         <Box style={{ flex: 1 }}>
           {title && (
-            <Text weight="medium" color={config.titleColor as any} block mb={1}>{title}</Text>
+            <Text weight="medium" color={config.titleColor} block mb={1}>{title}</Text>
           )}
           <Text size="sm" color="text-gray-400" block>{children}</Text>
         </Box>
diff --git a/apps/website/ui/Input.tsx b/apps/website/ui/Input.tsx
index de56ec566..3767598be 100644
--- a/apps/website/ui/Input.tsx
+++ b/apps/website/ui/Input.tsx
@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, InputHTMLAttributes } from 'react';
 import { Text } from './Text';
 import { Box } from './Box';
 import { Stack } from './Stack';
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   variant?: 'default' | 'error';
   errorMessage?: string;
   icon?: React.ReactNode;
diff --git a/apps/website/ui/JoinRequestItem.tsx b/apps/website/ui/JoinRequestItem.tsx
index 0ef4051e7..b653863de 100644
--- a/apps/website/ui/JoinRequestItem.tsx
+++ b/apps/website/ui/JoinRequestItem.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Box } from './Box';
 import { Text } from './Text';
 import { Stack } from './Stack';
diff --git a/apps/website/ui/LeagueCard.tsx b/apps/website/ui/LeagueCard.tsx
index eef707313..a92708ba2 100644
--- a/apps/website/ui/LeagueCard.tsx
+++ b/apps/website/ui/LeagueCard.tsx
@@ -5,6 +5,9 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
 import { Text } from './Text';
+import { Image } from './Image';
+import { PlaceholderImage } from './PlaceholderImage';
+import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';
 
 interface LeagueCardProps {
   name: string;
@@ -67,12 +70,13 @@ export function LeagueCard({
       >
         {/* Cover Image */}
         <Box position="relative" h="32" overflow="hidden">
-          <img
+          <Image
             src={coverUrl}
             alt={`${name} cover`}
-            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            loading="lazy"
-            decoding="async"
+            fullWidth
+            fullHeight
+            objectFit="cover"
+            className="transition-transform duration-300 group-hover:scale-105"
           />
           {/* Gradient Overlay */}
           <Box position="absolute" inset="0" bg="bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
@@ -91,14 +95,14 @@ export function LeagueCard({
           <Box position="absolute" left="4" bottom="-6" zIndex={10}>
             <Box w="12" h="12" rounded="lg" overflow="hidden" border borderColor="border-iron-gray" bg="bg-deep-graphite" shadow="xl">
               {logoUrl ? (
-                <img
+                <Image
                   src={logoUrl}
                   alt={`${name} logo`}
                   width={48}
                   height={48}
-                  className="h-full w-full object-cover"
-                  loading="lazy"
-                  decoding="async"
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
                 />
               ) : (
                 <PlaceholderImage size={48} />
@@ -193,5 +197,3 @@ export function LeagueCard({
   );
 }
 
-import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';
-
diff --git a/apps/website/ui/LeagueHeader.tsx b/apps/website/ui/LeagueHeader.tsx
index cb2ca69a3..32be884e9 100644
--- a/apps/website/ui/LeagueHeader.tsx
+++ b/apps/website/ui/LeagueHeader.tsx
@@ -5,6 +5,7 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Stack } from './Stack';
 import { Text } from './Text';
+import { Image } from './Image';
 
 interface LeagueHeaderProps {
   name: string;
@@ -26,14 +27,14 @@ export function LeagueHeader({
       <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
         <Stack direction="row" align="center" gap={4}>
           <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
-            <img
+            <Image
               src={logoUrl}
               alt={`${name} logo`}
               width={64}
               height={64}
-              className="h-full w-full object-cover"
-              loading="lazy"
-              decoding="async"
+              fullWidth
+              fullHeight
+              objectFit="cover"
             />
           </Box>
           <Box>
diff --git a/apps/website/ui/LeagueMemberTable.tsx b/apps/website/ui/LeagueMemberTable.tsx
index adf65d92c..54011d809 100644
--- a/apps/website/ui/LeagueMemberTable.tsx
+++ b/apps/website/ui/LeagueMemberTable.tsx
@@ -17,7 +17,7 @@ export function LeagueMemberTable({ children, showActions }: LeagueMemberTablePr
           <TableHeader>Wins</TableHeader>
           <TableHeader>Role</TableHeader>
           <TableHeader>Joined</TableHeader>
-          {showActions && <TableHeader align="right">Actions</TableHeader>}
+          {showActions && <TableHeader textAlign="right">Actions</TableHeader>}
         </TableRow>
       </TableHead>
       <TableBody>
diff --git a/apps/website/ui/Link.tsx b/apps/website/ui/Link.tsx
index 30dc6db5e..f22a0febd 100644
--- a/apps/website/ui/Link.tsx
+++ b/apps/website/ui/Link.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, AnchorHTMLAttributes, ElementType } from 'react';
+import React, { ReactNode } from 'react';
 import { Box, BoxProps } from './Box';
 
 interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'className' | 'onClick'> {
@@ -70,7 +70,7 @@ export function Link({
       className={classes}
       target={target}
       rel={rel}
-      onClick={onClick as any}
+      onClick={onClick}
       style={style}
       {...props}
     >
diff --git a/apps/website/ui/Podium.tsx b/apps/website/ui/Podium.tsx
index 45e6d7d0f..5f82a4591 100644
--- a/apps/website/ui/Podium.tsx
+++ b/apps/website/ui/Podium.tsx
@@ -60,7 +60,7 @@ export function PodiumItem({
         p={3}
       >
         <Box display="flex" center fullWidth>
-          <Text size="3xl" weight="bold" color={positionColor as any}>
+          <Text size="3xl" weight="bold" color={positionColor}>
             {position}
           </Text>
         </Box>
diff --git a/apps/website/ui/PresetCard.tsx b/apps/website/ui/PresetCard.tsx
index 2a803f2e6..8c77300c4 100644
--- a/apps/website/ui/PresetCard.tsx
+++ b/apps/website/ui/PresetCard.tsx
@@ -1,7 +1,7 @@
 
 
 import type { MouseEventHandler, ReactNode } from 'react';
-import Card from './Card';
+import { Card } from './Card';
 
 interface PresetCardStat {
   label: string;
@@ -21,7 +21,7 @@ export interface PresetCardProps {
   children?: ReactNode;
 }
 
-export default function PresetCard({
+export function PresetCard({
   title,
   subtitle,
   primaryTag,
diff --git a/apps/website/ui/ProfileStatGrid.tsx b/apps/website/ui/ProfileStatGrid.tsx
index c72a171a7..f14a6fa4a 100644
--- a/apps/website/ui/ProfileStatGrid.tsx
+++ b/apps/website/ui/ProfileStatGrid.tsx
@@ -19,7 +19,7 @@ export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
     <Grid cols={2} gap={4}>
       {stats.map((stat, idx) => (
         <Box key={idx} p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626', textAlign: 'center' }}>
-          <Text size="3xl" weight="bold" color={stat.color as any} block mb={1}>{stat.value}</Text>
+          <Text size="3xl" weight="bold" color={stat.color} block mb={1}>{stat.value}</Text>
           <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>{stat.label}</Text>
         </Box>
       ))}
diff --git a/apps/website/ui/RaceCard.tsx b/apps/website/ui/RaceCard.tsx
index 0aeec0581..1f60df311 100644
--- a/apps/website/ui/RaceCard.tsx
+++ b/apps/website/ui/RaceCard.tsx
@@ -74,7 +74,7 @@ export function RaceCard({
           <Text size="lg" weight="bold" color="text-white" block>
             {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
           </Text>
-          <Text size="xs" color={statusConfig.color as any} block>
+          <Text size="xs" color={statusConfig.color} block>
             {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
           </Text>
         </Box>
@@ -128,9 +128,9 @@ export function RaceCard({
               }}
             >
               {statusConfig.icon && (
-                <Icon icon={statusConfig.icon} size={3.5} color={statusConfig.color as any} />
+                <Icon icon={statusConfig.icon} size={3.5} color={statusConfig.color} />
               )}
-              <Text size="xs" weight="medium" color={statusConfig.color as any}>
+              <Text size="xs" weight="medium" color={statusConfig.color}>
                 {statusConfig.label}
               </Text>
             </Box>
diff --git a/apps/website/ui/RaceSummaryItem.tsx b/apps/website/ui/RaceSummaryItem.tsx
index 048869c6f..a79ebb191 100644
--- a/apps/website/ui/RaceSummaryItem.tsx
+++ b/apps/website/ui/RaceSummaryItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box } from './Box';
-import { Stack } from './Stack';
 import { Text } from './Text';
 
 interface RaceSummaryItemProps {
diff --git a/apps/website/ui/RatingHistoryItem.tsx b/apps/website/ui/RatingHistoryItem.tsx
index dae365c8f..289a8fd79 100644
--- a/apps/website/ui/RatingHistoryItem.tsx
+++ b/apps/website/ui/RatingHistoryItem.tsx
@@ -3,6 +3,12 @@
 import { Box } from './Box';
 import { Text } from './Text';
 
+interface RatingHistoryItemProps {
+  date: string;
+  skillChange: number;
+  safetyChange: number;
+  sportsmanshipChange: number;
+}
 
 export function RatingHistoryItem({
   date,
diff --git a/apps/website/ui/SidebarActionLink.tsx b/apps/website/ui/SidebarActionLink.tsx
index 6fbd6a493..994d5d2e1 100644
--- a/apps/website/ui/SidebarActionLink.tsx
+++ b/apps/website/ui/SidebarActionLink.tsx
@@ -4,7 +4,6 @@ import { Box } from './Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
 import { Link } from './Link';
-import { Stack } from './Stack';
 
 interface SidebarActionLinkProps {
   href: string;
diff --git a/apps/website/ui/SidebarRaceItem.tsx b/apps/website/ui/SidebarRaceItem.tsx
index 0272966a9..2c9c703cd 100644
--- a/apps/website/ui/SidebarRaceItem.tsx
+++ b/apps/website/ui/SidebarRaceItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { ChevronRight } from 'lucide-react';
 import { Box } from './Box';
-import { Stack } from './Stack';
 import { Text } from './Text';
 import { Icon } from './Icon';
 
diff --git a/apps/website/ui/SkillDistribution.tsx b/apps/website/ui/SkillDistribution.tsx
index 8f1144b31..2d6b87a64 100644
--- a/apps/website/ui/SkillDistribution.tsx
+++ b/apps/website/ui/SkillDistribution.tsx
@@ -4,6 +4,7 @@ import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { BarChart3 } from 'lucide-react';
 
 const SKILL_LEVELS = [
   { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
diff --git a/apps/website/ui/SkillLevelHeader.tsx b/apps/website/ui/SkillLevelHeader.tsx
index 37a18374a..669ecd0d8 100644
--- a/apps/website/ui/SkillLevelHeader.tsx
+++ b/apps/website/ui/SkillLevelHeader.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
 import { Box } from './Box';
 import { Stack } from './Stack';
diff --git a/apps/website/ui/SponsorMetricCard.tsx b/apps/website/ui/SponsorMetricCard.tsx
index 17adcd57f..3f9b83b36 100644
--- a/apps/website/ui/SponsorMetricCard.tsx
+++ b/apps/website/ui/SponsorMetricCard.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { Box } from './Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface SponsorMetricCardProps {
   label: string;
   value: string | number;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: LucideIcon;
   color?: string;
   trend?: {
     value: number;
@@ -30,7 +31,7 @@ export function SponsorMetricCard({
       borderColor="border-charcoal-outline"
     >
       <Box display="flex" alignItems="center" gap={1.5} className={color} mb={1}>
-        <Icon icon={icon as any} size={4} />
+        <Icon icon={icon} size={4} />
         <Text size="xs" weight="medium">{label}</Text>
       </Box>
       <Box display="flex" alignItems="baseline" gap={2}>
diff --git a/apps/website/ui/SponsorSlotCard.tsx b/apps/website/ui/SponsorSlotCard.tsx
index 05519ff01..d93ce54e5 100644
--- a/apps/website/ui/SponsorSlotCard.tsx
+++ b/apps/website/ui/SponsorSlotCard.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Box } from './Box';
 import { Text } from './Text';
-import { Stack } from './Stack';
 
 interface SponsorSlotCardProps {
   title: string;
diff --git a/apps/website/ui/SponsorshipRequestItem.tsx b/apps/website/ui/SponsorshipRequestItem.tsx
index 4b0764039..f8fc987ec 100644
--- a/apps/website/ui/SponsorshipRequestItem.tsx
+++ b/apps/website/ui/SponsorshipRequestItem.tsx
@@ -3,6 +3,7 @@
 import { Building, Check, Clock, DollarSign, MessageCircle, X } from 'lucide-react';
 import React from 'react';
 import { Badge } from './Badge';
+import { Box } from './Box';
 import { Button } from './Button';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
diff --git a/apps/website/ui/Stack.tsx b/apps/website/ui/Stack.tsx
index 994e24b57..93d4b927b 100644
--- a/apps/website/ui/Stack.tsx
+++ b/apps/website/ui/Stack.tsx
@@ -11,6 +11,15 @@ interface ResponsiveGap {
   xl?: number;
 }
 
+interface ResponsiveSpacing {
+  base?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+  xl?: Spacing;
+  '2xl'?: Spacing;
+}
+
 interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children' | 'className' | 'gap'> {
   children: ReactNode;
   className?: string;
@@ -20,18 +29,18 @@ interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children'
   justify?: 'start' | 'center' | 'end' | 'between' | 'around';
   wrap?: boolean;
   center?: boolean;
-  m?: Spacing | any;
-  mt?: Spacing | any;
-  mb?: Spacing | any;
-  ml?: Spacing | any;
-  mr?: Spacing | any;
-  p?: Spacing | any;
-  pt?: Spacing | any;
-  pb?: Spacing | any;
-  pl?: Spacing | any;
-  pr?: Spacing | any;
-  px?: Spacing | any;
-  py?: Spacing | any;
+  m?: Spacing | ResponsiveSpacing;
+  mt?: Spacing | ResponsiveSpacing;
+  mb?: Spacing | ResponsiveSpacing;
+  ml?: Spacing | ResponsiveSpacing;
+  mr?: Spacing | ResponsiveSpacing;
+  p?: Spacing | ResponsiveSpacing;
+  pt?: Spacing | ResponsiveSpacing;
+  pb?: Spacing | ResponsiveSpacing;
+  pl?: Spacing | ResponsiveSpacing;
+  pr?: Spacing | ResponsiveSpacing;
+  px?: Spacing | ResponsiveSpacing;
+  py?: Spacing | ResponsiveSpacing;
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
   style?: React.CSSProperties;
   role?: string;
@@ -99,6 +108,21 @@ export function Stack<T extends ElementType = 'div'>({
     full: 'rounded-full'
   };
 
+  const getSpacingClass = (prefix: string, value: Spacing | ResponsiveSpacing | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm]}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl]}`);
+      if (value['2xl'] !== undefined) classes.push(`2xl:${prefix}-${spacingMap[value['2xl']]}`);
+      return classes.join(' ');
+    }
+    return `${prefix}-${spacingMap[value]}`;
+  };
+
   const classes = [
     'flex',
     typeof direction === 'string' 
@@ -111,18 +135,18 @@ export function Stack<T extends ElementType = 'div'>({
     getGapClasses(gap) || 'gap-4',
     center ? 'items-center justify-center' : `items-${align} justify-${justify}`,
     wrap ? 'flex-wrap' : '',
-    m !== undefined ? `m-${spacingMap[m]}` : '',
-    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
-    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
-    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
-    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
-    p !== undefined ? `p-${spacingMap[p]}` : '',
-    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
-    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
-    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
-    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
-    px !== undefined ? `px-${spacingMap[px]}` : '',
-    py !== undefined ? `py-${spacingMap[py]}` : '',
+    getSpacingClass('m', m),
+    getSpacingClass('mt', mt),
+    getSpacingClass('mb', mb),
+    getSpacingClass('ml', ml),
+    getSpacingClass('mr', mr),
+    getSpacingClass('p', p),
+    getSpacingClass('pt', pt),
+    getSpacingClass('pb', pb),
+    getSpacingClass('pl', pl),
+    getSpacingClass('pr', pr),
+    getSpacingClass('px', px),
+    getSpacingClass('py', py),
     rounded ? roundedClasses[rounded] : '',
     className
   ].filter(Boolean).join(' ');
diff --git a/apps/website/ui/StatCard.tsx b/apps/website/ui/StatCard.tsx
index 37c434c72..b62a2548d 100644
--- a/apps/website/ui/StatCard.tsx
+++ b/apps/website/ui/StatCard.tsx
@@ -51,13 +51,6 @@ export function StatCard({
     green: 'text-performance-green',
     orange: 'text-warning-amber'
   };
-
-  const iconHexColors = {
-    blue: '#3b82f6',
-    purple: '#a78bfa',
-    green: '#34d399',
-    orange: '#fb923c'
-  };
   
   const cardContent = (
     <Card className={`${variantClasses[variant]} ${className} h-full`} p={5}>
diff --git a/apps/website/ui/StatusIndicator.tsx b/apps/website/ui/StatusIndicator.tsx
index 8ed7db387..713891f81 100644
--- a/apps/website/ui/StatusIndicator.tsx
+++ b/apps/website/ui/StatusIndicator.tsx
@@ -4,6 +4,7 @@ import { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { Box } from './Box';
 import { Text } from './Text';
+import { Icon } from './Icon';
 
 interface StatusIndicatorProps {
   icon: LucideIcon;
diff --git a/apps/website/ui/Surface.tsx b/apps/website/ui/Surface.tsx
index ce90467de..48c586e22 100644
--- a/apps/website/ui/Surface.tsx
+++ b/apps/website/ui/Surface.tsx
@@ -80,7 +80,7 @@ export function Surface<T extends ElementType = 'div'>({
   ].filter(Boolean).join(' ');
 
   return (
-    <Box className={classes} {...props}>
+    <Box as={as} className={classes} {...props}>
       {children}
     </Box>
   );
diff --git a/apps/website/ui/TabNavigation.tsx b/apps/website/ui/TabNavigation.tsx
index 372e8f1b6..7813ea626 100644
--- a/apps/website/ui/TabNavigation.tsx
+++ b/apps/website/ui/TabNavigation.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { Box } from './Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface Tab {
   id: string;
   label: string;
-  icon?: any;
+  icon?: LucideIcon;
 }
 
 interface TabNavigationProps {
diff --git a/apps/website/ui/Table.tsx b/apps/website/ui/Table.tsx
index 00ee3651e..9a594ad09 100644
--- a/apps/website/ui/Table.tsx
+++ b/apps/website/ui/Table.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes, ElementType } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 import { Box, BoxProps } from './Box';
 
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
diff --git a/apps/website/ui/TeamCard.tsx b/apps/website/ui/TeamCard.tsx
index 6ea2713a3..e2c515839 100644
--- a/apps/website/ui/TeamCard.tsx
+++ b/apps/website/ui/TeamCard.tsx
@@ -6,6 +6,7 @@ import {
     UserPlus,
     Users
 } from 'lucide-react';
+import { ReactNode } from 'react';
 import { Badge } from './Badge';
 import { Box } from './Box';
 import { Card } from './Card';
@@ -69,7 +70,9 @@ export function TeamCard({
                   alt={name}
                   width={56}
                   height={56}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
                 />
               ) : (
                 <PlaceholderImage size={56} />
diff --git a/apps/website/ui/TeamLeaderboardItem.tsx b/apps/website/ui/TeamLeaderboardItem.tsx
index bc109fbff..491ddd62a 100644
--- a/apps/website/ui/TeamLeaderboardItem.tsx
+++ b/apps/website/ui/TeamLeaderboardItem.tsx
@@ -1,6 +1,6 @@
 
 
-import { Crown, Users } from 'lucide-react';
+import { Crown, Trophy, Users } from 'lucide-react';
 import { Box } from './Box';
 import { Icon } from './Icon';
 import { Image } from './Image';
diff --git a/apps/website/ui/Text.tsx b/apps/website/ui/Text.tsx
index da6e40b70..c3c9c2e21 100644
--- a/apps/website/ui/Text.tsx
+++ b/apps/website/ui/Text.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Box, BoxProps } from './Box';
+import { BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
@@ -42,10 +42,19 @@ interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'c
   style?: React.CSSProperties;
   block?: boolean;
   italic?: boolean;
-  ml?: Spacing | any;
-  mr?: Spacing | any;
-  mt?: Spacing | any;
-  mb?: Spacing | any;
+  ml?: Spacing | ResponsiveSpacing;
+  mr?: Spacing | ResponsiveSpacing;
+  mt?: Spacing | ResponsiveSpacing;
+  mb?: Spacing | ResponsiveSpacing;
+}
+
+interface ResponsiveSpacing {
+  base?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+  xl?: Spacing;
+  '2xl'?: Spacing;
 }
 
 export function Text<T extends ElementType = 'span'>({ 
@@ -146,6 +155,21 @@ export function Text<T extends ElementType = 'span'>({
     loose: 'leading-loose'
   };
   
+  const getSpacingClass = (prefix: string, value: Spacing | ResponsiveSpacing | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base as number]}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm as number]}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md as number]}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg as number]}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl as number]}`);
+      if (value['2xl'] !== undefined) classes.push(`2xl:${prefix}-${spacingMap[value['2xl'] as number]}`);
+      return classes.join(' ');
+    }
+    return `${prefix}-${spacingMap[value as number]}`;
+  };
+  
   const classes = [
     block ? 'block' : 'inline',
     getSizeClasses(size),
@@ -158,10 +182,10 @@ export function Text<T extends ElementType = 'span'>({
     uppercase ? 'uppercase' : '',
     italic ? 'italic' : '',
     letterSpacing === '0.05em' ? 'tracking-wider' : letterSpacing ? `tracking-${letterSpacing}` : '',
-    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
-    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
-    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
-    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
+    getSpacingClass('ml', ml),
+    getSpacingClass('mr', mr),
+    getSpacingClass('mt', mt),
+    getSpacingClass('mb', mb),
     className
   ].filter(Boolean).join(' ');
   
diff --git a/apps/website/ui/state-types.ts b/apps/website/ui/state-types.ts
index 003a93801..7c5885069 100644
--- a/apps/website/ui/state-types.ts
+++ b/apps/website/ui/state-types.ts
@@ -80,6 +80,7 @@ export interface StateContainerConfig<T> {
     loading?: () => ReactNode;
     error?: (error: Error) => ReactNode;
     empty?: () => ReactNode;
+    success?: (data: T) => ReactNode;
   };
 }