wip

apps/website/app/dashboard/page.tsx

@@ -26,21 +26,11 @@ import {
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { getAuthService } from '@/lib/auth';
-import {
-  getFeedRepository,
-  getRaceRepository,
-  getResultRepository,
-  getDriverRepository,
-  getLeagueRepository,
-  getStandingRepository,
-  getSocialRepository,
-  getDriverStats,
-  getImageService,
-  getLeagueMembershipRepository,
-} from '@/lib/di-container';
-import type { FeedItem } from '@gridpilot/social/domain/entities/FeedItem';
-import type { Race } from '@gridpilot/racing/domain/entities/Race';
-import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import { getGetDashboardOverviewUseCase } from '@/lib/di-container';
+import type {
+  DashboardOverviewViewModel,
+  DashboardFeedItemSummaryViewModel,
+} from '@gridpilot/racing/application/presenters/IDashboardOverviewPresenter';
 
 export const dynamic = 'force-dynamic';
 
@@ -74,8 +64,9 @@ function timeUntil(date: Date): string {
   return `${diffMinutes}m`;
 }
 
-function timeAgo(timestamp: Date): string {
-  const diffMs = Date.now() - timestamp.getTime();
+function timeAgo(timestamp: Date | string): string {
+  const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
+  const diffMs = Date.now() - time.getTime();
   const diffMinutes = Math.floor(diffMs / 60000);
   if (diffMinutes < 1) return 'Just now';
   if (diffMinutes < 60) return `${diffMinutes}m ago`;
@@ -100,73 +91,48 @@ export default async function DashboardPage() {
     redirect('/auth/iracing?returnTo=/dashboard');
   }
 
-  const feedRepository = getFeedRepository();
-  const raceRepository = getRaceRepository();
-  const resultRepository = getResultRepository();
-  const driverRepository = getDriverRepository();
-  const leagueRepository = getLeagueRepository();
-  const standingRepository = getStandingRepository();
-  const socialRepository = getSocialRepository();
-  const leagueMembershipRepository = getLeagueMembershipRepository();
-  const imageService = getImageService();
-
   const currentDriverId = session.user.primaryDriverId ?? '';
-  const currentDriver = await driverRepository.findById(currentDriverId);
 
-  const [feedItems, allRaces, allResults, allLeagues, friends] = await Promise.all([
-    feedRepository.getFeedForDriver(currentDriverId),
-    raceRepository.findAll(),
-    resultRepository.findAll(),
-    leagueRepository.findAll(),
-    socialRepository.getFriends(currentDriverId),
-  ]);
+  const useCase = getGetDashboardOverviewUseCase();
+  await useCase.execute({ driverId: currentDriverId });
+  const viewModel = useCase.presenter.getViewModel() as DashboardOverviewViewModel | null;
 
-  // Get driver's leagues by checking membership in each league
-  const driverLeagues: typeof allLeagues = [];
-  for (const league of allLeagues) {
-    const membership = await leagueMembershipRepository.getMembership(league.id, currentDriverId);
-    if (membership && membership.status === 'active') {
-      driverLeagues.push(league);
-    }
+  if (!viewModel) {
+    return null;
   }
-  const driverLeagueIds = driverLeagues.map(l => l.id);
 
-  // Upcoming races (prioritize driver's leagues)
-  const upcomingRaces = allRaces
-    .filter((race) => race.status === 'scheduled')
-    .sort((a, b) => a.scheduledAt.getTime() - b.scheduledAt.getTime());
-  
-  const myUpcomingRaces = upcomingRaces.filter(r => driverLeagueIds.includes(r.leagueId));
-  const otherUpcomingRaces = upcomingRaces.filter(r => !driverLeagueIds.includes(r.leagueId));
-  const nextRace = myUpcomingRaces[0] || otherUpcomingRaces[0];
+  const {
+    currentDriver,
+    myUpcomingRaces,
+    otherUpcomingRaces,
+    nextRace: nextRaceSummary,
+    recentResults,
+    leagueStandingsSummaries,
+    feedSummary,
+    friends,
+    upcomingRaces,
+    activeLeaguesCount,
+  } = viewModel;
 
-  // Recent results for driver
-  const driverResults = allResults.filter(r => r.driverId === currentDriverId);
-  const recentResults = driverResults.slice(0, 5);
+  const nextRace =
+    nextRaceSummary != null
+      ? {
+          ...nextRaceSummary,
+          scheduledAt: new Date(nextRaceSummary.scheduledAt),
+        }
+      : null;
 
-  // Get stats
-  const driverStats = getDriverStats(currentDriverId);
+  const upcomingRacesForDisplay = upcomingRaces.map(race => ({
+    ...race,
+    scheduledAt: new Date(race.scheduledAt),
+  }));
 
-  // Get standings for driver's leagues
-  const leagueStandings = await Promise.all(
-    driverLeagues.slice(0, 3).map(async (league) => {
-      const standings = await standingRepository.findByLeagueId(league.id);
-      const driverStanding = standings.find(s => s.driverId === currentDriverId);
-      return {
-        league,
-        position: driverStanding?.position ?? 0,
-        points: driverStanding?.points ?? 0,
-        totalDrivers: standings.length,
-      };
-    })
-  );
-
-  // Calculate quick stats
-  const totalRaces = driverStats?.totalRaces ?? 0;
-  const wins = driverStats?.wins ?? 0;
-  const podiums = driverStats?.podiums ?? 0;
-  const rating = driverStats?.rating ?? 1500;
-  const globalRank = driverStats?.overallRank ?? 0;
+  const totalRaces = currentDriver?.totalRaces ?? 0;
+  const wins = currentDriver?.wins ?? 0;
+  const podiums = currentDriver?.podiums ?? 0;
+  const rating = currentDriver?.rating ?? 1500;
+  const globalRank = currentDriver?.globalRank ?? 0;
+  const consistency = currentDriver?.consistency ?? 0;
 
   return (
     <main className="min-h-screen bg-deep-graphite">
@@ -189,7 +155,7 @@ export default async function DashboardPage() {
                   <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-0.5 shadow-xl shadow-primary-blue/20">
                     <div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
                       <Image
-                        src={imageService.getDriverAvatar(currentDriverId)}
+                        src={currentDriver.avatarUrl}
                         alt={currentDriver.name}
                         width={80}
                         height={80}
@@ -267,7 +233,7 @@ export default async function DashboardPage() {
                   <Target className="w-5 h-5 text-primary-blue" />
                 </div>
                 <div>
-                  <p className="text-2xl font-bold text-white">{driverStats?.consistency ?? 0}%</p>
+                  <p className="text-2xl font-bold text-white">{consistency}%</p>
                   <p className="text-xs text-gray-500">Consistency</p>
                 </div>
               </div>
@@ -278,7 +244,7 @@ export default async function DashboardPage() {
                   <Users className="w-5 h-5 text-purple-400" />
                 </div>
                 <div>
-                  <p className="text-2xl font-bold text-white">{driverLeagues.length}</p>
+                  <p className="text-2xl font-bold text-white">{activeLeaguesCount}</p>
                   <p className="text-xs text-gray-500">Active Leagues</p>
                 </div>
               </div>
@@ -302,7 +268,7 @@ export default async function DashboardPage() {
                       <Play className="w-3.5 h-3.5 text-primary-blue" />
                       <span className="text-xs font-semibold text-primary-blue uppercase tracking-wider">Next Race</span>
                     </div>
-                    {myUpcomingRaces.includes(nextRace) && (
+                    {nextRace.isMyLeague && (
                       <span className="px-2 py-0.5 rounded-full bg-performance-green/20 text-performance-green text-xs font-medium">
                         Your League
                       </span>
@@ -350,7 +316,7 @@ export default async function DashboardPage() {
             )}
 
             {/* League Standings Preview */}
-            {leagueStandings.length > 0 && (
+            {leagueStandingsSummaries.length > 0 && (
               <Card>
                 <div className="flex items-center justify-between mb-4">
                   <h2 className="text-lg font-semibold text-white flex items-center gap-2">
@@ -362,10 +328,10 @@ export default async function DashboardPage() {
                   </Link>
                 </div>
                 <div className="space-y-3">
-                  {leagueStandings.map(({ league, position, points, totalDrivers }) => (
+                  {leagueStandingsSummaries.map(({ leagueId, leagueName, position, points, totalDrivers }) => (
                     <Link
-                      key={league.id}
-                      href={`/leagues/${league.id}/standings`}
+                      key={leagueId}
+                      href={`/leagues/${leagueId}/standings`}
                       className="flex items-center gap-4 p-4 rounded-xl bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors group"
                     >
                       <div className={`flex h-12 w-12 items-center justify-center rounded-xl font-bold text-xl ${
@@ -378,7 +344,7 @@ export default async function DashboardPage() {
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
-                          {league.name}
+                          {leagueName}
                         </p>
                         <p className="text-sm text-gray-500">
                           {points} points • {totalDrivers} drivers
@@ -408,10 +374,10 @@ export default async function DashboardPage() {
                   Recent Activity
                 </h2>
               </div>
-              {feedItems.length > 0 ? (
+              {feedSummary.items.length > 0 ? (
                 <div className="space-y-4">
-                  {feedItems.slice(0, 5).map((item) => (
-                    <FeedItemRow key={item.id} item={item} imageService={imageService} />
+                  {feedSummary.items.slice(0, 5).map((item) => (
+                    <FeedItemRow key={item.id} item={item} />
                   ))}
                 </div>
               ) : (
@@ -437,10 +403,10 @@ export default async function DashboardPage() {
                   View all
                 </Link>
               </div>
-              {upcomingRaces.length > 0 ? (
+              {upcomingRacesForDisplay.length > 0 ? (
                 <div className="space-y-3">
-                  {upcomingRaces.slice(0, 5).map((race) => {
-                    const isMyRace = driverLeagueIds.includes(race.leagueId);
+                  {upcomingRacesForDisplay.slice(0, 5).map((race) => {
+                    const isMyRace = race.isMyLeague;
                     return (
                       <Link
                         key={race.id}
@@ -488,7 +454,7 @@ export default async function DashboardPage() {
                     >
                       <div className="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
                         <Image
-                          src={imageService.getDriverAvatar(friend.id)}
+                          src={friend.avatarUrl}
                           alt={friend.name}
                           width={36}
                           height={36}
@@ -530,7 +496,7 @@ export default async function DashboardPage() {
 }
 
 // Feed Item Row Component
-function FeedItemRow({ item, imageService }: { item: FeedItem; imageService: any }) {
+function FeedItemRow({ item }: { item: DashboardFeedItemSummaryViewModel }) {
   const getActivityIcon = (type: string) => {
     if (type.includes('win')) return { icon: Trophy, color: 'text-yellow-400 bg-yellow-400/10' };
     if (type.includes('podium')) return { icon: Medal, color: 'text-warning-amber bg-warning-amber/10' };

apps/website/app/drivers/[id]/page.tsx

@@ -37,11 +37,8 @@ import {
   DollarSign,
 } from 'lucide-react';
 import {
-  getDriverRepository,
-  getDriverStats,
-  getAllDriverRankings,
+  getGetProfileOverviewUseCase,
   getGetDriverTeamUseCase,
-  getSocialRepository,
   getImageService,
   getGetAllTeamsUseCase,
   getGetTeamMembersUseCase,
@@ -321,6 +318,7 @@ export default function DriverDetailPage({
   const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
   const [friends, setFriends] = useState<Driver[]>([]);
   const [friendRequestSent, setFriendRequestSent] = useState(false);
+  const [profileData, setProfileData] = useState<any>(null);
 
   const unwrappedSearchParams = use(searchParams) as URLSearchParams | undefined;
 
@@ -362,24 +360,28 @@ export default function DriverDetailPage({
 
   const loadDriver = async () => {
     try {
-      const driverRepo = getDriverRepository();
-      const driverEntity = await driverRepo.findById(driverId);
+      // Use GetProfileOverviewUseCase to load all profile data
+      const profileUseCase = getGetProfileOverviewUseCase();
+      await profileUseCase.execute({ driverId });
+      const profileViewModel = profileUseCase.presenter.getViewModel();
 
-      if (!driverEntity) {
+      if (!profileViewModel || !profileViewModel.currentDriver) {
         setError('Driver not found');
         setLoading(false);
         return;
       }
 
-      const driverDto = EntityMappers.toDriverDTO(driverEntity);
-
-      if (!driverDto) {
-        setError('Driver not found');
-        setLoading(false);
-        return;
-      }
-
-      setDriver(driverDto);
+      // Set driver from ViewModel
+      const driverData: DriverDTO = {
+        id: profileViewModel.currentDriver.id,
+        name: profileViewModel.currentDriver.name,
+        iracingId: profileViewModel.currentDriver.iracingId,
+        country: profileViewModel.currentDriver.country,
+        bio: profileViewModel.currentDriver.bio || '',
+        joinedAt: profileViewModel.currentDriver.joinedAt,
+      };
+      setDriver(driverData);
+      setProfileData(profileViewModel);
 
       // Load team data
       const teamUseCase = getGetDriverTeamUseCase();
@@ -410,9 +412,14 @@ export default function DriverDetailPage({
       }
       setAllTeamMemberships(memberships);
 
-      // Load friends
-      const socialRepo = getSocialRepository();
-      const friendsList = await socialRepo.getFriends(driverId);
+      // Set friends from ViewModel
+      const friendsList = profileViewModel.socialSummary?.friends.map(f => {
+        return {
+          id: f.id,
+          name: f.name,
+          country: f.country,
+        } as Driver;
+      }) || [];
       setFriends(friendsList);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load driver');
@@ -452,10 +459,9 @@ export default function DriverDetailPage({
     );
   }
 
-  const extendedProfile = getDemoExtendedProfile(driver.id);
-  const stats = getDriverStats(driver.id);
-  const allRankings = getAllDriverRankings();
-  const globalRank = stats?.overallRank ?? allRankings.findIndex(r => r.driverId === driver.id) + 1;
+  const extendedProfile = profileData?.extendedProfile || getDemoExtendedProfile(driver.id);
+  const stats = profileData?.stats || null;
+  const globalRank = profileData?.currentDriver?.globalRank || 1;
 
   // Build sponsor insights for driver
   const driverMetrics = [

apps/website/app/leagues/create/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import CreateLeagueWizard from '@/components/leagues/CreateLeagueWizard';
 import Section from '@/components/ui/Section';
@@ -26,10 +27,18 @@ export default function CreateLeaguePage() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const currentStepName = normalizeStepName(searchParams.get('step'));
+  const currentStepName = normalizeStepName(
+    searchParams && typeof searchParams.get === 'function'
+      ? searchParams.get('step')
+      : null,
+  );
 
   const handleStepChange = (stepName: StepName) => {
-    const params = new URLSearchParams(searchParams.toString());
+    const params = new URLSearchParams(
+      searchParams && typeof (searchParams as any).toString === 'function'
+        ? (searchParams as any).toString()
+        : '',
+    );
     params.set('step', stepName);
     const query = params.toString();
     const href = query ? `/leagues/create?${query}` : '/leagues/create';

apps/website/app/onboarding/page.tsx

@@ -1,6 +1,5 @@
 import { redirect } from 'next/navigation';
 import { getAuthService } from '@/lib/auth';
-import { getDriverRepository } from '@/lib/di-container';
 import OnboardingWizard from '@/components/onboarding/OnboardingWizard';
 
 export const dynamic = 'force-dynamic';
@@ -13,15 +12,10 @@ export default async function OnboardingPage() {
     redirect('/auth/iracing?returnTo=/onboarding');
   }
 
-  // Check if user already has a driver profile
-  const driverRepository = getDriverRepository();
   const primaryDriverId = session.user.primaryDriverId ?? '';
-  
+
   if (primaryDriverId) {
-    const existingDriver = await driverRepository.findById(primaryDriverId);
-    if (existingDriver) {
-      redirect('/dashboard');
-    }
+    redirect('/dashboard');
   }
 
   return (

apps/website/app/profile/page.tsx

@@ -35,16 +35,21 @@ import {
   Activity,
 } from 'lucide-react';
 import {
-  getDriverRepository,
-  getDriverStats,
-  getAllDriverRankings,
-  getGetDriverTeamUseCase,
-  getSocialRepository,
+  getGetProfileOverviewUseCase,
   getImageService,
-  getGetAllTeamsUseCase,
-  getGetTeamMembersUseCase,
+  getUpdateDriverProfileUseCase,
 } from '@/lib/di-container';
-import { Driver, EntityMappers, type DriverDTO, type Team } from '@gridpilot/racing';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import type {
+  ProfileOverviewViewModel,
+  ProfileOverviewDriverSummaryViewModel,
+  ProfileOverviewStatsViewModel,
+  ProfileOverviewTeamMembershipViewModel,
+  ProfileOverviewSocialSummaryViewModel,
+  ProfileOverviewExtendedProfileViewModel,
+  ProfileOverviewAchievementViewModel,
+  ProfileOverviewSocialHandleViewModel,
+} from '@gridpilot/racing/application/presenters/IProfileOverviewPresenter';
 import CreateDriverForm from '@/components/drivers/CreateDriverForm';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
@@ -52,7 +57,6 @@ import Heading from '@/components/ui/Heading';
 import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
 import ProfileSettings from '@/components/drivers/ProfileSettings';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
-import type { GetDriverTeamQueryResultDTO } from '@gridpilot/racing/application/dto/TeamCommandAndQueryDTO';
 
 // ============================================================================
 // TYPES
@@ -60,100 +64,6 @@ import type { GetDriverTeamQueryResultDTO } from '@gridpilot/racing/application/
 
 type ProfileTab = 'overview' | 'history' | 'stats';
 
-interface SocialHandle {
-  platform: 'twitter' | 'youtube' | 'twitch' | 'discord';
-  handle: string;
-  url: string;
-}
-
-interface Achievement {
-  id: string;
-  title: string;
-  description: string;
-  icon: 'trophy' | 'medal' | 'star' | 'crown' | 'target' | 'zap';
-  rarity: 'common' | 'rare' | 'epic' | 'legendary';
-  earnedAt: Date;
-}
-
-interface DriverExtendedProfile {
-  socialHandles: SocialHandle[];
-  achievements: Achievement[];
-  racingStyle: string;
-  favoriteTrack: string;
-  favoriteCar: string;
-  timezone: string;
-  availableHours: string;
-  lookingForTeam: boolean;
-  openToRequests: boolean;
-}
-
-interface TeamMembershipInfo {
-  team: Team;
-  role: string;
-  joinedAt: Date;
-}
-
-// ============================================================================
-// DEMO DATA (Extended profile info not in domain yet)
-// ============================================================================
-
-function getDemoExtendedProfile(driverId: string): DriverExtendedProfile {
-  // Demo social handles based on driver id hash
-  const hash = driverId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  
-  const socialOptions: SocialHandle[][] = [
-    [
-      { platform: 'twitter', handle: '@speedracer', url: 'https://twitter.com/speedracer' },
-      { platform: 'youtube', handle: 'SpeedRacer Racing', url: 'https://youtube.com/@speedracer' },
-      { platform: 'twitch', handle: 'speedracer_live', url: 'https://twitch.tv/speedracer_live' },
-    ],
-    [
-      { platform: 'twitter', handle: '@racingpro', url: 'https://twitter.com/racingpro' },
-      { platform: 'discord', handle: 'RacingPro#1234', url: '#' },
-    ],
-    [
-      { platform: 'twitch', handle: 'simracer_elite', url: 'https://twitch.tv/simracer_elite' },
-      { platform: 'youtube', handle: 'SimRacer Elite', url: 'https://youtube.com/@simracerelite' },
-    ],
-  ];
-
-  const achievementSets: Achievement[][] = [
-    [
-      { id: '1', title: 'First Victory', description: 'Win your first race', icon: 'trophy', rarity: 'common', earnedAt: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000) },
-      { id: '2', title: 'Clean Racer', description: '10 races without incidents', icon: 'star', rarity: 'rare', earnedAt: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000) },
-      { id: '3', title: 'Podium Streak', description: '5 consecutive podium finishes', icon: 'medal', rarity: 'epic', earnedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) },
-      { id: '4', title: 'Championship Glory', description: 'Win a league championship', icon: 'crown', rarity: 'legendary', earnedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) },
-    ],
-    [
-      { id: '1', title: 'Rookie No More', description: 'Complete 25 races', icon: 'target', rarity: 'common', earnedAt: new Date(Date.now() - 120 * 24 * 60 * 60 * 1000) },
-      { id: '2', title: 'Consistent Performer', description: 'Maintain 80%+ consistency rating', icon: 'zap', rarity: 'rare', earnedAt: new Date(Date.now() - 45 * 24 * 60 * 60 * 1000) },
-      { id: '3', title: 'Endurance Master', description: 'Complete a 24-hour race', icon: 'star', rarity: 'epic', earnedAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000) },
-    ],
-    [
-      { id: '1', title: 'Welcome Racer', description: 'Join GridPilot', icon: 'star', rarity: 'common', earnedAt: new Date(Date.now() - 180 * 24 * 60 * 60 * 1000) },
-      { id: '2', title: 'Team Player', description: 'Join a racing team', icon: 'medal', rarity: 'rare', earnedAt: new Date(Date.now() - 80 * 24 * 60 * 60 * 1000) },
-    ],
-  ];
-
-  const tracks = ['Spa-Francorchamps', 'Nürburgring Nordschleife', 'Suzuka', 'Monza', 'Interlagos', 'Silverstone'];
-  const cars = ['Porsche 911 GT3 R', 'Ferrari 488 GT3', 'Mercedes-AMG GT3', 'BMW M4 GT3', 'Audi R8 LMS'];
-  const styles = ['Aggressive Overtaker', 'Consistent Pacer', 'Strategic Calculator', 'Late Braker', 'Smooth Operator'];
-  const timezones = ['EST (UTC-5)', 'CET (UTC+1)', 'PST (UTC-8)', 'GMT (UTC+0)', 'JST (UTC+9)'];
-  const hours = ['Evenings (18:00-23:00)', 'Weekends only', 'Late nights (22:00-02:00)', 'Flexible schedule'];
-
-  return {
-    socialHandles: socialOptions[hash % socialOptions.length],
-    achievements: achievementSets[hash % achievementSets.length],
-    racingStyle: styles[hash % styles.length],
-    favoriteTrack: tracks[hash % tracks.length],
-    favoriteCar: cars[hash % cars.length],
-    timezone: timezones[hash % timezones.length],
-    availableHours: hours[hash % hours.length],
-    lookingForTeam: hash % 3 === 0,
-    openToRequests: hash % 2 === 0,
-  };
-}
-
 // ============================================================================
 // HELPER COMPONENTS
 // ============================================================================
@@ -167,7 +77,7 @@ function getCountryFlag(countryCode: string): string {
   return '🏁';
 }
 
-function getRarityColor(rarity: Achievement['rarity']) {
+function getRarityColor(rarity: ProfileOverviewAchievementViewModel['rarity']) {
   switch (rarity) {
     case 'common':
       return 'text-gray-400 bg-gray-400/10 border-gray-400/30';
@@ -180,7 +90,7 @@ function getRarityColor(rarity: Achievement['rarity']) {
   }
 }
 
-function getAchievementIcon(icon: Achievement['icon']) {
+function getAchievementIcon(icon: ProfileOverviewAchievementViewModel['icon']) {
   switch (icon) {
     case 'trophy':
       return Trophy;
@@ -197,7 +107,7 @@ function getAchievementIcon(icon: Achievement['icon']) {
   }
 }
 
-function getSocialIcon(platform: SocialHandle['platform']) {
+function getSocialIcon(platform: ProfileOverviewSocialHandleViewModel['platform']) {
   switch (platform) {
     case 'twitter':
       return Twitter;
@@ -210,7 +120,7 @@ function getSocialIcon(platform: SocialHandle['platform']) {
   }
 }
 
-function getSocialColor(platform: SocialHandle['platform']) {
+function getSocialColor(platform: ProfileOverviewSocialHandleViewModel['platform']) {
   switch (platform) {
     case 'twitter':
       return 'hover:text-sky-400 hover:bg-sky-400/10';
@@ -361,9 +271,7 @@ export default function ProfilePage() {
   const [loading, setLoading] = useState(true);
   const [editMode, setEditMode] = useState(false);
   const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
-  const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
-  const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
-  const [friends, setFriends] = useState<Driver[]>([]);
+  const [profileData, setProfileData] = useState<ProfileOverviewViewModel | null>(null);
   const [friendRequestSent, setFriendRequestSent] = useState(false);
 
   const effectiveDriverId = useEffectiveDriverId();
@@ -372,47 +280,25 @@ export default function ProfilePage() {
   useEffect(() => {
     const loadData = async () => {
       try {
-        const driverRepo = getDriverRepository();
         const currentDriverId = effectiveDriverId;
-        const currentDriver = await driverRepo.findById(currentDriverId);
 
-        if (currentDriver) {
-          const driverData = EntityMappers.toDriverDTO(currentDriver);
+        // Use GetProfileOverviewUseCase to load all profile data
+        const profileUseCase = getGetProfileOverviewUseCase();
+        await profileUseCase.execute({ driverId: currentDriverId });
+        const profileViewModel = profileUseCase.presenter.getViewModel();
+        
+        if (profileViewModel && profileViewModel.currentDriver) {
+          // Set driver from ViewModel instead of direct repository access
+          const driverData: DriverDTO = {
+            id: profileViewModel.currentDriver.id,
+            name: profileViewModel.currentDriver.name,
+            iracingId: profileViewModel.currentDriver.iracingId,
+            country: profileViewModel.currentDriver.country,
+            bio: profileViewModel.currentDriver.bio || '',
+            joinedAt: profileViewModel.currentDriver.joinedAt,
+          };
           setDriver(driverData);
-
-          // Load primary team data
-          const teamUseCase = getGetDriverTeamUseCase();
-          await teamUseCase.execute({ driverId: currentDriverId });
-          const teamViewModel = teamUseCase.presenter.getViewModel();
-          setTeamData(teamViewModel.result);
-
-          // Load ALL team memberships
-          const allTeamsUseCase = getGetAllTeamsUseCase();
-          await allTeamsUseCase.execute();
-          const allTeamsViewModel = allTeamsUseCase.presenter.getViewModel();
-          const allTeams = allTeamsViewModel.teams;
-          const membershipsUseCase = getGetTeamMembersUseCase();
-
-          const memberships: TeamMembershipInfo[] = [];
-          for (const team of allTeams) {
-            await membershipsUseCase.execute({ teamId: team.id });
-            const membersViewModel = membershipsUseCase.presenter.getViewModel();
-            const members = membersViewModel.members;
-            const membership = members.find((m) => m.driverId === currentDriverId);
-            if (membership) {
-              memberships.push({
-                team,
-                role: membership.role,
-                joinedAt: membership.joinedAt,
-              });
-            }
-          }
-          setAllTeamMemberships(memberships);
-
-          // Load friends
-          const socialRepo = getSocialRepository();
-          const friendsList = await socialRepo.getFriends(currentDriverId);
-          setFriends(friendsList);
+          setProfileData(profileViewModel);
         }
       } catch (error) {
         console.error('Failed to load profile:', error);
@@ -447,18 +333,20 @@ export default function ProfilePage() {
   const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
     if (!driver) return;
 
-    const driverRepo = getDriverRepository();
-    const currentDriver = await driverRepo.findById(driver.id);
-
-    if (currentDriver) {
-      const updatedDriver: Driver = currentDriver.update({
-        bio: updates.bio ?? currentDriver.bio,
-        country: updates.country ?? currentDriver.country,
+    try {
+      const updateProfileUseCase = getUpdateDriverProfileUseCase();
+      const updatedDto = await updateProfileUseCase.execute({
+        driverId: driver.id,
+        bio: updates.bio,
+        country: updates.country,
       });
-      const persistedDriver = await driverRepo.update(updatedDriver);
-      const updatedDto = EntityMappers.toDriverDTO(persistedDriver);
-      setDriver(updatedDto);
-      setEditMode(false);
+
+      if (updatedDto) {
+        setDriver(updatedDto);
+        setEditMode(false);
+      }
+    } catch (error) {
+      console.error('Failed to update profile:', error);
     }
   };
 
@@ -506,11 +394,14 @@ export default function ProfilePage() {
     );
   }
 
-  // Get extended profile data
-  const extendedProfile = getDemoExtendedProfile(driver.id);
-  const stats = getDriverStats(driver.id);
-  const allRankings = getAllDriverRankings();
-  const globalRank = stats?.overallRank ?? allRankings.findIndex(r => r.driverId === driver.id) + 1;
+  // Extract data from profileData ViewModel
+  const currentDriver = profileData?.currentDriver || null;
+  const stats = profileData?.stats || null;
+  const finishDistribution = profileData?.finishDistribution || null;
+  const teamMemberships = profileData?.teamMemberships || [];
+  const socialSummary = profileData?.socialSummary || { friendsCount: 0, friends: [] };
+  const extendedProfile = profileData?.extendedProfile;
+  const globalRank = currentDriver?.globalRank || null;
 
   // Show edit mode
   if (editMode) {
@@ -564,9 +455,9 @@ export default function ProfilePage() {
                 <span className="text-4xl" aria-label={`Country: ${driver.country}`}>
                   {getCountryFlag(driver.country)}
                 </span>
-                {teamData?.team.tag && (
+                {teamMemberships.length > 0 && teamMemberships[0] && (
                   <span className="px-3 py-1 bg-purple-600/20 text-purple-400 rounded-full text-sm font-semibold border border-purple-600/30">
-                    [{teamData.team.tag}]
+                    [{teamMemberships[0].teamTag || 'TEAM'}]
                   </span>
                 )}
               </div>
@@ -587,13 +478,13 @@ export default function ProfilePage() {
                     </div>
                   </>
                 )}
-                {teamData && (
+                {teamMemberships.length > 0 && teamMemberships[0] && (
                   <Link
-                    href={`/teams/${teamData.team.id}`}
+                    href={`/teams/${teamMemberships[0].teamId}`}
                     className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-purple-600/10 border border-purple-600/30 hover:bg-purple-600/20 transition-colors"
                   >
                     <Users className="w-4 h-4 text-purple-400" />
-                    <span className="text-purple-400 font-medium">{teamData.team.name}</span>
+                    <span className="text-purple-400 font-medium">{teamMemberships[0].teamName}</span>
                     <ChevronRight className="w-3 h-3 text-purple-400" />
                   </Link>
                 )}
@@ -609,10 +500,12 @@ export default function ProfilePage() {
                   <Calendar className="w-4 h-4" />
                   Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                 </span>
-                <span className="flex items-center gap-1.5">
-                  <Clock className="w-4 h-4" />
-                  {extendedProfile.timezone}
-                </span>
+                {extendedProfile && (
+                  <span className="flex items-center gap-1.5">
+                    <Clock className="w-4 h-4" />
+                    {extendedProfile.timezone}
+                  </span>
+                )}
               </div>
             </div>
 
@@ -650,7 +543,7 @@ export default function ProfilePage() {
           </div>
 
           {/* Social Handles */}
-          {extendedProfile.socialHandles.length > 0 && (
+          {extendedProfile && extendedProfile.socialHandles.length > 0 && (
             <div className="mt-6 pt-6 border-t border-charcoal-outline/50">
               <div className="flex flex-wrap items-center gap-2">
                 <span className="text-sm text-gray-500 mr-2">Connect:</span>
@@ -688,18 +581,18 @@ export default function ProfilePage() {
       )}
 
       {/* Team Memberships */}
-      {allTeamMemberships.length > 0 && (
+      {teamMemberships.length > 0 && (
         <Card>
           <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
             <Shield className="w-5 h-5 text-purple-400" />
             Team Memberships
-            <span className="text-sm text-gray-500 font-normal">({allTeamMemberships.length})</span>
+            <span className="text-sm text-gray-500 font-normal">({teamMemberships.length})</span>
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {allTeamMemberships.map((membership) => (
+            {teamMemberships.map((membership) => (
               <Link
-                key={membership.team.id}
-                href={`/teams/${membership.team.id}`}
+                key={membership.teamId}
+                href={`/teams/${membership.teamId}`}
                 className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
               >
                 <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600/20 border border-purple-600/30">
@@ -707,14 +600,14 @@ export default function ProfilePage() {
                 </div>
                 <div className="flex-1 min-w-0">
                   <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
-                    {membership.team.name}
+                    {membership.teamName}
                   </p>
                   <div className="flex items-center gap-2 text-xs text-gray-400">
                     <span className="px-2 py-0.5 rounded-full bg-purple-600/20 text-purple-400 capitalize">
                       {membership.role}
                     </span>
                     <span>
-                      Since {membership.joinedAt.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                      Since {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                     </span>
                   </div>
                 </div>
@@ -889,82 +782,87 @@ export default function ProfilePage() {
               </h2>
               
               <div className="space-y-4 relative">
-                {/* Racing Style - Featured */}
-                <div className="p-4 rounded-xl bg-gradient-to-r from-neon-aqua/10 to-transparent border border-neon-aqua/20">
-                  <div className="flex items-center gap-3">
-                    <Zap className="w-5 h-5 text-neon-aqua" />
-                    <div>
-                      <span className="text-xs text-gray-500 uppercase tracking-wider block">Racing Style</span>
-                      <p className="text-white font-semibold text-lg">{extendedProfile.racingStyle}</p>
+                {extendedProfile && (
+                  <>
+                    {/* Racing Style - Featured */}
+                    <div className="p-4 rounded-xl bg-gradient-to-r from-neon-aqua/10 to-transparent border border-neon-aqua/20">
+                      <div className="flex items-center gap-3">
+                        <Zap className="w-5 h-5 text-neon-aqua" />
+                        <div>
+                          <span className="text-xs text-gray-500 uppercase tracking-wider block">Racing Style</span>
+                          <p className="text-white font-semibold text-lg">{extendedProfile.racingStyle}</p>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
                 
-                {/* Track & Car Grid */}
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Flag className="w-3.5 h-3.5 text-red-400" />
-                      <span className="text-[10px] text-gray-500 uppercase tracking-wider">Track</span>
+                    {/* Track & Car Grid */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Flag className="w-3.5 h-3.5 text-red-400" />
+                          <span className="text-[10px] text-gray-500 uppercase tracking-wider">Track</span>
+                        </div>
+                        <p className="text-white font-medium text-sm truncate">{extendedProfile.favoriteTrack}</p>
+                      </div>
+                      <div className="p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Target className="w-3.5 h-3.5 text-primary-blue" />
+                          <span className="text-[10px] text-gray-500 uppercase tracking-wider">Car</span>
+                        </div>
+                        <p className="text-white font-medium text-sm truncate">{extendedProfile.favoriteCar}</p>
+                      </div>
                     </div>
-                    <p className="text-white font-medium text-sm truncate">{extendedProfile.favoriteTrack}</p>
-                  </div>
-                  <div className="p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Target className="w-3.5 h-3.5 text-primary-blue" />
-                      <span className="text-[10px] text-gray-500 uppercase tracking-wider">Car</span>
+                    
+                    {/* Availability */}
+                    <div className="flex items-center gap-3 p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
+                      <Clock className="w-4 h-4 text-warning-amber" />
+                      <div>
+                        <span className="text-[10px] text-gray-500 uppercase tracking-wider block">Available</span>
+                        <p className="text-white font-medium text-sm">{extendedProfile.availableHours}</p>
+                      </div>
                     </div>
-                    <p className="text-white font-medium text-sm truncate">{extendedProfile.favoriteCar}</p>
-                  </div>
-                </div>
-                
-                {/* Availability */}
-                <div className="flex items-center gap-3 p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
-                  <Clock className="w-4 h-4 text-warning-amber" />
-                  <div>
-                    <span className="text-[10px] text-gray-500 uppercase tracking-wider block">Available</span>
-                    <p className="text-white font-medium text-sm">{extendedProfile.availableHours}</p>
-                  </div>
-                </div>
 
-                {/* Status badges */}
-                <div className="pt-4 border-t border-charcoal-outline/50 space-y-2">
-                  {extendedProfile.lookingForTeam && (
-                    <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gradient-to-r from-performance-green/20 to-performance-green/5 border border-performance-green/30">
-                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-performance-green/20">
-                        <Users className="w-4 h-4 text-performance-green" />
-                      </div>
-                      <div>
-                        <span className="text-sm text-performance-green font-semibold block">Looking for Team</span>
-                        <span className="text-xs text-gray-500">Open to recruitment offers</span>
-                      </div>
+                    {/* Status badges */}
+                    <div className="pt-4 border-t border-charcoal-outline/50 space-y-2">
+                      {extendedProfile.lookingForTeam && (
+                        <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gradient-to-r from-performance-green/20 to-performance-green/5 border border-performance-green/30">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-performance-green/20">
+                            <Users className="w-4 h-4 text-performance-green" />
+                          </div>
+                          <div>
+                            <span className="text-sm text-performance-green font-semibold block">Looking for Team</span>
+                            <span className="text-xs text-gray-500">Open to recruitment offers</span>
+                          </div>
+                        </div>
+                      )}
+                      {extendedProfile.openToRequests && (
+                        <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gradient-to-r from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-blue/20">
+                            <UserPlus className="w-4 h-4 text-primary-blue" />
+                          </div>
+                          <div>
+                            <span className="text-sm text-primary-blue font-semibold block">Open to Requests</span>
+                            <span className="text-xs text-gray-500">Accepting friend invites</span>
+                          </div>
+                        </div>
+                      )}
                     </div>
-                  )}
-                  {extendedProfile.openToRequests && (
-                    <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gradient-to-r from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30">
-                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-blue/20">
-                        <UserPlus className="w-4 h-4 text-primary-blue" />
-                      </div>
-                      <div>
-                        <span className="text-sm text-primary-blue font-semibold block">Open to Requests</span>
-                        <span className="text-xs text-gray-500">Accepting friend invites</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
+                  </>
+                )}
               </div>
             </Card>
           </div>
 
           {/* Achievements */}
-          <Card>
-            <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <Award className="w-5 h-5 text-yellow-400" />
-              Achievements
-              <span className="ml-auto text-sm text-gray-500">{extendedProfile.achievements.length} earned</span>
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-              {extendedProfile.achievements.map((achievement) => {
+          {extendedProfile && extendedProfile.achievements.length > 0 && (
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Award className="w-5 h-5 text-yellow-400" />
+                Achievements
+                <span className="ml-auto text-sm text-gray-500">{extendedProfile.achievements.length} earned</span>
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {extendedProfile.achievements.map((achievement) => {
                 const Icon = getAchievementIcon(achievement.icon);
                 const rarityClasses = getRarityColor(achievement.rarity);
                 return (
@@ -980,7 +878,7 @@ export default function ProfilePage() {
                         <p className="text-white font-semibold text-sm">{achievement.title}</p>
                         <p className="text-gray-400 text-xs mt-0.5">{achievement.description}</p>
                         <p className="text-gray-500 text-xs mt-1">
-                          {achievement.earnedAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                          {new Date(achievement.earnedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                         </p>
                       </div>
                     </div>
@@ -991,17 +889,17 @@ export default function ProfilePage() {
           </Card>
 
           {/* Friends Preview */}
-          {friends.length > 0 && (
+          {socialSummary && socialSummary.friends.length > 0 && (
             <Card>
               <div className="flex items-center justify-between mb-4">
                 <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                   <Users className="w-5 h-5 text-purple-400" />
                   Friends
-                  <span className="text-sm text-gray-500 font-normal">({friends.length})</span>
+                  <span className="text-sm text-gray-500 font-normal">({socialSummary.friendsCount})</span>
                 </h2>
               </div>
               <div className="flex flex-wrap gap-3">
-                {friends.slice(0, 8).map((friend) => (
+                {socialSummary.friends.slice(0, 8).map((friend) => (
                   <Link
                     key={friend.id}
                     href={`/drivers/${friend.id}`}
@@ -1020,9 +918,9 @@ export default function ProfilePage() {
                     <span className="text-lg">{getCountryFlag(friend.country)}</span>
                   </Link>
                 ))}
-                {friends.length > 8 && (
+                {socialSummary.friendsCount > 8 && (
                   <div className="flex items-center px-3 py-2 text-sm text-gray-400">
-                    +{friends.length - 8} more
+                    +{socialSummary.friendsCount - 8} more
                   </div>
                 )}
               </div>

apps/website/app/races/[id]/page.tsx

@@ -9,29 +9,16 @@ import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import FileProtestModal from '@/components/races/FileProtestModal';
 import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
-import type { Race } from '@gridpilot/racing/domain/entities/Race';
-import type { League } from '@gridpilot/racing/domain/entities/League';
-import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
-import type { Result } from '@gridpilot/racing/domain/entities/Result';
-import {
-  getRaceRepository,
-  getLeagueRepository,
-  getDriverRepository,
-  getGetRaceRegistrationsUseCase,
-  getIsDriverRegisteredForRaceUseCase,
-  getRegisterForRaceUseCase,
-  getWithdrawFromRaceUseCase,
-  getGetRaceWithSOFUseCase,
-  getResultRepository,
-  getImageService,
-} from '@/lib/di-container';
-import { getMembership } from '@/lib/leagueMembership';
+import { getGetRaceDetailUseCase, getRegisterForRaceUseCase, getWithdrawFromRaceUseCase, getCancelRaceUseCase } from '@/lib/di-container';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
-import { getDriverStats } from '@/lib/di-container';
+import type {
+  RaceDetailViewModel,
+  RaceDetailEntryViewModel,
+  RaceDetailUserResultViewModel,
+} from '@gridpilot/racing/application/presenters/IRaceDetailPresenter';
 import {
   Calendar,
   Clock,
-  MapPin,
   Car,
   Trophy,
   Users,
@@ -39,36 +26,25 @@ import {
   PlayCircle,
   CheckCircle2,
   XCircle,
-  ChevronRight,
   Flag,
-  Timer,
   UserPlus,
   UserMinus,
   AlertTriangle,
   ArrowRight,
   ArrowLeft,
-  ExternalLink,
-  Award,
   Scale,
 } from 'lucide-react';
-import { getAllDriverRankings } from '@/lib/di-container';
 
 export default function RaceDetailPage() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
 
-  const [race, setRace] = useState<Race | null>(null);
-  const [league, setLeague] = useState<League | null>(null);
+  const [viewModel, setViewModel] = useState<RaceDetailViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [cancelling, setCancelling] = useState(false);
   const [registering, setRegistering] = useState(false);
-  const [entryList, setEntryList] = useState<Driver[]>([]);
-  const [isUserRegistered, setIsUserRegistered] = useState(false);
-  const [canRegister, setCanRegister] = useState(false);
-  const [raceSOF, setRaceSOF] = useState<number | null>(null);
-  const [userResult, setUserResult] = useState<Result | null>(null);
   const [ratingChange, setRatingChange] = useState<number | null>(null);
   const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
   const [showProtestModal, setShowProtestModal] = useState(false);
@@ -77,92 +53,29 @@ export default function RaceDetailPage() {
   const isSponsorMode = useSponsorMode();
 
   const loadRaceData = async () => {
+    setLoading(true);
+    setError(null);
     try {
-      const raceRepo = getRaceRepository();
-      const leagueRepo = getLeagueRepository();
-      const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
-
-      const raceData = await raceRepo.findById(raceId);
-      
-      if (!raceData) {
-        setError('Race not found');
-        setLoading(false);
-        return;
+      const useCase = getGetRaceDetailUseCase();
+      await useCase.execute({ raceId, driverId: currentDriverId });
+      const vm = useCase.presenter.getViewModel();
+      if (!vm) {
+        throw new Error('Race detail not available');
       }
-
-      setRace(raceData);
-
-      // Load race with SOF from application use case
-      await raceWithSOFUseCase.execute({ raceId });
-      const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
-      if (raceViewModel) {
-        setRaceSOF(raceViewModel.strengthOfField);
-      }
-
-      // Load league data
-      const leagueData = await leagueRepo.findById(raceData.leagueId);
-      setLeague(leagueData);
-
-      // Load entry list
-      await loadEntryList(raceData.id, raceData.leagueId);
-
-      // Load user's result if race is completed
-      if (raceData.status === 'completed') {
-        const resultRepo = getResultRepository();
-        const results = await resultRepo.findByRaceId(raceData.id);
-        const result = results.find(r => r.driverId === currentDriverId);
-        setUserResult(result || null);
-        
-        // Get rating change from driver stats (mock based on position)
-        if (result) {
-          const stats = getDriverStats(currentDriverId);
-          if (stats) {
-            // Calculate rating change based on position - simplified domain logic
-            const baseChange = result.position <= 3 ? 25 : result.position <= 10 ? 10 : -5;
-            const positionBonus = Math.max(0, (20 - result.position) * 2);
-            const change = baseChange + positionBonus;
-            setRatingChange(change);
-          }
-        }
+      setViewModel(vm);
+      const userResultRatingChange = vm.userResult?.ratingChange ?? null;
+      setRatingChange(userResultRatingChange);
+      if (userResultRatingChange === null) {
+        setAnimatedRatingChange(0);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load race');
+      setViewModel(null);
     } finally {
       setLoading(false);
     }
   };
 
-  const loadEntryList = async (raceId: string, leagueId: string) => {
-    try {
-      const driverRepo = getDriverRepository();
-
-      const raceRegistrationsUseCase = getGetRaceRegistrationsUseCase();
-      await raceRegistrationsUseCase.execute({ raceId });
-      const registrationsViewModel = raceRegistrationsUseCase.presenter.getViewModel();
-      const registeredDriverIds = registrationsViewModel.registeredDriverIds;
-
-      const drivers = await Promise.all(
-        registeredDriverIds.map((id: string) => driverRepo.findById(id)),
-      );
-      const validDrivers = drivers.filter((d: Driver | null): d is Driver => d !== null);
-      setEntryList(validDrivers);
-
-      const isRegisteredUseCase = getIsDriverRegisteredForRaceUseCase();
-      await isRegisteredUseCase.execute({
-        raceId,
-        driverId: currentDriverId,
-      });
-      const registrationViewModel = isRegisteredUseCase.presenter.getViewModel();
-      setIsUserRegistered(registrationViewModel.isRegistered);
-
-      const membership = getMembership(leagueId, currentDriverId);
-      const isUpcoming = race?.status === 'scheduled';
-      setCanRegister(!!membership && membership.status === 'active' && !!isUpcoming);
-    } catch (err) {
-      console.error('Failed to load entry list:', err);
-    }
-  };
-
   useEffect(() => {
     loadRaceData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -175,39 +88,38 @@ export default function RaceDetailPage() {
       const end = ratingChange;
       const duration = 1000;
       const startTime = performance.now();
-      
+
       const animate = (currentTime: number) => {
         const elapsed = currentTime - startTime;
         const progress = Math.min(elapsed / duration, 1);
-        // Ease out cubic
         const eased = 1 - Math.pow(1 - progress, 3);
         const current = Math.round(start + (end - start) * eased);
         setAnimatedRatingChange(current);
-        
+
         if (progress < 1) {
           requestAnimationFrame(animate);
         }
       };
-      
+
       requestAnimationFrame(animate);
     }
   }, [ratingChange]);
 
   const handleCancelRace = async () => {
+    const race = viewModel?.race;
     if (!race || race.status !== 'scheduled') return;
 
     const confirmed = window.confirm(
-      'Are you sure you want to cancel this race? This action cannot be undone.'
+      'Are you sure you want to cancel this race? This action cannot be undone.',
     );
 
     if (!confirmed) return;
 
     setCancelling(true);
     try {
-      const raceRepo = getRaceRepository();
-      const cancelledRace = race.cancel();
-      await raceRepo.update(cancelledRace);
-      setRace(cancelledRace);
+      const useCase = getCancelRaceUseCase();
+      await useCase.execute({ raceId: race.id });
+      await loadRaceData();
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to cancel race');
     } finally {
@@ -216,10 +128,12 @@ export default function RaceDetailPage() {
   };
 
   const handleRegister = async () => {
+    const race = viewModel?.race;
+    const league = viewModel?.league;
     if (!race || !league) return;
 
     const confirmed = window.confirm(
-      `Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`
+      `Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`,
     );
 
     if (!confirmed) return;
@@ -232,7 +146,7 @@ export default function RaceDetailPage() {
         leagueId: league.id,
         driverId: currentDriverId,
       });
-      await loadEntryList(race.id, league.id);
+      await loadRaceData();
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to register for race');
     } finally {
@@ -241,10 +155,12 @@ export default function RaceDetailPage() {
   };
 
   const handleWithdraw = async () => {
+    const race = viewModel?.race;
+    const league = viewModel?.league;
     if (!race || !league) return;
 
     const confirmed = window.confirm(
-      'Withdraw from this race?\n\nYou can register again later if you change your mind.'
+      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
     );
 
     if (!confirmed) return;
@@ -256,7 +172,7 @@ export default function RaceDetailPage() {
         raceId: race.id,
         driverId: currentDriverId,
       });
-      await loadEntryList(race.id, league.id);
+      await loadRaceData();
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
     } finally {
@@ -285,13 +201,13 @@ export default function RaceDetailPage() {
     const now = new Date();
     const target = new Date(date);
     const diffMs = target.getTime() - now.getTime();
-    
+
     if (diffMs < 0) return null;
-    
+
     const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
     const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-    
+
     if (days > 0) return `${days}d ${hours}h`;
     if (hours > 0) return `${hours}h ${minutes}m`;
     return `${minutes}m`;
@@ -330,7 +246,7 @@ export default function RaceDetailPage() {
       label: 'Cancelled',
       description: 'This race has been cancelled',
     },
-  };
+  } as const;
 
   if (loading) {
     return (
@@ -349,12 +265,12 @@ export default function RaceDetailPage() {
     );
   }
 
-  if (error || !race) {
+  if (error || !viewModel || !viewModel.race) {
     return (
       <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto">
           <Breadcrumbs items={[{ label: 'Races', href: '/races' }, { label: 'Error' }]} />
-          
+
           <Card className="text-center py-12 mt-6">
             <div className="flex flex-col items-center gap-4">
               <div className="p-4 bg-warning-amber/10 rounded-full">
@@ -362,7 +278,9 @@ export default function RaceDetailPage() {
               </div>
               <div>
                 <p className="text-white font-medium mb-1">{error || 'Race not found'}</p>
-                <p className="text-sm text-gray-500">The race you're looking for doesn't exist or has been removed.</p>
+                <p className="text-sm text-gray-500">
+                  The race you're looking for doesn't exist or has been removed.
+                </p>
               </div>
               <Button
                 variant="secondary"
@@ -378,9 +296,16 @@ export default function RaceDetailPage() {
     );
   }
 
+  const race = viewModel.race;
+  const league = viewModel.league;
+  const entryList: RaceDetailEntryViewModel[] = viewModel.entryList;
+  const registration = viewModel.registration;
+  const userResult: RaceDetailUserResultViewModel | null = viewModel.userResult;
+  const raceSOF = race.strengthOfField;
+
   const config = statusConfig[race.status];
   const StatusIcon = config.icon;
-  const timeUntil = race.status === 'scheduled' ? getTimeUntil(race.scheduledAt) : null;
+  const timeUntil = race.status === 'scheduled' ? getTimeUntil(new Date(race.scheduledAt)) : null;
 
   const breadcrumbItems = [
     { label: 'Races', href: '/races' },
@@ -388,7 +313,6 @@ export default function RaceDetailPage() {
     { label: race.track },
   ];
 
-  // Country code to flag emoji converter
   const getCountryFlag = (countryCode: string): string => {
     const codePoints = countryCode
       .toUpperCase()
@@ -397,24 +321,6 @@ export default function RaceDetailPage() {
     return String.fromCodePoint(...codePoints);
   };
 
-  // Build driver rankings for entry list display
-  const getDriverRank = (driverId: string): { rating: number | null; rank: number | null } => {
-    const stats = getDriverStats(driverId);
-    if (!stats) return { rating: null, rank: null };
-    
-    const allRankings = getAllDriverRankings();
-    let rank = stats.overallRank;
-    if (!rank || rank <= 0) {
-      const indexInGlobal = allRankings.findIndex(s => s.driverId === driverId);
-      if (indexInGlobal !== -1) {
-        rank = indexInGlobal + 1;
-      }
-    }
-    
-    return { rating: stats.rating, rank };
-  };
-
-  // Build sponsor insights for race
   const sponsorInsights = {
     tier: 'gold' as const,
     trustScore: 92,
@@ -425,7 +331,7 @@ export default function RaceDetailPage() {
   const raceMetrics = [
     MetricBuilders.views(entryList.length * 12),
     MetricBuilders.engagement(78),
-    { label: 'SOF', value: raceSOF?.toString() ?? '—', icon: Zap, color: 'text-warning-amber' as const },
+    { label: 'SOF', value: raceSOF != null ? raceSOF.toString() : '—', icon: Zap, color: 'text-warning-amber' as const },
     MetricBuilders.reach(entryList.length * 45),
   ];
 
@@ -461,19 +367,23 @@ export default function RaceDetailPage() {
 
         {/* User Result - Premium Achievement Card */}
         {userResult && (
-          <div className={`
+          <div
+            className={`
             relative overflow-hidden rounded-2xl p-1
-            ${userResult.position === 1
-              ? 'bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-600'
-              : userResult.isPodium()
+            ${
+              userResult.position === 1
+                ? 'bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-600'
+                : userResult.isPodium
                 ? 'bg-gradient-to-r from-gray-400 via-gray-300 to-gray-500'
-                : 'bg-gradient-to-r from-primary-blue via-primary-blue/80 to-primary-blue'}
-          `}>
+                : 'bg-gradient-to-r from-primary-blue via-primary-blue/80 to-primary-blue'
+            }
+          `}
+          >
             <div className="relative bg-deep-graphite rounded-xl p-6 sm:p-8">
               {/* Decorative elements */}
               <div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full blur-2xl" />
               <div className="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-white/5 to-transparent rounded-full blur-3xl" />
-              
+
               {/* Victory confetti effect for P1 */}
               {userResult.position === 1 && (
                 <div className="absolute inset-0 overflow-hidden pointer-events-none">
@@ -483,108 +393,151 @@ export default function RaceDetailPage() {
                   <div className="absolute top-10 right-[35%] w-1 h-1 bg-yellow-400 rounded-full animate-pulse delay-300" />
                 </div>
               )}
-              
+
               <div className="relative z-10">
                 {/* Main content grid */}
                 <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                   {/* Left: Position and achievement */}
                   <div className="flex items-center gap-5">
                     {/* Giant position badge */}
-                    <div className={`
+                    <div
+                      className={`
                       relative flex items-center justify-center w-24 h-24 sm:w-28 sm:h-28 rounded-3xl font-black text-4xl sm:text-5xl
-                      ${userResult.position === 1
-                        ? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-deep-graphite shadow-2xl shadow-yellow-500/30'
-                        : userResult.position === 2
+                      ${
+                        userResult.position === 1
+                          ? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-deep-graphite shadow-2xl shadow-yellow-500/30'
+                          : userResult.position === 2
                           ? 'bg-gradient-to-br from-gray-300 to-gray-500 text-deep-graphite shadow-xl shadow-gray-400/20'
                           : userResult.position === 3
-                            ? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-xl shadow-amber-600/20'
-                            : 'bg-gradient-to-br from-primary-blue to-primary-blue/70 text-white shadow-xl shadow-primary-blue/20'}
-                    `}>
+                          ? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-xl shadow-amber-600/20'
+                          : 'bg-gradient-to-br from-primary-blue to-primary-blue/70 text-white shadow-xl shadow-primary-blue/20'
+                      }
+                    `}
+                    >
                       {userResult.position === 1 && (
                         <Trophy className="absolute -top-3 -right-2 w-8 h-8 text-yellow-300 drop-shadow-lg" />
                       )}
                       <span>P{userResult.position}</span>
                     </div>
-                    
+
                     {/* Achievement text */}
                     <div>
-                      <p className={`
-                        text-2xl sm:text-3xl font-bold mb-1
-                        ${userResult.position === 1 ? 'text-yellow-400' :
-                          userResult.isPodium() ? 'text-gray-300' : 'text-white'}
-                      `}>
-                        {userResult.position === 1 ? '🏆 VICTORY!' :
-                         userResult.position === 2 ? '🥈 Second Place' :
-                         userResult.position === 3 ? '🥉 Podium Finish' :
-                         userResult.position <= 5 ? '⭐ Top 5 Finish' :
-                         userResult.position <= 10 ? 'Points Finish' :
-                         `P${userResult.position} Finish`}
+                      <p
+                        className={`
+                          text-2xl sm:text-3xl font-bold mb-1
+                          ${
+                            userResult.position === 1
+                              ? 'text-yellow-400'
+                              : userResult.isPodium
+                              ? 'text-gray-300'
+                              : 'text-white'
+                          }
+                        `}
+                      >
+                        {userResult.position === 1
+                          ? '🏆 VICTORY!'
+                          : userResult.position === 2
+                          ? '🥈 Second Place'
+                          : userResult.position === 3
+                          ? '🥉 Podium Finish'
+                          : userResult.position <= 5
+                          ? '⭐ Top 5 Finish'
+                          : userResult.position <= 10
+                          ? 'Points Finish'
+                          : `P${userResult.position} Finish`}
                       </p>
                       <div className="flex items-center gap-3 text-sm text-gray-400">
                         <span>Started P{userResult.startPosition}</span>
                         <span className="w-1 h-1 rounded-full bg-gray-600" />
-                        <span className={userResult.isClean() ? 'text-performance-green' : ''}>
+                        <span className={userResult.isClean ? 'text-performance-green' : ''}>
                           {userResult.incidents}x incidents
-                          {userResult.isClean() && ' ✨'}
+                          {userResult.isClean && ' ✨'}
                         </span>
                       </div>
                     </div>
                   </div>
-                  
+
                   {/* Right: Stats cards */}
                   <div className="flex flex-wrap gap-3">
                     {/* Position change */}
-                    {userResult.getPositionChange() !== 0 && (
-                      <div className={`
+                    {userResult.positionChange !== 0 && (
+                      <div
+                        className={`
                         flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
-                        ${userResult.getPositionChange() > 0
-                          ? 'bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40'
-                          : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'}
-                      `}>
-                        <div className={`
+                        ${
+                          userResult.positionChange > 0
+                            ? 'bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40'
+                            : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
+                        }
+                      `}
+                      >
+                        <div
+                          className={`
                           flex items-center gap-1 font-black text-2xl
-                          ${userResult.getPositionChange() > 0 ? 'text-performance-green' : 'text-red-400'}
-                        `}>
-                          {userResult.getPositionChange() > 0 ? (
+                          ${
+                            userResult.positionChange > 0
+                              ? 'text-performance-green'
+                              : 'text-red-400'
+                          }
+                        `}
+                        >
+                          {userResult.positionChange > 0 ? (
                             <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                              <path fillRule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clipRule="evenodd" />
+                              <path
+                                fillRule="evenodd"
+                                d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+                                clipRule="evenodd"
+                              />
                             </svg>
                           ) : (
                             <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                              <path fillRule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clipRule="evenodd" />
+                              <path
+                                fillRule="evenodd"
+                                d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
+                                clipRule="evenodd"
+                              />
                             </svg>
                           )}
-                          {Math.abs(userResult.getPositionChange())}
+                          {Math.abs(userResult.positionChange)}
                         </div>
                         <div className="text-xs text-gray-400 mt-0.5">
-                          {userResult.getPositionChange() > 0 ? 'Gained' : 'Lost'}
+                          {userResult.positionChange > 0 ? 'Gained' : 'Lost'}
                         </div>
                       </div>
                     )}
-                    
+
                     {/* Rating change */}
                     {ratingChange !== null && (
-                      <div className={`
+                      <div
+                        className={`
                         flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
-                        ${ratingChange > 0
-                          ? 'bg-gradient-to-br from-warning-amber/30 to-warning-amber/10 border border-warning-amber/40'
-                          : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'}
-                      `}>
-                        <div className={`
+                        ${
+                          ratingChange > 0
+                            ? 'bg-gradient-to-br from-warning-amber/30 to-warning-amber/10 border border-warning-amber/40'
+                            : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
+                        }
+                      `}
+                      >
+                        <div
+                          className={`
                           font-mono font-black text-2xl
                           ${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
-                        `}>
-                          {animatedRatingChange > 0 ? '+' : ''}{animatedRatingChange}
+                        `}
+                        >
+                          {animatedRatingChange > 0 ? '+' : ''}
+                          {animatedRatingChange}
                         </div>
                         <div className="text-xs text-gray-400 mt-0.5">iRating</div>
                       </div>
                     )}
-                    
+
                     {/* Clean race bonus */}
-                    {userResult.isClean() && (
+                    {userResult.isClean && (
                       <div className="flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px] bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40">
                         <div className="text-2xl">✨</div>
-                        <div className="text-xs text-performance-green mt-0.5 font-medium">Clean Race</div>
+                        <div className="text-xs text-performance-green mt-0.5 font-medium">
+                          Clean Race
+                        </div>
                       </div>
                     )}
                   </div>
@@ -600,9 +553,9 @@ export default function RaceDetailPage() {
           {race.status === 'running' && (
             <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
           )}
-          
+
           <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
-          
+
           <div className="relative z-10">
             {/* Status Badge */}
             <div className="flex items-center gap-3 mb-4">
@@ -624,16 +577,16 @@ export default function RaceDetailPage() {
             <Heading level={1} className="text-2xl sm:text-3xl font-bold text-white mb-2">
               {race.track}
             </Heading>
-            
+
             {/* Meta */}
             <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
               <span className="flex items-center gap-2">
                 <Calendar className="w-4 h-4" />
-                {formatDate(race.scheduledAt)}
+                {formatDate(new Date(race.scheduledAt))}
               </span>
               <span className="flex items-center gap-2">
                 <Clock className="w-4 h-4" />
-                {formatTime(race.scheduledAt)}
+                {formatTime(new Date(race.scheduledAt))}
               </span>
               <span className="flex items-center gap-2">
                 <Car className="w-4 h-4" />
@@ -642,19 +595,19 @@ export default function RaceDetailPage() {
             </div>
           </div>
           {/* Prominent SOF Badge - Electric Design */}
-          {raceSOF && (
+          {raceSOF != null && (
             <div className="absolute top-6 right-6 sm:top-8 sm:right-8">
               <div className="relative group">
                 {/* Glow effect */}
                 <div className="absolute inset-0 bg-warning-amber/40 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300" />
-                
+
                 <div className="relative flex items-center gap-4 px-6 py-4 rounded-2xl bg-gradient-to-br from-warning-amber/30 via-warning-amber/20 to-orange-500/20 border border-warning-amber/50 shadow-2xl backdrop-blur-sm">
                   {/* Electric bolt with animation */}
                   <div className="relative">
                     <Zap className="w-8 h-8 text-warning-amber drop-shadow-lg" />
                     <Zap className="absolute inset-0 w-8 h-8 text-warning-amber animate-pulse opacity-50" />
                   </div>
-                  
+
                   <div>
                     <div className="text-[10px] text-warning-amber/90 uppercase tracking-widest font-bold mb-0.5">
                       Strength of Field
@@ -681,7 +634,7 @@ export default function RaceDetailPage() {
                 <Flag className="w-5 h-5 text-primary-blue" />
                 Race Details
               </h2>
-              
+
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="p-4 bg-deep-graphite rounded-lg">
                   <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Track</p>
@@ -730,92 +683,100 @@ export default function RaceDetailPage() {
                 </span>
               </div>
 
-              {(() => {
-                const imageService = getImageService();
-                return entryList.length === 0 ? (
-                  <div className="text-center py-8">
-                    <div className="p-4 bg-iron-gray rounded-full inline-block mb-3">
-                      <Users className="w-6 h-6 text-gray-500" />
-                    </div>
-                    <p className="text-gray-400">No drivers registered yet</p>
-                    <p className="text-sm text-gray-500">Be the first to sign up!</p>
+              {entryList.length === 0 ? (
+                <div className="text-center py-8">
+                  <div className="p-4 bg-iron-gray rounded-full inline-block mb-3">
+                    <Users className="w-6 h-6 text-gray-500" />
                   </div>
-                ) : (
-                  <div className="space-y-1">
-                    {entryList.map((driver, index) => {
-                      const driverRankInfo = getDriverRank(driver.id);
-                      const isCurrentUser = driver.id === currentDriverId;
-                      const avatarUrl = imageService.getDriverAvatar(driver.id);
-                      const countryFlag = getCountryFlag(driver.country);
-                      
-                      return (
-                        <div
-                          key={driver.id}
-                          onClick={() => router.push(`/drivers/${driver.id}`)}
-                          className={`
-                            flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200
-                            ${isCurrentUser
+                  <p className="text-gray-400">No drivers registered yet</p>
+                  <p className="text-sm text-gray-500">Be the first to sign up!</p>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {entryList.map((driver, index) => {
+                    const isCurrentUser = driver.isCurrentUser;
+                    const countryFlag = getCountryFlag(driver.country);
+
+                    return (
+                      <div
+                        key={driver.id}
+                        onClick={() => router.push(`/drivers/${driver.id}`)}
+                        className={`
+                          flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200
+                          ${
+                            isCurrentUser
                               ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent border border-primary-blue/40 shadow-lg shadow-primary-blue/10'
-                              : 'bg-deep-graphite hover:bg-charcoal-outline/50 border border-transparent'}
+                              : 'bg-deep-graphite hover:bg-charcoal-outline/50 border border-transparent'
+                          }
+                        `}
+                      >
+                        {/* Position number */}
+                        <div
+                          className={`
+                            flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
+                            ${
+                              index === 0
+                                ? 'bg-yellow-500/20 text-yellow-400'
+                                : index === 1
+                                ? 'bg-gray-400/20 text-gray-300'
+                                : index === 2
+                                ? 'bg-amber-600/20 text-amber-500'
+                                : 'bg-iron-gray text-gray-500'
+                            }
                           `}
                         >
-                          {/* Position number */}
-                          <div className={`
-                            flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
-                            ${index === 0 ? 'bg-yellow-500/20 text-yellow-400' :
-                              index === 1 ? 'bg-gray-400/20 text-gray-300' :
-                              index === 2 ? 'bg-amber-600/20 text-amber-500' :
-                              'bg-iron-gray text-gray-500'}
-                          `}>
-                            {index + 1}
-                          </div>
-                          
-                          {/* Avatar with nation flag */}
-                          <div className="relative flex-shrink-0">
-                            <img
-                              src={avatarUrl}
-                              alt={driver.name}
-                              className={`
-                                w-10 h-10 rounded-full object-cover
-                                ${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
-                              `}
-                            />
-                            {/* Nation flag */}
-                            <div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-deep-graphite border-2 border-deep-graphite flex items-center justify-center text-xs shadow-sm">
-                              {countryFlag}
-                            </div>
-                          </div>
-                          
-                          {/* Driver info */}
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2">
-                              <p className={`text-sm font-semibold truncate ${isCurrentUser ? 'text-primary-blue' : 'text-white'}`}>
-                                {driver.name}
-                              </p>
-                              {isCurrentUser && (
-                                <span className="px-2 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase tracking-wide">
-                                  You
-                                </span>
-                              )}
-                            </div>
-                            <p className="text-xs text-gray-500">{driver.country}</p>
-                          </div>
-                          
-                          {/* Rating badge */}
-                          {driverRankInfo.rating && (
-                            <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
-                              <Zap className="w-3 h-3 text-warning-amber" />
-                              <span className="text-xs font-bold text-warning-amber font-mono">
-                                {driverRankInfo.rating}
-                              </span>
-                            </div>
-                          )}
+                          {index + 1}
                         </div>
-                      );
-                    })}
-                  </div>
-                );
-              })()}
+
+                        {/* Avatar with nation flag */}
+                        <div className="relative flex-shrink-0">
+                          <img
+                            src={driver.avatarUrl}
+                            alt={driver.name}
+                            className={`
+                              w-10 h-10 rounded-full object-cover
+                              ${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
+                            `}
+                          />
+                          {/* Nation flag */}
+                          <div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-deep-graphite border-2 border-deep-graphite flex items-center justify-center text-xs shadow-sm">
+                            {countryFlag}
+                          </div>
+                        </div>
+
+                        {/* Driver info */}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <p
+                              className={`text-sm font-semibold truncate ${
+                                isCurrentUser ? 'text-primary-blue' : 'text-white'
+                              }`}
+                            >
+                              {driver.name}
+                            </p>
+                            {isCurrentUser && (
+                              <span className="px-2 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase tracking-wide">
+                                You
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500">{driver.country}</p>
+                        </div>
+
+                        {/* Rating badge */}
+                        {driver.rating != null && (
+                          <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
+                            <Zap className="w-3 h-3 text-warning-amber" />
+                            <span className="text-xs font-bold text-warning-amber font-mono">
+                              {driver.rating}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
             </Card>
           </div>
 
@@ -827,7 +788,7 @@ export default function RaceDetailPage() {
                 <div className="flex items-center gap-4 mb-4">
                   <div className="w-14 h-14 rounded-xl overflow-hidden bg-iron-gray flex-shrink-0">
                     <img
-                      src={getImageService().getLeagueLogo(league.id)}
+                      src={`league-logo-${league.id}`}
                       alt={league.name}
                       className="w-full h-full object-cover"
                     />
@@ -837,11 +798,11 @@ export default function RaceDetailPage() {
                     <h3 className="text-white font-semibold truncate">{league.name}</h3>
                   </div>
                 </div>
-                
+
                 {league.description && (
                   <p className="text-sm text-gray-400 mb-4 line-clamp-2">{league.description}</p>
                 )}
-                
+
                 <div className="grid grid-cols-2 gap-3 mb-4">
                   <div className="p-3 rounded-lg bg-deep-graphite">
                     <p className="text-xs text-gray-500 mb-1">Max Drivers</p>
@@ -849,10 +810,12 @@ export default function RaceDetailPage() {
                   </div>
                   <div className="p-3 rounded-lg bg-deep-graphite">
                     <p className="text-xs text-gray-500 mb-1">Format</p>
-                    <p className="text-white font-medium capitalize">{league.settings.qualifyingFormat ?? 'Open'}</p>
+                    <p className="text-white font-medium capitalize">
+                      {league.settings.qualifyingFormat ?? 'Open'}
+                    </p>
                   </div>
                 </div>
-                
+
                 <Link
                   href={`/leagues/${league.id}`}
                   className="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30 text-primary-blue text-sm font-medium hover:bg-primary-blue/20 transition-colors"
@@ -866,10 +829,10 @@ export default function RaceDetailPage() {
             {/* Quick Actions Card */}
             <Card>
               <h2 className="text-lg font-semibold text-white mb-4">Actions</h2>
-              
+
               <div className="space-y-3">
                 {/* Registration Actions */}
-                {race.status === 'scheduled' && canRegister && !isUserRegistered && (
+                {race.status === 'scheduled' && registration.canRegister && !registration.isUserRegistered && (
                   <Button
                     variant="primary"
                     className="w-full flex items-center justify-center gap-2"
@@ -881,7 +844,7 @@ export default function RaceDetailPage() {
                   </Button>
                 )}
 
-                {race.status === 'scheduled' && isUserRegistered && (
+                {race.status === 'scheduled' && registration.isUserRegistered && (
                   <>
                     <div className="flex items-center gap-2 px-4 py-3 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
                       <CheckCircle2 className="w-5 h-5" />
@@ -940,11 +903,11 @@ export default function RaceDetailPage() {
                     <XCircle className="w-4 h-4" />
                     {cancelling ? 'Cancelling...' : 'Cancel Race'}
                   </Button>
-                  )}
-                </div>
-              </Card>
-  
-              {/* Status Info */}
+                )}
+              </div>
+            </Card>
+
+            {/* Status Info */}
             <Card className={`${config.bg} border ${config.border}`}>
               <div className="flex items-start gap-3">
                 <div className={`p-2 rounded-lg ${config.bg}`}>
@@ -967,7 +930,7 @@ export default function RaceDetailPage() {
         raceId={race.id}
         leagueId={league?.id}
         protestingDriverId={currentDriverId}
-        participants={entryList}
+        participants={entryList.map(d => ({ id: d.id, name: d.name }))}
       />
     </div>
   );

apps/website/app/races/[id]/results/page.tsx

@@ -2,45 +2,77 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
+import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import ResultsTable from '@/components/races/ResultsTable';
 import ImportResultsForm from '@/components/races/ImportResultsForm';
-import { Race } from '@gridpilot/racing/domain/entities/Race';
-import { League } from '@gridpilot/racing/domain/entities/League';
-import { Result } from '@gridpilot/racing/domain/entities/Result';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
-import type { PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
 import {
-  getRaceRepository,
-  getLeagueRepository,
-  getResultRepository,
-  getStandingRepository,
-  getDriverRepository,
   getGetRaceWithSOFUseCase,
-  getGetRacePenaltiesUseCase,
+  getGetRaceResultsDetailUseCase,
+  getImportRaceResultsUseCase,
 } from '@/lib/di-container';
+import type {
+  RaceResultsHeaderViewModel,
+  RaceResultsLeagueViewModel,
+} from '@gridpilot/racing/application/presenters/IRaceResultsDetailPresenter';
+
+type PenaltyTypeDTO =
+  | 'time_penalty'
+  | 'grid_penalty'
+  | 'points_deduction'
+  | 'disqualification'
+  | 'warning'
+  | 'license_points'
+  | string;
 
 interface PenaltyData {
   driverId: string;
-  type: PenaltyType;
+  type: PenaltyTypeDTO;
   value?: number;
 }
-import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';
+
+interface RaceResultRowDTO {
+  id: string;
+  raceId: string;
+  driverId: string;
+  position: number;
+  fastestLap: number;
+  incidents: number;
+  startPosition: number;
+  getPositionChange(): number;
+}
+
+interface DriverRowDTO {
+  id: string;
+  name: string;
+}
+
+interface ImportResultRowDTO {
+  id: string;
+  raceId: string;
+  driverId: string;
+  position: number;
+  fastestLap: number;
+  incidents: number;
+  startPosition: number;
+}
 
 export default function RaceResultsPage() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
 
-  const [race, setRace] = useState<Race | null>(null);
-  const [league, setLeague] = useState<League | null>(null);
-  const [results, setResults] = useState<Result[]>([]);
-  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [race, setRace] = useState<RaceResultsHeaderViewModel | null>(null);
+  const [league, setLeague] = useState<RaceResultsLeagueViewModel | null>(null);
+  const [results, setResults] = useState<RaceResultRowDTO[]>([]);
+  const [drivers, setDrivers] = useState<DriverRowDTO[]>([]);
   const [currentDriverId, setCurrentDriverId] = useState<string | undefined>(undefined);
   const [raceSOF, setRaceSOF] = useState<number | null>(null);
   const [penalties, setPenalties] = useState<PenaltyData[]>([]);
+  const [pointsSystem, setPointsSystem] = useState<Record<number, number>>({});
+  const [fastestLapTime, setFastestLapTime] = useState<number | undefined>(undefined);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [importing, setImporting] = useState(false);
@@ -48,60 +80,59 @@ export default function RaceResultsPage() {
 
   const loadData = async () => {
     try {
-      const raceRepo = getRaceRepository();
-      const leagueRepo = getLeagueRepository();
-      const resultRepo = getResultRepository();
-      const driverRepo = getDriverRepository();
-      const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
+      const raceResultsUseCase = getGetRaceResultsDetailUseCase();
+      await raceResultsUseCase.execute({ raceId });
 
-      const raceData = await raceRepo.findById(raceId);
-      
-      if (!raceData) {
-        setError('Race not found');
+      const viewModel = raceResultsUseCase.presenter.getViewModel();
+
+      if (!viewModel) {
+        setError('Failed to load race data');
         setLoading(false);
         return;
       }
 
-      setRace(raceData);
-
-      // Load race with SOF from application use case
-      await raceWithSOFUseCase.execute({ raceId });
-      const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
-      if (raceViewModel) {
-        setRaceSOF(raceViewModel.strengthOfField);
+      if (viewModel.error && !viewModel.race) {
+        setError(viewModel.error);
+        setRace(null);
+        setLeague(null);
+        setResults([]);
+        setDrivers([]);
+        setPenalties([]);
+        setPointsSystem({});
+        setFastestLapTime(undefined);
+        setCurrentDriverId(undefined);
+      } else {
+        setError(null);
+        setRace(viewModel.race);
+        setLeague(viewModel.league);
+        setResults(viewModel.results as unknown as RaceResultRowDTO[]);
+        setDrivers(
+          viewModel.drivers.map((d) => ({
+            id: d.id,
+            name: d.name,
+          })),
+        );
+        setPointsSystem(viewModel.pointsSystem);
+        setFastestLapTime(viewModel.fastestLapTime);
+        setCurrentDriverId(viewModel.currentDriverId);
+        setPenalties(
+          viewModel.penalties.map((p) => ({
+            driverId: p.driverId,
+            type: p.type as PenaltyTypeDTO,
+            value: p.value,
+          })),
+        );
       }
 
-      // Load league data
-      const leagueData = await leagueRepo.findById(raceData.leagueId);
-      setLeague(leagueData);
-
-      // Load results
-      const resultsData = await resultRepo.findByRaceId(raceId);
-      setResults(resultsData);
-
-      // Load drivers
-      const driversData = await driverRepo.findAll();
-      setDrivers(driversData);
-
-      // Get current driver (first driver in demo mode)
-      if (driversData.length > 0) {
-        setCurrentDriverId(driversData[0].id);
-      }
-
-      // Load penalties for this race
       try {
-        const penaltiesUseCase = getGetRacePenaltiesUseCase();
-        await penaltiesUseCase.execute(raceId);
-        const penaltiesViewModel = penaltiesUseCase.presenter.getViewModel();
-        // Map the DTO to the PenaltyData interface expected by ResultsTable
-        setPenalties(penaltiesViewModel.map(p => ({
-          driverId: p.driverId,
-          type: p.type,
-          value: p.value,
-        })));
-      } catch (penaltyErr) {
-        console.error('Failed to load penalties:', penaltyErr);
-        // Don't fail the whole page if penalties fail to load
+        const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
+        await raceWithSOFUseCase.execute({ raceId });
+        const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
+        if (raceViewModel) {
+          setRaceSOF(raceViewModel.strengthOfField);
+        }
+      } catch (sofErr) {
+        console.error('Failed to load SOF:', sofErr);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load race data');
@@ -115,32 +146,19 @@ export default function RaceResultsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [raceId]);
 
-  const handleImportSuccess = async (importedResults: Result[]) => {
+  const handleImportSuccess = async (importedResults: ImportResultRowDTO[]) => {
     setImporting(true);
     setError(null);
 
     try {
-      const resultRepo = getResultRepository();
-      const standingRepo = getStandingRepository();
+      const importUseCase = getImportRaceResultsUseCase();
+      await importUseCase.execute({
+        raceId,
+        results: importedResults,
+      });
 
-      // Check if results already exist
-      const existingResults = await resultRepo.existsByRaceId(raceId);
-      if (existingResults) {
-        throw new Error('Results already exist for this race');
-      }
-
-      // Create all results
-      await resultRepo.createMany(importedResults);
-
-      // Recalculate standings for the league
-      if (league) {
-        await standingRepo.recalculate(league.id);
-      }
-
-      // Reload results
-      const resultsData = await resultRepo.findByRaceId(raceId);
-      setResults(resultsData);
       setImportSuccess(true);
+      await loadData();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to import results');
     } finally {
@@ -152,31 +170,6 @@ export default function RaceResultsPage() {
     setError(errorMessage);
   };
 
-  const getPointsSystem = (): Record<number, number> => {
-    if (!league) return {};
-    
-    const pointsSystems: Record<string, Record<number, number>> = {
-      'f1-2024': {
-        1: 25, 2: 18, 3: 15, 4: 12, 5: 10,
-        6: 8, 7: 6, 8: 4, 9: 2, 10: 1
-      },
-      'indycar': {
-        1: 50, 2: 40, 3: 35, 4: 32, 5: 30,
-        6: 28, 7: 26, 8: 24, 9: 22, 10: 20,
-        11: 19, 12: 18, 13: 17, 14: 16, 15: 15
-      }
-    };
-
-    return league.settings.customPoints || 
-           pointsSystems[league.settings.pointsSystem] || 
-           pointsSystems['f1-2024'];
-  };
-
-  const getFastestLapTime = (): number | undefined => {
-    if (results.length === 0) return undefined;
-    return Math.min(...results.map(r => r.fastestLap));
-  };
-
   if (loading) {
     return (
       <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
@@ -212,14 +205,13 @@ export default function RaceResultsPage() {
   const breadcrumbItems = [
     { label: 'Races', href: '/races' },
     ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
-    ...(race ? [{ label: race.track, href: `/races/${raceId}` }] : []),
+    ...(race ? [{ label: race.track, href: `/races/${race.id}` }] : []),
     { label: 'Results' },
   ];
 
   return (
     <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
       <div className="max-w-6xl mx-auto space-y-6">
-        {/* Navigation Row: Breadcrumbs left, Back button right */}
         <div className="flex items-center justify-between">
           <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
           <Button
@@ -232,15 +224,16 @@ export default function RaceResultsPage() {
           </Button>
         </div>
 
-        {/* Hero Header */}
         <div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
           <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
-          
+
           <div className="relative z-10">
             <div className="flex items-center gap-3 mb-4">
               <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
                 <Trophy className="w-4 h-4 text-performance-green" />
-                <span className="text-sm font-semibold text-performance-green">Final Results</span>
+                <span className="text-sm font-semibold text-performance-green">
+                  Final Results
+                </span>
               </div>
               {raceSOF && (
                 <span className="flex items-center gap-1.5 text-warning-amber text-sm">
@@ -249,11 +242,11 @@ export default function RaceResultsPage() {
                 </span>
               )}
             </div>
-            
+
             <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
               {race?.track ?? 'Race'} Results
             </h1>
-            
+
             <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
               {race && (
                 <>
@@ -271,35 +264,30 @@ export default function RaceResultsPage() {
                   </span>
                 </>
               )}
-              {league && (
-                <span className="text-primary-blue">{league.name}</span>
-              )}
+              {league && <span className="text-primary-blue">{league.name}</span>}
             </div>
           </div>
         </div>
 
-        {/* Success Message */}
         {importSuccess && (
           <div className="p-4 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
             <strong>Success!</strong> Results imported and standings updated.
           </div>
         )}
 
-        {/* Error Message */}
         {error && (
           <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
             <strong>Error:</strong> {error}
           </div>
         )}
 
-        {/* Content */}
         <Card>
           {hasResults ? (
             <ResultsTable
               results={results}
               drivers={drivers}
-              pointsSystem={getPointsSystem()}
-              fastestLapTime={getFastestLapTime()}
+              pointsSystem={pointsSystem}
+              fastestLapTime={fastestLapTime}
               penalties={penalties}
               currentDriverId={currentDriverId}
             />

apps/website/app/races/[id]/stewarding/page.tsx

@@ -3,27 +3,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import {
-  getRaceRepository,
-  getLeagueRepository,
-  getProtestRepository,
-  getDriverRepository,
-  getPenaltyRepository,
-  getLeagueMembershipRepository,
-  getReviewProtestUseCase,
-  getApplyPenaltyUseCase,
-} from '@/lib/di-container';
-import { useEffectiveDriverId } from '@/lib/currentDriver';
-import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
-import type { Race } from '@gridpilot/racing/domain/entities/Race';
-import type { League } from '@gridpilot/racing/domain/entities/League';
-import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
-import type { Penalty, PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
-import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
-import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import {
   AlertTriangle,
   Clock,
@@ -40,6 +19,22 @@ import {
   Users,
   Trophy,
 } from 'lucide-react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import {
+  getGetRaceProtestsUseCase,
+  getGetRacePenaltiesUseCase,
+  getRaceRepository,
+  getLeagueRepository,
+  getLeagueMembershipRepository,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
+import type { RaceProtestViewModel } from '@gridpilot/racing/application/presenters/IRaceProtestsPresenter';
+import type { RacePenaltyViewModel } from '@gridpilot/racing/application/presenters/IRacePenaltiesPresenter';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
 
 export default function RaceStewardingPage() {
   const params = useParams();
@@ -49,9 +44,8 @@ export default function RaceStewardingPage() {
 
   const [race, setRace] = useState<Race | null>(null);
   const [league, setLeague] = useState<League | null>(null);
-  const [protests, setProtests] = useState<Protest[]>([]);
-  const [penalties, setPenalties] = useState<Penalty[]>([]);
-  const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
+  const [protests, setProtests] = useState<RaceProtestViewModel[]>([]);
+  const [penalties, setPenalties] = useState<RacePenaltyViewModel[]>([]);
   const [loading, setLoading] = useState(true);
   const [isAdmin, setIsAdmin] = useState(false);
   const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
@@ -62,12 +56,10 @@ export default function RaceStewardingPage() {
       try {
         const raceRepo = getRaceRepository();
         const leagueRepo = getLeagueRepository();
-        const protestRepo = getProtestRepository();
-        const penaltyRepo = getPenaltyRepository();
-        const driverRepo = getDriverRepository();
         const membershipRepo = getLeagueMembershipRepository();
+        const protestsUseCase = getGetRaceProtestsUseCase();
+        const penaltiesUseCase = getGetRacePenaltiesUseCase();
 
-        // Get race
         const raceData = await raceRepo.findById(raceId);
         if (!raceData) {
           setLoading(false);
@@ -75,48 +67,24 @@ export default function RaceStewardingPage() {
         }
         setRace(raceData);
 
-        // Get league
         const leagueData = await leagueRepo.findById(raceData.leagueId);
         setLeague(leagueData);
 
-        // Check admin status
         if (leagueData) {
-          const membership = await membershipRepo.getMembership(leagueData.id, currentDriverId);
+          const membership = await membershipRepo.getMembership(
+            leagueData.id,
+            currentDriverId,
+          );
           setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
         }
 
-        // Get protests for this race
-        const raceProtests = await protestRepo.findByRaceId(raceId);
-        setProtests(raceProtests);
+        await protestsUseCase.execute(raceId);
+        const protestsViewModel = protestsUseCase.presenter.getViewModel();
+        setProtests(protestsViewModel.protests);
 
-        // Get penalties for this race
-        const racePenalties = await penaltyRepo.findByRaceId(raceId);
-        setPenalties(racePenalties);
-
-        // Collect driver IDs
-        const driverIds = new Set<string>();
-        raceProtests.forEach((p) => {
-          driverIds.add(p.protestingDriverId);
-          driverIds.add(p.accusedDriverId);
-        });
-        racePenalties.forEach((p) => {
-          driverIds.add(p.driverId);
-        });
-
-        // Load driver info
-        const driverEntities = await Promise.all(
-          Array.from(driverIds).map((id) => driverRepo.findById(id))
-        );
-        const byId: Record<string, DriverDTO> = {};
-        driverEntities.forEach((driver) => {
-          if (driver) {
-            const dto = EntityMappers.toDriverDTO(driver);
-            if (dto) {
-              byId[dto.id] = dto;
-            }
-          }
-        });
-        setDriversById(byId);
+        await penaltiesUseCase.execute(raceId);
+        const penaltiesViewModel = penaltiesUseCase.presenter.getViewModel();
+        setPenalties(penaltiesViewModel.penalties);
       } catch (err) {
         console.error('Failed to load data:', err);
       } finally {
@@ -128,10 +96,13 @@ export default function RaceStewardingPage() {
   }, [raceId, currentDriverId]);
 
   const pendingProtests = protests.filter(
-    (p) => p.status === 'pending' || p.status === 'under_review'
+    (p) => p.status === 'pending' || p.status === 'under_review',
   );
   const resolvedProtests = protests.filter(
-    (p) => p.status === 'upheld' || p.status === 'dismissed' || p.status === 'withdrawn'
+    (p) =>
+      p.status === 'upheld' ||
+      p.status === 'dismissed' ||
+      p.status === 'withdrawn',
   );
 
   const getStatusBadge = (status: string) => {
@@ -166,8 +137,9 @@ export default function RaceStewardingPage() {
     }
   };
 
-  const formatDate = (date: Date) => {
-    return new Date(date).toLocaleDateString('en-US', {
+  const formatDate = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
       year: 'numeric',

apps/website/app/races/all/page.tsx

@@ -7,9 +7,11 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import { Race, RaceStatus } from '@gridpilot/racing/domain/entities/Race';
-import { League } from '@gridpilot/racing/domain/entities/League';
-import { getRaceRepository, getLeagueRepository } from '@/lib/di-container';
+import { getGetAllRacesPageDataUseCase } from '@/lib/di-container';
+import type {
+  AllRacesPageViewModel,
+  AllRacesListItemViewModel,
+} from '@gridpilot/racing/application/presenters/IAllRacesPagePresenter';
 import {
   Calendar,
   Clock,
@@ -30,38 +32,30 @@ import {
 
 const ITEMS_PER_PAGE = 10;
 
+type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
+
 export default function AllRacesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  
-  const [races, setRaces] = useState<Race[]>([]);
-  const [leagues, setLeagues] = useState<Map<string, League>>(new Map());
+
+  const [pageData, setPageData] = useState<AllRacesPageViewModel | null>(null);
   const [loading, setLoading] = useState(true);
-  
+
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  
+
   // Filters
-  const [statusFilter, setStatusFilter] = useState<RaceStatus | 'all'>('all');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [showFilters, setShowFilters] = useState(false);
 
   const loadRaces = async () => {
     try {
-      const raceRepo = getRaceRepository();
-      const leagueRepo = getLeagueRepository();
-
-      const [allRaces, allLeagues] = await Promise.all([
-        raceRepo.findAll(),
-        leagueRepo.findAll()
-      ]);
-
-      setRaces(allRaces.sort((a, b) => b.scheduledAt.getTime() - a.scheduledAt.getTime()));
-      
-      const leagueMap = new Map<string, League>();
-      allLeagues.forEach(league => leagueMap.set(league.id, league));
-      setLeagues(leagueMap);
+      const useCase = getGetAllRacesPageDataUseCase();
+      await useCase.execute();
+      const viewModel = useCase.presenter.getViewModel();
+      setPageData(viewModel);
     } catch (err) {
       console.error('Failed to load races:', err);
     } finally {
@@ -70,29 +64,26 @@ export default function AllRacesPage() {
   };
 
   useEffect(() => {
-    loadRaces();
+    void loadRaces();
   }, []);
 
-  // Filter races
+  const races: AllRacesListItemViewModel[] = pageData?.races ?? [];
+
   const filteredRaces = useMemo(() => {
     return races.filter(race => {
-      // Status filter
       if (statusFilter !== 'all' && race.status !== statusFilter) {
         return false;
       }
 
-      // League filter
       if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
         return false;
       }
 
-      // Search filter
       if (searchQuery) {
         const query = searchQuery.toLowerCase();
-        const league = leagues.get(race.leagueId);
         const matchesTrack = race.track.toLowerCase().includes(query);
         const matchesCar = race.car.toLowerCase().includes(query);
-        const matchesLeague = league?.name.toLowerCase().includes(query);
+        const matchesLeague = race.leagueName.toLowerCase().includes(query);
         if (!matchesTrack && !matchesCar && !matchesLeague) {
           return false;
         }
@@ -100,7 +91,7 @@ export default function AllRacesPage() {
 
       return true;
     });
-  }, [races, statusFilter, leagueFilter, searchQuery, leagues]);
+  }, [races, statusFilter, leagueFilter, searchQuery]);
 
   // Paginate
   const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
@@ -232,7 +223,7 @@ export default function AllRacesPage() {
               {/* Status Filter */}
               <select
                 value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value as RaceStatus | 'all')}
+                onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
                 className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
               >
                 <option value="all">All Statuses</option>
@@ -249,7 +240,7 @@ export default function AllRacesPage() {
                 className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
               >
                 <option value="all">All Leagues</option>
-                {Array.from(leagues.values()).map(league => (
+                {pageData?.filters.leagues.map((league) => (
                   <option key={league.id} value={league.id}>
                     {league.name}
                   </option>
@@ -295,7 +286,6 @@ export default function AllRacesPage() {
             {paginatedRaces.map(race => {
               const config = statusConfig[race.status];
               const StatusIcon = config.icon;
-              const league = leagues.get(race.leagueId);
 
               return (
                 <div
@@ -347,16 +337,14 @@ export default function AllRacesPage() {
                               {formatDate(race.scheduledAt)}
                             </span>
                           </div>
-                          {league && (
-                            <Link
-                              href={`/leagues/${league.id}`}
-                              onClick={(e) => e.stopPropagation()}
-                              className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
-                            >
-                              <Trophy className="w-3.5 h-3.5" />
-                              {league.name}
-                            </Link>
-                          )}
+                          <Link
+                            href={`/leagues/${race.leagueId}`}
+                            onClick={(e) => e.stopPropagation()}
+                            className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
+                          >
+                            <Trophy className="w-3.5 h-3.5" />
+                            {race.leagueName}
+                          </Link>
                         </div>
 
                         {/* Status Badge */}

apps/website/app/races/page.tsx

@@ -6,8 +6,11 @@ import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
-import { Race, RaceStatus } from '@gridpilot/racing/domain/entities/Race';
 import { getGetRacesPageDataUseCase } from '@/lib/di-container';
+import type {
+  RacesPageViewModel,
+  RaceListItemViewModel,
+} from '@gridpilot/racing/application/presenters/IRacesPagePresenter';
 import {
   Calendar,
   Clock,
@@ -27,21 +30,16 @@ import {
 } from 'lucide-react';
 
 type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
+type RaceStatusFilter = RaceListItemViewModel['status'];
 
 export default function RacesPage() {
   const router = useRouter();
   
-  const [pageData, setPageData] = useState<{
-    races: Array<{ race: Race; leagueName: string }>;
-    stats: { total: number; scheduled: number; running: number; completed: number };
-    liveRaces: Array<{ race: Race; leagueName: string }>;
-    upcomingRaces: Array<{ race: Race; leagueName: string }>;
-    recentResults: Array<{ race: Race; leagueName: string }>;
-  } | null>(null);
+  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   
   // Filters
-  const [statusFilter, setStatusFilter] = useState<RaceStatus | 'all'>('all');
+  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
   const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
 
@@ -50,71 +48,7 @@ export default function RacesPage() {
       const useCase = getGetRacesPageDataUseCase();
       await useCase.execute();
       const data = useCase.presenter.getViewModel();
-      
-      // Transform ViewModel back to page format
-      setPageData({
-        races: data.races.map(r => ({
-          race: {
-            id: r.id,
-            track: r.track,
-            car: r.car,
-            scheduledAt: new Date(r.scheduledAt),
-            status: r.status,
-            leagueId: r.leagueId,
-            strengthOfField: r.strengthOfField,
-            isUpcoming: () => r.isUpcoming,
-            isLive: () => r.isLive,
-            isPast: () => r.isPast,
-          } as Race,
-          leagueName: r.leagueName,
-        })),
-        stats: data.stats,
-        liveRaces: data.liveRaces.map(r => ({
-          race: {
-            id: r.id,
-            track: r.track,
-            car: r.car,
-            scheduledAt: new Date(r.scheduledAt),
-            status: r.status,
-            leagueId: r.leagueId,
-            strengthOfField: r.strengthOfField,
-            isUpcoming: () => r.isUpcoming,
-            isLive: () => r.isLive,
-            isPast: () => r.isPast,
-          } as Race,
-          leagueName: r.leagueName,
-        })),
-        upcomingRaces: data.upcomingThisWeek.map(r => ({
-          race: {
-            id: r.id,
-            track: r.track,
-            car: r.car,
-            scheduledAt: new Date(r.scheduledAt),
-            status: r.status,
-            leagueId: r.leagueId,
-            strengthOfField: r.strengthOfField,
-            isUpcoming: () => r.isUpcoming,
-            isLive: () => r.isLive,
-            isPast: () => r.isPast,
-          } as Race,
-          leagueName: r.leagueName,
-        })),
-        recentResults: data.recentResults.map(r => ({
-          race: {
-            id: r.id,
-            track: r.track,
-            car: r.car,
-            scheduledAt: new Date(r.scheduledAt),
-            status: r.status,
-            leagueId: r.leagueId,
-            strengthOfField: r.strengthOfField,
-            isUpcoming: () => r.isUpcoming,
-            isLive: () => r.isLive,
-            isPast: () => r.isPast,
-          } as Race,
-          leagueName: r.leagueName,
-        })),
-      });
+      setPageData(data);
     } catch (err) {
       console.error('Failed to load races:', err);
     } finally {
@@ -130,7 +64,7 @@ export default function RacesPage() {
   const filteredRaces = useMemo(() => {
     if (!pageData) return [];
     
-    return pageData.races.filter(({ race }) => {
+    return pageData.races.filter((race) => {
       // Status filter
       if (statusFilter !== 'all' && race.status !== statusFilter) {
         return false;
@@ -142,13 +76,13 @@ export default function RacesPage() {
       }
 
       // Time filter
-      if (timeFilter === 'upcoming' && !race.isUpcoming()) {
+      if (timeFilter === 'upcoming' && !race.isUpcoming) {
         return false;
       }
-      if (timeFilter === 'live' && !race.isLive()) {
+      if (timeFilter === 'live' && !race.isLive) {
         return false;
       }
-      if (timeFilter === 'past' && !race.isPast()) {
+      if (timeFilter === 'past' && !race.isPast) {
         return false;
       }
 
@@ -158,18 +92,18 @@ export default function RacesPage() {
 
   // Group races by date for calendar view
   const racesByDate = useMemo(() => {
-    const grouped = new Map<string, Array<{ race: Race; leagueName: string }>>();
-    filteredRaces.forEach(item => {
-      const dateKey = item.race.scheduledAt.toISOString().split('T')[0];
+    const grouped = new Map<string, RaceListItemViewModel[]>();
+    filteredRaces.forEach(race => {
+      const dateKey = new Date(race.scheduledAt).toISOString().split('T')[0];
       if (!grouped.has(dateKey)) {
         grouped.set(dateKey, []);
       }
-      grouped.get(dateKey)!.push(item);
+      grouped.get(dateKey)!.push(race);
     });
     return grouped;
   }, [filteredRaces]);
-
-  const upcomingRaces = pageData?.upcomingRaces ?? [];
+  
+  const upcomingRaces = pageData?.upcomingThisWeek ?? [];
   const liveRaces = pageData?.liveRaces ?? [];
   const recentResults = pageData?.recentResults ?? [];
   const stats = pageData?.stats ?? { total: 0, scheduled: 0, running: 0, completed: 0 };
@@ -331,7 +265,7 @@ export default function RacesPage() {
               </div>
               
               <div className="space-y-3">
-                {liveRaces.map(({ race, leagueName }) => (
+                {liveRaces.map((race) => (
                   <div
                     key={race.id}
                     onClick={() => router.push(`/races/${race.id}`)}
@@ -343,7 +277,7 @@ export default function RacesPage() {
                       </div>
                       <div>
                         <h3 className="font-semibold text-white">{race.track}</h3>
-                        <p className="text-sm text-gray-400">{leagueName}</p>
+                        <p className="text-sm text-gray-400">{race.leagueName}</p>
                       </div>
                     </div>
                     <ChevronRight className="w-5 h-5 text-gray-400" />
@@ -385,8 +319,8 @@ export default function RacesPage() {
                   className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
                 >
                   <option value="all">All Leagues</option>
-                  {pageData && [...new Set(pageData.races.map(r => r.race.leagueId))].map(leagueId => {
-                    const item = pageData.races.find(r => r.race.leagueId === leagueId);
+                  {pageData && [...new Set(pageData.races.map(r => r.leagueId))].map(leagueId => {
+                    const item = pageData.races.find(r => r.leagueId === leagueId);
                     return item ? (
                       <option key={leagueId} value={leagueId}>
                         {item.leagueName}
@@ -415,106 +349,106 @@ export default function RacesPage() {
                 </div>
               </Card>
             ) : (
-              <div className="space-y-4">
-                {Array.from(racesByDate.entries()).map(([dateKey, dayRaces]) => (
-                  <div key={dateKey} className="space-y-3">
-                    {/* Date Header */}
-                    <div className="flex items-center gap-3 px-2">
-                      <div className="p-2 bg-primary-blue/10 rounded-lg">
-                        <Calendar className="w-4 h-4 text-primary-blue" />
-                      </div>
-                      <span className="text-sm font-semibold text-white">
-                        {formatFullDate(new Date(dateKey))}
-                      </span>
-                      <span className="text-xs text-gray-500">
-                        {dayRaces.length} race{dayRaces.length !== 1 ? 's' : ''}
-                      </span>
-                    </div>
+             <div className="space-y-4">
+               {Array.from(racesByDate.entries()).map(([dateKey, dayRaces]) => (
+                 <div key={dateKey} className="space-y-3">
+                   {/* Date Header */}
+                   <div className="flex items-center gap-3 px-2">
+                     <div className="p-2 bg-primary-blue/10 rounded-lg">
+                       <Calendar className="w-4 h-4 text-primary-blue" />
+                     </div>
+                     <span className="text-sm font-semibold text-white">
+                       {formatFullDate(new Date(dateKey))}
+                     </span>
+                     <span className="text-xs text-gray-500">
+                       {dayRaces.length} race{dayRaces.length !== 1 ? 's' : ''}
+                     </span>
+                   </div>
 
-                    {/* Races for this date */}
-                    <div className="space-y-2">
-                      {dayRaces.map(({ race, leagueName }) => {
-                        const config = statusConfig[race.status];
-                        const StatusIcon = config.icon;
+                   {/* Races for this date */}
+                   <div className="space-y-2">
+                     {dayRaces.map((race) => {
+                       const config = statusConfig[race.status];
+                       const StatusIcon = config.icon;
 
-                        return (
-                          <div
-                            key={race.id}
-                            onClick={() => router.push(`/races/${race.id}`)}
-                            className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
-                          >
-                            {/* Live indicator */}
-                            {race.status === 'running' && (
-                              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
-                            )}
+                       return (
+                         <div
+                           key={race.id}
+                           onClick={() => router.push(`/races/${race.id}`)}
+                           className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
+                         >
+                           {/* Live indicator */}
+                           {race.status === 'running' && (
+                             <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
+                           )}
 
-                            <div className="flex items-start gap-4">
-                              {/* Time Column */}
-                              <div className="flex-shrink-0 text-center min-w-[60px]">
-                                <p className="text-lg font-bold text-white">{formatTime(race.scheduledAt)}</p>
-                                <p className={`text-xs ${config.color}`}>
-                                  {race.status === 'running' ? 'LIVE' : getRelativeTime(race.scheduledAt)}
-                                </p>
-                              </div>
+                           <div className="flex items-start gap-4">
+                             {/* Time Column */}
+                             <div className="flex-shrink-0 text-center min-w-[60px]">
+                               <p className="text-lg font-bold text-white">{formatTime(new Date(race.scheduledAt))}</p>
+                               <p className={`text-xs ${config.color}`}>
+                                 {race.status === 'running' ? 'LIVE' : getRelativeTime(new Date(race.scheduledAt))}
+                               </p>
+                             </div>
 
-                              {/* Divider */}
-                              <div className={`w-px self-stretch ${config.bg}`} />
+                             {/* Divider */}
+                             <div className={`w-px self-stretch ${config.bg}`} />
 
-                              {/* Main Content */}
-                              <div className="flex-1 min-w-0">
-                                <div className="flex items-start justify-between gap-4">
-                                  <div className="min-w-0">
-                                    <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
-                                      {race.track}
-                                    </h3>
-                                    <div className="flex items-center gap-3 mt-1">
-                                      <span className="flex items-center gap-1 text-sm text-gray-400">
-                                        <Car className="w-3.5 h-3.5" />
-                                        {race.car}
-                                      </span>
-                                      {race.strengthOfField && (
-                                        <span className="flex items-center gap-1 text-sm text-gray-400">
-                                          <Zap className="w-3.5 h-3.5 text-warning-amber" />
-                                          SOF {race.strengthOfField}
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
+                             {/* Main Content */}
+                             <div className="flex-1 min-w-0">
+                               <div className="flex items-start justify-between gap-4">
+                                 <div className="min-w-0">
+                                   <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
+                                     {race.track}
+                                   </h3>
+                                   <div className="flex items-center gap-3 mt-1">
+                                     <span className="flex items-center gap-1 text-sm text-gray-400">
+                                       <Car className="w-3.5 h-3.5" />
+                                       {race.car}
+                                     </span>
+                                     {race.strengthOfField && (
+                                       <span className="flex items-center gap-1 text-sm text-gray-400">
+                                         <Zap className="w-3.5 h-3.5 text-warning-amber" />
+                                         SOF {race.strengthOfField}
+                                       </span>
+                                     )}
+                                   </div>
+                                 </div>
 
-                                  {/* Status Badge */}
-                                  <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
-                                    <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
-                                    <span className={`text-xs font-medium ${config.color}`}>
-                                      {config.label}
-                                    </span>
-                                  </div>
-                                </div>
+                                 {/* Status Badge */}
+                                 <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
+                                   <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
+                                   <span className={`text-xs font-medium ${config.color}`}>
+                                     {config.label}
+                                   </span>
+                                 </div>
+                               </div>
 
-                                {/* League Link */}
-                                <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
-                                  <Link
-                                    href={`/leagues/${race.leagueId}`}
-                                    onClick={(e) => e.stopPropagation()}
-                                    className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
-                                  >
-                                    <Trophy className="w-3.5 h-3.5" />
-                                    {leagueName}
-                                    <ArrowRight className="w-3 h-3" />
-                                  </Link>
-                                </div>
-                              </div>
+                               {/* League Link */}
+                               <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
+                                 <Link
+                                   href={`/leagues/${race.leagueId}`}
+                                   onClick={(e) => e.stopPropagation()}
+                                   className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
+                                 >
+                                   <Trophy className="w-3.5 h-3.5" />
+                                   {race.leagueName}
+                                   <ArrowRight className="w-3 h-3" />
+                                 </Link>
+                               </div>
+                             </div>
 
-                              {/* Arrow */}
-                              <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
+                             {/* Arrow */}
+                             <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
+                           </div>
+                         </div>
+                       );
+                     })}
+                   </div>
+                 </div>
+               ))}
+             </div>
+           )}
 
             {/* View All Link */}
             {filteredRaces.length > 0 && (
@@ -548,7 +482,7 @@ export default function RacesPage() {
                 </p>
               ) : (
                 <div className="space-y-3">
-                  {upcomingRaces.map(({ race }) => (
+                  {upcomingRaces.map((race) => (
                     <div
                       key={race.id}
                       onClick={() => router.push(`/races/${race.id}`)}
@@ -561,7 +495,7 @@ export default function RacesPage() {
                       </div>
                       <div className="min-w-0 flex-1">
                         <p className="text-sm font-medium text-white truncate">{race.track}</p>
-                        <p className="text-xs text-gray-500">{formatTime(race.scheduledAt)}</p>
+                        <p className="text-xs text-gray-500">{formatTime(new Date(race.scheduledAt))}</p>
                       </div>
                       <ChevronRight className="w-4 h-4 text-gray-500" />
                     </div>
@@ -585,7 +519,7 @@ export default function RacesPage() {
                 </p>
               ) : (
                 <div className="space-y-3">
-                  {recentResults.map(({ race }) => (
+                  {recentResults.map((race) => (
                     <div
                       key={race.id}
                       onClick={() => router.push(`/races/${race.id}/results`)}
@@ -596,7 +530,7 @@ export default function RacesPage() {
                       </div>
                       <div className="min-w-0 flex-1">
                         <p className="text-sm font-medium text-white truncate">{race.track}</p>
-                        <p className="text-xs text-gray-500">{formatDate(race.scheduledAt)}</p>
+                        <p className="text-xs text-gray-500">{formatDate(new Date(race.scheduledAt))}</p>
                       </div>
                       <ChevronRight className="w-4 h-4 text-gray-500" />
                     </div>

apps/website/app/teams/leaderboard/page.tsx

@@ -22,31 +22,19 @@ import {
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
-import { getGetAllTeamsUseCase, getGetTeamMembersUseCase, getDriverStats } from '@/lib/di-container';
-import type { Team } from '@gridpilot/racing';
+import { getGetTeamsLeaderboardUseCase } from '@/lib/di-container';
+import type {
+  TeamLeaderboardItemViewModel,
+  SkillLevel,
+} from '@gridpilot/racing/application/presenters/ITeamsLeaderboardPresenter';
 
 // ============================================================================
 // TYPES
 // ============================================================================
 
-type SkillLevel = 'beginner' | 'intermediate' | 'advanced' | 'pro';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
 
-interface TeamDisplayData {
-  id: string;
-  name: string;
-  memberCount: number;
-  rating: number | null;
-  totalWins: number;
-  totalRaces: number;
-  performanceLevel: SkillLevel;
-  isRecruiting: boolean;
-  createdAt: Date;
-  description?: string;
-  specialization?: 'endurance' | 'sprint' | 'mixed';
-  region?: string;
-  languages?: string[];
-}
+type TeamDisplayData = TeamLeaderboardItemViewModel;
 
 // ============================================================================
 // SKILL LEVEL CONFIG
@@ -248,83 +236,29 @@ function TopThreePodium({ teams, onTeamClick }: TopThreePodiumProps) {
 
 export default function TeamLeaderboardPage() {
   const router = useRouter();
-  const [realTeams, setRealTeams] = useState<TeamDisplayData[]>([]);
+  const [teams, setTeams] = useState<TeamDisplayData[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortBy>('rating');
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
 
   useEffect(() => {
-    loadTeams();
+    const loadTeams = async () => {
+      try {
+        const useCase = getGetTeamsLeaderboardUseCase();
+        await useCase.execute();
+        const viewModel = useCase.presenter.getViewModel();
+        setTeams(viewModel.teams);
+      } catch (error) {
+        console.error('Failed to load teams:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void loadTeams();
   }, []);
 
-  const loadTeams = async () => {
-    try {
-      const allTeamsUseCase = getGetAllTeamsUseCase();
-      const teamMembersUseCase = getGetTeamMembersUseCase();
-
-      await allTeamsUseCase.execute();
-      const allTeamsViewModel = allTeamsUseCase.presenter.getViewModel();
-      const allTeams = allTeamsViewModel.teams;
-      const teamData: TeamDisplayData[] = [];
-
-      await Promise.all(
-        allTeams.map(async (team: Team) => {
-          await teamMembersUseCase.execute({ teamId: team.id });
-          const membershipsViewModel = teamMembersUseCase.presenter.getViewModel();
-          const memberships = membershipsViewModel.members;
-          const memberCount = memberships.length;
-
-          let ratingSum = 0;
-          let ratingCount = 0;
-          let totalWins = 0;
-          let totalRaces = 0;
-
-          for (const membership of memberships) {
-            const stats = getDriverStats(membership.driverId);
-            if (!stats) continue;
-
-            if (typeof stats.rating === 'number') {
-              ratingSum += stats.rating;
-              ratingCount += 1;
-            }
-
-            totalWins += stats.wins ?? 0;
-            totalRaces += stats.totalRaces ?? 0;
-          }
-
-          const averageRating = ratingCount > 0 ? ratingSum / ratingCount : null;
-
-          let performanceLevel: TeamDisplayData['performanceLevel'] = 'beginner';
-          if (averageRating !== null) {
-            if (averageRating >= 4500) performanceLevel = 'pro';
-            else if (averageRating >= 3000) performanceLevel = 'advanced';
-            else if (averageRating >= 2000) performanceLevel = 'intermediate';
-          }
-
-          teamData.push({
-            id: team.id,
-            name: team.name,
-            memberCount,
-            rating: averageRating,
-            totalWins,
-            totalRaces,
-            performanceLevel,
-            isRecruiting: true,
-            createdAt: new Date(),
-          });
-        }),
-      );
-
-      setRealTeams(teamData);
-    } catch (error) {
-      console.error('Failed to load teams:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const teams = realTeams;
 
   const handleTeamClick = (teamId: string) => {
     if (teamId.startsWith('demo-team-')) {

apps/website/app/teams/page.tsx

@@ -298,19 +298,13 @@ function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
 // ============================================================================
 
 interface TeamLeaderboardPreviewProps {
-  teams: TeamDisplayData[];
+  topTeams: TeamDisplayData[];
   onTeamClick: (id: string) => void;
 }
 
-function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewProps) {
+function TeamLeaderboardPreview({ topTeams, onTeamClick }: TeamLeaderboardPreviewProps) {
   const router = useRouter();
 
-  // Sort teams by rating and get top 5
-  const topTeams = [...teams]
-    .filter((t) => t.rating !== null)
-    .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
-    .slice(0, 5);
-
   const getMedalColor = (position: number) => {
     switch (position) {
       case 0:
@@ -437,6 +431,13 @@ function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewPr
 export default function TeamsPage() {
   const router = useRouter();
   const [realTeams, setRealTeams] = useState<TeamDisplayData[]>([]);
+  const [groupsBySkillLevel, setGroupsBySkillLevel] = useState<Record<SkillLevel, TeamDisplayData[]>>({
+    beginner: [],
+    intermediate: [],
+    advanced: [],
+    pro: [],
+  });
+  const [topTeams, setTopTeams] = useState<TeamDisplayData[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -451,6 +452,8 @@ export default function TeamsPage() {
       await useCase.execute();
       const viewModel = useCase.presenter.getViewModel();
       setRealTeams(viewModel.teams);
+      setGroupsBySkillLevel(viewModel.groupsBySkillLevel);
+      setTopTeams(viewModel.topTeams);
     } catch (error) {
       console.error('Failed to load teams:', error);
     } finally {
@@ -486,12 +489,20 @@ export default function TeamsPage() {
   });
 
   // Group teams by skill level
-  const teamsByLevel = SKILL_LEVELS.reduce(
+  const teamsByLevel: Record<SkillLevel, TeamDisplayData[]> = SKILL_LEVELS.reduce(
     (acc, level) => {
-      acc[level.id] = filteredTeams.filter((t) => t.performanceLevel === level.id);
+      const fromGroup = groupsBySkillLevel[level.id] ?? [];
+      acc[level.id] = filteredTeams.filter((team) =>
+        fromGroup.some((groupTeam) => groupTeam.id === team.id),
+      );
       return acc;
     },
-    {} as Record<SkillLevel, TeamDisplayData[]>,
+    {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    } as Record<SkillLevel, TeamDisplayData[]>,
   );
 
   const recruitingCount = teams.filter((t) => t.isRecruiting).length;
@@ -647,7 +658,7 @@ export default function TeamsPage() {
       {!searchQuery && <WhyJoinTeamSection />}
 
       {/* Team Leaderboard Preview */}
-      {!searchQuery && <TeamLeaderboardPreview teams={teams} onTeamClick={handleTeamClick} />}
+      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
 
       {/* Featured Recruiting */}
       {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}

apps/website/components/drivers/DriverProfile.tsx

@@ -8,7 +8,7 @@ import CareerHighlights from './CareerHighlights';
 import DriverRankings from './DriverRankings';
 import PerformanceMetrics from './PerformanceMetrics';
 import { useEffect, useState } from 'react';
-import { getDriverStats, getLeagueRankings, getGetDriverTeamUseCase, getAllDriverRankings } from '@/lib/di-container';
+import { getLeagueRankings, getGetDriverTeamUseCase, getGetProfileOverviewUseCase } from '@/lib/di-container';
 import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
 import type { GetDriverTeamQueryResultDTO } from '@gridpilot/racing/application/dto/TeamCommandAndQueryDTO';
 
@@ -19,24 +19,34 @@ interface DriverProfileProps {
 }
  
 export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
-  const driverStats = getDriverStats(driver.id);
-  const primaryLeagueId = getPrimaryLeagueIdForDriver(driver.id);
-  const leagueRank = primaryLeagueId
-    ? getLeagueRankings(driver.id, primaryLeagueId)
-    : { rank: 0, totalDrivers: 0, percentile: 0 };
-  const allRankings = getAllDriverRankings();
+  const [profileData, setProfileData] = useState<any>(null);
   const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
 
   useEffect(() => {
     const load = async () => {
-      const useCase = getGetDriverTeamUseCase();
-      await useCase.execute({ driverId: driver.id });
-      const viewModel = useCase.presenter.getViewModel();
-      setTeamData(viewModel.result);
+      // Load profile data using GetProfileOverviewUseCase
+      const profileUseCase = getGetProfileOverviewUseCase();
+      await profileUseCase.execute({ driverId: driver.id });
+      const profileViewModel = profileUseCase.presenter.getViewModel();
+      setProfileData(profileViewModel);
+
+      // Load team data
+      const teamUseCase = getGetDriverTeamUseCase();
+      await teamUseCase.execute({ driverId: driver.id });
+      const teamViewModel = teamUseCase.presenter.getViewModel();
+      setTeamData(teamViewModel.result);
     };
     void load();
   }, [driver.id]);
 
+  const driverStats = profileData?.stats || null;
+  const primaryLeagueId = getPrimaryLeagueIdForDriver(driver.id);
+  const leagueRank = primaryLeagueId
+    ? getLeagueRankings(driver.id, primaryLeagueId)
+    : { rank: 0, totalDrivers: 0, percentile: 0 };
+  const globalRank = profileData?.currentDriver?.globalRank || null;
+  const totalDrivers = profileData?.currentDriver?.totalDrivers || 0;
+
   const performanceStats = driverStats ? {
     winRate: (driverStats.wins / driverStats.totalRaces) * 100,
     podiumRate: (driverStats.podiums / driverStats.totalRaces) * 100,
@@ -51,8 +61,8 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
     {
       type: 'overall' as const,
       name: 'Overall Ranking',
-      rank: driverStats.overallRank,
-      totalDrivers: allRankings.length,
+      rank: globalRank || driverStats.overallRank || 0,
+      totalDrivers: totalDrivers,
       percentile: driverStats.percentile,
       rating: driverStats.rating,
     },

apps/website/components/drivers/ProfileStats.tsx

@@ -2,7 +2,8 @@
 
 import Card from '../ui/Card';
 import RankBadge from './RankBadge';
-import { getDriverStats, getAllDriverRankings, getLeagueRankings } from '@/lib/di-container';
+import { getLeagueRankings, getGetProfileOverviewUseCase } from '@/lib/di-container';
+import { useState, useEffect } from 'react';
 import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
 
 interface ProfileStatsProps {
@@ -18,8 +19,22 @@ interface ProfileStatsProps {
 }
 
 export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
-  const driverStats = driverId ? getDriverStats(driverId) : null;
-  const allRankings = getAllDriverRankings();
+  const [profileData, setProfileData] = useState<any>(null);
+  
+  useEffect(() => {
+    if (driverId) {
+      const load = async () => {
+        const profileUseCase = getGetProfileOverviewUseCase();
+        await profileUseCase.execute({ driverId });
+        const vm = profileUseCase.presenter.getViewModel();
+        setProfileData(vm);
+      };
+      void load();
+    }
+  }, [driverId]);
+
+  const driverStats = profileData?.stats || null;
+  const totalDrivers = profileData?.currentDriver?.totalDrivers || 0;
   const primaryLeagueId = driverId ? getPrimaryLeagueIdForDriver(driverId) : null;
   const leagueRank =
     driverId && primaryLeagueId ? getLeagueRankings(driverId, primaryLeagueId) : null;
@@ -80,7 +95,7 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
                   <div>
                     <div className="text-white font-medium text-lg">Overall Ranking</div>
                     <div className="text-sm text-gray-400">
-                      {driverStats.overallRank} of {allRankings.length} drivers
+                      {driverStats.overallRank} of {totalDrivers} drivers
                     </div>
                   </div>
                 </div>

apps/website/components/leagues/CreateLeagueWizard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, FormEvent, useCallback } from 'react';
+import React, { useEffect, useState, FormEvent, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   FileText,

apps/website/components/leagues/LeagueAdmin.tsx

@@ -1,21 +1,24 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import Button from '../ui/Button';
 import Card from '../ui/Card';
 import LeagueMembers from './LeagueMembers';
 import ScheduleRaceForm from './ScheduleRaceForm';
-import { League } from '@gridpilot/racing/domain/entities/League';
 import {
-  getLeagueMembershipRepository,
-  getDriverStats,
-  getAllDriverRankings,
-  getDriverRepository,
-  getGetLeagueFullConfigQuery,
-  getRaceRepository,
-  getProtestRepository,
-} from '@/lib/di-container';
+  loadLeagueJoinRequests,
+  approveLeagueJoinRequest,
+  rejectLeagueJoinRequest,
+  loadLeagueOwnerSummary,
+  loadLeagueConfig,
+  loadLeagueProtests,
+  removeLeagueMember as removeLeagueMemberCommand,
+  updateLeagueMemberRole as updateLeagueMemberRoleCommand,
+  type LeagueJoinRequestViewModel,
+  type LeagueOwnerSummaryViewModel,
+  type LeagueAdminProtestsViewModel,
+} from '@/lib/presenters/LeagueAdminPresenter';
 import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
 import { LeagueBasicsSection } from './LeagueBasicsSection';
 import { LeagueStructureSection } from './LeagueStructureSection';
@@ -26,25 +29,21 @@ import { LeagueSponsorshipsSection } from './LeagueSponsorshipsSection';
 import { LeagueMembershipFeesSection } from './LeagueMembershipFeesSection';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
 import type { MembershipRole } from '@/lib/leagueMembership';
-import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
-import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
 import Modal from '@/components/ui/Modal';
 import { AlertTriangle, CheckCircle, Clock, XCircle, Flag, Calendar, User, DollarSign, Wallet, Paintbrush, Trophy, Download, Car, Upload } from 'lucide-react';
-import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
-import type { Race } from '@gridpilot/racing/domain/entities/Race';
 
-interface JoinRequest {
-  id: string;
-  leagueId: string;
-  driverId: string;
-  requestedAt: Date;
-  message?: string;
-}
+type JoinRequest = LeagueJoinRequestViewModel;
 
 interface LeagueAdminProps {
-  league: League;
+  league: {
+    id: string;
+    ownerId: string;
+    settings: {
+      pointsSystem: string;
+    };
+  };
   onLeagueUpdate?: () => void;
 }
 
@@ -54,8 +53,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
   const pathname = usePathname();
   const currentDriverId = useEffectiveDriverId();
   const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
-  const [requestDriversById, setRequestDriversById] = useState<Record<string, DriverDTO>>({});
-  const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
+  const [ownerSummary, setOwnerSummary] = useState<LeagueOwnerSummaryViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'protests' | 'sponsorships' | 'fees' | 'wallet' | 'prizes' | 'liveries'>('members');
@@ -63,32 +61,14 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
   const [rejectReason, setRejectReason] = useState('');
   const [configForm, setConfigForm] = useState<LeagueConfigFormModel | null>(null);
   const [configLoading, setConfigLoading] = useState(false);
-  const [protests, setProtests] = useState<Protest[]>([]);
-  const [protestRaces, setProtestRaces] = useState<Record<string, Race>>({});
-  const [protestDriversById, setProtestDriversById] = useState<Record<string, DriverDTO>>({});
+  const [protestsViewModel, setProtestsViewModel] = useState<LeagueAdminProtestsViewModel | null>(null);
   const [protestsLoading, setProtestsLoading] = useState(false);
 
   const loadJoinRequests = useCallback(async () => {
     setLoading(true);
     try {
-      const membershipRepo = getLeagueMembershipRepository();
-      const requests = await membershipRepo.getJoinRequests(league.id);
+      const requests = await loadLeagueJoinRequests(league.id);
       setJoinRequests(requests);
-
-      const driverRepo = getDriverRepository();
-      const uniqueDriverIds = Array.from(new Set(requests.map((r) => r.driverId)));
-      const driverEntities = await Promise.all(
-        uniqueDriverIds.map((id) => driverRepo.findById(id)),
-      );
-      const driverDtos = driverEntities
-        .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
-        .filter((dto): dto is DriverDTO => dto !== null);
-
-      const byId: Record<string, DriverDTO> = {};
-      for (const dto of driverDtos) {
-        byId[dto.id] = dto;
-      }
-      setRequestDriversById(byId);
     } catch (err) {
       console.error('Failed to load join requests:', err);
     } finally {
@@ -103,24 +83,22 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
   useEffect(() => {
     async function loadOwner() {
       try {
-        const driverRepo = getDriverRepository();
-        const entity = await driverRepo.findById(league.ownerId);
-        setOwnerDriver(EntityMappers.toDriverDTO(entity));
+        const summary = await loadLeagueOwnerSummary(league);
+        setOwnerSummary(summary);
       } catch (err) {
         console.error('Failed to load league owner:', err);
       }
     }
 
     loadOwner();
-  }, [league.ownerId]);
+  }, [league]);
 
   useEffect(() => {
     async function loadConfig() {
       setConfigLoading(true);
       try {
-        const query = getGetLeagueFullConfigQuery();
-        const form = await query.execute({ leagueId: league.id });
-        setConfigForm(form);
+        const configVm = await loadLeagueConfig(league.id);
+        setConfigForm(configVm.form);
       } catch (err) {
         console.error('Failed to load league config:', err);
       } finally {
@@ -136,45 +114,8 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     async function loadProtests() {
       setProtestsLoading(true);
       try {
-        const raceRepo = getRaceRepository();
-        const protestRepo = getProtestRepository();
-        const driverRepo = getDriverRepository();
-
-        // Get all races for this league
-        const leagueRaces = await raceRepo.findByLeagueId(league.id);
-        
-        // Get protests for each race
-        const allProtests: Protest[] = [];
-        const racesById: Record<string, Race> = {};
-        
-        for (const race of leagueRaces) {
-          racesById[race.id] = race;
-          const raceProtests = await protestRepo.findByRaceId(race.id);
-          allProtests.push(...raceProtests);
-        }
-        
-        setProtests(allProtests);
-        setProtestRaces(racesById);
-
-        // Load driver info for all protesters and accused
-        const driverIds = new Set<string>();
-        allProtests.forEach((p) => {
-          driverIds.add(p.protestingDriverId);
-          driverIds.add(p.accusedDriverId);
-        });
-
-        const driverEntities = await Promise.all(
-          Array.from(driverIds).map((id) => driverRepo.findById(id)),
-        );
-        const driverDtos = driverEntities
-          .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
-          .filter((dto): dto is DriverDTO => dto !== null);
-
-        const byId: Record<string, DriverDTO> = {};
-        for (const dto of driverDtos) {
-          byId[dto.id] = dto;
-        }
-        setProtestDriversById(byId);
+        const vm = await loadLeagueProtests(league.id);
+        setProtestsViewModel(vm);
       } catch (err) {
         console.error('Failed to load protests:', err);
       } finally {
@@ -189,23 +130,8 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
 
   const handleApproveRequest = async (requestId: string) => {
     try {
-      const membershipRepo = getLeagueMembershipRepository();
-      const requests = await membershipRepo.getJoinRequests(league.id);
-      const request = requests.find((r) => r.id === requestId);
-      if (!request) {
-        throw new Error('Join request not found');
-      }
-
-      await membershipRepo.saveMembership({
-        leagueId: request.leagueId,
-        driverId: request.driverId,
-        role: 'member',
-        status: 'active',
-        joinedAt: new Date(),
-      });
-      await membershipRepo.removeJoinRequest(requestId);
-
-      await loadJoinRequests();
+      const updated = await approveLeagueJoinRequest(league.id, requestId);
+      setJoinRequests(updated);
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to approve request');
@@ -214,14 +140,13 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
 
   const handleRejectRequest = async (requestId: string, trimmedReason: string) => {
     try {
-      const membershipRepo = getLeagueMembershipRepository();
       // Alpha-only: we do not persist the reason yet, but we at least log it.
       console.log('Join request rejected with reason:', {
         requestId,
         reason: trimmedReason,
       });
-      await membershipRepo.removeJoinRequest(requestId);
-      await loadJoinRequests();
+      const updated = await rejectLeagueJoinRequest(league.id, requestId);
+      setJoinRequests(updated);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to reject request');
     }
@@ -233,21 +158,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     }
 
     try {
-      const membershipRepo = getLeagueMembershipRepository();
-      const performer = await membershipRepo.getMembership(league.id, currentDriverId);
-      if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
-        throw new Error('Only owners or admins can remove members');
-      }
-
-      const membership = await membershipRepo.getMembership(league.id, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot remove the league owner');
-      }
-
-      await membershipRepo.removeMembership(league.id, driverId);
+      await removeLeagueMemberCommand(league.id, currentDriverId, driverId);
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to remove member');
@@ -256,25 +167,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
 
   const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
     try {
-      const membershipRepo = getLeagueMembershipRepository();
-      const performer = await membershipRepo.getMembership(league.id, currentDriverId);
-      if (!performer || performer.role !== 'owner') {
-        throw new Error('Only the league owner can update roles');
-      }
-
-      const membership = await membershipRepo.getMembership(league.id, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot change the owner role');
-      }
-
-      await membershipRepo.saveMembership({
-        ...membership,
-        role: newRole,
-      });
-
+      await updateLeagueMemberRoleCommand(league.id, currentDriverId, driverId, newRole);
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update role');
@@ -316,45 +209,6 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     router.push(url, { scroll: false });
   };
 
-  const ownerSummary = useMemo(() => {
-    if (!ownerDriver) {
-      return null;
-    }
-
-    const stats = getDriverStats(ownerDriver.id);
-    const allRankings = getAllDriverRankings();
-
-    let rating: number | null = stats?.rating ?? null;
-    let rank: number | null = null;
-
-    if (stats) {
-      if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
-        rank = stats.overallRank;
-      } else {
-        const indexInGlobal = allRankings.findIndex(
-          (stat) => stat.driverId === stats.driverId,
-        );
-        if (indexInGlobal !== -1) {
-          rank = indexInGlobal + 1;
-        }
-      }
-
-      if (rating === null) {
-        const globalEntry = allRankings.find(
-          (stat) => stat.driverId === stats.driverId,
-        );
-        if (globalEntry) {
-          rating = globalEntry.rating;
-        }
-      }
-    }
-
-    return {
-      driver: ownerDriver,
-      rating,
-      rank,
-    };
-  }, [ownerDriver]);
 
   return (
     <div>
@@ -507,7 +361,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
           ) : (
             <div className="space-y-4">
               {joinRequests.map((request) => {
-                const driver = requestDriversById[request.driverId];
+                const driver = request.driver;
                 const requestedOn = new Date(request.requestedAt).toLocaleDateString('en-US', {
                   month: 'short',
                   day: 'numeric',
@@ -599,7 +453,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
             <div className="text-center py-12 text-gray-400">
               <div className="animate-pulse">Loading protests...</div>
             </div>
-          ) : protests.length === 0 ? (
+          ) : !protestsViewModel || protestsViewModel.protests.length === 0 ? (
             <div className="text-center py-12">
               <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
                 <Flag className="w-8 h-8 text-gray-500" />
@@ -619,7 +473,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
                     <span className="text-xs font-medium uppercase">Pending</span>
                   </div>
                   <div className="text-2xl font-bold text-white">
-                    {protests.filter((p) => p.status === 'pending').length}
+                    {protestsViewModel.protests.filter((p) => p.status === 'pending').length}
                   </div>
                 </div>
                 <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
@@ -628,7 +482,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
                     <span className="text-xs font-medium uppercase">Resolved</span>
                   </div>
                   <div className="text-2xl font-bold text-white">
-                    {protests.filter((p) => p.status === 'upheld' || p.status === 'dismissed').length}
+                    {protestsViewModel.protests.filter((p) => p.status === 'upheld' || p.status === 'dismissed').length}
                   </div>
                 </div>
                 <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
@@ -637,17 +491,17 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
                     <span className="text-xs font-medium uppercase">Total</span>
                   </div>
                   <div className="text-2xl font-bold text-white">
-                    {protests.length}
+                    {protestsViewModel.protests.length}
                   </div>
                 </div>
               </div>
 
               {/* Protest list */}
               <div className="space-y-3">
-                {protests.map((protest) => {
-                  const race = protestRaces[protest.raceId];
-                  const filer = protestDriversById[protest.protestingDriverId];
-                  const accused = protestDriversById[protest.accusedDriverId];
+                {protestsViewModel.protests.map((protest) => {
+                  const race = protestsViewModel.racesById[protest.raceId];
+                  const filer = protestsViewModel.driversById[protest.protestingDriverId];
+                  const accused = protestsViewModel.driversById[protest.accusedDriverId];
                   
                   const statusConfig = {
                     pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', icon: Clock, label: 'Pending Review' },
@@ -1073,7 +927,7 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
         title="Reject join request"
         description={
           activeRejectRequest
-            ? `Provide a reason for rejecting ${requestDriversById[activeRejectRequest.driverId]?.name ?? 'this driver'}.`
+            ? `Provide a reason for rejecting ${activeRejectRequest.driver?.name ?? 'this driver'}.`
             : 'Provide a reason for rejecting this join request.'
         }
         primaryActionLabel="Reject"

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { FileText, Gamepad2, AlertCircle, Check } from 'lucide-react';
 import Input from '@/components/ui/Input';
 import type {

apps/website/components/leagues/LeagueDropSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { TrendingDown, Check, HelpCircle, X, Zap } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import type { LeagueConfigFormModel } from '@gridpilot/racing/application';

apps/website/components/leagues/LeagueScoringSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Trophy, Award, Check, Zap, Settings, Globe, Medal, Plus, Minus, RotateCcw, HelpCircle, X } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import type { LeagueScoringPresetDTO } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';

apps/website/components/leagues/LeagueStewardingSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { Scale, Users, Clock, Bell, Shield, Vote, UserCheck, AlertTriangle } from 'lucide-react';
 import type { LeagueConfigFormModel, LeagueStewardingFormDTO } from '@gridpilot/racing/application';
 import type { StewardingDecisionMode } from '@gridpilot/racing/domain/entities/League';

apps/website/components/leagues/LeagueTimingsSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useMemo, useRef } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import {
   Calendar,
   Clock,

apps/website/components/leagues/ScheduleRaceForm.tsx

@@ -4,33 +4,35 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Button from '../ui/Button';
 import Input from '../ui/Input';
-import { Race } from '@gridpilot/racing/domain/entities/Race';
-import { League } from '@gridpilot/racing/domain/entities/League';
-import { SessionType } from '@gridpilot/racing/domain/entities/Race';
-import { getRaceRepository, getLeagueRepository } from '../../lib/di-container';
-import { InMemoryRaceRepository } from '@gridpilot/racing/infrastructure/repositories/InMemoryRaceRepository';
+import {
+  loadScheduleRaceFormLeagues,
+  scheduleRaceFromForm,
+  type ScheduleRaceFormData,
+  type ScheduledRaceViewModel,
+  type LeagueOptionViewModel,
+} from '@/lib/presenters/ScheduleRaceFormPresenter';
 
 interface ScheduleRaceFormProps {
   preSelectedLeagueId?: string;
-  onSuccess?: (race: Race) => void;
+  onSuccess?: (race: ScheduledRaceViewModel) => void;
   onCancel?: () => void;
 }
 
-export default function ScheduleRaceForm({ 
-  preSelectedLeagueId, 
+export default function ScheduleRaceForm({
+  preSelectedLeagueId,
   onSuccess,
-  onCancel 
+  onCancel
 }: ScheduleRaceFormProps) {
   const router = useRouter();
-  const [leagues, setLeagues] = useState<League[]>([]);
+  const [leagues, setLeagues] = useState<LeagueOptionViewModel[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<ScheduleRaceFormData>({
     leagueId: preSelectedLeagueId || '',
     track: '',
     car: '',
-    sessionType: 'race' as SessionType,
+    sessionType: 'race',
     scheduledDate: '',
     scheduledTime: '',
   });
@@ -39,11 +41,10 @@ export default function ScheduleRaceForm({
 
   useEffect(() => {
     const loadLeagues = async () => {
-      const leagueRepo = getLeagueRepository();
-      const allLeagues = await leagueRepo.findAll();
+      const allLeagues = await loadScheduleRaceFormLeagues();
       setLeagues(allLeagues);
     };
-    loadLeagues();
+    void loadLeagues();
   }, []);
 
   const validateForm = (): boolean => {
@@ -94,20 +95,7 @@ export default function ScheduleRaceForm({
     setError(null);
 
     try {
-      const raceRepo = getRaceRepository();
-      const scheduledAt = new Date(`${formData.scheduledDate}T${formData.scheduledTime}`);
-
-      const race = Race.create({
-        id: InMemoryRaceRepository.generateId(),
-        leagueId: formData.leagueId,
-        track: formData.track.trim(),
-        car: formData.car.trim(),
-        sessionType: formData.sessionType,
-        scheduledAt,
-        status: 'scheduled',
-      });
-
-      const createdRace = await raceRepo.create(race);
+      const createdRace = await scheduleRaceFromForm(formData);
 
       if (onSuccess) {
         onSuccess(createdRace);
@@ -187,7 +175,7 @@ export default function ScheduleRaceForm({
           `}
         >
           <option value="">Select a league</option>
-          {leagues.map(league => (
+          {leagues.map((league: any) => (
             <option key={league.id} value={league.id}>
               {league.name}
             </option>
@@ -241,7 +229,7 @@ export default function ScheduleRaceForm({
         </label>
         <select
           value={formData.sessionType}
-          onChange={(e) => handleChange('sessionType', e.target.value)}
+          onChange={(e) => handleChange('sessionType', e.target.value as SessionType)}
           className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue"
         >
           <option value="practice">Practice</option>

apps/website/components/notifications/NotificationCenter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useEffectiveDriverId } from '@/lib/currentDriver';

apps/website/components/races/ImportResultsForm.tsx

@@ -1,13 +1,22 @@
 'use client';
 
 import { useState } from 'react';
-import Button from '../ui/Button';
-import { Result } from '@gridpilot/racing/domain/entities/Result';
 import { v4 as uuidv4 } from 'uuid';
+import Button from '../ui/Button';
+
+interface ImportResultRowDTO {
+  id: string;
+  raceId: string;
+  driverId: string;
+  position: number;
+  fastestLap: number;
+  incidents: number;
+  startPosition: number;
+}
 
 interface ImportResultsFormProps {
   raceId: string;
-  onSuccess: (results: Result[]) => void;
+  onSuccess: (results: ImportResultRowDTO[]) => void;
   onError: (error: string) => void;
 }
 
@@ -25,36 +34,35 @@ export default function ImportResultsForm({ raceId, onSuccess, onError }: Import
 
   const parseCSV = (content: string): CSVRow[] => {
     const lines = content.trim().split('\n');
-    
+
     if (lines.length < 2) {
       throw new Error('CSV file is empty or invalid');
     }
 
-    // Parse header
-    const header = lines[0].toLowerCase().split(',').map(h => h.trim());
+    const header = lines[0].toLowerCase().split(',').map((h) => h.trim());
     const requiredFields = ['driverid', 'position', 'fastestlap', 'incidents', 'startposition'];
-    
+
     for (const field of requiredFields) {
       if (!header.includes(field)) {
         throw new Error(`Missing required field: ${field}`);
       }
     }
 
-    // Parse rows
     const rows: CSVRow[] = [];
     for (let i = 1; i < lines.length; i++) {
-      const values = lines[i].split(',').map(v => v.trim());
-      
+      const values = lines[i].split(',').map((v) => v.trim());
+
       if (values.length !== header.length) {
-        throw new Error(`Invalid row ${i}: expected ${header.length} columns, got ${values.length}`);
+        throw new Error(
+          `Invalid row ${i}: expected ${header.length} columns, got ${values.length}`,
+        );
       }
 
-      const row: any = {};
+      const row: Record<string, string> = {};
       header.forEach((field, index) => {
-        row[field] = values[index];
+        row[field] = values[index] ?? '';
       });
 
-      // Validate and convert types
       const driverId = row.driverid;
       const position = parseInt(row.position, 10);
       const fastestLap = parseFloat(row.fastestlap);
@@ -65,34 +73,32 @@ export default function ImportResultsForm({ raceId, onSuccess, onError }: Import
         throw new Error(`Row ${i}: driverId is required`);
       }
 
-      if (isNaN(position) || position < 1) {
+      if (Number.isNaN(position) || position < 1) {
         throw new Error(`Row ${i}: position must be a positive integer`);
       }
 
-      if (isNaN(fastestLap) || fastestLap < 0) {
+      if (Number.isNaN(fastestLap) || fastestLap < 0) {
         throw new Error(`Row ${i}: fastestLap must be a non-negative number`);
       }
 
-      if (isNaN(incidents) || incidents < 0) {
+      if (Number.isNaN(incidents) || incidents < 0) {
         throw new Error(`Row ${i}: incidents must be a non-negative integer`);
       }
 
-      if (isNaN(startPosition) || startPosition < 1) {
+      if (Number.isNaN(startPosition) || startPosition < 1) {
         throw new Error(`Row ${i}: startPosition must be a positive integer`);
       }
 
       rows.push({ driverId, position, fastestLap, incidents, startPosition });
     }
 
-    // Validate no duplicate positions
-    const positions = rows.map(r => r.position);
+    const positions = rows.map((r) => r.position);
     const uniquePositions = new Set(positions);
     if (positions.length !== uniquePositions.size) {
       throw new Error('Duplicate positions found in CSV');
     }
 
-    // Validate no duplicate drivers
-    const driverIds = rows.map(r => r.driverId);
+    const driverIds = rows.map((r) => r.driverId);
     const uniqueDrivers = new Set(driverIds);
     if (driverIds.length !== uniqueDrivers.size) {
       throw new Error('Duplicate driver IDs found in CSV');
@@ -109,33 +115,27 @@ export default function ImportResultsForm({ raceId, onSuccess, onError }: Import
     setError(null);
 
     try {
-      // Read file
       const content = await file.text();
-      
-      // Parse CSV
       const rows = parseCSV(content);
 
-      // Create Result entities
-      const results = rows.map(row => 
-        Result.create({
-          id: uuidv4(),
-          raceId,
-          driverId: row.driverId,
-          position: row.position,
-          fastestLap: row.fastestLap,
-          incidents: row.incidents,
-          startPosition: row.startPosition,
-        })
-      );
+      const results: ImportResultRowDTO[] = rows.map((row) => ({
+        id: uuidv4(),
+        raceId,
+        driverId: row.driverId,
+        position: row.position,
+        fastestLap: row.fastestLap,
+        incidents: row.incidents,
+        startPosition: row.startPosition,
+      }));
 
       onSuccess(results);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to parse CSV file';
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to parse CSV file';
       setError(errorMessage);
       onError(errorMessage);
     } finally {
       setUploading(false);
-      // Reset file input
       event.target.value = '';
     }
   };

apps/website/components/races/ResultsTable.tsx

@@ -1,32 +1,58 @@
 'use client';
 
 import Link from 'next/link';
-import { Result } from '@gridpilot/racing/domain/entities/Result';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
-import type { PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
 import { AlertTriangle, ExternalLink } from 'lucide-react';
 
-/**
- * Penalty data for display (can be domain Penalty or RacePenaltyDTO)
- */
+type PenaltyTypeDTO =
+  | 'time_penalty'
+  | 'grid_penalty'
+  | 'points_deduction'
+  | 'disqualification'
+  | 'warning'
+  | 'license_points'
+  | string;
+
+interface ResultDTO {
+  id: string;
+  raceId: string;
+  driverId: string;
+  position: number;
+  fastestLap: number;
+  incidents: number;
+  startPosition: number;
+  getPositionChange(): number;
+}
+
+interface DriverDTO {
+  id: string;
+  name: string;
+}
+
 interface PenaltyData {
   driverId: string;
-  type: PenaltyType;
+  type: PenaltyTypeDTO;
   value?: number;
 }
 
 interface ResultsTableProps {
-  results: Result[];
-  drivers: Driver[];
+  results: ResultDTO[];
+  drivers: DriverDTO[];
   pointsSystem: Record<number, number>;
   fastestLapTime?: number;
   penalties?: PenaltyData[];
   currentDriverId?: string;
 }
 
-export default function ResultsTable({ results, drivers, pointsSystem, fastestLapTime, penalties = [], currentDriverId }: ResultsTableProps) {
-  const getDriver = (driverId: string): Driver | undefined => {
-    return drivers.find(d => d.id === driverId);
+export default function ResultsTable({
+  results,
+  drivers,
+  pointsSystem,
+  fastestLapTime,
+  penalties = [],
+  currentDriverId,
+}: ResultsTableProps) {
+  const getDriver = (driverId: string): DriverDTO | undefined => {
+    return drivers.find((d) => d.id === driverId);
   };
 
   const getDriverName = (driverId: string): string => {
@@ -35,7 +61,7 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
   };
 
   const getDriverPenalties = (driverId: string): PenaltyData[] => {
-    return penalties.filter(p => p.driverId === driverId);
+    return penalties.filter((p) => p.driverId === driverId);
   };
 
   const getPenaltyDescription = (penalty: PenaltyData): string => {
@@ -97,30 +123,39 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
         <tbody>
           {results.map((result) => {
             const positionChange = result.getPositionChange();
-            const isFastestLap = fastestLapTime && result.fastestLap === fastestLapTime;
+            const isFastestLap =
+              typeof fastestLapTime === 'number' && result.fastestLap === fastestLapTime;
             const driverPenalties = getDriverPenalties(result.driverId);
             const driver = getDriver(result.driverId);
             const isCurrentUser = currentDriverId === result.driverId;
-            const isPodium = result.position <= 3;
-            
+
             return (
               <tr
                 key={result.id}
                 className={`
                   border-b border-charcoal-outline/50 transition-colors
-                  ${isCurrentUser
-                    ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent hover:from-primary-blue/30'
-                    : 'hover:bg-iron-gray/20'}
+                  ${
+                    isCurrentUser
+                      ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent hover:from-primary-blue/30'
+                      : 'hover:bg-iron-gray/20'
+                  }
                 `}
               >
                 <td className="py-3 px-4">
-                  <div className={`
+                  <div
+                    className={`
                     inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
-                    ${result.position === 1 ? 'bg-yellow-500/20 text-yellow-400' :
-                      result.position === 2 ? 'bg-gray-400/20 text-gray-300' :
-                      result.position === 3 ? 'bg-amber-600/20 text-amber-500' :
-                      'text-white'}
-                  `}>
+                    ${
+                      result.position === 1
+                        ? 'bg-yellow-500/20 text-yellow-400'
+                        : result.position === 2
+                        ? 'bg-gray-400/20 text-gray-300'
+                        : result.position === 3
+                        ? 'bg-amber-600/20 text-amber-500'
+                        : 'text-white'
+                    }
+                  `}
+                  >
                     {result.position}
                   </div>
                 </td>
@@ -128,17 +163,27 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
                   <div className="flex items-center gap-3">
                     {driver ? (
                       <>
-                        <div className={`
+                        <div
+                          className={`
                           w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
-                          ${isCurrentUser ? 'bg-primary-blue/30 text-primary-blue ring-2 ring-primary-blue/50' : 'bg-iron-gray text-gray-400'}
-                        `}>
+                          ${
+                            isCurrentUser
+                              ? 'bg-primary-blue/30 text-primary-blue ring-2 ring-primary-blue/50'
+                              : 'bg-iron-gray text-gray-400'
+                          }
+                        `}
+                        >
                           {driver.name.charAt(0)}
                         </div>
                         <Link
                           href={`/drivers/${driver.id}`}
                           className={`
                             flex items-center gap-1.5 group
-                            ${isCurrentUser ? 'text-primary-blue font-semibold' : 'text-white hover:text-primary-blue'}
+                            ${
+                              isCurrentUser
+                                ? 'text-primary-blue font-semibold'
+                                : 'text-white hover:text-primary-blue'
+                            }
                             transition-colors
                           `}
                         >
@@ -157,20 +202,30 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
                   </div>
                 </td>
                 <td className="py-3 px-4">
-                  <span className={isFastestLap ? 'text-performance-green font-medium' : 'text-white'}>
+                  <span
+                    className={
+                      isFastestLap ? 'text-performance-green font-medium' : 'text-white'
+                    }
+                  >
                     {formatLapTime(result.fastestLap)}
                   </span>
                 </td>
                 <td className="py-3 px-4">
-                  <span className={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}>
+                  <span
+                    className={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}
+                  >
                     {result.incidents}×
                   </span>
                 </td>
                 <td className="py-3 px-4">
-                  <span className="text-white font-medium">{getPoints(result.position)}</span>
+                  <span className="text-white font-medium">
+                    {getPoints(result.position)}
+                  </span>
                 </td>
                 <td className="py-3 px-4">
-                  <span className={`font-medium ${getPositionChangeColor(positionChange)}`}>
+                  <span
+                    className={`font-medium ${getPositionChangeColor(positionChange)}`}
+                  >
                     {getPositionChangeText(positionChange)}
                   </span>
                 </td>

apps/website/components/teams/TeamRoster.tsx

@@ -3,14 +3,22 @@
 import { useState, useEffect } from 'react';
 import Card from '@/components/ui/Card';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
-import { getDriverRepository, getDriverStats } from '@/lib/di-container';
-import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
-import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
-import type { TeamMembership, TeamRole } from '@gridpilot/racing';
+import {
+  getTeamRosterViewModel,
+  type TeamRosterViewModel,
+} from '@/lib/presenters/TeamRosterPresenter';
+
+type TeamRole = 'owner' | 'manager' | 'driver';
+
+interface TeamMembershipSummary {
+  driverId: string;
+  role: TeamRole;
+  joinedAt: Date;
+}
 
 interface TeamRosterProps {
   teamId: string;
-  memberships: TeamMembership[];
+  memberships: TeamMembershipSummary[];
   isAdmin: boolean;
   onRemoveMember?: (driverId: string) => void;
   onChangeRole?: (driverId: string, newRole: TeamRole) => void;
@@ -23,31 +31,22 @@ export default function TeamRoster({
   onRemoveMember,
   onChangeRole,
 }: TeamRosterProps) {
-  const [drivers, setDrivers] = useState<Record<string, DriverDTO>>({});
+  const [viewModel, setViewModel] = useState<TeamRosterViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState<'role' | 'rating' | 'name'>('rating');
 
   useEffect(() => {
-    const loadDrivers = async () => {
-      const driverRepo = getDriverRepository();
-      const allDrivers = await driverRepo.findAll();
-      const driverMap: Record<string, DriverDTO> = {};
-
-      for (const membership of memberships) {
-        const driver = allDrivers.find((d) => d.id === membership.driverId);
-        if (driver) {
-          const dto = EntityMappers.toDriverDTO(driver);
-          if (dto) {
-            driverMap[membership.driverId] = dto;
-          }
-        }
+    const load = async () => {
+      setLoading(true);
+      try {
+        const vm = await getTeamRosterViewModel(memberships);
+        setViewModel(vm);
+      } finally {
+        setLoading(false);
       }
-
-      setDrivers(driverMap);
-      setLoading(false);
     };
 
-    void loadDrivers();
+    void load();
   }, [memberships]);
 
   const getRoleBadgeColor = (role: TeamRole) => {
@@ -65,36 +64,28 @@ export default function TeamRoster({
     return role.charAt(0).toUpperCase() + role.slice(1);
   };
 
-  const sortedMemberships = [...memberships].sort((a, b) => {
-    switch (sortBy) {
-      case 'rating': {
-        const statsA = getDriverStats(a.driverId);
-        const statsB = getDriverStats(b.driverId);
-        return (statsB?.rating || 0) - (statsA?.rating || 0);
-      }
-      case 'role': {
-        const roleOrder = { owner: 0, manager: 1, driver: 2 };
-        return roleOrder[a.role] - roleOrder[b.role];
-      }
-      case 'name': {
-        const driverA = drivers[a.driverId];
-        const driverB = drivers[b.driverId];
-        return (driverA?.name || '').localeCompare(driverB?.name || '');
-      }
-      default:
-        return 0;
-    }
-  });
+  const sortedMembers = viewModel
+    ? [...viewModel.members].sort((a, b) => {
+        switch (sortBy) {
+          case 'rating': {
+            const ratingA = a.rating ?? 0;
+            const ratingB = b.rating ?? 0;
+            return ratingB - ratingA;
+          }
+          case 'role': {
+            const roleOrder: Record<TeamRole, number> = { owner: 0, manager: 1, driver: 2 };
+            return roleOrder[a.role] - roleOrder[b.role];
+          }
+          case 'name': {
+            return a.driver.name.localeCompare(b.driver.name);
+          }
+          default:
+            return 0;
+        }
+      })
+    : [];
 
-  const teamAverageRating =
-    memberships.length > 0
-      ? Math.round(
-          memberships.reduce((sum, m) => {
-            const stats = getDriverStats(m.driverId);
-            return sum + (stats?.rating || 0);
-          }, 0) / memberships.length,
-        )
-      : 0;
+  const teamAverageRating = viewModel?.averageRating ?? 0;
 
   if (loading) {
     return (
@@ -130,43 +121,42 @@ export default function TeamRoster({
       </div>
 
       <div className="space-y-3">
-        {sortedMemberships.map((membership) => {
-          const driver = drivers[membership.driverId];
-          const driverStats = getDriverStats(membership.driverId);
-          if (!driver) return null;
+        {sortedMembers.map((member) => {
+          const { driver, role, joinedAt, rating, overallRank } = member;
 
-          const canManageMembership = isAdmin && membership.role !== 'owner';
+          const canManageMembership = isAdmin && role !== 'owner';
 
           return (
             <div
-              key={membership.driverId}
+              key={driver.id}
               className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors"
             >
               <DriverIdentity
                 driver={driver}
                 href={`/drivers/${driver.id}?from=team&teamId=${teamId}`}
-                contextLabel={getRoleLabel(membership.role)}
+                contextLabel={getRoleLabel(role)}
                 meta={
                   <span>
-                    {driver.country} • Joined{' '}
-                    {new Date(membership.joinedAt).toLocaleDateString()}
+                    {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
                   </span>
                 }
                 size="md"
               />
 
-              {driverStats && (
+              {rating !== null && (
                 <div className="flex items-center gap-6 text-center">
                   <div>
                     <div className="text-lg font-bold text-primary-blue">
-                      {driverStats.rating}
+                      {rating}
                     </div>
                     <div className="text-xs text-gray-400">Rating</div>
                   </div>
-                  <div>
-                    <div className="text-sm text-gray-300">#{driverStats.overallRank}</div>
-                    <div className="text-xs text-gray-500">Rank</div>
-                  </div>
+                  {overallRank !== null && (
+                    <div>
+                      <div className="text-sm text-gray-300">#{overallRank}</div>
+                      <div className="text-xs text-gray-500">Rank</div>
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -174,9 +164,9 @@ export default function TeamRoster({
                 <div className="flex items-center gap-2">
                   <select
                     className="px-3 py-2 bg-iron-gray border-0 rounded text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-                    value={membership.role}
+                    value={role}
                     onChange={(e) =>
-                      onChangeRole?.(membership.driverId, e.target.value as TeamRole)
+                      onChangeRole?.(driver.id, e.target.value as TeamRole)
                     }
                   >
                     <option value="driver">Driver</option>
@@ -184,7 +174,7 @@ export default function TeamRoster({
                   </select>
 
                   <button
-                    onClick={() => onRemoveMember?.(membership.driverId)}
+                    onClick={() => onRemoveMember?.(driver.id)}
                     className="px-3 py-2 bg-danger-red/20 hover:bg-danger-red/30 text-danger-red rounded text-sm font-medium transition-colors"
                   >
                     Remove

apps/website/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+import React, { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
 
 type ButtonAsButton = ButtonHTMLAttributes<HTMLButtonElement> & {
   as?: 'button';

apps/website/components/ui/Card.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEventHandler } from 'react';
+import React, { ReactNode, MouseEventHandler } from 'react';
 
 interface CardProps {
   children: ReactNode;

apps/website/components/ui/Container.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface ContainerProps {
   size?: 'sm' | 'md' | 'lg' | 'xl';

apps/website/components/ui/Heading.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface HeadingProps {
   level: 1 | 2 | 3;

apps/website/components/ui/Input.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import React, { InputHTMLAttributes, ReactNode } from 'react';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;

apps/website/components/ui/RangeField.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useRef, useState, useEffect } from 'react';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
 
 interface RangeFieldProps {
   label: string;

apps/website/components/ui/Section.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface SectionProps {
   variant?: 'default' | 'dark' | 'light';

apps/website/lib/di-config.ts

@@ -113,52 +113,66 @@ import {
   AcceptSponsorshipRequestUseCase,
   RejectSponsorshipRequestUseCase,
 } from '@gridpilot/racing/application';
-import { IsDriverRegisteredForRaceUseCase } from '@gridpilot/racing/application/use-cases/IsDriverRegisteredForRaceQuery';
-import { GetRaceRegistrationsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceRegistrationsQuery';
-import { GetRaceWithSOFUseCase } from '@gridpilot/racing/application/use-cases/GetRaceWithSOFQuery';
-import { GetRaceProtestsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceProtestsQuery';
-import { GetRacePenaltiesUseCase } from '@gridpilot/racing/application/use-cases/GetRacePenaltiesQuery';
-import { GetLeagueStandingsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStandingsQuery';
-import { GetLeagueDriverSeasonStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueDriverSeasonStatsQuery';
-import { GetAllLeaguesWithCapacityUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityQuery';
-import { GetAllLeaguesWithCapacityAndScoringUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityAndScoringQuery';
-import { ListLeagueScoringPresetsUseCase } from '@gridpilot/racing/application/use-cases/ListLeagueScoringPresetsQuery';
-import { GetLeagueScoringConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueScoringConfigQuery';
-import { GetLeagueFullConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueFullConfigQuery';
-import { GetLeagueStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStatsQuery';
+import { GetDashboardOverviewUseCase } from '@gridpilot/racing/application/use-cases/GetDashboardOverviewUseCase';
+import { GetProfileOverviewUseCase } from '@gridpilot/racing/application/use-cases/GetProfileOverviewUseCase';
+import { UpdateDriverProfileUseCase } from '@gridpilot/racing/application/use-cases/UpdateDriverProfileUseCase';
+import { IsDriverRegisteredForRaceUseCase } from '@gridpilot/racing/application/use-cases/IsDriverRegisteredForRaceUseCase';
+import { GetRaceRegistrationsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceRegistrationsUseCase';
+import { GetRaceWithSOFUseCase } from '@gridpilot/racing/application/use-cases/GetRaceWithSOFUseCase';
+import { GetRaceProtestsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceProtestsUseCase';
+import { GetRacePenaltiesUseCase } from '@gridpilot/racing/application/use-cases/GetRacePenaltiesUseCase';
+import { GetLeagueStandingsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStandingsUseCase';
+import { GetLeagueDriverSeasonStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueDriverSeasonStatsUseCase';
+import { GetAllLeaguesWithCapacityUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityUseCase';
+import { GetAllLeaguesWithCapacityAndScoringUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityAndScoringUseCase';
+import { ListLeagueScoringPresetsUseCase } from '@gridpilot/racing/application/use-cases/ListLeagueScoringPresetsUseCase';
+import { GetLeagueScoringConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueScoringConfigUseCase';
+import { GetLeagueFullConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueFullConfigUseCase';
+import { GetLeagueStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStatsUseCase';
 import { GetRacesPageDataUseCase } from '@gridpilot/racing/application/use-cases/GetRacesPageDataUseCase';
+import { GetRaceDetailUseCase } from '@gridpilot/racing/application/use-cases/GetRaceDetailUseCase';
+import { GetRaceResultsDetailUseCase } from '@gridpilot/racing/application/use-cases/GetRaceResultsDetailUseCase';
+import { GetAllRacesPageDataUseCase } from '@gridpilot/racing/application/use-cases/GetAllRacesPageDataUseCase';
 import { GetDriversLeaderboardUseCase } from '@gridpilot/racing/application/use-cases/GetDriversLeaderboardUseCase';
 import { GetTeamsLeaderboardUseCase } from '@gridpilot/racing/application/use-cases/GetTeamsLeaderboardUseCase';
 import { TransferLeagueOwnershipUseCase } from '@gridpilot/racing/application/use-cases/TransferLeagueOwnershipUseCase';
-import { DriversLeaderboardPresenter } from '../../lib/presenters/DriversLeaderboardPresenter';
-import { TeamsLeaderboardPresenter } from '../../lib/presenters/TeamsLeaderboardPresenter';
-import { RacesPagePresenter } from '../../lib/presenters/RacesPagePresenter';
-import { AllTeamsPresenter } from '../../lib/presenters/AllTeamsPresenter';
-import { TeamDetailsPresenter } from '../../lib/presenters/TeamDetailsPresenter';
-import { TeamMembersPresenter } from '../../lib/presenters/TeamMembersPresenter';
-import { TeamJoinRequestsPresenter } from '../../lib/presenters/TeamJoinRequestsPresenter';
-import { DriverTeamPresenter } from '../../lib/presenters/DriverTeamPresenter';
-import { AllLeaguesWithCapacityPresenter } from '../../lib/presenters/AllLeaguesWithCapacityPresenter';
-import { AllLeaguesWithCapacityAndScoringPresenter } from '../../lib/presenters/AllLeaguesWithCapacityAndScoringPresenter';
-import { LeagueStatsPresenter } from '../../lib/presenters/LeagueStatsPresenter';
-import { LeagueScoringConfigPresenter } from '../../lib/presenters/LeagueScoringConfigPresenter';
-import { LeagueFullConfigPresenter } from '../../lib/presenters/LeagueFullConfigPresenter';
-import { LeagueDriverSeasonStatsPresenter } from '../../lib/presenters/LeagueDriverSeasonStatsPresenter';
-import { LeagueStandingsPresenter } from '../../lib/presenters/LeagueStandingsPresenter';
-import { LeagueScoringPresetsPresenter } from '../../lib/presenters/LeagueScoringPresetsPresenter';
-import { RaceWithSOFPresenter } from '../../lib/presenters/RaceWithSOFPresenter';
-import { RaceProtestsPresenter } from '../../lib/presenters/RaceProtestsPresenter';
-import { RacePenaltiesPresenter } from '../../lib/presenters/RacePenaltiesPresenter';
-import { RaceRegistrationsPresenter } from '../../lib/presenters/RaceRegistrationsPresenter';
-import { DriverRegistrationStatusPresenter } from '../../lib/presenters/DriverRegistrationStatusPresenter';
+import { CancelRaceUseCase } from '@gridpilot/racing/application/use-cases/CancelRaceUseCase';
+import { ImportRaceResultsUseCase } from '@gridpilot/racing/application/use-cases/ImportRaceResultsUseCase';
+import { DriversLeaderboardPresenter } from './presenters/DriversLeaderboardPresenter';
+import { TeamsLeaderboardPresenter } from './presenters/TeamsLeaderboardPresenter';
+import { RacesPagePresenter } from './presenters/RacesPagePresenter';
+import { AllRacesPagePresenter } from './presenters/AllRacesPagePresenter';
+import { AllTeamsPresenter } from './presenters/AllTeamsPresenter';
+import { TeamDetailsPresenter } from './presenters/TeamDetailsPresenter';
+import { TeamMembersPresenter } from './presenters/TeamMembersPresenter';
+import { TeamJoinRequestsPresenter } from './presenters/TeamJoinRequestsPresenter';
+import { DriverTeamPresenter } from './presenters/DriverTeamPresenter';
+import { AllLeaguesWithCapacityPresenter } from './presenters/AllLeaguesWithCapacityPresenter';
+import { AllLeaguesWithCapacityAndScoringPresenter } from './presenters/AllLeaguesWithCapacityAndScoringPresenter';
+import { LeagueStatsPresenter } from './presenters/LeagueStatsPresenter';
+import { LeagueScoringConfigPresenter } from './presenters/LeagueScoringConfigPresenter';
+import { LeagueFullConfigPresenter } from './presenters/LeagueFullConfigPresenter';
+import { LeagueDriverSeasonStatsPresenter } from './presenters/LeagueDriverSeasonStatsPresenter';
+import { LeagueStandingsPresenter } from './presenters/LeagueStandingsPresenter';
+import { LeagueScoringPresetsPresenter } from './presenters/LeagueScoringPresetsPresenter';
+import { RaceWithSOFPresenter } from './presenters/RaceWithSOFPresenter';
+import { RaceProtestsPresenter } from './presenters/RaceProtestsPresenter';
+import { RacePenaltiesPresenter } from './presenters/RacePenaltiesPresenter';
+import { RaceRegistrationsPresenter } from './presenters/RaceRegistrationsPresenter';
+import { DriverRegistrationStatusPresenter } from './presenters/DriverRegistrationStatusPresenter';
+import { RaceDetailPresenter } from './presenters/RaceDetailPresenter';
+import { RaceResultsDetailPresenter } from './presenters/RaceResultsDetailPresenter';
+import { ImportRaceResultsPresenter } from './presenters/ImportRaceResultsPresenter';
 import type { DriverRatingProvider } from '@gridpilot/racing/application';
 import type { LeagueScoringPresetProvider } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
 import { PreviewLeagueScheduleUseCase } from '@gridpilot/racing/application';
-import { SponsorDashboardPresenter } from '../../lib/presenters/SponsorDashboardPresenter';
-import { SponsorSponsorshipsPresenter } from '../../lib/presenters/SponsorSponsorshipsPresenter';
-import { PendingSponsorshipRequestsPresenter } from '../../lib/presenters/PendingSponsorshipRequestsPresenter';
-import { EntitySponsorshipPricingPresenter } from '../../lib/presenters/EntitySponsorshipPricingPresenter';
-import { LeagueSchedulePreviewPresenter } from '../../lib/presenters/LeagueSchedulePreviewPresenter';
+import { SponsorDashboardPresenter } from './presenters/SponsorDashboardPresenter';
+import { SponsorSponsorshipsPresenter } from './presenters/SponsorSponsorshipsPresenter';
+import { PendingSponsorshipRequestsPresenter } from './presenters/PendingSponsorshipRequestsPresenter';
+import { EntitySponsorshipPricingPresenter } from './presenters/EntitySponsorshipPricingPresenter';
+import { LeagueSchedulePreviewPresenter } from './presenters/LeagueSchedulePreviewPresenter';
+import { DashboardOverviewPresenter } from './presenters/DashboardOverviewPresenter';
+import { ProfileOverviewPresenter } from './presenters/ProfileOverviewPresenter';
 
 // Testing support
 import {
@@ -759,6 +773,8 @@ export function configureDIContainer(): void {
   const gameRepository = container.resolve<IGameRepository>(DI_TOKENS.GameRepository);
   const notificationRepository = container.resolve<INotificationRepository>(DI_TOKENS.NotificationRepository);
   const notificationPreferenceRepository = container.resolve<INotificationPreferenceRepository>(DI_TOKENS.NotificationPreferenceRepository);
+  const feedRepository = container.resolve<IFeedRepository>(DI_TOKENS.FeedRepository);
+  const socialRepository = container.resolve<ISocialGraphRepository>(DI_TOKENS.SocialRepository);
 
   // Register use cases - Racing
   container.registerInstance(
@@ -770,12 +786,17 @@ export function configureDIContainer(): void {
     DI_TOKENS.RegisterForRaceUseCase,
     new RegisterForRaceUseCase(raceRegistrationRepository, leagueMembershipRepository)
   );
-
+ 
   container.registerInstance(
     DI_TOKENS.WithdrawFromRaceUseCase,
     new WithdrawFromRaceUseCase(raceRegistrationRepository)
   );
 
+  container.registerInstance(
+    DI_TOKENS.CancelRaceUseCase,
+    new CancelRaceUseCase(raceRepository)
+  );
+
   container.registerInstance(
     DI_TOKENS.CreateLeagueWithSeasonAndScoringUseCase,
     new CreateLeagueWithSeasonAndScoringUseCase(
@@ -1004,6 +1025,53 @@ export function configureDIContainer(): void {
     new GetRacesPageDataUseCase(raceRepository, leagueRepository, racesPresenter)
   );
 
+  const allRacesPagePresenter = new AllRacesPagePresenter();
+  container.registerInstance(
+    DI_TOKENS.GetAllRacesPageDataUseCase,
+    new GetAllRacesPageDataUseCase(raceRepository, leagueRepository, allRacesPagePresenter)
+  );
+
+  const raceDetailPresenter = new RaceDetailPresenter();
+  container.registerInstance(
+    DI_TOKENS.GetRaceDetailUseCase,
+    new GetRaceDetailUseCase(
+      raceRepository,
+      leagueRepository,
+      driverRepository,
+      raceRegistrationRepository,
+      resultRepository,
+      leagueMembershipRepository,
+      driverRatingProvider,
+      imageService,
+      raceDetailPresenter
+    )
+  );
+
+  const raceResultsDetailPresenter = new RaceResultsDetailPresenter();
+  container.registerInstance(
+    DI_TOKENS.GetRaceResultsDetailUseCase,
+    new GetRaceResultsDetailUseCase(
+      raceRepository,
+      leagueRepository,
+      resultRepository,
+      driverRepository,
+      penaltyRepository,
+      raceResultsDetailPresenter
+    )
+  );
+
+  const importRaceResultsPresenter = new ImportRaceResultsPresenter();
+  container.registerInstance(
+    DI_TOKENS.ImportRaceResultsUseCase,
+    new ImportRaceResultsUseCase(
+      raceRepository,
+      leagueRepository,
+      resultRepository,
+      standingRepository,
+      importRaceResultsPresenter
+    )
+  );
+
   // Create services for driver leaderboard query
   const rankingService = {
     getAllDriverRankings: () => {
@@ -1060,6 +1128,78 @@ export function configureDIContainer(): void {
     )
   );
 
+  const getDriverStatsForDashboard = (driverId: string) => {
+    const stats = getDIContainer().resolve<Record<string, any>>(DI_TOKENS.DriverStats);
+    const stat = stats[driverId];
+    if (!stat) return null;
+    return {
+      rating: stat.rating ?? null,
+      wins: stat.wins ?? 0,
+      podiums: stat.podiums ?? 0,
+      totalRaces: stat.totalRaces ?? 0,
+      overallRank: stat.overallRank ?? null,
+      consistency: stat.consistency ?? null,
+    };
+  };
+
+  const getDriverStatsForProfile = (driverId: string) => {
+    const stats = getDIContainer().resolve<Record<string, any>>(DI_TOKENS.DriverStats);
+    const stat = stats[driverId];
+    if (!stat) return null;
+    return {
+      rating: stat.rating ?? null,
+      wins: stat.wins ?? 0,
+      podiums: stat.podiums ?? 0,
+      dnfs: stat.dnfs ?? 0,
+      totalRaces: stat.totalRaces ?? 0,
+      avgFinish: stat.avgFinish ?? null,
+      bestFinish: stat.bestFinish ?? null,
+      worstFinish: stat.worstFinish ?? null,
+      overallRank: stat.overallRank ?? null,
+      consistency: stat.consistency ?? null,
+      percentile: stat.percentile ?? null,
+    };
+  };
+
+  const dashboardOverviewPresenter = new DashboardOverviewPresenter();
+  container.registerInstance(
+    DI_TOKENS.GetDashboardOverviewUseCase,
+    new GetDashboardOverviewUseCase(
+      driverRepository,
+      raceRepository,
+      resultRepository,
+      leagueRepository,
+      standingRepository,
+      leagueMembershipRepository,
+      raceRegistrationRepository,
+      feedRepository,
+      socialRepository,
+      imageService,
+      getDriverStatsForDashboard,
+      dashboardOverviewPresenter
+    )
+  );
+
+  const profileOverviewPresenter = new ProfileOverviewPresenter();
+  container.registerInstance(
+    DI_TOKENS.GetProfileOverviewUseCase,
+    new GetProfileOverviewUseCase(
+      driverRepository,
+      teamRepository,
+      teamMembershipRepository,
+      socialRepository,
+      imageService,
+      getDriverStatsForProfile,
+      rankingService.getAllDriverRankings,
+      profileOverviewPresenter
+    )
+  );
+
+  container.registerInstance(
+    DI_TOKENS.UpdateDriverProfileUseCase,
+    new UpdateDriverProfileUseCase(driverRepository)
+  );
+
   // Register use cases - Teams (Query-like with Presenters)
   const allTeamsPresenter = new AllTeamsPresenter();
   container.registerInstance(

apps/website/lib/di-container.ts

@@ -66,22 +66,29 @@ import type {
   GetPendingSponsorshipRequestsUseCase,
   GetEntitySponsorshipPricingUseCase,
 } from '@gridpilot/racing/application';
-import type { IsDriverRegisteredForRaceUseCase } from '@gridpilot/racing/application/use-cases/IsDriverRegisteredForRaceQuery';
-import type { GetRaceRegistrationsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceRegistrationsQuery';
-import type { GetRaceWithSOFUseCase } from '@gridpilot/racing/application/use-cases/GetRaceWithSOFQuery';
-import type { GetRaceProtestsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceProtestsQuery';
-import type { GetRacePenaltiesUseCase } from '@gridpilot/racing/application/use-cases/GetRacePenaltiesQuery';
+import type { IsDriverRegisteredForRaceUseCase } from '@gridpilot/racing/application/use-cases/IsDriverRegisteredForRaceUseCase';
+import type { GetRaceRegistrationsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceRegistrationsUseCase';
+import type { GetRaceWithSOFUseCase } from '@gridpilot/racing/application/use-cases/GetRaceWithSOFUseCase';
+import type { GetRaceProtestsUseCase } from '@gridpilot/racing/application/use-cases/GetRaceProtestsUseCase';
+import type { GetRacePenaltiesUseCase } from '@gridpilot/racing/application/use-cases/GetRacePenaltiesUseCase';
 import type { GetRacesPageDataUseCase } from '@gridpilot/racing/application/use-cases/GetRacesPageDataUseCase';
+import type { GetRaceDetailUseCase } from '@gridpilot/racing/application/use-cases/GetRaceDetailUseCase';
+import type { GetRaceResultsDetailUseCase } from '@gridpilot/racing/application/use-cases/GetRaceResultsDetailUseCase';
+import type { GetAllRacesPageDataUseCase } from '@gridpilot/racing/application/use-cases/GetAllRacesPageDataUseCase';
+import type { GetProfileOverviewUseCase } from '@gridpilot/racing/application/use-cases/GetProfileOverviewUseCase';
+import type { UpdateDriverProfileUseCase } from '@gridpilot/racing/application/use-cases/UpdateDriverProfileUseCase';
 import type { GetDriversLeaderboardUseCase } from '@gridpilot/racing/application/use-cases/GetDriversLeaderboardUseCase';
 import type { GetTeamsLeaderboardUseCase } from '@gridpilot/racing/application/use-cases/GetTeamsLeaderboardUseCase';
-import type { GetLeagueStandingsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStandingsQuery';
-import type { GetLeagueDriverSeasonStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueDriverSeasonStatsQuery';
-import type { GetAllLeaguesWithCapacityUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityQuery';
-import type { GetAllLeaguesWithCapacityAndScoringUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityAndScoringQuery';
-import type { ListLeagueScoringPresetsUseCase } from '@gridpilot/racing/application/use-cases/ListLeagueScoringPresetsQuery';
-import type { GetLeagueScoringConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueScoringConfigQuery';
-import type { GetLeagueFullConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueFullConfigQuery';
-import type { GetLeagueStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStatsQuery';
+import type { GetLeagueStandingsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStandingsUseCase';
+import type { GetLeagueDriverSeasonStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueDriverSeasonStatsUseCase';
+import type { GetAllLeaguesWithCapacityUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityUseCase';
+import type { GetAllLeaguesWithCapacityAndScoringUseCase } from '@gridpilot/racing/application/use-cases/GetAllLeaguesWithCapacityAndScoringUseCase';
+import type { ListLeagueScoringPresetsUseCase } from '@gridpilot/racing/application/use-cases/ListLeagueScoringPresetsUseCase';
+import type { GetLeagueScoringConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueScoringConfigUseCase';
+import type { GetLeagueFullConfigUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueFullConfigUseCase';
+import type { GetLeagueStatsUseCase } from '@gridpilot/racing/application/use-cases/GetLeagueStatsUseCase';
+import type { CancelRaceUseCase } from '@gridpilot/racing/application/use-cases/CancelRaceUseCase';
+import type { ImportRaceResultsUseCase } from '@gridpilot/racing/application/use-cases/ImportRaceResultsUseCase';
 import type { ISponsorRepository } from '@gridpilot/racing/domain/repositories/ISponsorRepository';
 import type { ISeasonSponsorshipRepository } from '@gridpilot/racing/domain/repositories/ISeasonSponsorshipRepository';
 import type { ISponsorshipRequestRepository } from '@gridpilot/racing/domain/repositories/ISponsorshipRequestRepository';
@@ -90,6 +97,7 @@ import type { TransferLeagueOwnershipUseCase } from '@gridpilot/racing/applicati
 import type { DriverRatingProvider } from '@gridpilot/racing/application';
 import type { PreviewLeagueScheduleUseCase } from '@gridpilot/racing/application';
 import type { LeagueScoringPresetProvider } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
+import type { GetDashboardOverviewUseCase } from '@gridpilot/racing/application/use-cases/GetDashboardOverviewUseCase';
 import { createDemoDriverStats, getDemoLeagueRankings, type DriverStats } from '@gridpilot/testing-support';
 
 /**
@@ -279,6 +287,21 @@ class DIContainer {
     return getDIContainer().resolve<GetRacesPageDataUseCase>(DI_TOKENS.GetRacesPageDataUseCase);
   }
 
+  get getAllRacesPageDataUseCase(): GetAllRacesPageDataUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<GetAllRacesPageDataUseCase>(DI_TOKENS.GetAllRacesPageDataUseCase);
+  }
+
+  get getRaceDetailUseCase(): GetRaceDetailUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<GetRaceDetailUseCase>(DI_TOKENS.GetRaceDetailUseCase);
+  }
+
+  get getRaceResultsDetailUseCase(): GetRaceResultsDetailUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<GetRaceResultsDetailUseCase>(DI_TOKENS.GetRaceResultsDetailUseCase);
+  }
+
   get getDriversLeaderboardUseCase(): GetDriversLeaderboardUseCase {
     this.ensureInitialized();
     return getDIContainer().resolve<GetDriversLeaderboardUseCase>(DI_TOKENS.GetDriversLeaderboardUseCase);
@@ -289,11 +312,36 @@ class DIContainer {
     return getDIContainer().resolve<GetTeamsLeaderboardUseCase>(DI_TOKENS.GetTeamsLeaderboardUseCase);
   }
 
+  get getDashboardOverviewUseCase(): GetDashboardOverviewUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<GetDashboardOverviewUseCase>(DI_TOKENS.GetDashboardOverviewUseCase);
+  }
+
+  get getProfileOverviewUseCase(): GetProfileOverviewUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<GetProfileOverviewUseCase>(DI_TOKENS.GetProfileOverviewUseCase);
+  }
+
+  get updateDriverProfileUseCase(): UpdateDriverProfileUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<UpdateDriverProfileUseCase>(DI_TOKENS.UpdateDriverProfileUseCase);
+  }
+
   get driverRatingProvider(): DriverRatingProvider {
     this.ensureInitialized();
     return getDIContainer().resolve<DriverRatingProvider>(DI_TOKENS.DriverRatingProvider);
   }
 
+  get cancelRaceUseCase(): CancelRaceUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<CancelRaceUseCase>(DI_TOKENS.CancelRaceUseCase);
+  }
+
+  get importRaceResultsUseCase(): ImportRaceResultsUseCase {
+    this.ensureInitialized();
+    return getDIContainer().resolve<ImportRaceResultsUseCase>(DI_TOKENS.ImportRaceResultsUseCase);
+  }
+
   get createLeagueWithSeasonAndScoringUseCase(): CreateLeagueWithSeasonAndScoringUseCase {
     this.ensureInitialized();
     return getDIContainer().resolve<CreateLeagueWithSeasonAndScoringUseCase>(DI_TOKENS.CreateLeagueWithSeasonAndScoringUseCase);
@@ -605,6 +653,14 @@ export function getCreateLeagueWithSeasonAndScoringUseCase(): CreateLeagueWithSe
   return DIContainer.getInstance().createLeagueWithSeasonAndScoringUseCase;
 }
 
+export function getCancelRaceUseCase(): CancelRaceUseCase {
+  return DIContainer.getInstance().cancelRaceUseCase;
+}
+
+export function getImportRaceResultsUseCase(): ImportRaceResultsUseCase {
+  return DIContainer.getInstance().importRaceResultsUseCase;
+}
+
 export function getGetRaceWithSOFUseCase(): GetRaceWithSOFUseCase {
   return DIContainer.getInstance().getRaceWithSOFUseCase;
 }
@@ -617,6 +673,18 @@ export function getGetRacesPageDataUseCase(): GetRacesPageDataUseCase {
   return DIContainer.getInstance().getRacesPageDataUseCase;
 }
 
+export function getGetAllRacesPageDataUseCase(): GetAllRacesPageDataUseCase {
+  return DIContainer.getInstance().getAllRacesPageDataUseCase;
+}
+
+export function getGetRaceDetailUseCase(): GetRaceDetailUseCase {
+  return DIContainer.getInstance().getRaceDetailUseCase;
+}
+
+export function getGetRaceResultsDetailUseCase(): GetRaceResultsDetailUseCase {
+  return DIContainer.getInstance().getRaceResultsDetailUseCase;
+}
+
 export function getGetDriversLeaderboardUseCase(): GetDriversLeaderboardUseCase {
   return DIContainer.getInstance().getDriversLeaderboardUseCase;
 }
@@ -625,6 +693,18 @@ export function getGetTeamsLeaderboardUseCase(): GetTeamsLeaderboardUseCase {
   return DIContainer.getInstance().getTeamsLeaderboardUseCase;
 }
 
+export function getGetDashboardOverviewUseCase(): GetDashboardOverviewUseCase {
+  return DIContainer.getInstance().getDashboardOverviewUseCase;
+}
+
+export function getGetProfileOverviewUseCase(): GetProfileOverviewUseCase {
+  return DIContainer.getInstance().getProfileOverviewUseCase;
+}
+
+export function getUpdateDriverProfileUseCase(): UpdateDriverProfileUseCase {
+  return DIContainer.getInstance().updateDriverProfileUseCase;
+}
+
 export function getDriverRatingProvider(): DriverRatingProvider {
   return DIContainer.getInstance().driverRatingProvider;
 }

apps/website/lib/di-tokens.ts

@@ -43,7 +43,13 @@ export const DI_TOKENS = {
   WithdrawFromRaceUseCase: Symbol.for('WithdrawFromRaceUseCase'),
   CreateLeagueWithSeasonAndScoringUseCase: Symbol.for('CreateLeagueWithSeasonAndScoringUseCase'),
   TransferLeagueOwnershipUseCase: Symbol.for('TransferLeagueOwnershipUseCase'),
+  CancelRaceUseCase: Symbol.for('CancelRaceUseCase'),
+  ImportRaceResultsUseCase: Symbol.for('ImportRaceResultsUseCase'),
 
+  // Queries - Dashboard
+  GetDashboardOverviewUseCase: Symbol.for('GetDashboardOverviewUseCase'),
+  GetProfileOverviewUseCase: Symbol.for('GetProfileOverviewUseCase'),
+ 
   // Use Cases - Teams
   CreateTeamUseCase: Symbol.for('CreateTeamUseCase'),
   JoinTeamUseCase: Symbol.for('JoinTeamUseCase'),
@@ -77,6 +83,9 @@ export const DI_TOKENS = {
   GetRaceWithSOFUseCase: Symbol.for('GetRaceWithSOFUseCase'),
   GetLeagueStatsUseCase: Symbol.for('GetLeagueStatsUseCase'),
   GetRacesPageDataUseCase: Symbol.for('GetRacesPageDataUseCase'),
+  GetAllRacesPageDataUseCase: Symbol.for('GetAllRacesPageDataUseCase'),
+  GetRaceDetailUseCase: Symbol.for('GetRaceDetailUseCase'),
+  GetRaceResultsDetailUseCase: Symbol.for('GetRaceResultsDetailUseCase'),
   GetDriversLeaderboardUseCase: Symbol.for('GetDriversLeaderboardUseCase'),
   GetTeamsLeaderboardUseCase: Symbol.for('GetTeamsLeaderboardUseCase'),
 
@@ -105,6 +114,9 @@ export const DI_TOKENS = {
   AcceptSponsorshipRequestUseCase: Symbol.for('AcceptSponsorshipRequestUseCase'),
   RejectSponsorshipRequestUseCase: Symbol.for('RejectSponsorshipRequestUseCase'),
 
+  // Use Cases - Driver Profile
+  UpdateDriverProfileUseCase: Symbol.for('UpdateDriverProfileUseCase'),
+
   // Data
   DriverStats: Symbol.for('DriverStats'),
 
@@ -114,6 +126,11 @@ export const DI_TOKENS = {
   RacePenaltiesPresenter: Symbol.for('IRacePenaltiesPresenter'),
   RaceRegistrationsPresenter: Symbol.for('IRaceRegistrationsPresenter'),
   DriverRegistrationStatusPresenter: Symbol.for('IDriverRegistrationStatusPresenter'),
+  RaceDetailPresenter: Symbol.for('IRaceDetailPresenter'),
+  RaceResultsDetailPresenter: Symbol.for('IRaceResultsDetailPresenter'),
+  ImportRaceResultsPresenter: Symbol.for('IImportRaceResultsPresenter'),
+  DashboardOverviewPresenter: Symbol.for('IDashboardOverviewPresenter'),
+  ProfileOverviewPresenter: Symbol.for('IProfileOverviewPresenter'),
 
   // Presenters - Sponsors
   SponsorDashboardPresenter: Symbol.for('ISponsorDashboardPresenter'),

apps/website/lib/presenters/AllRacesPagePresenter.ts

@@ -0,0 +1,16 @@
+import type {
+  IAllRacesPagePresenter,
+  AllRacesPageViewModel,
+} from '@gridpilot/racing/application/presenters/IAllRacesPagePresenter';
+
+export class AllRacesPagePresenter implements IAllRacesPagePresenter {
+  private viewModel: AllRacesPageViewModel | null = null;
+
+  present(viewModel: AllRacesPageViewModel): void {
+    this.viewModel = viewModel;
+  }
+
+  getViewModel(): AllRacesPageViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/DashboardOverviewPresenter.ts

@@ -0,0 +1,16 @@
+import type {
+  IDashboardOverviewPresenter,
+  DashboardOverviewViewModel,
+} from '@gridpilot/racing/application/presenters/IDashboardOverviewPresenter';
+
+export class DashboardOverviewPresenter implements IDashboardOverviewPresenter {
+  private viewModel: DashboardOverviewViewModel | null = null;
+
+  present(viewModel: DashboardOverviewViewModel): void {
+    this.viewModel = viewModel;
+  }
+
+  getViewModel(): DashboardOverviewViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/EntitySponsorshipPricingPresenter.ts

@@ -1,5 +1,5 @@
 import type { IEntitySponsorshipPricingPresenter } from '@racing/application/presenters/IEntitySponsorshipPricingPresenter';
-import type { GetEntitySponsorshipPricingResultDTO } from '@racing/application/use-cases/GetEntitySponsorshipPricingQuery';
+import type { GetEntitySponsorshipPricingResultDTO } from '@racing/application/use-cases/GetEntitySponsorshipPricingUseCase';
 
 export class EntitySponsorshipPricingPresenter implements IEntitySponsorshipPricingPresenter {
   private data: GetEntitySponsorshipPricingResultDTO | null = null;

apps/website/lib/presenters/ImportRaceResultsPresenter.ts

@@ -0,0 +1,17 @@
+import type {
+  IImportRaceResultsPresenter,
+  ImportRaceResultsSummaryViewModel,
+} from '@gridpilot/racing/application/presenters/IImportRaceResultsPresenter';
+
+export class ImportRaceResultsPresenter implements IImportRaceResultsPresenter {
+  private viewModel: ImportRaceResultsSummaryViewModel | null = null;
+
+  present(viewModel: ImportRaceResultsSummaryViewModel): ImportRaceResultsSummaryViewModel {
+    this.viewModel = viewModel;
+    return this.viewModel;
+  }
+
+  getViewModel(): ImportRaceResultsSummaryViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/LeagueAdminPresenter.ts

@@ -0,0 +1,292 @@
+import type { League } from '@gridpilot/racing/domain/entities/League';
+import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
+import type { MembershipRole } from '@/lib/leagueMembership';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import {
+  getLeagueMembershipRepository,
+  getDriverRepository,
+  getGetLeagueFullConfigUseCase,
+  getRaceRepository,
+  getProtestRepository,
+  getDriverStats,
+  getAllDriverRankings,
+} from '@/lib/di-container';
+
+export interface LeagueJoinRequestViewModel {
+  id: string;
+  leagueId: string;
+  driverId: string;
+  requestedAt: Date;
+  message?: string;
+  driver?: DriverDTO;
+}
+
+export interface ProtestDriverSummary {
+  [driverId: string]: DriverDTO;
+}
+
+export interface ProtestRaceSummary {
+  [raceId: string]: Race;
+}
+
+export interface LeagueOwnerSummaryViewModel {
+  driver: DriverDTO;
+  rating: number | null;
+  rank: number | null;
+}
+
+export interface LeagueAdminProtestsViewModel {
+  protests: Protest[];
+  racesById: ProtestRaceSummary;
+  driversById: ProtestDriverSummary;
+}
+
+export interface LeagueAdminConfigViewModel {
+  form: LeagueConfigFormModel | null;
+}
+
+export interface LeagueAdminPermissionsViewModel {
+  canRemoveMember: boolean;
+  canUpdateRoles: boolean;
+}
+
+export interface LeagueAdminViewModel {
+  joinRequests: LeagueJoinRequestViewModel[];
+  ownerSummary: LeagueOwnerSummaryViewModel | null;
+  config: LeagueAdminConfigViewModel;
+  protests: LeagueAdminProtestsViewModel;
+}
+
+/**
+ * Load join requests plus requester driver DTOs for a league.
+ */
+export async function loadLeagueJoinRequests(leagueId: string): Promise<LeagueJoinRequestViewModel[]> {
+  const membershipRepo = getLeagueMembershipRepository();
+  const requests = await membershipRepo.getJoinRequests(leagueId);
+
+  const driverRepo = getDriverRepository();
+  const uniqueDriverIds = Array.from(new Set(requests.map((r) => r.driverId)));
+  const driverEntities = await Promise.all(uniqueDriverIds.map((id) => driverRepo.findById(id)));
+  const driverDtos = driverEntities
+    .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
+    .filter((dto): dto is DriverDTO => dto !== null);
+
+  const driversById: Record<string, DriverDTO> = {};
+  for (const dto of driverDtos) {
+    driversById[dto.id] = dto;
+  }
+
+  return requests.map((request) => ({
+    id: request.id,
+    leagueId: request.leagueId,
+    driverId: request.driverId,
+    requestedAt: request.requestedAt,
+    message: request.message,
+    driver: driversById[request.driverId],
+  }));
+}
+
+/**
+ * Approve a league join request and return updated join requests.
+ */
+export async function approveLeagueJoinRequest(
+  leagueId: string,
+  requestId: string
+): Promise<LeagueJoinRequestViewModel[]> {
+  const membershipRepo = getLeagueMembershipRepository();
+  const requests = await membershipRepo.getJoinRequests(leagueId);
+  const request = requests.find((r) => r.id === requestId);
+  if (!request) {
+    throw new Error('Join request not found');
+  }
+
+  await membershipRepo.saveMembership({
+    leagueId: request.leagueId,
+    driverId: request.driverId,
+    role: 'member',
+    status: 'active',
+    joinedAt: new Date(),
+  });
+  await membershipRepo.removeJoinRequest(requestId);
+
+  return loadLeagueJoinRequests(leagueId);
+}
+
+/**
+ * Reject a league join request (alpha: just remove).
+ */
+export async function rejectLeagueJoinRequest(
+  leagueId: string,
+  requestId: string
+): Promise<LeagueJoinRequestViewModel[]> {
+  const membershipRepo = getLeagueMembershipRepository();
+  await membershipRepo.removeJoinRequest(requestId);
+  return loadLeagueJoinRequests(leagueId);
+}
+
+/**
+ * Compute permissions for a performer on league membership actions.
+ */
+export async function getLeagueAdminPermissions(
+  leagueId: string,
+  performerDriverId: string
+): Promise<LeagueAdminPermissionsViewModel> {
+  const membershipRepo = getLeagueMembershipRepository();
+  const performer = await membershipRepo.getMembership(leagueId, performerDriverId);
+
+  const isOwner = performer?.role === 'owner';
+  const isAdmin = performer?.role === 'admin';
+
+  return {
+    canRemoveMember: Boolean(isOwner || isAdmin),
+    canUpdateRoles: Boolean(isOwner),
+  };
+}
+
+/**
+ * Remove a member from the league, enforcing simple role rules.
+ */
+export async function removeLeagueMember(
+  leagueId: string,
+  performerDriverId: string,
+  targetDriverId: string
+): Promise<void> {
+  const membershipRepo = getLeagueMembershipRepository();
+  const performer = await membershipRepo.getMembership(leagueId, performerDriverId);
+  if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
+    throw new Error('Only owners or admins can remove members');
+  }
+
+  const membership = await membershipRepo.getMembership(leagueId, targetDriverId);
+  if (!membership) {
+    throw new Error('Member not found');
+  }
+  if (membership.role === 'owner') {
+    throw new Error('Cannot remove the league owner');
+  }
+
+  await membershipRepo.removeMembership(leagueId, targetDriverId);
+}
+
+/**
+ * Update a member's role, enforcing simple owner-only rules.
+ */
+export async function updateLeagueMemberRole(
+  leagueId: string,
+  performerDriverId: string,
+  targetDriverId: string,
+  newRole: MembershipRole
+): Promise<void> {
+  const membershipRepo = getLeagueMembershipRepository();
+  const performer = await membershipRepo.getMembership(leagueId, performerDriverId);
+  if (!performer || performer.role !== 'owner') {
+    throw new Error('Only the league owner can update roles');
+  }
+
+  const membership = await membershipRepo.getMembership(leagueId, targetDriverId);
+  if (!membership) {
+    throw new Error('Member not found');
+  }
+  if (membership.role === 'owner') {
+    throw new Error('Cannot change the owner role');
+  }
+
+  await membershipRepo.saveMembership({
+    ...membership,
+    role: newRole,
+  });
+}
+
+/**
+ * Load owner summary (DTO + rating/rank) for a league.
+ */
+export async function loadLeagueOwnerSummary(league: League): Promise<LeagueOwnerSummaryViewModel | null> {
+  const driverRepo = getDriverRepository();
+  const entity = await driverRepo.findById(league.ownerId);
+  if (!entity) return null;
+
+  const ownerDriver = EntityMappers.toDriverDTO(entity);
+  const stats = getDriverStats(ownerDriver.id);
+  const allRankings = getAllDriverRankings();
+
+  let rating: number | null = stats?.rating ?? null;
+  let rank: number | null = null;
+
+  if (stats) {
+    if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
+      rank = stats.overallRank;
+    } else {
+      const indexInGlobal = allRankings.findIndex((stat) => stat.driverId === stats.driverId);
+      if (indexInGlobal !== -1) {
+        rank = indexInGlobal + 1;
+      }
+    }
+
+    if (rating === null) {
+      const globalEntry = allRankings.find((stat) => stat.driverId === stats.driverId);
+      if (globalEntry) {
+        rating = globalEntry.rating;
+      }
+    }
+  }
+
+  return {
+    driver: ownerDriver,
+    rating,
+    rank,
+  };
+}
+
+/**
+ * Load league full config form.
+ */
+export async function loadLeagueConfig(leagueId: string): Promise<LeagueAdminConfigViewModel> {
+  const useCase = getGetLeagueFullConfigUseCase();
+  const form = await useCase.execute({ leagueId });
+  return { form };
+}
+
+/**
+ * Load protests, related races and driver DTOs for a league.
+ */
+export async function loadLeagueProtests(leagueId: string): Promise<LeagueAdminProtestsViewModel> {
+  const raceRepo = getRaceRepository();
+  const protestRepo = getProtestRepository();
+  const driverRepo = getDriverRepository();
+
+  const leagueRaces = await raceRepo.findByLeagueId(leagueId);
+
+  const allProtests: Protest[] = [];
+  const racesById: Record<string, Race> = {};
+
+  for (const race of leagueRaces) {
+    racesById[race.id] = race;
+    const raceProtests = await protestRepo.findByRaceId(race.id);
+    allProtests.push(...raceProtests);
+  }
+
+  const driverIds = new Set<string>();
+  allProtests.forEach((p) => {
+    driverIds.add(p.protestingDriverId);
+    driverIds.add(p.accusedDriverId);
+  });
+
+  const driverEntities = await Promise.all(Array.from(driverIds).map((id) => driverRepo.findById(id)));
+  const driverDtos = driverEntities
+    .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
+    .filter((dto): dto is DriverDTO => dto !== null);
+
+  const driversById: Record<string, DriverDTO> = {};
+  for (const dto of driverDtos) {
+    driversById[dto.id] = dto;
+  }
+
+  return {
+    protests: allProtests,
+    racesById,
+    driversById,
+  };
+}

apps/website/lib/presenters/LeagueSchedulePresenter.ts

@@ -0,0 +1,107 @@
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
+import {
+  getRaceRepository,
+  getIsDriverRegisteredForRaceQuery,
+  getRegisterForRaceUseCase,
+  getWithdrawFromRaceUseCase,
+} from '@/lib/di-container';
+
+export interface LeagueScheduleRaceItemViewModel {
+  id: string;
+  leagueId: string;
+  track: string;
+  car: string;
+  sessionType: string;
+  scheduledAt: Date;
+  status: Race['status'];
+  isUpcoming: boolean;
+  isPast: boolean;
+  isRegistered: boolean;
+}
+
+export interface LeagueScheduleViewModel {
+  races: LeagueScheduleRaceItemViewModel[];
+}
+
+/**
+ * Load league schedule with registration status for a given driver.
+ */
+export async function loadLeagueSchedule(
+  leagueId: string,
+  driverId: string,
+): Promise<LeagueScheduleViewModel> {
+  const raceRepo = getRaceRepository();
+  const isRegisteredQuery = getIsDriverRegisteredForRaceQuery();
+
+  const allRaces = await raceRepo.findAll();
+  const leagueRaces = allRaces
+    .filter((race) => race.leagueId === leagueId)
+    .sort(
+      (a, b) =>
+        new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime(),
+    );
+
+  const now = new Date();
+
+  const registrationStates: Record<string, boolean> = {};
+  await Promise.all(
+    leagueRaces.map(async (race) => {
+      const registered = await isRegisteredQuery.execute({
+        raceId: race.id,
+        driverId,
+      });
+      registrationStates[race.id] = registered;
+    }),
+  );
+
+  const races: LeagueScheduleRaceItemViewModel[] = leagueRaces.map((race) => {
+    const raceDate = new Date(race.scheduledAt);
+    const isPast = race.status === 'completed' || raceDate <= now;
+    const isUpcoming = race.status === 'scheduled' && raceDate > now;
+
+    return {
+      id: race.id,
+      leagueId: race.leagueId,
+      track: race.track,
+      car: race.car,
+      sessionType: race.sessionType,
+      scheduledAt: raceDate,
+      status: race.status,
+      isUpcoming,
+      isPast,
+      isRegistered: registrationStates[race.id] ?? false,
+    };
+  });
+
+  return { races };
+}
+
+/**
+ * Register the driver for a race.
+ */
+export async function registerForRace(
+  raceId: string,
+  leagueId: string,
+  driverId: string,
+): Promise<void> {
+  const useCase = getRegisterForRaceUseCase();
+  await useCase.execute({
+    raceId,
+    leagueId,
+    driverId,
+  });
+}
+
+/**
+ * Withdraw the driver from a race.
+ */
+export async function withdrawFromRace(
+  raceId: string,
+  driverId: string,
+): Promise<void> {
+  const useCase = getWithdrawFromRaceUseCase();
+  await useCase.execute({
+    raceId,
+    driverId,
+  });
+}

apps/website/lib/presenters/PendingSponsorshipRequestsPresenter.ts

@@ -1,5 +1,5 @@
 import type { IPendingSponsorshipRequestsPresenter } from '@racing/application/presenters/IPendingSponsorshipRequestsPresenter';
-import type { GetPendingSponsorshipRequestsResultDTO } from '@racing/application/use-cases/GetPendingSponsorshipRequestsQuery';
+import type { GetPendingSponsorshipRequestsResultDTO } from '@racing/application/use-cases/GetPendingSponsorshipRequestsUseCase';
 
 export class PendingSponsorshipRequestsPresenter implements IPendingSponsorshipRequestsPresenter {
   private data: GetPendingSponsorshipRequestsResultDTO | null = null;

apps/website/lib/presenters/ProfileOverviewPresenter.ts

@@ -0,0 +1,16 @@
+import type {
+  IProfileOverviewPresenter,
+  ProfileOverviewViewModel,
+} from '@gridpilot/racing/application/presenters/IProfileOverviewPresenter';
+
+export class ProfileOverviewPresenter implements IProfileOverviewPresenter {
+  private viewModel: ProfileOverviewViewModel | null = null;
+
+  present(viewModel: ProfileOverviewViewModel): void {
+    this.viewModel = viewModel;
+  }
+
+  getViewModel(): ProfileOverviewViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/RaceDetailPresenter.ts

@@ -0,0 +1,17 @@
+import type {
+  IRaceDetailPresenter,
+  RaceDetailViewModel,
+} from '@gridpilot/racing/application/presenters/IRaceDetailPresenter';
+
+export class RaceDetailPresenter implements IRaceDetailPresenter {
+  private viewModel: RaceDetailViewModel | null = null;
+
+  present(viewModel: RaceDetailViewModel): RaceDetailViewModel {
+    this.viewModel = viewModel;
+    return this.viewModel;
+  }
+
+  getViewModel(): RaceDetailViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/RaceResultsDetailPresenter.ts

@@ -0,0 +1,17 @@
+import type {
+  IRaceResultsDetailPresenter,
+  RaceResultsDetailViewModel,
+} from '@gridpilot/racing/application/presenters/IRaceResultsDetailPresenter';
+
+export class RaceResultsDetailPresenter implements IRaceResultsDetailPresenter {
+  private viewModel: RaceResultsDetailViewModel | null = null;
+
+  present(viewModel: RaceResultsDetailViewModel): RaceResultsDetailViewModel {
+    this.viewModel = viewModel;
+    return this.viewModel;
+  }
+
+  getViewModel(): RaceResultsDetailViewModel | null {
+    return this.viewModel;
+  }
+}

apps/website/lib/presenters/ScheduleRaceFormPresenter.ts

@@ -0,0 +1,71 @@
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { InMemoryRaceRepository } from '@gridpilot/racing/infrastructure/repositories/InMemoryRaceRepository';
+import { getRaceRepository, getLeagueRepository } from '@/lib/di-container';
+
+export type SessionType = 'practice' | 'qualifying' | 'race';
+
+export interface ScheduleRaceFormData {
+  leagueId: string;
+  track: string;
+  car: string;
+  sessionType: SessionType;
+  scheduledDate: string;
+  scheduledTime: string;
+}
+
+export interface ScheduledRaceViewModel {
+  id: string;
+  leagueId: string;
+  track: string;
+  car: string;
+  sessionType: SessionType;
+  scheduledAt: Date;
+  status: string;
+}
+
+export interface LeagueOptionViewModel {
+  id: string;
+  name: string;
+}
+
+/**
+ * Presenter/Facade for the schedule race form.
+ * Encapsulates all domain/repository access so the component can stay purely presentational.
+ */
+export async function loadScheduleRaceFormLeagues(): Promise<LeagueOptionViewModel[]> {
+  const leagueRepo = getLeagueRepository();
+  const allLeagues = await leagueRepo.findAll();
+  return allLeagues.map((league) => ({
+    id: league.id,
+    name: league.name,
+  }));
+}
+
+export async function scheduleRaceFromForm(
+  formData: ScheduleRaceFormData
+): Promise<ScheduledRaceViewModel> {
+  const raceRepo = getRaceRepository();
+  const scheduledAt = new Date(`${formData.scheduledDate}T${formData.scheduledTime}`);
+
+  const race = Race.create({
+    id: InMemoryRaceRepository.generateId(),
+    leagueId: formData.leagueId,
+    track: formData.track.trim(),
+    car: formData.car.trim(),
+    sessionType: formData.sessionType,
+    scheduledAt,
+    status: 'scheduled',
+  });
+
+  const createdRace = await raceRepo.create(race);
+
+  return {
+    id: createdRace.id,
+    leagueId: createdRace.leagueId,
+    track: createdRace.track,
+    car: createdRace.car,
+    sessionType: createdRace.sessionType as SessionType,
+    scheduledAt: createdRace.scheduledAt,
+    status: createdRace.status,
+  };
+}

apps/website/lib/presenters/SponsorDashboardPresenter.ts

@@ -1,5 +1,5 @@
 import type { ISponsorDashboardPresenter } from '@racing/application/presenters/ISponsorDashboardPresenter';
-import type { SponsorDashboardDTO } from '@racing/application/use-cases/GetSponsorDashboardQuery';
+import type { SponsorDashboardDTO } from '@racing/application/use-cases/GetSponsorDashboardUseCase';
 
 export class SponsorDashboardPresenter implements ISponsorDashboardPresenter {
   private data: SponsorDashboardDTO | null = null;

apps/website/lib/presenters/SponsorSponsorshipsPresenter.ts

@@ -1,5 +1,5 @@
 import type { ISponsorSponsorshipsPresenter } from '@racing/application/presenters/ISponsorSponsorshipsPresenter';
-import type { SponsorSponsorshipsDTO } from '@racing/application/use-cases/GetSponsorSponsorshipsQuery';
+import type { SponsorSponsorshipsDTO } from '@racing/application/use-cases/GetSponsorSponsorshipsUseCase';
 
 export class SponsorSponsorshipsPresenter implements ISponsorSponsorshipsPresenter {
   private data: SponsorSponsorshipsDTO | null = null;

apps/website/lib/presenters/TeamRosterPresenter.ts

@@ -0,0 +1,59 @@
+import type { TeamMembership, TeamRole } from '@gridpilot/racing';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import { getDriverRepository, getDriverStats } from '@/lib/di-container';
+
+export interface TeamRosterMemberViewModel {
+  driver: DriverDTO;
+  role: TeamRole;
+  joinedAt: string;
+  rating: number | null;
+  overallRank: number | null;
+}
+
+export interface TeamRosterViewModel {
+  members: TeamRosterMemberViewModel[];
+  averageRating: number;
+}
+
+/**
+ * Presenter/facade for team roster.
+ * Encapsulates repository and stats access so the TeamRoster component can remain a pure view.
+ */
+export async function getTeamRosterViewModel(
+  memberships: TeamMembership[]
+): Promise<TeamRosterViewModel> {
+  const driverRepo = getDriverRepository();
+  const allDrivers = await driverRepo.findAll();
+  const members: TeamRosterMemberViewModel[] = [];
+
+  for (const membership of memberships) {
+    const driver = allDrivers.find((d) => d.id === membership.driverId);
+    if (!driver) continue;
+
+    const dto = EntityMappers.toDriverDTO(driver);
+    if (!dto) continue;
+
+    const stats = getDriverStats(membership.driverId);
+
+    members.push({
+      driver: dto,
+      role: membership.role,
+      joinedAt: membership.joinedAt.toISOString(),
+      rating: stats?.rating ?? null,
+      overallRank: typeof stats?.overallRank === 'number' ? stats.overallRank : null,
+    });
+  }
+
+  const averageRating =
+    members.length > 0
+      ? Math.round(
+          members.reduce((sum, m) => sum + (m.rating ?? 0), 0) / members.length
+        )
+      : 0;
+
+  return {
+    members,
+    averageRating,
+  };
+}

apps/website/lib/presenters/TeamsLeaderboardPresenter.ts

@@ -9,9 +9,35 @@ export class TeamsLeaderboardPresenter implements ITeamsLeaderboardPresenter {
   private viewModel: TeamsLeaderboardViewModel | null = null;
 
   present(teams: any[], recruitingCount: number): void {
+    const transformedTeams = teams.map((team) => this.transformTeam(team));
+
+    const groupsBySkillLevel = transformedTeams.reduce<Record<SkillLevel, TeamLeaderboardItemViewModel[]>>(
+      (acc, team) => {
+        if (!acc[team.performanceLevel]) {
+          acc[team.performanceLevel] = [];
+        }
+        acc[team.performanceLevel]!.push(team);
+        return acc;
+      },
+      {
+        beginner: [],
+        intermediate: [],
+        advanced: [],
+        pro: [],
+      },
+    );
+
+    const topTeams = transformedTeams
+      .filter((t) => t.rating !== null)
+      .slice()
+      .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
+      .slice(0, 5);
+
     this.viewModel = {
-      teams: teams.map((team) => this.transformTeam(team)),
+      teams: transformedTeams,
       recruitingCount,
+      groupsBySkillLevel,
+      topTeams,
     };
   }