fix e2e

apps/website/app/drivers/DriversInteractive.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DriversTemplate } from '@/templates/DriversTemplate';
+import { useDriverLeaderboard } from '@/hooks/useDriverService';
+import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+export function DriversInteractive() {
+  const router = useRouter();
+  const { data: viewModel, isLoading: loading } = useDriverLeaderboard();
+  
+  const drivers = viewModel?.drivers || [];
+  const totalRaces = viewModel?.totalRaces || 0;
+  const totalWins = viewModel?.totalWins || 0;
+  const activeCount = viewModel?.activeCount || 0;
+
+  // Transform data for template
+  const driverViewModels = drivers.map((driver, index) => 
+    new DriverLeaderboardItemViewModel(driver, index + 1)
+  );
+
+  return (
+    <DriversTemplate
+      drivers={driverViewModels}
+      totalRaces={totalRaces}
+      totalWins={totalWins}
+      activeCount={activeCount}
+      isLoading={loading}
+    />
+  );
+}

apps/website/app/drivers/DriversStatic.tsx

@@ -0,0 +1,24 @@
+import { DriversTemplate } from '@/templates/DriversTemplate';
+import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+
+interface DriversStaticProps {
+  leaderboardData: DriverLeaderboardViewModel;
+}
+
+export async function DriversStatic({ leaderboardData }: DriversStaticProps) {
+  // Transform the data for the template
+  const drivers = leaderboardData.drivers.map((driver, index) => 
+    new DriverLeaderboardItemViewModel(driver, index + 1)
+  );
+
+  return (
+    <DriversTemplate
+      drivers={drivers}
+      totalRaces={leaderboardData.totalRaces}
+      totalWins={leaderboardData.totalWins}
+      activeCount={leaderboardData.activeCount}
+      isLoading={false}
+    />
+  );
+}

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

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface TeamMembershipInfo {
+  team: Team;
+  role: string;
+  joinedAt: Date;
+}
+
+export function DriverProfileInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const driverId = params.id as string;
+  const { driverService, teamService } = useServices();
+
+  const [driverProfile, setDriverProfile] = useState<DriverProfileViewModel | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  const isSponsorMode = useSponsorMode();
+
+  useEffect(() => {
+    loadDriver();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [driverId]);
+
+  const loadDriver = async () => {
+    try {
+      // Get driver profile
+      const profileViewModel = await driverService.getDriverProfile(driverId);
+
+      if (!profileViewModel.currentDriver) {
+        setError('Driver not found');
+        setLoading(false);
+        return;
+      }
+
+      setDriverProfile(profileViewModel);
+
+      // Load team memberships - get all teams and check memberships
+      const allTeams = await teamService.getAllTeams();
+      const memberships: TeamMembershipInfo[] = [];
+
+      for (const team of allTeams) {
+        const teamMembers = await teamService.getTeamMembers(team.id, driverId, '');
+        const membership = teamMembers.find(member => member.driverId === driverId);
+        if (membership) {
+          memberships.push({
+            team: {
+              id: team.id,
+              name: team.name,
+            } as Team,
+            role: membership.role,
+            joinedAt: new Date(membership.joinedAt),
+          });
+        }
+      }
+      setAllTeamMemberships(memberships);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load driver');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddFriend = () => {
+    setFriendRequestSent(true);
+  };
+
+  const handleBackClick = () => {
+    router.push('/drivers');
+  };
+
+  // Build sponsor insights for driver
+  const friendsCount = driverProfile?.socialSummary?.friends?.length ?? 0;
+  const stats = driverProfile?.stats || null;
+  const driver = driverProfile?.currentDriver;
+
+  const driverMetrics = [
+    MetricBuilders.rating(stats?.rating ?? 0, 'Driver Rating'),
+    MetricBuilders.views((friendsCount * 8) + 50),
+    MetricBuilders.engagement(stats?.consistency ?? 75),
+    MetricBuilders.reach((friendsCount * 12) + 100),
+  ];
+
+  const sponsorInsights = isSponsorMode && driver ? (
+    <SponsorInsightsCard
+      entityType="driver"
+      entityId={driver.id}
+      entityName={driver.name}
+      tier="standard"
+      metrics={driverMetrics}
+      slots={SlotTemplates.driver(true, 200)}
+      trustScore={88}
+      monthlyActivity={stats?.consistency ?? 75}
+    />
+  ) : null;
+
+  if (!driverProfile) {
+    return null;
+  }
+
+  return (
+    <DriverProfileTemplate
+      driverProfile={driverProfile}
+      allTeamMemberships={allTeamMemberships}
+      isLoading={loading}
+      error={error}
+      onBackClick={handleBackClick}
+      onAddFriend={handleAddFriend}
+      friendRequestSent={friendRequestSent}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      isSponsorMode={isSponsorMode}
+      sponsorInsights={sponsorInsights}
+    />
+  );
+}

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

@@ -0,0 +1,37 @@
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+
+interface DriverProfileStaticProps {
+  profileData: DriverProfileViewModel;
+  teamMemberships: Array<{
+    team: { id: string; name: string };
+    role: string;
+    joinedAt: Date;
+  }>;
+}
+
+export async function DriverProfileStatic({ profileData, teamMemberships }: DriverProfileStaticProps) {
+  return (
+    <DriverProfileTemplate
+      driverProfile={profileData}
+      allTeamMemberships={teamMemberships}
+      isLoading={false}
+      error={null}
+      onBackClick={() => {
+        // This will be handled by the parent page component
+        window.history.back();
+      }}
+      onAddFriend={() => {
+        // Server component - no-op for static version
+        console.log('Add friend - static mode');
+      }}
+      friendRequestSent={false}
+      activeTab="overview"
+      setActiveTab={() => {
+        // Server component - no-op for static version
+        console.log('Set tab - static mode');
+      }}
+      isSponsorMode={false}
+    />
+  );
+}

apps/website/app/drivers/page.tsx

@@ -1,637 +1,3 @@
-'use client';
+import { DriversInteractive } from './DriversInteractive';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Trophy,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Search,
-  Users,
-  Award,
-  ChevronRight,
-  Flag,
-  Activity,
-  BarChart3,
-} from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import Card from '@/components/ui/Card';
-import Heading from '@/components/ui/Heading';
-import { useDriverLeaderboard } from '@/hooks/useDriverService';
-import Image from 'next/image';
-import { mediaConfig } from '@/lib/config/mediaConfig';
-
-import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
-
-// ============================================================================
-// DEMO DATA
-// ============================================================================
-//
-// In alpha, all driver listings come from the in-memory repositories wired
-// through the DI container. We intentionally avoid hardcoded fallback driver
-// lists here so that the demo data stays consistent across pages.
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: string;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-  description: string;
-}[] = [
-  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', description: 'Elite competition level' },
-  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', description: 'Highly competitive' },
-  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', description: 'Developing skills' },
-  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', description: 'Learning the ropes' },
-];
-
-// ============================================================================
-// CATEGORY CONFIG
-// ============================================================================
-
-const CATEGORIES: {
-  id: string;
-  label: string;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-}[] = [
-  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
-  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
-  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
-  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
-  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
-  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
-];
-
-// ============================================================================
-// FEATURED DRIVER CARD COMPONENT
-// ============================================================================
-
-interface FeaturedDriverCardProps {
-  driver: DriverLeaderboardItemViewModel;
-  position: number;
-  onClick: () => void;
-}
-
-function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
-  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
-  const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
-
-  const getBorderColor = (pos: number) => {
-    switch (pos) {
-      case 1: return 'border-yellow-400/50 hover:border-yellow-400';
-      case 2: return 'border-gray-300/50 hover:border-gray-300';
-      case 3: return 'border-amber-600/50 hover:border-amber-600';
-      default: return 'border-charcoal-outline hover:border-primary-blue';
-    }
-  };
-
-  const getMedalColor = (pos: number) => {
-    switch (pos) {
-      case 1: return 'text-yellow-400';
-      case 2: return 'text-gray-300';
-      case 3: return 'text-amber-600';
-      default: return 'text-gray-500';
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`p-5 rounded-xl bg-iron-gray/60 border-2 ${getBorderColor(position)} transition-all duration-200 text-left group hover:scale-[1.02]`}
-    >
-      {/* Header with Position */}
-      <div className="flex items-start justify-between mb-4">
-        <div className={`flex h-10 w-10 items-center justify-center rounded-full ${position <= 3 ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}`}>
-          {position <= 3 ? (
-            <Crown className={`w-5 h-5 ${getMedalColor(position)}`} />
-          ) : (
-            <span className="text-lg font-bold text-gray-400">#{position}</span>
-          )}
-        </div>
-        <div className="flex gap-2">
-          {categoryConfig && (
-            <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${categoryConfig.bgColor} ${categoryConfig.color} border ${categoryConfig.borderColor}`}>
-              {categoryConfig.label}
-            </span>
-          )}
-          <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
-            {levelConfig?.label}
-          </span>
-        </div>
-      </div>
-
-      {/* Avatar & Name */}
-      <div className="flex items-center gap-4 mb-4">
-        <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-charcoal-outline group-hover:border-primary-blue transition-colors">
-          <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
-        </div>
-        <div>
-          <h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
-            {driver.name}
-          </h3>
-          <div className="flex items-center gap-2 text-sm text-gray-500">
-            <Flag className="w-3.5 h-3.5" />
-            {driver.nationality}
-          </div>
-        </div>
-      </div>
-
-      {/* Stats */}
-      <div className="grid grid-cols-3 gap-3">
-        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
-          <p className="text-lg font-bold text-primary-blue">{driver.rating.toLocaleString()}</p>
-          <p className="text-[10px] text-gray-500">Rating</p>
-        </div>
-        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
-          <p className="text-lg font-bold text-performance-green">{driver.wins}</p>
-          <p className="text-[10px] text-gray-500">Wins</p>
-        </div>
-        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
-          <p className="text-lg font-bold text-warning-amber">{driver.podiums}</p>
-          <p className="text-[10px] text-gray-500">Podiums</p>
-        </div>
-      </div>
-    </button>
-  );
-}
-
-// ============================================================================
-// SKILL DISTRIBUTION COMPONENT
-// ============================================================================
-
-interface SkillDistributionProps {
-  drivers: DriverLeaderboardItemViewModel[];
-}
-
-function SkillDistribution({ drivers }: SkillDistributionProps) {
-  const distribution = SKILL_LEVELS.map((level) => ({
-    ...level,
-    count: drivers.filter((d) => d.skillLevel === level.id).length,
-    percentage: drivers.length > 0
-      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100)
-      : 0,
-  }));
-
-  return (
-    <div className="mb-10">
-      <div className="flex items-center gap-3 mb-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neon-aqua/10 border border-neon-aqua/20">
-          <BarChart3 className="w-5 h-5 text-neon-aqua" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
-          <p className="text-xs text-gray-500">Driver population by skill level</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        {distribution.map((level) => {
-          const Icon = level.icon;
-          return (
-            <div
-              key={level.id}
-              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
-            >
-              <div className="flex items-center justify-between mb-3">
-                <Icon className={`w-5 h-5 ${level.color}`} />
-                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
-              </div>
-              <p className="text-white font-medium mb-1">{level.label}</p>
-              <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
-                <div
-                  className={`h-full rounded-full transition-all duration-500 ${
-                    level.id === 'pro' ? 'bg-yellow-400' :
-                    level.id === 'advanced' ? 'bg-purple-400' :
-                    level.id === 'intermediate' ? 'bg-primary-blue' :
-                    'bg-green-400'
-                  }`}
-                  style={{ width: `${level.percentage}%` }}
-                />
-              </div>
-              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// CATEGORY DISTRIBUTION COMPONENT
-// ============================================================================
-
-interface CategoryDistributionProps {
-  drivers: DriverLeaderboardItemViewModel[];
-}
-
-function CategoryDistribution({ drivers }: CategoryDistributionProps) {
-  const distribution = CATEGORIES.map((category) => ({
-    ...category,
-    count: drivers.filter((d) => d.category === category.id).length,
-    percentage: drivers.length > 0
-      ? Math.round((drivers.filter((d) => d.category === category.id).length / drivers.length) * 100)
-      : 0,
-  }));
-
-  return (
-    <div className="mb-10">
-      <div className="flex items-center gap-3 mb-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-400/10 border border-purple-400/20">
-          <BarChart3 className="w-5 h-5 text-purple-400" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-white">Category Distribution</h2>
-          <p className="text-xs text-gray-500">Driver population by category</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-        {distribution.map((category) => (
-          <div
-            key={category.id}
-            className={`p-4 rounded-xl ${category.bgColor} border ${category.borderColor}`}
-          >
-            <div className="flex items-center justify-between mb-3">
-              <span className={`text-2xl font-bold ${category.color}`}>{category.count}</span>
-            </div>
-            <p className="text-white font-medium mb-1">{category.label}</p>
-            <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
-              <div
-                className={`h-full rounded-full transition-all duration-500 ${
-                  category.id === 'beginner' ? 'bg-green-400' :
-                  category.id === 'intermediate' ? 'bg-primary-blue' :
-                  category.id === 'advanced' ? 'bg-purple-400' :
-                  category.id === 'pro' ? 'bg-yellow-400' :
-                  category.id === 'endurance' ? 'bg-orange-400' :
-                  'bg-red-400'
-                }`}
-                style={{ width: `${category.percentage}%` }}
-              />
-            </div>
-            <p className="text-xs text-gray-500 mt-1">{category.percentage}% of drivers</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// LEADERBOARD PREVIEW COMPONENT
-// ============================================================================
-
-interface LeaderboardPreviewProps {
-  drivers: DriverLeaderboardItemViewModel[];
-  onDriverClick: (id: string) => void;
-}
-
-function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
-  const router = useRouter();
-  const top5 = drivers.slice(0, 5);
-
-  const getMedalColor = (position: number) => {
-    switch (position) {
-      case 1: return 'text-yellow-400';
-      case 2: return 'text-gray-300';
-      case 3: return 'text-amber-600';
-      default: return 'text-gray-500';
-    }
-  };
-
-  const getMedalBg = (position: number) => {
-    switch (position) {
-      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
-      case 2: return 'bg-gray-300/10 border-gray-300/30';
-      case 3: return 'bg-amber-600/10 border-amber-600/30';
-      default: return 'bg-iron-gray/50 border-charcoal-outline';
-    }
-  };
-
-  return (
-    <div className="mb-10">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
-            <Award className="w-5 h-5 text-yellow-400" />
-          </div>
-          <div>
-            <h2 className="text-lg font-semibold text-white">Top Drivers</h2>
-            <p className="text-xs text-gray-500">Highest rated competitors</p>
-          </div>
-        </div>
-
-        <Button
-          variant="secondary"
-          onClick={() => router.push('/leaderboards/drivers')}
-          className="flex items-center gap-2 text-sm"
-        >
-          Full Rankings
-          <ChevronRight className="w-4 h-4" />
-        </Button>
-      </div>
-
-      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-        <div className="divide-y divide-charcoal-outline/50">
-          {top5.map((driver, index) => {
-            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
-            const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
-            const position = index + 1;
-
-            return (
-              <button
-                key={driver.id}
-                type="button"
-                onClick={() => onDriverClick(driver.id)}
-                className="flex items-center gap-4 px-4 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
-              >
-                {/* Position */}
-                <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
-                  {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
-                </div>
-
-                {/* Avatar */}
-                <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
-                  <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
-                </div>
-
-                {/* Info */}
-                <div className="flex-1 min-w-0">
-                  <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
-                    {driver.name}
-                  </p>
-                  <div className="flex items-center gap-2 text-xs text-gray-500">
-                    <Flag className="w-3 h-3" />
-                    {driver.nationality}
-                    {categoryConfig && (
-                      <span className={categoryConfig.color}>{categoryConfig.label}</span>
-                    )}
-                    <span className={levelConfig?.color}>{levelConfig?.label}</span>
-                  </div>
-                </div>
-
-                {/* Stats */}
-                <div className="flex items-center gap-4 text-sm">
-                  <div className="text-center">
-                    <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
-                    <p className="text-[10px] text-gray-500">Rating</p>
-                  </div>
-                  <div className="text-center">
-                    <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
-                    <p className="text-[10px] text-gray-500">Wins</p>
-                  </div>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// RECENT ACTIVITY COMPONENT
-// ============================================================================
-
-interface RecentActivityProps {
-  drivers: DriverLeaderboardItemViewModel[];
-  onDriverClick: (id: string) => void;
-}
-
-function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
-  const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
-
-  return (
-    <div className="mb-10">
-      <div className="flex items-center gap-3 mb-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
-          <Activity className="w-5 h-5 text-performance-green" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-white">Active Drivers</h2>
-          <p className="text-xs text-gray-500">Currently competing in leagues</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
-        {activeDrivers.map((driver) => {
-          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
-          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
-          return (
-            <button
-              key={driver.id}
-              type="button"
-              onClick={() => onDriverClick(driver.id)}
-              className="p-3 rounded-xl bg-iron-gray/40 border border-charcoal-outline hover:border-performance-green/40 transition-all group text-center"
-            >
-              <div className="relative w-12 h-12 mx-auto rounded-full overflow-hidden border-2 border-charcoal-outline mb-2">
-                <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
-                <div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-performance-green border-2 border-iron-gray" />
-              </div>
-              <p className="text-sm font-medium text-white truncate group-hover:text-performance-green transition-colors">
-                {driver.name}
-              </p>
-              <div className="flex items-center justify-center gap-1 text-xs">
-                {categoryConfig && (
-                  <span className={categoryConfig.color}>{categoryConfig.label}</span>
-                )}
-                <span className={levelConfig?.color}>{levelConfig?.label}</span>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// MAIN PAGE COMPONENT
-// ============================================================================
-
-export default function DriversPage() {
-  const router = useRouter();
-  const { data: viewModel, isLoading: loading } = useDriverLeaderboard();
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const drivers = viewModel?.drivers || [];
-  const totalRaces = viewModel?.totalRaces || 0;
-  const totalWins = viewModel?.totalWins || 0;
-  const activeCount = viewModel?.activeCount || 0;
-
-  const handleDriverClick = (driverId: string) => {
-    router.push(`/drivers/${driverId}`);
-  };
-
-  // Filter by search
-  const filteredDrivers = drivers.filter((driver) => {
-    if (!searchQuery) return true;
-    return (
-      driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-  });
-
-
-  // Featured drivers (top 4)
-  const featuredDrivers = filteredDrivers.slice(0, 4);
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading drivers...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Hero Section */}
-      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden">
-        {/* Background decoration */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
-        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />
-
-        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
-          <div className="max-w-2xl">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
-                <Users className="w-6 h-6 text-primary-blue" />
-              </div>
-              <Heading level={1} className="text-3xl lg:text-4xl">
-                Drivers
-              </Heading>
-            </div>
-            <p className="text-gray-400 text-lg leading-relaxed mb-6">
-              Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
-            </p>
-
-            {/* Quick Stats */}
-            <div className="flex flex-wrap gap-6">
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-primary-blue" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{drivers.length}</span> drivers
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{activeCount}</span> active
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-yellow-400" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{totalWins.toLocaleString()}</span> total wins
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{totalRaces.toLocaleString()}</span> races
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* CTA */}
-          <div className="flex flex-col gap-4">
-            <Button
-              variant="primary"
-              onClick={() => router.push('/leaderboards/drivers')}
-              className="flex items-center gap-2 px-6 py-3"
-            >
-              <Trophy className="w-5 h-5" />
-              View Leaderboard
-            </Button>
-            <p className="text-xs text-gray-500 text-center">See full driver rankings</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Search */}
-      <div className="mb-8">
-        <div className="relative max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-          <Input
-            type="text"
-            placeholder="Search drivers by name or nationality..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-11"
-          />
-        </div>
-      </div>
-
-      {/* Featured Drivers */}
-      {!searchQuery && (
-        <div className="mb-10">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-400/10 border border-yellow-400/20">
-              <Crown className="w-5 h-5 text-yellow-400" />
-            </div>
-            <div>
-              <h2 className="text-lg font-semibold text-white">Featured Drivers</h2>
-              <p className="text-xs text-gray-500">Top performers on the grid</p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {featuredDrivers.map((driver, index) => (
-              <FeaturedDriverCard
-                key={driver.id}
-                driver={driver}
-                position={index + 1}
-                onClick={() => handleDriverClick(driver.id)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Active Drivers */}
-      {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={handleDriverClick} />}
-
-      {/* Skill Distribution */}
-      {!searchQuery && <SkillDistribution drivers={drivers} />}
-
-      {/* Category Distribution */}
-      {!searchQuery && <CategoryDistribution drivers={drivers} />}
-
-      {/* Leaderboard Preview */}
-      <LeaderboardPreview drivers={filteredDrivers} onDriverClick={handleDriverClick} />
-
-      {/* Empty State */}
-      {filteredDrivers.length === 0 && (
-        <Card className="text-center py-12">
-          <div className="flex flex-col items-center gap-4">
-            <Search className="w-10 h-10 text-gray-600" />
-            <p className="text-gray-400">No drivers found matching "{searchQuery}"</p>
-            <Button variant="secondary" onClick={() => setSearchQuery('')}>
-              Clear search
-            </Button>
-          </div>
-        </Card>
-      )}
-    </div>
-  );
-}
+export default DriversInteractive;

apps/website/app/leaderboards/LeaderboardsInteractive.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import LeaderboardsTemplate from '@/templates/LeaderboardsTemplate';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+interface LeaderboardsInteractiveProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  teams: TeamSummaryViewModel[];
+}
+
+export default function LeaderboardsInteractive({ drivers, teams }: LeaderboardsInteractiveProps) {
+  const router = useRouter();
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const handleTeamClick = (teamId: string) => {
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleNavigateToDrivers = () => {
+    router.push('/leaderboards/drivers');
+  };
+
+  const handleNavigateToTeams = () => {
+    router.push('/teams/leaderboard');
+  };
+
+  return (
+    <LeaderboardsTemplate
+      drivers={drivers}
+      teams={teams}
+      onDriverClick={handleDriverClick}
+      onTeamClick={handleTeamClick}
+      onNavigateToDrivers={handleNavigateToDrivers}
+      onNavigateToTeams={handleNavigateToTeams}
+    />
+  );
+}

apps/website/app/leaderboards/LeaderboardsStatic.tsx

@@ -0,0 +1,33 @@
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import LeaderboardsInteractive from './LeaderboardsInteractive';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
+// ============================================================================
+
+export default async function LeaderboardsStatic() {
+  // Create services for server-side data fetching
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const driverService = serviceFactory.createDriverService();
+  const teamService = serviceFactory.createTeamService();
+
+  // Fetch data server-side
+  let drivers: DriverLeaderboardItemViewModel[] = [];
+  let teams: TeamSummaryViewModel[] = [];
+
+  try {
+    const driversViewModel = await driverService.getDriverLeaderboard();
+    drivers = driversViewModel.drivers;
+    teams = await teamService.getAllTeams();
+  } catch (error) {
+    console.error('Failed to load leaderboard data:', error);
+    drivers = [];
+    teams = [];
+  }
+
+  // Pass data to Interactive wrapper which handles client-side interactions
+  return <LeaderboardsInteractive drivers={drivers} teams={teams} />;
+}

apps/website/app/leaderboards/drivers/DriverRankingsInteractive.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import DriverRankingsTemplate from '@/templates/DriverRankingsTemplate';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
+
+interface DriverRankingsInteractiveProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export default function DriverRankingsInteractive({ drivers }: DriverRankingsInteractiveProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rank');
+  const [showFilters, setShowFilters] = useState(false);
+
+  const handleDriverClick = (driverId: string) => {
+    if (driverId.startsWith('demo-')) return;
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const handleBackToLeaderboards = () => {
+    router.push('/leaderboards');
+  };
+
+  return (
+    <DriverRankingsTemplate
+      drivers={drivers}
+      searchQuery={searchQuery}
+      selectedSkill={selectedSkill}
+      sortBy={sortBy}
+      showFilters={showFilters}
+      onSearchChange={setSearchQuery}
+      onSkillChange={setSelectedSkill}
+      onSortChange={setSortBy}
+      onToggleFilters={() => setShowFilters(!showFilters)}
+      onDriverClick={handleDriverClick}
+      onBackToLeaderboards={handleBackToLeaderboards}
+    />
+  );
+}

apps/website/app/leaderboards/drivers/DriverRankingsStatic.tsx

@@ -0,0 +1,28 @@
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import DriverRankingsInteractive from './DriverRankingsInteractive';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+// ============================================================================
+// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
+// ============================================================================
+
+export default async function DriverRankingsStatic() {
+  // Create services for server-side data fetching
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const driverService = serviceFactory.createDriverService();
+
+  // Fetch data server-side
+  let drivers: DriverLeaderboardItemViewModel[] = [];
+
+  try {
+    const driversViewModel = await driverService.getDriverLeaderboard();
+    drivers = driversViewModel.drivers;
+  } catch (error) {
+    console.error('Failed to load driver rankings:', error);
+    drivers = [];
+  }
+
+  // Pass data to Interactive wrapper which handles client-side interactions
+  return <DriverRankingsInteractive drivers={drivers} />;
+}

apps/website/app/leaderboards/drivers/page.tsx

@@ -1,471 +1,9 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Trophy,
-  Medal,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Search,
-  Filter,
-  Flag,
-  ArrowLeft,
-  Hash,
-  Percent,
-} from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
-import { useDriverLeaderboard } from '@/hooks/useDriverService';
-import Image from 'next/image';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-
-type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
-
-type DriverListItem = DriverLeaderboardItemViewModel;
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: SkillLevel;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-}[] = [
-  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
-  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
-  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
-  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
-];
-
-// ============================================================================
-// SORT OPTIONS
-// ============================================================================
-
-const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
-  { id: 'rank', label: 'Rank', icon: Hash },
-  { id: 'rating', label: 'Rating', icon: Star },
-  { id: 'wins', label: 'Wins', icon: Trophy },
-  { id: 'podiums', label: 'Podiums', icon: Medal },
-  { id: 'winRate', label: 'Win Rate', icon: Percent },
-];
-
-// ============================================================================
-// TOP 3 PODIUM COMPONENT
-// ============================================================================
-
-interface TopThreePodiumProps {
-  drivers: DriverListItem[];
-  onDriverClick: (id: string) => void;
-}
-
-function TopThreePodium({ drivers, onDriverClick }: TopThreePodiumProps) {
-  if (drivers.length < 3) return null;
-
-  const top3 = drivers.slice(0, 3) as [DriverListItem, DriverListItem, DriverListItem];
-
-  const podiumOrder: [DriverListItem, DriverListItem, DriverListItem] = [
-    top3[1],
-    top3[0],
-    top3[2],
-  ]; // 2nd, 1st, 3rd
-  const podiumHeights = ['h-32', 'h-40', 'h-24'];
-  const podiumColors = [
-    'from-gray-400/20 to-gray-500/10 border-gray-400/40',
-    'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
-    'from-amber-600/20 to-amber-700/10 border-amber-600/40',
-  ];
-  const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
-  const positions = [2, 1, 3];
-
-  return (
-    <div className="mb-10">
-      <div className="flex items-end justify-center gap-4 lg:gap-8">
-        {podiumOrder.map((driver, index) => {
-          const position = positions[index];
-
-          return (
-            <button
-              key={driver.id}
-              type="button"
-              onClick={() => onDriverClick(driver.id)}
-              className="flex flex-col items-center group"
-            >
-              {/* Driver Avatar & Info */}
-              <div className="relative mb-4">
-                {/* Crown for 1st place */}
-                {position === 1 && (
-                  <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
-                    <Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
-                  </div>
-                )}
-
-                {/* Avatar */}
-                <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
-                  <Image
-                    src={driver.avatarUrl}
-                    alt={driver.name}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-
-                {/* Position badge */}
-                <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
-                  {position}
-                </div>
-              </div>
-
-              {/* Driver Name */}
-              <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
-                {driver.name}
-              </p>
-
-              {/* Rating */}
-              <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
-                {driver.rating.toLocaleString()}
-              </p>
-
-              {/* Stats */}
-              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
-                <span className="flex items-center gap-1">
-                  <Trophy className="w-3 h-3 text-performance-green" />
-                  {driver.wins}
-                </span>
-                <span>•</span>
-                <span className="flex items-center gap-1">
-                  <Medal className="w-3 h-3 text-warning-amber" />
-                  {driver.podiums}
-                </span>
-              </div>
-
-              {/* Podium Stand */}
-              <div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
-                <span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
-                  {position}
-                </span>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+import DriverRankingsStatic from './DriverRankingsStatic';
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
 export default function DriverLeaderboardPage() {
-  const router = useRouter();
-  const { data: leaderboardData, isLoading: loading } = useDriverLeaderboard();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
-  const [sortBy, setSortBy] = useState<SortBy>('rank');
-  const [showFilters, setShowFilters] = useState(false);
-
-  const drivers = leaderboardData?.drivers || [];
-
-  const filteredDrivers = drivers.filter((driver) => {
-    const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
-    return matchesSearch && matchesSkill;
-  });
-
-  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
-    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
-    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
-
-    switch (sortBy) {
-      case 'rank':
-        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
-      case 'rating':
-        return b.rating - a.rating;
-      case 'wins':
-        return b.wins - a.wins;
-      case 'podiums':
-        return b.podiums - a.podiums;
-      case 'winRate': {
-        const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
-        const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
-        return bRate - aRate;
-      }
-      default:
-        return 0;
-    }
-  });
-
-  const handleDriverClick = (driverId: string) => {
-    if (driverId.startsWith('demo-')) return;
-    router.push(`/drivers/${driverId}`);
-  };
-
-  const getMedalColor = (position: number) => {
-    switch (position) {
-      case 1: return 'text-yellow-400';
-      case 2: return 'text-gray-300';
-      case 3: return 'text-amber-600';
-      default: return 'text-gray-500';
-    }
-  };
-
-  const getMedalBg = (position: number) => {
-    switch (position) {
-      case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
-      case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
-      case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
-      default: return 'bg-iron-gray/50 border-charcoal-outline';
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading driver rankings...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Header */}
-      <div className="mb-8">
-        <Button
-          variant="secondary"
-          onClick={() => router.push('/leaderboards')}
-          className="flex items-center gap-2 mb-6"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          Back to Leaderboards
-        </Button>
-
-        <div className="flex items-center gap-4 mb-2">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
-            <Trophy className="w-7 h-7 text-primary-blue" />
-          </div>
-          <div>
-            <Heading level={1} className="text-3xl lg:text-4xl">
-              Driver Leaderboard
-            </Heading>
-            <p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Top 3 Podium */}
-      {!searchQuery && sortBy === 'rank' && <TopThreePodium drivers={sortedDrivers} onDriverClick={handleDriverClick} />}
-
-      {/* Filters */}
-      <div className="mb-6 space-y-4">
-        <div className="flex flex-col lg:flex-row gap-4">
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search drivers by name or nationality..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            className="lg:hidden flex items-center gap-2"
-          >
-            <Filter className="w-4 h-4" />
-            Filters
-          </Button>
-        </div>
-
-        <div className={`flex flex-wrap gap-2 ${showFilters ? 'block' : 'hidden lg:flex'}`}>
-          <button
-            type="button"
-            onClick={() => setSelectedSkill('all')}
-            className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-              selectedSkill === 'all'
-                ? 'bg-primary-blue text-white'
-                : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-            }`}
-          >
-            All Levels
-          </button>
-          {SKILL_LEVELS.map((level) => {
-            const LevelIcon = level.icon;
-            return (
-              <button
-                key={level.id}
-                type="button"
-                onClick={() => setSelectedSkill(level.id)}
-                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                  selectedSkill === level.id
-                    ? `${level.bgColor} ${level.color} border ${level.borderColor}`
-                    : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-                }`}
-              >
-                <LevelIcon className="w-4 h-4" />
-                {level.label}
-              </button>
-            );
-          })}
-        </div>
-
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">Sort by:</span>
-          <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-            {SORT_OPTIONS.map((option) => (
-              <button
-                key={option.id}
-                type="button"
-                onClick={() => setSortBy(option.id)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  sortBy === option.id
-                    ? 'bg-primary-blue text-white'
-                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
-                }`}
-              >
-                <option.icon className="w-3.5 h-3.5" />
-                {option.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Leaderboard Table */}
-      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-        {/* Table Header */}
-        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
-          <div className="col-span-1 text-center">Rank</div>
-          <div className="col-span-5 lg:col-span-4">Driver</div>
-          <div className="col-span-2 text-center hidden md:block">Races</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
-          <div className="col-span-1 text-center hidden lg:block">Podiums</div>
-          <div className="col-span-2 text-center">Win Rate</div>
-        </div>
-
-        {/* Table Body */}
-        <div className="divide-y divide-charcoal-outline/50">
-          {sortedDrivers.map((driver, index) => {
-            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
-            const LevelIcon = levelConfig?.icon || Shield;
-            const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
-            const position = index + 1;
-
-            return (
-              <button
-                key={driver.id}
-                type="button"
-                onClick={() => handleDriverClick(driver.id)}
-                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
-              >
-                {/* Position */}
-                <div className="col-span-1 flex items-center justify-center">
-                  <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
-                    {position <= 3 ? <Medal className="w-4 h-4" /> : position}
-                  </div>
-                </div>
-
-                {/* Driver Info */}
-                <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
-                  <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
-                    <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
-                  </div>
-                  <div className="min-w-0">
-                    <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
-                      {driver.name}
-                    </p>
-                    <div className="flex items-center gap-2 text-xs text-gray-500">
-                      <span className="flex items-center gap-1">
-                        <Flag className="w-3 h-3" />
-                        {driver.nationality}
-                      </span>
-                      <span className={`flex items-center gap-1 ${levelConfig?.color}`}>
-                        <LevelIcon className="w-3 h-3" />
-                        {levelConfig?.label}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Races */}
-                <div className="col-span-2 items-center justify-center hidden md:flex">
-                  <span className="text-gray-400">{driver.racesCompleted}</span>
-                </div>
-
-                {/* Rating */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
-                    {driver.rating.toLocaleString()}
-                  </span>
-                </div>
-
-                {/* Wins */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
-                    {driver.wins}
-                  </span>
-                </div>
-
-                {/* Podiums */}
-                <div className="col-span-1 items-center justify-center hidden lg:flex">
-                  <span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
-                    {driver.podiums}
-                  </span>
-                </div>
-
-                {/* Win Rate */}
-                <div className="col-span-2 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
-                    {winRate}%
-                  </span>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Empty State */}
-        {sortedDrivers.length === 0 && (
-          <div className="py-16 text-center">
-            <Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-            <p className="text-gray-400 mb-2">No drivers found</p>
-            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setSearchQuery('');
-                setSelectedSkill('all');
-              }}
-              className="mt-4"
-            >
-              Clear Filters
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+  return <DriverRankingsStatic />;
 }

apps/website/app/leaderboards/page.tsx

@@ -1,126 +1,9 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Trophy, Users, Award } from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
-import DriverLeaderboardPreview from '@/components/leaderboards/DriverLeaderboardPreview';
-import TeamLeaderboardPreview from '@/components/leaderboards/TeamLeaderboardPreview';
-import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
+import LeaderboardsStatic from './LeaderboardsStatic';
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
 export default function LeaderboardsPage() {
-  const router = useRouter();
-  const { driverService, teamService } = useServices();
-  const [drivers, setDrivers] = useState<DriverLeaderboardItemViewModel[]>([]);
-  const [teams, setTeams] = useState<TeamSummaryViewModel[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        const driversViewModel = await driverService.getDriverLeaderboard();
-        const teams = await teamService.getAllTeams();
-
-        setDrivers(driversViewModel.drivers);
-        setTeams(teams);
-      } catch (error) {
-        console.error('Failed to load leaderboard data:', error);
-        setDrivers([]);
-        setTeams([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    void load();
-  }, []);
-
-  const handleDriverClick = (driverId: string) => {
-    router.push(`/drivers/${driverId}`);
-  };
-
-  const handleTeamClick = (teamId: string) => {
-    router.push(`/teams/${teamId}`);
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading leaderboards...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Hero Section */}
-      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
-        {/* Background decoration */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
-        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />
-
-        <div className="relative z-10">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
-              <Award className="w-7 h-7 text-yellow-400" />
-            </div>
-            <div>
-              <Heading level={1} className="text-3xl lg:text-4xl">
-                Leaderboards
-              </Heading>
-              <p className="text-gray-400">Where champions rise and legends are made</p>
-            </div>
-          </div>
-
-          <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
-            Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
-          </p>
-
-          {/* Quick Nav */}
-          <div className="flex flex-wrap gap-3">
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/leaderboards/drivers')}
-              className="flex items-center gap-2"
-            >
-              <Trophy className="w-4 h-4 text-primary-blue" />
-              Driver Rankings
-            </Button>
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/teams/leaderboard')}
-              className="flex items-center gap-2"
-            >
-              <Users className="w-4 h-4 text-purple-400" />
-              Team Rankings
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Leaderboard Grids */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <DriverLeaderboardPreview drivers={drivers} onDriverClick={handleDriverClick} />
-        <TeamLeaderboardPreview teams={teams} onTeamClick={handleTeamClick} />
-      </div>
-    </div>
-  );
+  return <LeaderboardsStatic />;
 }

apps/website/app/leagues/LeaguesInteractive.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+
+export default function LeaguesInteractive() {
+  const router = useRouter();
+  const [realLeagues, setRealLeagues] = useState<LeagueSummaryViewModel[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const { leagueService } = useServices();
+
+  const loadLeagues = useCallback(async () => {
+    try {
+      const leagues = await leagueService.getAllLeagues();
+      setRealLeagues(leagues);
+    } catch (error) {
+      console.error('Failed to load leagues:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [leagueService]);
+
+  useEffect(() => {
+    void loadLeagues();
+  }, [loadLeagues]);
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handleCreateLeagueClick = () => {
+    router.push('/leagues/create');
+  };
+
+  return (
+    <LeaguesTemplate
+      leagues={realLeagues}
+      loading={loading}
+      onLeagueClick={handleLeagueClick}
+      onCreateLeagueClick={handleCreateLeagueClick}
+    />
+  );
+}

apps/website/app/leagues/LeaguesStatic.tsx

@@ -0,0 +1,32 @@
+import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+
+export default async function LeaguesStatic() {
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const leagueService = serviceFactory.createLeagueService();
+  
+  let leagues: LeagueSummaryViewModel[] = [];
+  let loading = false;
+
+  try {
+    loading = true;
+    leagues = await leagueService.getAllLeagues();
+  } catch (error) {
+    console.error('Failed to load leagues:', error);
+  } finally {
+    loading = false;
+  }
+
+  // Server components can't have event handlers, so we provide empty functions
+  // The Interactive wrapper will add the actual handlers
+  return (
+    <LeaguesTemplate
+      leagues={leagues}
+      loading={loading}
+      onLeagueClick={() => {}}
+      onCreateLeagueClick={() => {}}
+    />
+  );
+}

apps/website/app/leagues/[id]/LeagueDetailInteractive.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
+import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+import EndRaceModal from '@/components/leagues/EndRaceModal';
+
+export default function LeagueDetailInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const leagueId = params.id as string;
+  const isSponsor = useSponsorMode();
+  const { leagueService, leagueMembershipService, raceService } = useServices();
+
+  const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
+
+  const currentDriverId = useEffectiveDriverId();
+  const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
+
+  const loadLeagueData = async () => {
+    try {
+      const viewModelData = await leagueService.getLeagueDetailPageData(leagueId);
+
+      if (!viewModelData) {
+        setError('League not found');
+        setLoading(false);
+        return;
+      }
+
+      setViewModel(viewModelData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load league');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadLeagueData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leagueId]);
+
+  const handleMembershipChange = () => {
+    loadLeagueData();
+  };
+
+  const handleEndRaceModalOpen = (raceId: string) => {
+    setEndRaceModalRaceId(raceId);
+  };
+
+  const handleLiveRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleBackToLeagues = () => {
+    router.push('/leagues');
+  };
+
+  const handleEndRaceConfirm = async () => {
+    if (!endRaceModalRaceId) return;
+    
+    try {
+      await raceService.completeRace(endRaceModalRaceId);
+      await loadLeagueData();
+      setEndRaceModalRaceId(null);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to complete race');
+    }
+  };
+
+  const handleEndRaceCancel = () => {
+    setEndRaceModalRaceId(null);
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">Loading league...</div>
+    );
+  }
+
+  if (error || !viewModel) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error || 'League not found'}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <LeagueDetailTemplate
+        viewModel={viewModel}
+        leagueId={leagueId}
+        isSponsor={isSponsor}
+        membership={membership}
+        currentDriverId={currentDriverId}
+        onMembershipChange={handleMembershipChange}
+        onEndRaceModalOpen={handleEndRaceModalOpen}
+        onLiveRaceClick={handleLiveRaceClick}
+        onBackToLeagues={handleBackToLeagues}
+      >
+        {/* End Race Modal */}
+        {endRaceModalRaceId && viewModel && (() => {
+          const race = viewModel.runningRaces.find(r => r.id === endRaceModalRaceId);
+          return race ? (
+            <EndRaceModal
+              raceId={race.id}
+              raceName={race.name}
+              onConfirm={handleEndRaceConfirm}
+              onCancel={handleEndRaceCancel}
+            />
+          ) : null;
+        })()}
+      </LeagueDetailTemplate>
+    </>
+  );
+}

apps/website/app/leagues/[id]/LeagueDetailStatic.tsx

@@ -0,0 +1,60 @@
+import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+
+interface LeagueDetailStaticProps {
+  leagueId: string;
+}
+
+export default async function LeagueDetailStatic({ leagueId }: LeagueDetailStaticProps) {
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const leagueService = serviceFactory.createLeagueService();
+  
+  let viewModel: LeagueDetailPageViewModel | null = null;
+  let loading = false;
+  let error: string | null = null;
+
+  try {
+    loading = true;
+    viewModel = await leagueService.getLeagueDetailPageData(leagueId);
+
+    if (!viewModel) {
+      error = 'League not found';
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Failed to load league';
+  } finally {
+    loading = false;
+  }
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">Loading league...</div>
+    );
+  }
+
+  if (error || !viewModel) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error || 'League not found'}
+      </div>
+    );
+  }
+
+  // Server components can't have event handlers, so we provide empty functions
+  // The Interactive wrapper will add the actual handlers
+  return (
+    <LeagueDetailTemplate
+      viewModel={viewModel}
+      leagueId={leagueId}
+      isSponsor={false}
+      membership={null}
+      currentDriverId={null}
+      onMembershipChange={() => {}}
+      onEndRaceModalOpen={() => {}}
+      onLiveRaceClick={() => {}}
+      onBackToLeagues={() => {}}
+    />
+  );
+}

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

@@ -1,496 +1,3 @@
-'use client';
+import LeagueDetailInteractive from './LeagueDetailInteractive';
 
-import DriverIdentity from '@/components/drivers/DriverIdentity';
-import EndRaceModal from '@/components/leagues/EndRaceModal';
-import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
-import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
-import SponsorInsightsCard, {
-  MetricBuilders,
-  SlotTemplates,
-  useSponsorMode,
-  type SponsorMetric,
-} from '@/components/sponsors/SponsorInsightsCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
-import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-
-export default function LeagueDetailPage() {
-  const router = useRouter();
-  const params = useParams();
-  const leagueId = params.id as string;
-  const isSponsor = useSponsorMode();
-  const { leagueService, leagueMembershipService, raceService } = useServices();
-
-  const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
-
-  const currentDriverId = useEffectiveDriverId();
-  const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-
-  // Build metrics for SponsorInsightsCard
-  const leagueMetrics: SponsorMetric[] = useMemo(() => {
-    if (!viewModel) return [];
-    return [
-      MetricBuilders.views(viewModel.sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
-      MetricBuilders.engagement(viewModel.sponsorInsights.engagementRate),
-      MetricBuilders.reach(viewModel.sponsorInsights.estimatedReach),
-      MetricBuilders.sof(viewModel.averageSOF ?? '—'),
-    ];
-  }, [viewModel]);
-
-  const loadLeagueData = async () => {
-    try {
-      const viewModelData = await leagueService.getLeagueDetailPageData(leagueId);
-
-      if (!viewModelData) {
-        setError('League not found');
-        setLoading(false);
-        return;
-      }
-
-      setViewModel(viewModelData);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load league');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadLeagueData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leagueId]);
-
-  const handleMembershipChange = () => {
-    loadLeagueData();
-  };
-
-  // Note: driver summaries are now handled by the ViewModel
-
-  return loading ? (
-    <div className="text-center text-gray-400">Loading league...</div>
-  ) : error || !viewModel ? (
-    <Card className="text-center py-12">
-      <div className="text-warning-amber mb-4">
-        {error || 'League not found'}
-      </div>
-      <Button
-        variant="secondary"
-        onClick={() => router.push('/leagues')}
-      >
-        Back to Leagues
-      </Button>
-    </Card>
-  ) : (
-    <>
-      {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
-      {isSponsor && viewModel && (
-        <SponsorInsightsCard
-          entityType="league"
-          entityId={leagueId}
-          entityName={viewModel.name}
-          tier={viewModel.sponsorInsights.tier}
-          metrics={leagueMetrics}
-          slots={SlotTemplates.league(
-            viewModel.sponsorInsights.mainSponsorAvailable,
-            viewModel.sponsorInsights.secondarySlotsAvailable,
-            viewModel.sponsorInsights.mainSponsorPrice,
-            viewModel.sponsorInsights.secondaryPrice
-          )}
-          trustScore={viewModel.sponsorInsights.trustScore}
-          discordMembers={viewModel.sponsorInsights.discordMembers}
-          monthlyActivity={viewModel.sponsorInsights.monthlyActivity}
-          additionalStats={{
-            label: 'League Stats',
-            items: [
-              { label: 'Total Races', value: viewModel.completedRacesCount },
-              { label: 'Active Members', value: viewModel.memberships.length },
-              { label: 'Total Impressions', value: viewModel.sponsorInsights.totalImpressions },
-            ],
-          }}
-        />
-      )}
-
-      {/* Live Race Card - Prominently show running races */}
-      {viewModel && viewModel.runningRaces.length > 0 && (
-        <Card className="border-2 border-performance-green/50 bg-gradient-to-r from-performance-green/10 to-performance-green/5 mb-6">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="w-3 h-3 bg-performance-green rounded-full animate-pulse"></div>
-            <h2 className="text-xl font-bold text-white">🏁 Live Race in Progress</h2>
-          </div>
-
-          <div className="space-y-3">
-            {viewModel.runningRaces.map((race) => (
-              <div
-                key={race.id}
-                className="p-4 rounded-lg bg-deep-graphite border border-performance-green/30"
-              >
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
-                  <div className="flex items-center gap-3">
-                    <div className="px-3 py-1 bg-performance-green/20 border border-performance-green/40 rounded-full">
-                      <span className="text-sm font-semibold text-performance-green">LIVE</span>
-                    </div>
-                    <h3 className="text-lg font-semibold text-white">
-                      {race.name}
-                    </h3>
-                  </div>
-                  <div className="flex flex-col sm:flex-row gap-2">
-                    <Button
-                      variant="primary"
-                      onClick={() => router.push(`/races/${race.id}`)}
-                      className="bg-performance-green hover:bg-performance-green/80 text-white"
-                    >
-                      View Live Race
-                    </Button>
-                    {membership?.role === 'admin' && (
-                      <Button
-                        variant="secondary"
-                        onClick={() => setEndRaceModalRaceId(race.id)}
-                        className="border-performance-green/50 text-performance-green hover:bg-performance-green/10"
-                      >
-                        End Race & Process Results
-                      </Button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-400">
-                  <div className="flex items-center gap-2">
-                    <Calendar className="w-4 h-4" />
-                    <span>Started {new Date(race.date).toLocaleDateString()}</span>
-                  </div>
-                  {race.registeredCount && (
-                    <div className="flex items-center gap-2">
-                      <Users className="w-4 h-4" />
-                      <span>{race.registeredCount} drivers registered</span>
-                    </div>
-                  )}
-                  {race.strengthOfField && (
-                    <div className="flex items-center gap-2">
-                      <Trophy className="w-4 h-4" />
-                      <span>SOF: {race.strengthOfField}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </Card>
-      )}
-
-      {/* Action Card */}
-      {!membership && !isSponsor && (
-        <Card className="mb-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="text-lg font-semibold text-white mb-2">Join This League</h3>
-              <p className="text-gray-400 text-sm">Become a member to participate in races and track your progress</p>
-            </div>
-            <div className="w-48">
-              <JoinLeagueButton
-                leagueId={leagueId}
-                onMembershipChange={handleMembershipChange}
-              />
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* League Overview - Activity Center with Info Sidebar */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Center - Activity Feed */}
-        <div className="lg:col-span-2 space-y-6">
-          <Card>
-            <h2 className="text-xl font-semibold text-white mb-6">Recent Activity</h2>
-            <LeagueActivityFeed leagueId={leagueId} limit={20} />
-          </Card>
-        </div>
-
-        {/* Right Sidebar - League Info */}
-        <div className="space-y-6">
-          {/* League Info - Combined */}
-          <Card>
-            <h3 className="text-lg font-semibold text-white mb-4">About</h3>
-            
-            {/* Stats Grid */}
-            <div className="grid grid-cols-3 gap-3 mb-4">
-              <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-                <div className="text-xl font-bold text-white">{viewModel.memberships.length}</div>
-                <div className="text-xs text-gray-500">Members</div>
-              </div>
-              <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-                <div className="text-xl font-bold text-white">{viewModel.completedRacesCount}</div>
-                <div className="text-xs text-gray-500">Races</div>
-              </div>
-              <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-                <div className="text-xl font-bold text-warning-amber">{viewModel.averageSOF ?? '—'}</div>
-                <div className="text-xs text-gray-500">Avg SOF</div>
-              </div>
-            </div>
-
-            {/* Details */}
-            <div className="space-y-2 text-sm">
-              <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
-                <span className="text-gray-500">Structure</span>
-                <span className="text-white">Solo • {viewModel.settings.maxDrivers ?? 32} max</span>
-              </div>
-              <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
-                <span className="text-gray-500">Scoring</span>
-                <span className="text-white">{viewModel.scoringConfig?.scoringPresetName ?? 'Standard'}</span>
-              </div>
-              <div className="flex items-center justify-between py-1.5">
-                <span className="text-gray-500">Created</span>
-                <span className="text-white">
-                  {new Date(viewModel.createdAt).toLocaleDateString('en-US', {
-                    month: 'short',
-                    year: 'numeric'
-                  })}
-                </span>
-              </div>
-            </div>
-
-            {viewModel.socialLinks && (
-              <div className="mt-4 pt-4 border-t border-charcoal-outline">
-                <div className="flex flex-wrap gap-2">
-                  {viewModel.socialLinks.discordUrl && (
-                    <a
-                      href={viewModel.socialLinks.discordUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-full border border-primary-blue/40 bg-primary-blue/10 px-2 py-1 text-xs text-primary-blue hover:bg-primary-blue/20 transition-colors"
-                    >
-                      Discord
-                    </a>
-                  )}
-                  {viewModel.socialLinks.youtubeUrl && (
-                    <a
-                      href={viewModel.socialLinks.youtubeUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-full border border-red-500/40 bg-red-500/10 px-2 py-1 text-xs text-red-400 hover:bg-red-500/20 transition-colors"
-                    >
-                      YouTube
-                    </a>
-                  )}
-                  {viewModel.socialLinks.websiteUrl && (
-                    <a
-                      href={viewModel.socialLinks.websiteUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-full border border-charcoal-outline bg-iron-gray/70 px-2 py-1 text-xs text-gray-100 hover:bg-iron-gray transition-colors"
-                    >
-                      Website
-                    </a>
-                  )}
-                </div>
-              </div>
-            )}
-          </Card>
-
-          {/* Sponsors Section - Show sponsor logos */}
-          {viewModel.sponsors.length > 0 && (
-            <Card>
-              <h3 className="text-lg font-semibold text-white mb-4">
-                {viewModel.sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
-              </h3>
-              <div className="space-y-3">
-                {/* Main Sponsor - Featured prominently */}
-                {viewModel.sponsors.filter(s => s.tier === 'main').map(sponsor => (
-                  <div
-                    key={sponsor.id}
-                    className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30"
-                  >
-                    <div className="flex items-center gap-3">
-                      {sponsor.logoUrl ? (
-                        <div className="w-12 h-12 rounded-lg bg-white flex items-center justify-center overflow-hidden">
-                          <img
-                            src={sponsor.logoUrl}
-                            alt={sponsor.name}
-                            className="w-10 h-10 object-contain"
-                          />
-                        </div>
-                      ) : (
-                        <div className="w-12 h-12 rounded-lg bg-yellow-500/20 flex items-center justify-center">
-                          <Trophy className="w-6 h-6 text-yellow-400" />
-                        </div>
-                      )}
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2">
-                          <span className="font-semibold text-white truncate">{sponsor.name}</span>
-                          <span className="px-1.5 py-0.5 rounded text-[10px] bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
-                            Main
-                          </span>
-                        </div>
-                        {sponsor.tagline && (
-                          <p className="text-xs text-gray-400 truncate mt-0.5">{sponsor.tagline}</p>
-                        )}
-                      </div>
-                      {sponsor.websiteUrl && (
-                        <a
-                          href={sponsor.websiteUrl}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="p-1.5 rounded-lg bg-iron-gray hover:bg-charcoal-outline transition-colors"
-                        >
-                          <ExternalLink className="w-4 h-4 text-gray-400" />
-                        </a>
-                      )}
-                    </div>
-                  </div>
-                ))}
-
-                {/* Secondary Sponsors - Smaller display */}
-                {viewModel.sponsors.filter(s => s.tier === 'secondary').length > 0 && (
-                  <div className="grid grid-cols-2 gap-2">
-                    {viewModel.sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
-                      <div
-                        key={sponsor.id}
-                        className="p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline"
-                      >
-                        <div className="flex items-center gap-2">
-                          {sponsor.logoUrl ? (
-                            <div className="w-8 h-8 rounded bg-white flex items-center justify-center overflow-hidden flex-shrink-0">
-                              <img
-                                src={sponsor.logoUrl}
-                                alt={sponsor.name}
-                                className="w-6 h-6 object-contain"
-                              />
-                            </div>
-                          ) : (
-                            <div className="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center flex-shrink-0">
-                              <Star className="w-4 h-4 text-purple-400" />
-                            </div>
-                          )}
-                          <div className="flex-1 min-w-0">
-                            <span className="text-sm text-white truncate block">{sponsor.name}</span>
-                          </div>
-                          {sponsor.websiteUrl && (
-                            <a
-                              href={sponsor.websiteUrl}
-                              target="_blank"
-                              rel="noreferrer"
-                              className="p-1 rounded hover:bg-charcoal-outline transition-colors"
-                            >
-                              <ExternalLink className="w-3 h-3 text-gray-500" />
-                            </a>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </Card>
-          )}
-
-          {/* Management */}
-          {viewModel && (viewModel.ownerSummary || viewModel.adminSummaries.length > 0 || viewModel.stewardSummaries.length > 0) && (
-            <Card>
-              <h3 className="text-lg font-semibold text-white mb-4">Management</h3>
-              <div className="space-y-2">
-                {viewModel.ownerSummary && (() => {
-                  const summary = viewModel.ownerSummary;
-                  const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('owner');
-                  const meta = summary.rating !== null
-                    ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-                    : null;
-
-                  return (
-                    <div className="flex items-center gap-2">
-                      <div className="flex-1">
-                        <DriverIdentity
-                          driver={summary.driver}
-                          href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                          meta={meta}
-                          size="sm"
-                        />
-                      </div>
-                      <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                        {roleDisplay.text}
-                      </span>
-                    </div>
-                  );
-                })()}
-
-                {viewModel.adminSummaries.map((summary) => {
-                  const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('admin');
-                  const meta = summary.rating !== null
-                    ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-                    : null;
-
-                  return (
-                    <div key={summary.driver.id} className="flex items-center gap-2">
-                      <div className="flex-1">
-                        <DriverIdentity
-                          driver={summary.driver}
-                          href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                          meta={meta}
-                          size="sm"
-                        />
-                      </div>
-                      <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                        {roleDisplay.text}
-                      </span>
-                    </div>
-                  );
-                })}
-
-                {viewModel.stewardSummaries.map((summary) => {
-                  const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('steward');
-                  const meta = summary.rating !== null
-                    ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-                    : null;
-
-                  return (
-                    <div key={summary.driver.id} className="flex items-center gap-2">
-                      <div className="flex-1">
-                        <DriverIdentity
-                          driver={summary.driver}
-                          href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                          meta={meta}
-                          size="sm"
-                        />
-                      </div>
-                      <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                        {roleDisplay.text}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            </Card>
-          )}
-        </div>
-      </div>
-
-      {/* End Race Modal */}
-      {endRaceModalRaceId && viewModel && (() => {
-        const race = viewModel.runningRaces.find(r => r.id === endRaceModalRaceId);
-        return race ? (
-          <EndRaceModal
-            raceId={race.id}
-            raceName={race.name}
-            onConfirm={async () => {
-              try {
-                await raceService.completeRace(race.id);
-                await loadLeagueData();
-                setEndRaceModalRaceId(null);
-              } catch (err) {
-                alert(err instanceof Error ? err.message : 'Failed to complete race');
-              }
-            }}
-            onCancel={() => setEndRaceModalRaceId(null)}
-          />
-        ) : null;
-      })()}
-    </>
-  );
-}
+export default LeagueDetailInteractive;

apps/website/app/leagues/[id]/rulebook/LeagueRulebookInteractive.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { LeagueRulebookTemplate } from '@/templates/LeagueRulebookTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+
+export default function LeagueRulebookInteractive() {
+  const params = useParams();
+  const leagueId = params.id as string;
+
+  const { leagueService } = useServices();
+
+  const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const data = await leagueService.getLeagueDetailPageData(leagueId);
+        if (!data) {
+          setLoading(false);
+          return;
+        }
+
+        setViewModel(data);
+      } catch (err) {
+        console.error('Failed to load scoring config:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [leagueId, leagueService]);
+
+  if (!viewModel && !loading) {
+    return (
+      <div className="text-center text-gray-400 py-12">
+        Unable to load rulebook
+      </div>
+    );
+  }
+
+  return <LeagueRulebookTemplate viewModel={viewModel!} loading={loading} />;
+}

apps/website/app/leagues/[id]/rulebook/LeagueRulebookStatic.tsx

@@ -0,0 +1,38 @@
+import { LeagueRulebookTemplate } from '@/templates/LeagueRulebookTemplate';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+
+interface LeagueRulebookStaticProps {
+  leagueId: string;
+}
+
+export default async function LeagueRulebookStatic({ leagueId }: LeagueRulebookStaticProps) {
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const leagueService = serviceFactory.createLeagueService();
+  
+  let viewModel: LeagueDetailPageViewModel | null = null;
+  let loading = false;
+
+  try {
+    loading = true;
+    const data = await leagueService.getLeagueDetailPageData(leagueId);
+    if (data) {
+      viewModel = data;
+    }
+  } catch (err) {
+    console.error('Failed to load scoring config:', err);
+  } finally {
+    loading = false;
+  }
+
+  if (!viewModel && !loading) {
+    return (
+      <div className="text-center text-gray-400 py-12">
+        Unable to load rulebook
+      </div>
+    );
+  }
+
+  return <LeagueRulebookTemplate viewModel={viewModel!} loading={loading} />;
+}

apps/website/app/leagues/[id]/rulebook/page.tsx

@@ -1,264 +1,3 @@
-'use client';
+import LeagueRulebookInteractive from './LeagueRulebookInteractive';
 
-import { useState, useEffect } from 'react';
-import { useParams } from 'next/navigation';
-import Card from '@/components/ui/Card';
-import PointsTable from '@/components/leagues/PointsTable';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
-
-type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';
-
-export default function LeagueRulebookPage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-
-  const { leagueService } = useServices();
-
-  const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [activeSection, setActiveSection] = useState<RulebookSection>('scoring');
-
-  useEffect(() => {
-    async function loadData() {
-      try {
-        const data = await leagueService.getLeagueDetailPageData(leagueId);
-        if (!data) {
-          setLoading(false);
-          return;
-        }
-
-        setViewModel(data);
-      } catch (err) {
-        console.error('Failed to load scoring config:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadData();
-  }, [leagueId, leagueService]);
-
-  if (loading) {
-    return (
-      <Card>
-        <div className="text-center py-12 text-gray-400">Loading rulebook...</div>
-      </Card>
-    );
-  }
-
-  if (!viewModel || !viewModel.scoringConfig) {
-    return (
-      <Card>
-        <div className="text-center py-12 text-gray-400">Unable to load rulebook</div>
-      </Card>
-    );
-  }
-
-  const primaryChampionship = viewModel.scoringConfig.championships.find(c => c.type === 'driver') ?? viewModel.scoringConfig.championships[0];
-  const positionPoints = primaryChampionship?.pointsPreview
-    .filter(p => (p as any).sessionType === primaryChampionship.sessionTypes[0])
-    .map(p => ({ position: Number((p as any).position), points: Number((p as any).points) }))
-    .sort((a, b) => a.position - b.position) || [];
-
-  const sections: { id: RulebookSection; label: string }[] = [
-    { id: 'scoring', label: 'Scoring' },
-    { id: 'conduct', label: 'Conduct' },
-    { id: 'protests', label: 'Protests' },
-    { id: 'penalties', label: 'Penalties' },
-  ];
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">Rulebook</h1>
-          <p className="text-sm text-gray-400 mt-1">Official rules and regulations</p>
-        </div>
-        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
-          <span className="text-sm font-medium text-primary-blue">{viewModel.scoringConfig.scoringPresetName || 'Custom Rules'}</span>
-        </div>
-      </div>
-
-      {/* Navigation Tabs */}
-      <div className="flex gap-1 p-1 bg-deep-graphite rounded-lg border border-charcoal-outline">
-        {sections.map((section) => (
-          <button
-            key={section.id}
-            onClick={() => setActiveSection(section.id)}
-            className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
-              activeSection === section.id
-                ? 'bg-iron-gray text-white'
-                : 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
-            }`}
-          >
-            {section.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Content Sections */}
-      {activeSection === 'scoring' && (
-        <div className="space-y-6">
-          {/* Quick Stats */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Platform</p>
-              <p className="text-lg font-semibold text-white">{viewModel.scoringConfig.gameName}</p>
-            </div>
-            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Championships</p>
-              <p className="text-lg font-semibold text-white">{viewModel.scoringConfig.championships.length}</p>
-            </div>
-            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Sessions Scored</p>
-              <p className="text-lg font-semibold text-white capitalize">
-                {primaryChampionship?.sessionTypes.join(', ') || 'Main'}
-              </p>
-            </div>
-            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Drop Policy</p>
-              <p className="text-lg font-semibold text-white truncate" title={viewModel.scoringConfig.dropPolicySummary}>
-                {viewModel.scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'}
-              </p>
-            </div>
-          </div>
-
-          {/* Points Table */}
-          <PointsTable points={positionPoints} />
-
-          {/* Bonus Points */}
-          {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
-            <Card>
-              <h2 className="text-lg font-semibold text-white mb-4">Bonus Points</h2>
-              <div className="space-y-2">
-                {primaryChampionship.bonusSummary.map((bonus, idx) => (
-                  <div
-                    key={idx}
-                    className="flex items-center gap-4 p-3 bg-deep-graphite rounded-lg border border-charcoal-outline"
-                  >
-                    <div className="w-8 h-8 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
-                      <span className="text-performance-green text-sm font-bold">+</span>
-                    </div>
-                    <p className="text-sm text-gray-300">{bonus}</p>
-                  </div>
-                ))}
-              </div>
-            </Card>
-          )}
-
-          {/* Drop Policy */}
-          {!viewModel.scoringConfig.dropPolicySummary.includes('All results count') && (
-            <Card>
-              <h2 className="text-lg font-semibold text-white mb-4">Drop Policy</h2>
-              <p className="text-sm text-gray-300">{viewModel.scoringConfig.dropPolicySummary}</p>
-              <p className="text-xs text-gray-500 mt-3">
-                Drop rules are applied automatically when calculating championship standings.
-              </p>
-            </Card>
-          )}
-        </div>
-      )}
-
-      {activeSection === 'conduct' && (
-        <Card>
-          <h2 className="text-lg font-semibold text-white mb-4">Driver Conduct</h2>
-          <div className="space-y-4 text-sm text-gray-300">
-            <div>
-              <h3 className="font-medium text-white mb-2">1. Respect</h3>
-              <p>All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">2. Clean Racing</h3>
-              <p>Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">3. Track Limits</h3>
-              <p>Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">4. Blue Flags</h3>
-              <p>Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">5. Communication</h3>
-              <p>Drivers are expected to communicate respectfully in voice and text chat during sessions.</p>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {activeSection === 'protests' && (
-        <Card>
-          <h2 className="text-lg font-semibold text-white mb-4">Protest Process</h2>
-          <div className="space-y-4 text-sm text-gray-300">
-            <div>
-              <h3 className="font-medium text-white mb-2">Filing a Protest</h3>
-              <p>Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">Evidence</h3>
-              <p>Video evidence is highly recommended but not required. Stewards will review available replay data.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">Review Process</h3>
-              <p>League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented.</p>
-            </div>
-            <div>
-              <h3 className="font-medium text-white mb-2">Outcomes</h3>
-              <p>Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity.</p>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {activeSection === 'penalties' && (
-        <Card>
-          <h2 className="text-lg font-semibold text-white mb-4">Penalty Guidelines</h2>
-          <div className="space-y-4 text-sm text-gray-300">
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b border-charcoal-outline">
-                    <th className="text-left py-2 font-medium text-gray-400">Infraction</th>
-                    <th className="text-left py-2 font-medium text-gray-400">Typical Penalty</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-charcoal-outline/50">
-                  <tr>
-                    <td className="py-3">Causing avoidable contact</td>
-                    <td className="py-3 text-warning-amber">5-10 second time penalty</td>
-                  </tr>
-                  <tr>
-                    <td className="py-3">Unsafe rejoin</td>
-                    <td className="py-3 text-warning-amber">5 second time penalty</td>
-                  </tr>
-                  <tr>
-                    <td className="py-3">Blocking</td>
-                    <td className="py-3 text-warning-amber">Warning or 3 second penalty</td>
-                  </tr>
-                  <tr>
-                    <td className="py-3">Repeated track limit violations</td>
-                    <td className="py-3 text-warning-amber">5 second penalty</td>
-                  </tr>
-                  <tr>
-                    <td className="py-3">Intentional wrecking</td>
-                    <td className="py-3 text-red-400">Disqualification</td>
-                  </tr>
-                  <tr>
-                    <td className="py-3">Unsportsmanlike conduct</td>
-                    <td className="py-3 text-red-400">Points deduction or ban</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <p className="text-xs text-gray-500 mt-4">
-              Penalties are applied at steward discretion based on incident severity and driver history.
-            </p>
-          </div>
-        </Card>
-      )}
-    </div>
-  );
-}
+export default LeagueRulebookInteractive;

apps/website/app/leagues/[id]/schedule/LeagueScheduleInteractive.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { LeagueScheduleTemplate } from '@/templates/LeagueScheduleTemplate';
+
+export default function LeagueScheduleInteractive() {
+  const params = useParams();
+  const leagueId = params.id as string;
+
+  return <LeagueScheduleTemplate leagueId={leagueId} />;
+}

apps/website/app/leagues/[id]/schedule/LeagueScheduleStatic.tsx

@@ -0,0 +1,10 @@
+import { LeagueScheduleTemplate } from '@/templates/LeagueScheduleTemplate';
+
+interface LeagueScheduleStaticProps {
+  leagueId: string;
+}
+
+export default async function LeagueScheduleStatic({ leagueId }: LeagueScheduleStaticProps) {
+  // The LeagueScheduleTemplate doesn't need data fetching - it delegates to LeagueSchedule component
+  return <LeagueScheduleTemplate leagueId={leagueId} />;
+}

apps/website/app/leagues/[id]/schedule/page.tsx

@@ -1,22 +1,3 @@
-'use client';
+import LeagueScheduleInteractive from './LeagueScheduleInteractive';
 
-import LeagueSchedule from '@/components/leagues/LeagueSchedule';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { useParams } from 'next/navigation';
-
-export default function LeagueSchedulePage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-
-  return (
-    <div className="space-y-6">
-      <Card>
-        <h2 className="text-xl font-semibold text-white mb-4">Schedule</h2>
-        <LeagueSchedule leagueId={leagueId} />
-      </Card>
-    </div>
-  );
-}
+export default LeagueScheduleInteractive;

apps/website/app/leagues/[id]/standings/LeagueStandingsInteractive.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { LeagueMembership } from '@/lib/types/LeagueMembership';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+
+export default function LeagueStandingsInteractive() {
+  const params = useParams();
+  const leagueId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+  const { leagueService } = useServices();
+
+  const [standings, setStandings] = useState<StandingEntryViewModel[]>([]);
+  const [drivers, setDrivers] = useState<DriverViewModel[]>([]);
+  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const loadData = useCallback(async () => {
+    try {
+      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
+      setStandings(vm.standings);
+      setDrivers(vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null })));
+      setMemberships(vm.memberships);
+
+      // Check if current user is admin
+      const membership = vm.memberships.find(m => m.driverId === currentDriverId);
+      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load standings');
+    } finally {
+      setLoading(false);
+    }
+  }, [leagueId, currentDriverId, leagueService]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleRemoveMember = async (driverId: string) => {
+    if (!confirm('Are you sure you want to remove this member?')) {
+      return;
+    }
+
+    try {
+      await leagueService.removeMember(leagueId, currentDriverId, driverId);
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member');
+    }
+  };
+
+  const handleUpdateRole = async (driverId: string, newRole: string) => {
+    try {
+      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, newRole);
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading standings...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <LeagueStandingsTemplate
+      standings={standings}
+      drivers={drivers}
+      memberships={memberships}
+      leagueId={leagueId}
+      currentDriverId={currentDriverId}
+      isAdmin={isAdmin}
+      onRemoveMember={handleRemoveMember}
+      onUpdateRole={handleUpdateRole}
+    />
+  );
+}

apps/website/app/leagues/[id]/standings/LeagueStandingsStatic.tsx

@@ -0,0 +1,71 @@
+import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import type { LeagueMembership } from '@/lib/types/LeagueMembership';
+import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+
+interface LeagueStandingsStaticProps {
+  leagueId: string;
+  currentDriverId?: string | null;
+}
+
+export default async function LeagueStandingsStatic({ leagueId, currentDriverId }: LeagueStandingsStaticProps) {
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const leagueService = serviceFactory.createLeagueService();
+  
+  let standings: StandingEntryViewModel[] = [];
+  let drivers: DriverViewModel[] = [];
+  let memberships: LeagueMembership[] = [];
+  let loading = false;
+  let error: string | null = null;
+  let isAdmin = false;
+
+  try {
+    loading = true;
+    const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId || '');
+    standings = vm.standings;
+    drivers = vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null }));
+    memberships = vm.memberships;
+
+    // Check if current user is admin
+    const membership = vm.memberships.find(m => m.driverId === currentDriverId);
+    isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Failed to load standings';
+  } finally {
+    loading = false;
+  }
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading standings...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-warning-amber">
+        {error}
+      </div>
+    );
+  }
+
+  // Server components can't have event handlers, so we provide empty functions
+  // The Interactive wrapper will add the actual handlers
+  return (
+    <LeagueStandingsTemplate
+      standings={standings}
+      drivers={drivers}
+      memberships={memberships}
+      leagueId={leagueId}
+      currentDriverId={currentDriverId ?? null}
+      isAdmin={isAdmin}
+      onRemoveMember={() => {}}
+      onUpdateRole={() => {}}
+    />
+  );
+}

apps/website/app/leagues/[id]/standings/page.tsx

@@ -1,129 +1,3 @@
-'use client';
+import LeagueStandingsInteractive from './LeagueStandingsInteractive';
 
-import StandingsTable from '@/components/leagues/StandingsTable';
-import LeagueChampionshipStats from '@/components/leagues/LeagueChampionshipStats';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import type { LeagueMembership } from '@/lib/types/LeagueMembership';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { LeagueStandingsViewModel } from '@/lib/view-models/LeagueStandingsViewModel';
-import { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
-import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
-
-export default function LeagueStandingsPage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const { leagueService } = useServices();
-
-  const [standings, setStandings] = useState<StandingEntryViewModel[]>([]);
-  const [drivers, setDrivers] = useState<DriverViewModel[]>([]);
-  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isAdmin, setIsAdmin] = useState(false);
-
-  const loadData = useCallback(async () => {
-    try {
-      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
-      setStandings(vm.standings);
-      setDrivers(vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null })));
-      setMemberships(vm.memberships);
-
-      // Check if current user is admin
-      const membership = vm.memberships.find(m => m.driverId === currentDriverId);
-      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load standings');
-    } finally {
-      setLoading(false);
-    }
-  }, [leagueId, currentDriverId, leagueService]);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleRemoveMember = async (driverId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) {
-      return;
-    }
-
-    try {
-      await leagueService.removeMember(leagueId, currentDriverId, driverId);
-      await loadData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to remove member');
-    }
-  };
-
-  const handleUpdateRole = async (driverId: string, newRole: string) => {
-    try {
-      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, newRole);
-      await loadData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update role');
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="text-center text-gray-400">
-        Loading standings...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="text-center text-warning-amber">
-        {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Championship Stats */}
-      <LeagueChampionshipStats standings={standings} drivers={drivers} />
-
-      <Card>
-        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
-        <StandingsTable
-          standings={standings.map((s) => ({
-            leagueId,
-            driverId: s.driverId,
-            position: s.position,
-            totalPoints: s.points,
-            racesFinished: s.races,
-            racesStarted: s.races,
-            avgFinish: null,
-            penaltyPoints: 0,
-            bonusPoints: 0,
-          }) satisfies {
-            leagueId: string;
-            driverId: string;
-            position: number;
-            totalPoints: number;
-            racesFinished: number;
-            racesStarted: number;
-            avgFinish: number | null;
-            penaltyPoints: number;
-            bonusPoints: number;
-            teamName?: string;
-          })}
-          drivers={drivers}
-          leagueId={leagueId}
-          memberships={memberships}
-          currentDriverId={currentDriverId}
-          isAdmin={isAdmin}
-          onRemoveMember={handleRemoveMember}
-          onUpdateRole={handleUpdateRole}
-        />
-      </Card>
-    </div>
-  );
-}
+export default LeagueStandingsInteractive;

apps/website/app/leagues/page.tsx

@@ -1,677 +1,3 @@
-'use client';
+import LeaguesInteractive from './LeaguesInteractive';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Trophy,
-  Users,
-  Globe,
-  Award,
-  Search,
-  Plus,
-  ChevronLeft,
-  ChevronRight,
-  Sparkles,
-  Flag,
-  Filter,
-  Flame,
-  Clock,
-  Target,
-  Timer,
-} from 'lucide-react';
-import LeagueCard from '@/components/leagues/LeagueCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
-
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type CategoryId =
-  | 'all'
-  | 'driver'
-  | 'team'
-  | 'nations'
-  | 'trophy'
-  | 'new'
-  | 'popular'
-  | 'iracing'
-  | 'acc'
-  | 'f1'
-  | 'endurance'
-  | 'sprint'
-  | 'openSlots';
-
-interface Category {
-  id: CategoryId;
-  label: string;
-  icon: React.ElementType;
-  description: string;
-  filter: (league: LeagueSummaryViewModel) => boolean;
-  color?: string;
-}
-
-// ============================================================================
-// DEMO LEAGUES DATA
-// ============================================================================
-
-// ============================================================================
-// CATEGORIES
-// ============================================================================
-
-const CATEGORIES: Category[] = [
-  {
-    id: 'all',
-    label: 'All',
-    icon: Globe,
-    description: 'Browse all available leagues',
-    filter: () => true,
-  },
-  {
-    id: 'popular',
-    label: 'Popular',
-    icon: Flame,
-    description: 'Most active leagues right now',
-    filter: (league) => {
-      const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
-      return fillRate > 0.7;
-    },
-    color: 'text-orange-400',
-  },
-  {
-    id: 'new',
-    label: 'New',
-    icon: Sparkles,
-    description: 'Fresh leagues looking for members',
-    filter: (league) => {
-      const oneWeekAgo = new Date();
-      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
-      return new Date(league.createdAt) > oneWeekAgo;
-    },
-    color: 'text-performance-green',
-  },
-  {
-    id: 'openSlots',
-    label: 'Open Slots',
-    icon: Target,
-    description: 'Leagues with available spots',
-    filter: (league) => {
-      // Check for team slots if it's a team league
-      if (league.maxTeams && league.maxTeams > 0) {
-        const usedTeams = league.usedTeamSlots ?? 0;
-        return usedTeams < league.maxTeams;
-      }
-      // Otherwise check driver slots
-      const used = league.usedDriverSlots ?? 0;
-      const max = league.maxDrivers ?? 0;
-      return max > 0 && used < max;
-    },
-    color: 'text-neon-aqua',
-  },
-  {
-    id: 'driver',
-    label: 'Driver',
-    icon: Trophy,
-    description: 'Compete as an individual',
-    filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
-  },
-  {
-    id: 'team',
-    label: 'Team',
-    icon: Users,
-    description: 'Race together as a team',
-    filter: (league) => league.scoring?.primaryChampionshipType === 'team',
-  },
-  {
-    id: 'nations',
-    label: 'Nations',
-    icon: Flag,
-    description: 'Represent your country',
-    filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
-  },
-  {
-    id: 'trophy',
-    label: 'Trophy',
-    icon: Award,
-    description: 'Special championship events',
-    filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
-  },
-  {
-    id: 'endurance',
-    label: 'Endurance',
-    icon: Timer,
-    description: 'Long-distance racing',
-    filter: (league) =>
-      league.scoring?.scoringPresetId?.includes('endurance') ??
-      league.timingSummary?.includes('h Race') ??
-      false,
-  },
-  {
-    id: 'sprint',
-    label: 'Sprint',
-    icon: Clock,
-    description: 'Quick, intense races',
-    filter: (league) =>
-      (league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
-      !(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
-  },
-];
-
-// ============================================================================
-// LEAGUE SLIDER COMPONENT
-// ============================================================================
-
-interface LeagueSliderProps {
-  title: string;
-  icon: React.ElementType;
-  description: string;
-  leagues: LeagueSummaryViewModel[];
-  onLeagueClick: (id: string) => void;
-  autoScroll?: boolean;
-  iconColor?: string;
-  scrollSpeedMultiplier?: number;
-  scrollDirection?: 'left' | 'right';
-}
-
-function LeagueSlider({
-  title,
-  icon: Icon,
-  description,
-  leagues,
-  onLeagueClick,
-  autoScroll = true,
-  iconColor = 'text-primary-blue',
-  scrollSpeedMultiplier = 1,
-  scrollDirection = 'right',
-}: LeagueSliderProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(true);
-  const [isHovering, setIsHovering] = useState(false);
-  const animationRef = useRef<number | null>(null);
-  const scrollPositionRef = useRef(0);
-
-  const checkScrollButtons = useCallback(() => {
-    if (scrollRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
-      setCanScrollLeft(scrollLeft > 0);
-      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
-    }
-  }, []);
-
-  const scroll = useCallback((direction: 'left' | 'right') => {
-    if (scrollRef.current) {
-      const cardWidth = 340;
-      const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
-      // Update the ref so auto-scroll continues from new position
-      scrollPositionRef.current = scrollRef.current.scrollLeft + scrollAmount;
-      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
-    }
-  }, []);
-
-  // Initialize scroll position for left-scrolling sliders
-  useEffect(() => {
-    if (scrollDirection === 'left' && scrollRef.current) {
-      const { scrollWidth, clientWidth } = scrollRef.current;
-      scrollPositionRef.current = scrollWidth - clientWidth;
-      scrollRef.current.scrollLeft = scrollPositionRef.current;
-    }
-  }, [scrollDirection, leagues.length]);
-
-  // Smooth continuous auto-scroll using requestAnimationFrame with variable speed and direction
-  useEffect(() => {
-    // Allow scroll even with just 2 leagues (minimum threshold = 1)
-    if (!autoScroll || leagues.length <= 1) return;
-
-    const scrollContainer = scrollRef.current;
-    if (!scrollContainer) return;
-
-    let lastTimestamp = 0;
-    // Base speed with multiplier for variation between sliders
-    const baseSpeed = 0.025;
-    const scrollSpeed = baseSpeed * scrollSpeedMultiplier;
-    const directionMultiplier = scrollDirection === 'left' ? -1 : 1;
-
-    const animate = (timestamp: number) => {
-      if (!isHovering && scrollContainer) {
-        const delta = lastTimestamp ? timestamp - lastTimestamp : 0;
-        lastTimestamp = timestamp;
-
-        scrollPositionRef.current += scrollSpeed * delta * directionMultiplier;
-
-        const { scrollWidth, clientWidth } = scrollContainer;
-        const maxScroll = scrollWidth - clientWidth;
-
-        // Handle wrap-around for both directions
-        if (scrollDirection === 'right' && scrollPositionRef.current >= maxScroll) {
-          scrollPositionRef.current = 0;
-        } else if (scrollDirection === 'left' && scrollPositionRef.current <= 0) {
-          scrollPositionRef.current = maxScroll;
-        }
-
-        scrollContainer.scrollLeft = scrollPositionRef.current;
-      } else {
-        lastTimestamp = timestamp;
-      }
-
-      animationRef.current = requestAnimationFrame(animate);
-    };
-
-    animationRef.current = requestAnimationFrame(animate);
-
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    };
-  }, [autoScroll, leagues.length, isHovering, scrollSpeedMultiplier, scrollDirection]);
-
-  // Sync scroll position when user manually scrolls
-  useEffect(() => {
-    const scrollContainer = scrollRef.current;
-    if (!scrollContainer) return;
-
-    const handleScroll = () => {
-      scrollPositionRef.current = scrollContainer.scrollLeft;
-      checkScrollButtons();
-    };
-
-    scrollContainer.addEventListener('scroll', handleScroll);
-    return () => scrollContainer.removeEventListener('scroll', handleScroll);
-  }, [checkScrollButtons]);
-
-  if (leagues.length === 0) return null;
-
-  return (
-    <div className="mb-10">
-      {/* Section header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className={`flex h-10 w-10 items-center justify-center rounded-xl bg-iron-gray border border-charcoal-outline`}>
-            <Icon className={`w-5 h-5 ${iconColor}`} />
-          </div>
-          <div>
-            <h2 className="text-lg font-semibold text-white">{title}</h2>
-            <p className="text-xs text-gray-500">{description}</p>
-          </div>
-          <span className="ml-2 px-2 py-0.5 rounded-full text-xs bg-charcoal-outline/50 text-gray-400">
-            {leagues.length}
-          </span>
-        </div>
-
-        {/* Navigation arrows */}
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => scroll('left')}
-            disabled={!canScrollLeft}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
-              canScrollLeft
-                ? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
-                : 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
-            }`}
-          >
-            <ChevronLeft className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => scroll('right')}
-            disabled={!canScrollRight}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
-              canScrollRight
-                ? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
-                : 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
-            }`}
-          >
-            <ChevronRight className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Scrollable container with fade edges */}
-      <div className="relative">
-        {/* Left fade gradient */}
-        <div className="absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-deep-graphite to-transparent z-10 pointer-events-none" />
-        {/* Right fade gradient */}
-        <div className="absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-deep-graphite to-transparent z-10 pointer-events-none" />
-        
-        <div
-          ref={scrollRef}
-          onMouseEnter={() => setIsHovering(true)}
-          onMouseLeave={() => setIsHovering(false)}
-          className="flex gap-4 overflow-x-auto pb-4 px-4"
-          style={{
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-          }}
-        >
-          <style jsx>{`
-            div::-webkit-scrollbar {
-              display: none;
-            }
-          `}</style>
-          {leagues.map((league) => (
-            <div key={league.id} className="flex-shrink-0 w-[320px] h-full">
-              <LeagueCard league={league} onClick={() => onLeagueClick(league.id)} />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// MAIN PAGE COMPONENT
-// ============================================================================
-
-export default function LeaguesPage() {
-  const router = useRouter();
-  const [realLeagues, setRealLeagues] = useState<LeagueSummaryViewModel[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
-  const [showFilters, setShowFilters] = useState(false);
-
-  const { leagueService } = useServices();
-
-  const loadLeagues = useCallback(async () => {
-    try {
-      const leagues = await leagueService.getAllLeagues();
-      setRealLeagues(leagues);
-    } catch (error) {
-      console.error('Failed to load leagues:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [leagueService]);
-
-  useEffect(() => {
-    void loadLeagues();
-  }, [loadLeagues]);
-
-  const leagues = realLeagues;
-
-  const handleLeagueClick = (leagueId: string) => {
-    // Navigate to league - all leagues are clickable
-    router.push(`/leagues/${leagueId}`);
-  };
-
-  // Filter by search query
-  const searchFilteredLeagues = leagues.filter((league) => {
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return (
-      league.name.toLowerCase().includes(query) ||
-      (league.description ?? '').toLowerCase().includes(query) ||
-      (league.scoring?.gameName ?? '').toLowerCase().includes(query)
-    );
-  });
-
-  // Get leagues for active category
-  const activeCategoryData = CATEGORIES.find((c) => c.id === activeCategory);
-  const categoryFilteredLeagues = activeCategoryData
-    ? searchFilteredLeagues.filter(activeCategoryData.filter)
-    : searchFilteredLeagues;
-
-  // Group leagues by category for slider view
-  const leaguesByCategory = CATEGORIES.reduce(
-    (acc, category) => {
-      // First try to use the dedicated category field, fall back to scoring-based filtering
-      acc[category.id] = searchFilteredLeagues.filter((league) => {
-        // If league has a category field, use it directly
-        if (league.category) {
-          return league.category === category.id;
-        }
-        // Otherwise fall back to the existing scoring-based filter
-        return category.filter(league);
-      });
-      return acc;
-    },
-    {} as Record<CategoryId, LeagueSummaryViewModel[]>,
-  );
-
-  // Featured categories to show as sliders with different scroll speeds and alternating directions
-  const featuredCategoriesWithSpeed: { id: CategoryId; speed: number; direction: 'left' | 'right' }[] = [
-    { id: 'popular', speed: 1.0, direction: 'right' },
-    { id: 'new', speed: 1.3, direction: 'left' },
-    { id: 'driver', speed: 0.8, direction: 'right' },
-    { id: 'team', speed: 1.1, direction: 'left' },
-    { id: 'nations', speed: 0.9, direction: 'right' },
-    { id: 'endurance', speed: 0.7, direction: 'left' },
-    { id: 'sprint', speed: 1.2, direction: 'right' },
-  ];
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading leagues...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Hero Section */}
-      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 overflow-hidden">
-        {/* Background decoration */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
-
-        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
-          <div className="max-w-2xl">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
-                <Trophy className="w-6 h-6 text-primary-blue" />
-              </div>
-              <Heading level={1} className="text-3xl lg:text-4xl">
-                Find Your Grid
-              </Heading>
-            </div>
-            <p className="text-gray-400 text-lg leading-relaxed mb-6">
-              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
-            </p>
-
-            {/* Stats */}
-            <div className="flex flex-wrap gap-6">
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{leagues.length}</span> active leagues
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-primary-blue" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{leaguesByCategory.new.length}</span> new this week
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
-                <span className="text-sm text-gray-400">
-                  <span className="text-white font-semibold">{leaguesByCategory.openSlots.length}</span> with open slots
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* CTA */}
-          <div className="flex flex-col gap-4">
-            <Button
-              variant="primary"
-              onClick={() => router.push('/leagues/create')}
-              className="flex items-center gap-2 px-6 py-3"
-            >
-              <Plus className="w-5 h-5" />
-              <span>Create League</span>
-            </Button>
-            <p className="text-xs text-gray-500 text-center">Set up your own racing series</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Search and Filter Bar */}
-      <div className="mb-6">
-        <div className="flex flex-col lg:flex-row gap-4">
-          {/* Search */}
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search leagues by name, description, or game..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-
-          {/* Filter toggle (mobile) */}
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            className="lg:hidden flex items-center gap-2"
-          >
-            <Filter className="w-4 h-4" />
-            Filters
-          </Button>
-        </div>
-
-        {/* Category Tabs */}
-        <div className={`mt-4 ${showFilters ? 'block' : 'hidden lg:block'}`}>
-          <div className="flex flex-wrap gap-2">
-            {CATEGORIES.map((category) => {
-              const Icon = category.icon;
-              const count = leaguesByCategory[category.id].length;
-              const isActive = activeCategory === category.id;
-
-              return (
-                <button
-                  key={category.id}
-                  type="button"
-                  onClick={() => setActiveCategory(category.id)}
-                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 ${
-                    isActive
-                      ? 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.3)]'
-                      : 'bg-iron-gray/60 text-gray-400 border border-charcoal-outline hover:border-gray-500 hover:text-white'
-                  }`}
-                >
-                  <Icon className={`w-3.5 h-3.5 ${!isActive && category.color ? category.color : ''}`} />
-                  <span>{category.label}</span>
-                  {count > 0 && (
-                    <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${isActive ? 'bg-white/20' : 'bg-charcoal-outline/50'}`}>
-                      {count}
-                    </span>
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      {leagues.length === 0 ? (
-        /* Empty State */
-        <Card className="text-center py-16">
-          <div className="max-w-md mx-auto">
-            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
-              <Trophy className="w-8 h-8 text-primary-blue" />
-            </div>
-            <Heading level={2} className="text-2xl mb-3">
-              No leagues yet
-            </Heading>
-            <p className="text-gray-400 mb-8">
-              Be the first to create a racing series. Start your own league and invite drivers to compete for glory.
-            </p>
-            <Button
-              variant="primary"
-              onClick={() => router.push('/leagues/create')}
-              className="flex items-center gap-2 mx-auto"
-            >
-              <Sparkles className="w-4 h-4" />
-              Create Your First League
-            </Button>
-          </div>
-        </Card>
-      ) : activeCategory === 'all' && !searchQuery ? (
-        /* Slider View - Show featured categories with sliders at different speeds and directions */
-        <div>
-          {featuredCategoriesWithSpeed
-            .map(({ id, speed, direction }) => {
-              const category = CATEGORIES.find((c) => c.id === id)!;
-              return { category, speed, direction };
-            })
-            .filter(({ category }) => leaguesByCategory[category.id].length > 0)
-            .map(({ category, speed, direction }) => (
-              <LeagueSlider
-                key={category.id}
-                title={category.label}
-                icon={category.icon}
-                description={category.description}
-                leagues={leaguesByCategory[category.id]}
-                onLeagueClick={handleLeagueClick}
-                autoScroll={true}
-                iconColor={category.color || 'text-primary-blue'}
-                scrollSpeedMultiplier={speed}
-                scrollDirection={direction}
-              />
-            ))}
-        </div>
-      ) : (
-        /* Grid View - Filtered by category or search */
-        <div>
-          {categoryFilteredLeagues.length > 0 ? (
-            <>
-              <div className="flex items-center justify-between mb-6">
-                <p className="text-sm text-gray-400">
-                  Showing <span className="text-white font-medium">{categoryFilteredLeagues.length}</span>{' '}
-                  {categoryFilteredLeagues.length === 1 ? 'league' : 'leagues'}
-                  {searchQuery && (
-                    <span>
-                      {' '}
-                      for "<span className="text-primary-blue">{searchQuery}</span>"
-                    </span>
-                  )}
-                </p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {categoryFilteredLeagues.map((league) => (
-                  <LeagueCard key={league.id} league={league} onClick={() => handleLeagueClick(league.id)} />
-                ))}
-              </div>
-            </>
-          ) : (
-            <Card className="text-center py-12">
-              <div className="flex flex-col items-center gap-4">
-                <Search className="w-10 h-10 text-gray-600" />
-                <p className="text-gray-400">
-                  No leagues found{searchQuery ? ` matching "${searchQuery}"` : ' in this category'}
-                </p>
-                <Button
-                  variant="secondary"
-                  onClick={() => {
-                    setSearchQuery('');
-                    setActiveCategory('all');
-                  }}
-                >
-                  Clear filters
-                </Button>
-              </div>
-            </Card>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
+export default LeaguesInteractive;

apps/website/app/races/RacesInteractive.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { RacesTemplate, TimeFilter, RaceStatusFilter } from '@/templates/RacesTemplate';
+import { useRacesPageData, useRegisterForRace, useWithdrawFromRace, useCancelRace } from '@/hooks/useRaceService';
+import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+
+export function RacesInteractive() {
+  const router = useRouter();
+  const currentDriverId = useEffectiveDriverId();
+  
+  // Fetch data
+  const { data: pageData, isLoading } = useRacesPageData();
+  
+  // Mutations
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  
+  // Filter state
+  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
+  const [leagueFilter, setLeagueFilter] = useState<string>('all');
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
+  const [showFilterModal, setShowFilterModal] = useState(false);
+
+  // Transform data for template
+  const races = pageData?.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race', // Not in RaceListItemViewModel, using default
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const scheduledRaces = pageData?.scheduledRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const runningRaces = pageData?.runningRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const completedRaces = pageData?.completedRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  // Actions
+  const handleRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handleRegister = async (raceId: string, leagueId: string) => {
+    if (!currentDriverId) {
+      router.push('/auth/login');
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Register for this race?\n\nYou'll be added to the entry list.`,
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await registerMutation.mutateAsync({ raceId, leagueId, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register for race');
+    }
+  };
+
+  const handleWithdraw = async (raceId: string) => {
+    if (!currentDriverId) return;
+
+    const confirmed = window.confirm(
+      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await withdrawMutation.mutateAsync({ raceId, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
+    }
+  };
+
+  const handleCancel = async (raceId: string) => {
+    const confirmed = window.confirm(
+      'Are you sure you want to cancel this race? This action cannot be undone.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await cancelMutation.mutateAsync(raceId);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to cancel race');
+    }
+  };
+
+  // User memberships for admin check
+  // For now, we'll handle permissions in the template using LeagueMembershipUtility
+  // This would need actual membership data to work properly
+  const userMemberships: Array<{ leagueId: string; role: string }> = [];
+
+  return (
+    <RacesTemplate
+      races={races}
+      totalCount={pageData?.totalCount ?? 0}
+      scheduledRaces={scheduledRaces}
+      runningRaces={runningRaces}
+      completedRaces={completedRaces}
+      isLoading={isLoading}
+      statusFilter={statusFilter}
+      setStatusFilter={setStatusFilter}
+      leagueFilter={leagueFilter}
+      setLeagueFilter={setLeagueFilter}
+      timeFilter={timeFilter}
+      setTimeFilter={setTimeFilter}
+      onRaceClick={handleRaceClick}
+      onLeagueClick={handleLeagueClick}
+      onRegister={handleRegister}
+      onWithdraw={handleWithdraw}
+      onCancel={handleCancel}
+      showFilterModal={showFilterModal}
+      setShowFilterModal={setShowFilterModal}
+      currentDriverId={currentDriverId}
+      userMemberships={userMemberships}
+    />
+  );
+}

apps/website/app/races/RacesStatic.tsx

@@ -0,0 +1,76 @@
+import { RacesTemplate } from '@/templates/RacesTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { RaceListItemViewModel } from '@/lib/view-models/RaceListItemViewModel';
+
+// This is a server component that fetches data and passes it to the template
+export async function RacesStatic() {
+  const { raceService } = useServices();
+  
+  // Fetch race data server-side
+  const pageData = await raceService.getRacesPageData();
+  
+  // Extract races from the response
+  const races = pageData.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race', // Default since RaceListItemViewModel doesn't have sessionType
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  }));
+
+  // Transform the categorized races as well
+  const transformRaces = (raceList: RaceListItemViewModel[]) =>
+    raceList.map(race => ({
+      id: race.id,
+      track: race.track,
+      car: race.car,
+      scheduledAt: race.scheduledAt,
+      status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+      sessionType: 'race',
+      leagueId: race.leagueId,
+      leagueName: race.leagueName,
+      strengthOfField: race.strengthOfField,
+      isUpcoming: race.isUpcoming,
+      isLive: race.isLive,
+      isPast: race.isPast,
+    }));
+
+  // For the static wrapper, we'll use client-side data fetching
+  // This component will be used as a server component that renders the client template
+  return (
+    <RacesTemplate
+      races={races}
+      totalCount={pageData.totalCount}
+      scheduledRaces={transformRaces(pageData.scheduledRaces)}
+      runningRaces={transformRaces(pageData.runningRaces)}
+      completedRaces={transformRaces(pageData.completedRaces)}
+      isLoading={false}
+      // Filter state - will be managed by Interactive component
+      statusFilter="all"
+      setStatusFilter={() => {}}
+      leagueFilter="all"
+      setLeagueFilter={() => {}}
+      timeFilter="upcoming"
+      setTimeFilter={() => {}}
+      // Actions
+      onRaceClick={() => {}}
+      onLeagueClick={() => {}}
+      onRegister={() => {}}
+      onWithdraw={() => {}}
+      onCancel={() => {}}
+      // UI State
+      showFilterModal={false}
+      setShowFilterModal={() => {}}
+      // User state
+      currentDriverId={undefined}
+      userMemberships={undefined}
+    />
+  );
+}

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceDetailTemplate } from '@/templates/RaceDetailTemplate';
+import { 
+  useRaceDetail, 
+  useRegisterForRace, 
+  useWithdrawFromRace, 
+  useCancelRace, 
+  useCompleteRace, 
+  useReopenRace 
+} from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
+
+export function RaceDetailInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: viewModel, isLoading, error } = useRaceDetail(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [showProtestModal, setShowProtestModal] = useState(false);
+  const [showEndRaceModal, setShowEndRaceModal] = useState(false);
+
+  // Mutations
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  const completeMutation = useCompleteRace();
+  const reopenMutation = useReopenRace();
+
+  // Determine if user is owner/admin
+  const isOwnerOrAdmin = membership 
+    ? LeagueMembershipUtility.isOwnerOrAdmin(viewModel?.league?.id || '', currentDriverId)
+    : false;
+
+  // Actions
+  const handleBack = () => {
+    router.back();
+  };
+
+  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.`,
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await registerMutation.mutateAsync({ raceId: race.id, leagueId: league.id, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register for race');
+    }
+  };
+
+  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.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
+    }
+  };
+
+  const handleCancel = 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.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await cancelMutation.mutateAsync(race.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to cancel race');
+    }
+  };
+
+  const handleReopen = async () => {
+    const race = viewModel?.race;
+    if (!race || !viewModel?.canReopenRace) return;
+
+    const confirmed = window.confirm(
+      'Re-open this race? This will allow re-registration and re-running. Results will be archived.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await reopenMutation.mutateAsync(race.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to re-open race');
+    }
+  };
+
+  const handleEndRace = async () => {
+    const race = viewModel?.race;
+    if (!race) return;
+
+    setShowEndRaceModal(true);
+  };
+
+  const handleFileProtest = () => {
+    setShowProtestModal(true);
+  };
+
+  const handleResultsClick = () => {
+    router.push(`/races/${raceId}/results`);
+  };
+
+  const handleStewardingClick = () => {
+    router.push(`/races/${raceId}/stewarding`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  };
+
+  // Transform data for template - handle null values
+  const templateViewModel = viewModel && viewModel.race ? {
+    race: {
+      id: viewModel.race.id,
+      track: viewModel.race.track,
+      car: viewModel.race.car,
+      scheduledAt: viewModel.race.scheduledAt,
+      status: viewModel.race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+      sessionType: viewModel.race.sessionType,
+    },
+    league: viewModel.league ? {
+      id: viewModel.league.id,
+      name: viewModel.league.name,
+      description: viewModel.league.description || undefined,
+      settings: viewModel.league.settings as { maxDrivers: number; qualifyingFormat: string },
+    } : undefined,
+    entryList: viewModel.entryList.map(entry => ({
+      id: entry.id,
+      name: entry.name,
+      avatarUrl: entry.avatarUrl,
+      country: entry.country,
+      rating: entry.rating,
+      isCurrentUser: entry.isCurrentUser,
+    })),
+    registration: {
+      isUserRegistered: viewModel.registration.isUserRegistered,
+      canRegister: viewModel.registration.canRegister,
+    },
+    userResult: viewModel.userResult ? {
+      position: viewModel.userResult.position,
+      startPosition: viewModel.userResult.startPosition,
+      positionChange: viewModel.userResult.positionChange,
+      incidents: viewModel.userResult.incidents,
+      isClean: viewModel.userResult.isClean,
+      isPodium: viewModel.userResult.isPodium,
+      ratingChange: viewModel.userResult.ratingChange,
+    } : undefined,
+    canReopenRace: viewModel.canReopenRace,
+  } : undefined;
+
+  return (
+    <RaceDetailTemplate
+      viewModel={templateViewModel}
+      isLoading={isLoading}
+      error={error}
+      onBack={handleBack}
+      onRegister={handleRegister}
+      onWithdraw={handleWithdraw}
+      onCancel={handleCancel}
+      onReopen={handleReopen}
+      onEndRace={handleEndRace}
+      onFileProtest={handleFileProtest}
+      onResultsClick={handleResultsClick}
+      onStewardingClick={handleStewardingClick}
+      onLeagueClick={handleLeagueClick}
+      onDriverClick={handleDriverClick}
+      currentDriverId={currentDriverId}
+      isOwnerOrAdmin={isOwnerOrAdmin}
+      showProtestModal={showProtestModal}
+      setShowProtestModal={setShowProtestModal}
+      showEndRaceModal={showEndRaceModal}
+      setShowEndRaceModal={setShowEndRaceModal}
+      mutationLoading={{
+        register: registerMutation.isPending,
+        withdraw: withdrawMutation.isPending,
+        cancel: cancelMutation.isPending,
+        reopen: reopenMutation.isPending,
+        complete: completeMutation.isPending,
+      }}
+    />
+  );
+}

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

@@ -4,7 +4,7 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import RaceDetailPage from './page';
+import { RaceDetailInteractive } from './RaceDetailInteractive';
 import type { RaceDetailsViewModel } from '@/lib/view-models/RaceDetailsViewModel';
 
 // Mocks for Next.js navigation
@@ -59,6 +59,9 @@ vi.mock('@/lib/services/ServiceProvider', () => ({
   }),
 }));
 
+// We'll use the actual hooks but they will use the mocked services
+// The hooks are already mocked above via the service mocks
+
 // Mock league membership utility to control admin vs non-admin behavior
 const mockIsOwnerOrAdmin = vi.fn();
 
@@ -112,56 +115,60 @@ const createViewModel = (status: string): RaceDetailsViewModel => {
 
 describe('RaceDetailPage - Re-open Race behavior', () => {
   beforeEach(() => {
+    // Reset all mocks
     mockGetRaceDetails.mockReset();
     mockReopenRace.mockReset();
     mockFetchLeagueMemberships.mockReset();
     mockGetMembership.mockReset();
     mockIsOwnerOrAdmin.mockReset();
 
+    // Set up default mock implementations for services
     mockFetchLeagueMemberships.mockResolvedValue(undefined);
-    mockGetMembership.mockReturnValue(null);
+    mockGetMembership.mockReturnValue({ role: 'owner' }); // Return owner role by default
   });
 
   it('shows Re-open Race button for admin when race is completed and calls reopen + reload on confirm', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(true);
     const viewModel = createViewModel('completed');
 
-    // First call: initial load, second call: after re-open
+    // Mock the service to return the right data
     mockGetRaceDetails.mockResolvedValue(viewModel);
+    mockReopenRace.mockResolvedValue(undefined);
 
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
-    const reopenButtons = await screen.findAllByText('Re-open Race');
-    const reopenButton = reopenButtons[0]!;
+    // Wait for the component to load and render
+    await waitFor(() => {
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
+    });
+
+    // Check if the reopen button is present
+    const reopenButton = screen.getByText('Re-open Race');
     expect(reopenButton).toBeInTheDocument();
 
-    mockReopenRace.mockResolvedValue(undefined);
-
     fireEvent.click(reopenButton);
 
     await waitFor(() => {
       expect(mockReopenRace).toHaveBeenCalledWith('race-123');
     });
 
-    // loadRaceData should be called again after reopening
-    await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
-    });
-
     confirmSpy.mockRestore();
   });
 
   it('does not render Re-open Race button for non-admin viewer', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(false);
     const viewModel = createViewModel('completed');
+
     mockGetRaceDetails.mockResolvedValue(viewModel);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
     await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
     });
 
     expect(screen.queryByText('Re-open Race')).toBeNull();
@@ -170,12 +177,14 @@ describe('RaceDetailPage - Re-open Race behavior', () => {
   it('does not render Re-open Race button when race is not completed or cancelled even for admin', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(true);
     const viewModel = createViewModel('scheduled');
+
     mockGetRaceDetails.mockResolvedValue(viewModel);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
     await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
     });
 
     expect(screen.queryByText('Re-open Race')).toBeNull();

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

@@ -1,969 +1,3 @@
-'use client';
+import { RaceDetailInteractive } from './RaceDetailInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import EndRaceModal from '@/components/leagues/EndRaceModal';
-import FileProtestModal from '@/components/races/FileProtestModal';
-import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Heading from '@/components/ui/Heading';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceDetail, useRegisterForRace, useWithdrawFromRace, useCancelRace, useCompleteRace, useReopenRace } from '@/hooks/useRaceService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
-import { RaceDetailEntryViewModel } from '@/lib/view-models/RaceDetailEntryViewModel';
-import { RaceDetailUserResultViewModel } from '@/lib/view-models/RaceDetailUserResultViewModel';
-import {
-  AlertTriangle,
-  ArrowLeft,
-  ArrowRight,
-  Calendar,
-  Car,
-  CheckCircle2,
-  Clock,
-  Flag,
-  PlayCircle,
-  Scale,
-  Trophy,
-  UserMinus,
-  UserPlus,
-  Users,
-  XCircle,
-  Zap,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
-
-export default function RaceDetailPage() {
-  const router = useRouter();
-  const params = useParams();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const isSponsorMode = useSponsorMode();
-
-  const { data: viewModel, isLoading: loading, error } = useRaceDetail(raceId, currentDriverId);
-  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
-
-  const [ratingChange, setRatingChange] = useState<number | null>(null);
-  const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
-  const [showProtestModal, setShowProtestModal] = useState(false);
-  const [showEndRaceModal, setShowEndRaceModal] = useState(false);
-
-  const registerMutation = useRegisterForRace();
-  const withdrawMutation = useWithdrawFromRace();
-  const cancelMutation = useCancelRace();
-  const completeMutation = useCompleteRace();
-  const reopenMutation = useReopenRace();
-
-  // Set rating change when viewModel changes
-  useEffect(() => {
-    if (viewModel?.userResult?.ratingChange !== undefined) {
-      setRatingChange(viewModel.userResult.ratingChange);
-    }
-  }, [viewModel?.userResult?.ratingChange]);
-
-  // Animate rating change when it changes
-  useEffect(() => {
-    if (ratingChange !== null) {
-      let start = 0;
-      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);
-        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.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await cancelMutation.mutateAsync(race.id);
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to cancel race');
-    }
-  };
-
-  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.`,
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await registerMutation.mutateAsync({ raceId: race.id, leagueId: league.id, driverId: currentDriverId });
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to register for race');
-    }
-  };
-
-  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.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
-    }
-  };
-
-  const handleReopenRace = async () => {
-    const race = viewModel?.race;
-    if (!race || !viewModel?.canReopenRace) return;
-
-    const confirmed = window.confirm(
-      'Re-open this race? This will allow re-registration and re-running. Results will be archived.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await reopenMutation.mutateAsync(race.id);
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to re-open race');
-    }
-  };
-
-  const formatDate = (date: Date) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date) => {
-    return new Date(date).toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZoneName: 'short',
-    });
-  };
-
-  const getTimeUntil = (date: Date) => {
-    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`;
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-      description: 'This race is scheduled and waiting to start',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE NOW',
-      description: 'This race is currently in progress',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-      description: 'This race has finished',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-      description: 'This race has been cancelled',
-    },
-  } as const;
-
-  if (loading) {
-    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">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-48 bg-iron-gray rounded-xl" />
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <div className="lg:col-span-2 h-64 bg-iron-gray rounded-xl" />
-              <div className="h-64 bg-iron-gray rounded-xl" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  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">
-                <AlertTriangle className="w-8 h-8 text-warning-amber" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">{error instanceof Error ? error.message : 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>
-              </div>
-              <Button
-                variant="secondary"
-                onClick={() => router.push('/races')}
-                className="mt-4"
-              >
-                Back to Races
-              </Button>
-            </div>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  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 = null; // TODO: Add strength of field to race details response
-
-  const config = statusConfig[race.status as keyof typeof statusConfig];
-  const StatusIcon = config.icon;
-  const timeUntil = race.status === 'scheduled' ? getTimeUntil(new Date(race.scheduledAt)) : null;
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
-    { label: race.track },
-  ];
-
-  const getCountryFlag = (countryCode: string): string => {
-    const codePoints = countryCode
-      .toUpperCase()
-      .split('')
-      .map(char => 127397 + char.charCodeAt(0));
-    return String.fromCodePoint(...codePoints);
-  };
-
-  const sponsorInsights = {
-    tier: 'gold' as const,
-    trustScore: 92,
-    discordMembers: league ? 1847 : undefined,
-    monthlyActivity: 156,
-  };
-
-  const raceMetrics = [
-    MetricBuilders.views(entryList.length * 12),
-    MetricBuilders.engagement(78),
-    { label: 'SOF', value: raceSOF != null ? String(raceSOF) : '—', icon: Zap, color: 'text-warning-amber' as const },
-    MetricBuilders.reach(entryList.length * 45),
-  ];
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl 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
-            variant="secondary"
-            onClick={() => router.back()}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back
-          </Button>
-        </div>
-
-        {/* Sponsor Insights Card - Consistent placement at top */}
-        {isSponsorMode && race && league && (
-          <SponsorInsightsCard
-            entityType="race"
-            entityId={raceId}
-            entityName={race.track}
-            tier="premium"
-            metrics={raceMetrics}
-            slots={SlotTemplates.race(true, 500)}
-            trustScore={sponsorInsights.trustScore}
-            monthlyActivity={sponsorInsights.monthlyActivity}
-          />
-        )}
-
-        {/* User Result - Premium Achievement Card */}
-        {userResult && (
-          <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
-                ? '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'
-            }
-          `}
-          >
-            <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">
-                  <div className="absolute top-4 left-[10%] w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
-                  <div className="absolute top-8 left-[25%] w-1.5 h-1.5 bg-yellow-300 rounded-full animate-pulse delay-100" />
-                  <div className="absolute top-6 right-[20%] w-2 h-2 bg-yellow-500 rounded-full animate-pulse delay-200" />
-                  <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={`
-                      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
-                          ? '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'
-                      }
-                    `}
-                    >
-                      {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>
-                      <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' : ''}>
-                          {userResult.incidents}x incidents
-                          {userResult.isClean && ' ✨'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Right: Stats cards */}
-                  <div className="flex flex-wrap gap-3">
-                    {/* Position change */}
-                    {userResult.positionChange !== 0 && (
-                      <div
-                        className={`
-                        flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
-                        ${
-                          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.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"
-                              />
-                            </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"
-                              />
-                            </svg>
-                          )}
-                          {Math.abs(userResult.positionChange)}
-                        </div>
-                        <div className="text-xs text-gray-400 mt-0.5">
-                          {userResult.positionChange > 0 ? 'Gained' : 'Lost'}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Rating change */}
-                    {ratingChange !== null && (
-                      <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={`
-                          font-mono font-black text-2xl
-                          ${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
-                        `}
-                        >
-                          {animatedRatingChange > 0 ? '+' : ''}
-                          {animatedRatingChange}
-                        </div>
-                        <div className="text-xs text-gray-400 mt-0.5">Rating</div>
-                      </div>
-                    )}
-
-                    {/* Clean race bonus */}
-                    {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>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Hero Header */}
-        <div className={`relative overflow-hidden rounded-2xl ${config.bg} border ${config.border} p-6 sm:p-8`}>
-          {/* 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="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">
-              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${config.bg} border ${config.border}`}>
-                {race.status === 'running' && (
-                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
-                )}
-                <StatusIcon className={`w-4 h-4 ${config.color}`} />
-                <span className={`text-sm font-semibold ${config.color}`}>{config.label}</span>
-              </div>
-              {timeUntil && (
-                <span className="text-sm text-gray-400">
-                  Starts in <span className="text-white font-medium">{timeUntil}</span>
-                </span>
-              )}
-            </div>
-
-            {/* Title */}
-            <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(new Date(race.scheduledAt))}
-              </span>
-              <span className="flex items-center gap-2">
-                <Clock className="w-4 h-4" />
-                {formatTime(new Date(race.scheduledAt))}
-              </span>
-              <span className="flex items-center gap-2">
-                <Car className="w-4 h-4" />
-                {race.car}
-              </span>
-            </div>
-          </div>
-          {/* Prominent SOF Badge - Electric Design */}
-          {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
-                    </div>
-                    <div className="flex items-baseline gap-1">
-                      <span className="text-3xl font-black text-warning-amber font-mono tracking-tight drop-shadow-lg">
-                        {raceSOF}
-                      </span>
-                      <span className="text-sm text-warning-amber/70 font-medium">SOF</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Race Details */}
-            <Card>
-              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-                <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>
-                  <p className="text-white font-medium">{race.track}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Car</p>
-                  <p className="text-white font-medium">{race.car}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Session Type</p>
-                  <p className="text-white font-medium capitalize">{race.sessionType}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
-                  <p className={`font-medium ${config.color}`}>{config.label}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Strength of Field</p>
-                  <p className="text-warning-amber font-medium flex items-center gap-1.5">
-                    <Zap className="w-4 h-4" />
-                    {raceSOF ?? '—'}
-                  </p>
-                </div>
-                {/* TODO: Add registered count and max participants to race details response */}
-                {/* {race.registeredCount !== undefined && (
-                  <div className="p-4 bg-deep-graphite rounded-lg">
-                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Registered</p>
-                    <p className="text-white font-medium">
-                      {race.registeredCount}
-                      {race.maxParticipants && ` / ${race.maxParticipants}`}
-                    </p>
-                  </div>
-                )} */}
-              </div>
-            </Card>
-
-            {/* Entry List */}
-            <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-primary-blue" />
-                  Entry List
-                </h2>
-                <span className="text-sm text-gray-400">
-                  {entryList.length} driver{entryList.length !== 1 ? 's' : ''}
-                </span>
-              </div>
-
-              {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>
-                </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'
-                          }
-                        `}
-                      >
-                        {/* Position number */}
-                        <div
-                          className={`
-                            flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
-                            ${
-                              race.status === 'completed' && index === 0
-                                ? 'bg-yellow-500/20 text-yellow-400'
-                                : race.status === 'completed' && index === 1
-                                ? 'bg-gray-400/20 text-gray-300'
-                                : race.status === 'completed' && 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={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>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* League Card - Premium Design */}
-            {league && (
-              <Card className="overflow-hidden">
-                <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={`league-logo-${league.id}`}
-                      alt={league.name}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-0.5">League</p>
-                    <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>
-                    <p className="text-white font-medium">{(league.settings as any).maxDrivers ?? 32}</p>
-                  </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 as any).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"
-                >
-                  View League
-                  <ArrowRight className="w-4 h-4" />
-                </Link>
-              </Card>
-            )}
-
-            {/* 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' && registration.canRegister && !registration.isUserRegistered && (
-                  <Button
-                    variant="primary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleRegister}
-                    disabled={registerMutation.isPending}
-                  >
-                    <UserPlus className="w-4 h-4" />
-                    {registerMutation.isPending ? 'Registering...' : 'Register for Race'}
-                  </Button>
-                )}
-
-                {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" />
-                      <span className="font-medium">You're Registered</span>
-                    </div>
-                    <Button
-                      variant="secondary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={handleWithdraw}
-                      disabled={withdrawMutation.isPending}
-                    >
-                      <UserMinus className="w-4 h-4" />
-                      {withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
-                    </Button>
-                  </>
-                )}
-
-                {viewModel.canReopenRace &&
-                  LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleReopenRace}
-                    disabled={reopenMutation.isPending}
-                  >
-                    <PlayCircle className="w-4 h-4" />
-                    {reopenMutation.isPending ? 'Re-opening...' : 'Re-open Race'}
-                  </Button>
-                )}
-
-                {race.status === 'completed' && (
-                  <>
-                    <Button
-                      variant="primary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={() => router.push(`/races/${race.id}/results`)}
-                    >
-                      <Trophy className="w-4 h-4" />
-                      View Results
-                    </Button>
-                    {userResult && (
-                      <Button
-                        variant="secondary"
-                        className="w-full flex items-center justify-center gap-2"
-                        onClick={() => setShowProtestModal(true)}
-                      >
-                        <Scale className="w-4 h-4" />
-                        File Protest
-                      </Button>
-                    )}
-                    <Button
-                      variant="secondary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={() => router.push(`/races/${race.id}/stewarding`)}
-                    >
-                      <Scale className="w-4 h-4" />
-                      Stewarding
-                    </Button>
-                  </>
-                )}
-
-                {viewModel.canReopenRace &&
-                  LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleReopenRace}
-                    disabled={reopenMutation.isPending}
-                  >
-                    <PlayCircle className="w-4 h-4" />
-                    {reopenMutation.isPending ? 'Re-opening...' : 'Re-open Race'}
-                  </Button>
-                )}
-
-                {race.status === 'running' && LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="primary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={() => setShowEndRaceModal(true)}
-                  >
-                    <CheckCircle2 className="w-4 h-4" />
-                    End Race & Process Results
-                  </Button>
-                )}
-
-                {race.status === 'scheduled' && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleCancelRace}
-                    disabled={cancelMutation.isPending}
-                  >
-                    <XCircle className="w-4 h-4" />
-                    {cancelMutation.isPending ? 'Cancelling...' : 'Cancel Race'}
-                  </Button>
-                )}
-              </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}`}>
-                  <StatusIcon className={`w-5 h-5 ${config.color}`} />
-                </div>
-                <div>
-                  <p className={`font-medium ${config.color}`}>{config.label}</p>
-                  <p className="text-sm text-gray-400 mt-1">{config.description}</p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-
-      {/* Protest Filing Modal */}
-      <FileProtestModal
-        isOpen={showProtestModal}
-        onClose={() => setShowProtestModal(false)}
-        raceId={race.id}
-        leagueId={league ? league.id : ''}
-        protestingDriverId={currentDriverId}
-        participants={entryList.map(d => ({ id: d.id, name: d.name }))}
-      />
-
-      {/* End Race Modal */}
-      {showEndRaceModal && (
-        <EndRaceModal
-          raceId={race.id}
-          raceName={race.track}
-          onConfirm={async () => {
-            try {
-              await completeMutation.mutateAsync(race.id);
-              setShowEndRaceModal(false);
-            } catch (err) {
-              alert(err instanceof Error ? err.message : 'Failed to complete race');
-            }
-          }}
-          onCancel={() => setShowEndRaceModal(false)}
-        />
-      )}
-    </div>
-  );
-}
+export default RaceDetailInteractive;

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
+import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+
+export function RaceResultsInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: raceData, isLoading, error } = useRaceResultsDetail(raceId, currentDriverId);
+  const { data: sofData } = useRaceWithSOF(raceId);
+  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [importing, setImporting] = useState(false);
+  const [importSuccess, setImportSuccess] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [showImportForm, setShowImportForm] = useState(false);
+
+  const raceSOF = sofData?.strengthOfField || null;
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+
+  // Transform data for template
+  const results = raceData?.results.map(result => ({
+    position: result.position,
+    driverId: result.driverId,
+    driverName: result.driverName,
+    driverAvatar: result.avatarUrl,
+    country: 'US', // Default since view model doesn't have country
+    car: 'Unknown', // Default since view model doesn't have car
+    laps: 0, // Default since view model doesn't have laps
+    time: '0:00.00', // Default since view model doesn't have time
+    fastestLap: result.fastestLap.toString(), // Convert number to string
+    points: 0, // Default since view model doesn't have points
+    incidents: result.incidents,
+    isCurrentUser: result.driverId === currentDriverId,
+  })) ?? [];
+
+  const penalties = raceData?.penalties.map(penalty => ({
+    driverId: penalty.driverId,
+    driverName: raceData.results.find(r => r.driverId === penalty.driverId)?.driverName || 'Unknown',
+    type: penalty.type as 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points',
+    value: penalty.value || 0,
+    reason: 'Penalty applied', // Default since view model doesn't have reason
+    notes: undefined, // Default since view model doesn't have notes
+  })) ?? [];
+
+  // Actions
+  const handleBack = () => {
+    router.back();
+  };
+
+  const handleImportResults = async (importedResults: any[]) => {
+    setImporting(true);
+    setImportError(null);
+
+    try {
+      // TODO: Implement race results service
+      // await raceResultsService.importRaceResults(raceId, {
+      //   resultsFileContent: JSON.stringify(importedResults),
+      // });
+
+      setImportSuccess(true);
+      // await loadData();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : 'Failed to import results');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handlePenaltyClick = (driver: { id: string; name: string }) => {
+    // This would open a penalty modal in a real implementation
+    console.log('Penalty click for:', driver);
+  };
+
+  return (
+    <RaceResultsTemplate
+      raceTrack={raceData?.race?.track}
+      raceScheduledAt={raceData?.race?.scheduledAt}
+      totalDrivers={raceData?.stats.totalDrivers}
+      leagueName={raceData?.league?.name}
+      raceSOF={raceSOF}
+      results={results}
+      penalties={penalties}
+      pointsSystem={raceData?.pointsSystem ?? {}}
+      fastestLapTime={raceData?.fastestLapTime ?? 0}
+      currentDriverId={currentDriverId}
+      isAdmin={isAdmin}
+      isLoading={isLoading}
+      error={error}
+      onBack={handleBack}
+      onImportResults={handleImportResults}
+      onPenaltyClick={handlePenaltyClick}
+      importing={importing}
+      importSuccess={importSuccess}
+      importError={importError}
+      showImportForm={showImportForm}
+      setShowImportForm={setShowImportForm}
+    />
+  );
+}

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

@@ -1,180 +1,3 @@
-'use client';
+import { RaceResultsInteractive } from './RaceResultsInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
-import ImportResultsForm from '@/components/races/ImportResultsForm';
-import RaceResultsHeader from '@/components/races/RaceResultsHeader';
-import ResultsTable from '@/components/races/ResultsTable';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import type { RaceResultsDetailViewModel } from '@/lib/view-models/RaceResultsDetailViewModel';
-import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-export default function RaceResultsPage() {
-  const router = useRouter();
-  const params = useParams();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
-  const { data: sofData } = useRaceWithSOF(raceId);
-  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
-
-  const [importing, setImporting] = useState(false);
-  const [importSuccess, setImportSuccess] = useState(false);
-  const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
-  const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);
-  const [importError, setImportError] = useState<string | null>(null);
-
-  const raceSOF = sofData?.strengthOfField || null;
-  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
-
-  const handleImportSuccess = async (importedResults: any[]) => {
-    setImporting(true);
-    setImportError(null);
-
-    try {
-      // TODO: Implement race results service
-      // await raceResultsService.importRaceResults(raceId, {
-      //   resultsFileContent: JSON.stringify(importedResults), // Assuming the API expects JSON string
-      // });
-
-      setImportSuccess(true);
-      // await loadData();
-    } catch (err) {
-      setImportError(err instanceof Error ? err.message : 'Failed to import results');
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  const handleImportError = (errorMessage: string) => {
-    setImportError(errorMessage);
-  };
-
-  const handlePenaltyClick = (driver: { id: string; name: string }) => {
-    setPreSelectedDriver(driver);
-    setShowQuickPenaltyModal(true);
-  };
-
-  const handleCloseQuickPenaltyModal = () => {
-    setShowQuickPenaltyModal(false);
-    setPreSelectedDriver(undefined);
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center text-gray-400">Loading results...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error && !raceData) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          <Card className="text-center py-12">
-            <div className="text-warning-amber mb-4">
-              {error?.message || 'Race not found'}
-            </div>
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/races')}
-            >
-              Back to Races
-            </Button>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  const hasResults = raceData?.results.length ?? 0 > 0;
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(raceData?.league ? [{ label: raceData.league.name, href: `/leagues/${raceData.league.id}` }] : []),
-    ...(raceData?.race ? [{ label: raceData.race.track, href: `/races/${raceData.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">
-        <div className="flex items-center justify-between">
-          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
-          <Button
-            variant="secondary"
-            onClick={() => router.back()}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back
-          </Button>
-        </div>
-
-        <RaceResultsHeader
-          raceTrack={raceData?.race?.track}
-          raceScheduledAt={raceData?.race?.scheduledAt}
-          totalDrivers={raceData?.stats.totalDrivers}
-          leagueName={raceData?.league?.name}
-          raceSOF={raceSOF}
-        />
-
-        {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>
-        )}
-
-        {importError && (
-          <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
-            <strong>Error:</strong> {importError}
-          </div>
-        )}
-
-        <Card>
-          {hasResults && raceData ? (
-            <ResultsTable
-              results={raceData.resultsByPosition}
-              drivers={raceData.drivers}
-              pointsSystem={raceData.pointsSystem ?? {}}
-              fastestLapTime={raceData.fastestLapTime ?? 0}
-              penalties={raceData.penalties}
-              currentDriverId={raceData.currentDriverId ?? ''}
-              isAdmin={isAdmin}
-              onPenaltyClick={handlePenaltyClick}
-            />
-          ) : (
-            <>
-              <h2 className="text-xl font-semibold text-white mb-6">Import Results</h2>
-              <p className="text-gray-400 text-sm mb-6">
-                No results imported. Upload CSV to test the standings system.
-              </p>
-              {importing ? (
-                <div className="text-center py-8 text-gray-400">
-                  Importing results and updating standings...
-                </div>
-              ) : (
-                <ImportResultsForm
-                  raceId={raceId}
-                  onSuccess={handleImportSuccess}
-                  onError={handleImportError}
-                />
-              )}
-            </>
-          )}
-        </Card>
-      </div>
-    </div>
-  );
-}
+export default RaceResultsInteractive;

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
+import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+
+export function RaceStewardingInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: stewardingData, isLoading, error } = useRaceStewardingData(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
+
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+
+  // Actions
+  const handleBack = () => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleReviewProtest = (protestId: string) => {
+    // Navigate to protest review page
+    router.push(`/leagues/${stewardingData?.league?.id}/stewarding/protests/${protestId}`);
+  };
+
+  // Transform data for template
+  const templateData = stewardingData ? {
+    race: stewardingData.race,
+    league: stewardingData.league,
+    pendingProtests: stewardingData.pendingProtests,
+    resolvedProtests: stewardingData.resolvedProtests,
+    penalties: stewardingData.penalties,
+    driverMap: stewardingData.driverMap,
+    pendingCount: stewardingData.pendingCount,
+    resolvedCount: stewardingData.resolvedCount,
+    penaltiesCount: stewardingData.penaltiesCount,
+  } : undefined;
+
+  return (
+    <RaceStewardingTemplate
+      stewardingData={templateData}
+      isLoading={isLoading}
+      error={error}
+      onBack={handleBack}
+      onReviewProtest={handleReviewProtest}
+      isAdmin={isAdmin}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    />
+  );
+}

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

@@ -1,413 +1,3 @@
-'use client';
+import { RaceStewardingInteractive } from './RaceStewardingInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import RaceStewardingStats from '@/components/races/RaceStewardingStats';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import {
-  AlertCircle,
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle,
-  Clock,
-  Flag,
-  Gavel,
-  Scale,
-  Video
-} from 'lucide-react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-export default function RaceStewardingPage() {
-  const params = useParams();
-  const router = useRouter();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
-  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
-
-  const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
-
-  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
-
-  const pendingProtests = stewardingData?.pendingProtests ?? [];
-  const resolvedProtests = stewardingData?.resolvedProtests ?? [];
-
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case 'pending':
-      case 'under_review':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
-            Pending
-          </span>
-        );
-      case 'upheld':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
-            Upheld
-          </span>
-        );
-      case 'dismissed':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
-            Dismissed
-          </span>
-        );
-      case 'withdrawn':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
-            Withdrawn
-          </span>
-        );
-      default:
-        return null;
-    }
-  };
-
-  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',
-    });
-  };
-
-  if (loading) {
-    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">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-48 bg-iron-gray rounded-xl" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!stewardingData?.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">
-          <Card className="text-center py-12">
-            <div className="flex flex-col items-center gap-4">
-              <div className="p-4 bg-warning-amber/10 rounded-full">
-                <AlertTriangle className="w-8 h-8 text-warning-amber" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">Race not found</p>
-                <p className="text-sm text-gray-500">
-                  The race you're looking for doesn't exist.
-                </p>
-              </div>
-              <Button variant="secondary" onClick={() => router.push('/races')}>
-                Back to Races
-              </Button>
-            </div>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: stewardingData?.race?.track || 'Race', href: `/races/${raceId}` },
-    { label: 'Stewarding' },
-  ];
-
-  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 space-y-6">
-        {/* Navigation */}
-        <div className="flex items-center justify-between">
-          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
-          <Button
-            variant="secondary"
-            onClick={() => router.push(`/races/${raceId}`)}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back to Race
-          </Button>
-        </div>
-
-        {/* Header */}
-        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
-              <Scale className="w-6 h-6 text-primary-blue" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-white">Stewarding</h1>
-                 <p className="text-sm text-gray-400">
-                   {stewardingData?.race?.track} • {stewardingData?.race?.scheduledAt ? formatDate(stewardingData.race.scheduledAt) : ''}
-                 </p>
-            </div>
-          </div>
-
-          {/* Stats */}
-          <RaceStewardingStats
-            pendingCount={stewardingData?.pendingCount ?? 0}
-            resolvedCount={stewardingData?.resolvedCount ?? 0}
-            penaltiesCount={stewardingData?.penaltiesCount ?? 0}
-          />
-        </Card>
-
-        {/* Tab Navigation */}
-        <div className="border-b border-charcoal-outline">
-          <div className="flex gap-4">
-            <button
-              onClick={() => setActiveTab('pending')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'pending'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Pending
-              {pendingProtests.length > 0 && (
-                <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
-                  {pendingProtests.length}
-                </span>
-              )}
-            </button>
-            <button
-              onClick={() => setActiveTab('resolved')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'resolved'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Resolved
-            </button>
-            <button
-              onClick={() => setActiveTab('penalties')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'penalties'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Penalties
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        {activeTab === 'pending' && (
-          <div className="space-y-4">
-            {pendingProtests.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
-                  <Flag className="w-8 h-8 text-performance-green" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">All Clear!</p>
-                <p className="text-sm text-gray-400">No pending protests to review</p>
-              </Card>
-            ) : (
-              pendingProtests.map((protest) => {
-                const protester = stewardingData?.driverMap[protest.protestingDriverId];
-                const accused = stewardingData?.driverMap[protest.accusedDriverId];
-                const daysSinceFiled = Math.floor(
-                  (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
-                );
-                const isUrgent = daysSinceFiled > 2;
-
-                return (
-                  <Card
-                    key={protest.id}
-                    className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
-                  >
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-2">
-                          <AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
-                          <Link
-                            href={`/drivers/${protest.protestingDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {protester?.name || 'Unknown'}
-                          </Link>
-                          <span className="text-gray-400">vs</span>
-                          <Link
-                            href={`/drivers/${protest.accusedDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {accused?.name || 'Unknown'}
-                          </Link>
-                          {getStatusBadge(protest.status)}
-                          {isUrgent && (
-                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
-                              <AlertTriangle className="w-3 h-3" />
-                              {daysSinceFiled}d old
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
-                          <span>Lap {protest.incident.lap}</span>
-                          <span>•</span>
-                          <span>Filed {formatDate(protest.filedAt)}</span>
-                          {protest.proofVideoUrl && (
-                            <>
-                              <span>•</span>
-                              <a
-                                href={protest.proofVideoUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center gap-1 text-primary-blue hover:underline"
-                              >
-                                <Video className="w-3 h-3" />
-                                Video Evidence
-                              </a>
-                            </>
-                          )}
-                        </div>
-                        <p className="text-sm text-gray-300">{protest.incident.description}</p>
-                      </div>
-                      {isAdmin && stewardingData?.league && (
-                        <Link
-                          href={`/leagues/${stewardingData.league.id}/stewarding/protests/${protest.id}`}
-                        >
-                          <Button variant="primary">Review</Button>
-                        </Link>
-                      )}
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-
-        {activeTab === 'resolved' && (
-          <div className="space-y-4">
-            {resolvedProtests.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
-                  <CheckCircle className="w-8 h-8 text-gray-500" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
-                <p className="text-sm text-gray-400">
-                  Resolved protests will appear here
-                </p>
-              </Card>
-            ) : (
-              resolvedProtests.map((protest) => {
-                const protester = stewardingData?.driverMap[protest.protestingDriverId];
-                const accused = stewardingData?.driverMap[protest.accusedDriverId];
-
-                return (
-                  <Card key={protest.id}>
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-2">
-                          <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
-                          <Link
-                            href={`/drivers/${protest.protestingDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {protester?.name || 'Unknown'}
-                          </Link>
-                          <span className="text-gray-400">vs</span>
-                          <Link
-                            href={`/drivers/${protest.accusedDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {accused?.name || 'Unknown'}
-                          </Link>
-                          {getStatusBadge(protest.status)}
-                        </div>
-                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
-                          <span>Lap {protest.incident.lap}</span>
-                          <span>•</span>
-                          <span>Filed {formatDate(protest.filedAt)}</span>
-                        </div>
-                        <p className="text-sm text-gray-300 mb-2">
-                          {protest.incident.description}
-                        </p>
-                        {protest.decisionNotes && (
-                          <div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
-                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
-                              Steward Decision
-                            </p>
-                            <p className="text-sm text-gray-300">{protest.decisionNotes}</p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-
-        {activeTab === 'penalties' && (
-          <div className="space-y-4">
-            {stewardingData?.penalties.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
-                  <Gavel className="w-8 h-8 text-gray-500" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">No Penalties</p>
-                <p className="text-sm text-gray-400">
-                  Penalties issued for this race will appear here
-                </p>
-              </Card>
-            ) : (
-              stewardingData?.penalties.map((penalty) => {
-                const driver = stewardingData?.driverMap[penalty.driverId];
-                return (
-                  <Card key={penalty.id}>
-                    <div className="flex items-center gap-4">
-                      <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
-                        <Gavel className="w-6 h-6 text-red-400" />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Link
-                            href={`/drivers/${penalty.driverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {driver?.name || 'Unknown'}
-                          </Link>
-                          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
-                            {penalty.type.replace('_', ' ')}
-                          </span>
-                        </div>
-                        <p className="text-sm text-gray-400">{penalty.reason}</p>
-                        {penalty.notes && (
-                          <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
-                        )}
-                      </div>
-                      <div className="text-right">
-                        <span className="text-2xl font-bold text-red-400">
-                          {penalty.type === 'time_penalty' && `+${penalty.value}s`}
-                          {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
-                          {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
-                          {penalty.type === 'disqualification' && 'DSQ'}
-                          {penalty.type === 'warning' && 'Warning'}
-                          {penalty.type === 'license_points' && `${penalty.value} LP`}
-                        </span>
-                      </div>
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+export default RaceStewardingInteractive;

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { RacesAllTemplate, StatusFilter } from '@/templates/RacesAllTemplate';
+import { useAllRacesPageData } from '@/hooks/useRaceService';
+
+const ITEMS_PER_PAGE = 10;
+
+export function RacesAllInteractive() {
+  const router = useRouter();
+  
+  // Fetch data
+  const { data: pageData, isLoading } = useAllRacesPageData();
+  
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  // Filters
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [leagueFilter, setLeagueFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [showFilterModal, setShowFilterModal] = useState(false);
+
+  // Transform data for template
+  const races = pageData?.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+  })) ?? [];
+
+  // Calculate total pages
+  const filteredRaces = races.filter(race => {
+    if (statusFilter !== 'all' && race.status !== statusFilter) {
+      return false;
+    }
+
+    if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
+      return false;
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      const matchesTrack = race.track.toLowerCase().includes(query);
+      const matchesCar = race.car.toLowerCase().includes(query);
+      const matchesLeague = race.leagueName?.toLowerCase().includes(query);
+      if (!matchesTrack && !matchesCar && !matchesLeague) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
+
+  // Actions
+  const handleRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <RacesAllTemplate
+      races={races}
+      isLoading={isLoading}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      itemsPerPage={ITEMS_PER_PAGE}
+      onPageChange={handlePageChange}
+      statusFilter={statusFilter}
+      setStatusFilter={setStatusFilter}
+      leagueFilter={leagueFilter}
+      setLeagueFilter={setLeagueFilter}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      showFilters={showFilters}
+      setShowFilters={setShowFilters}
+      showFilterModal={showFilterModal}
+      setShowFilterModal={setShowFilterModal}
+      onRaceClick={handleRaceClick}
+      onLeagueClick={handleLeagueClick}
+    />
+  );
+}

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

@@ -1,409 +1,3 @@
-'use client';
+import { RacesAllInteractive } from './RacesAllInteractive';
 
-import { useState, useMemo, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
-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 { useAllRacesPageData } from '@/hooks/useRaceService';
-import {
-  Calendar,
-  Clock,
-  Flag,
-  ChevronRight,
-  ChevronLeft,
-  Filter,
-  Car,
-  Trophy,
-  Zap,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  ArrowRight,
-  Search,
-  SlidersHorizontal,
-} from 'lucide-react';
-
-const ITEMS_PER_PAGE = 10;
-
-type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
-
-export default function AllRacesPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { data: pageData, isLoading: loading } = useAllRacesPageData();
-
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
-
-  // Filters
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
-  const [leagueFilter, setLeagueFilter] = useState<string>('all');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showFilters, setShowFilters] = useState(false);
-
-  const races = pageData?.races ?? [];
-
-  const filteredRaces = useMemo(() => {
-    return races.filter(race => {
-      if (statusFilter !== 'all' && race.status !== statusFilter) {
-        return false;
-      }
-
-      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
-        return false;
-      }
-
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const matchesTrack = race.track.toLowerCase().includes(query);
-        const matchesCar = race.car.toLowerCase().includes(query);
-        const matchesLeague = race.leagueName.toLowerCase().includes(query);
-        if (!matchesTrack && !matchesCar && !matchesLeague) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-  }, [races, statusFilter, leagueFilter, searchQuery]);
-
-  // Paginate
-  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
-  const paginatedRaces = useMemo(() => {
-    const start = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredRaces.slice(start, start + ITEMS_PER_PAGE);
-  }, [filteredRaces, currentPage]);
-
-  // Reset page when filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [statusFilter, leagueFilter, searchQuery]);
-
-  const formatDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-    },
-  };
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: 'All Races' },
-  ];
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-5xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-10 bg-iron-gray rounded w-1/3" />
-            <div className="space-y-4">
-              {[1, 2, 3, 4, 5].map(i => (
-                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-5xl mx-auto space-y-6">
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={breadcrumbItems} />
-
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <Heading level={1} className="text-2xl font-bold text-white flex items-center gap-3">
-              <Flag className="w-6 h-6 text-primary-blue" />
-              All Races
-            </Heading>
-            <p className="text-gray-400 text-sm mt-1">
-              {filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
-            </p>
-          </div>
-          
-          <Button
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            className="flex items-center gap-2"
-          >
-            <SlidersHorizontal className="w-4 h-4" />
-            Filters
-          </Button>
-        </div>
-
-        {/* Search & Filters */}
-        <Card className={`!p-4 ${showFilters ? '' : 'hidden sm:block'}`}>
-          <div className="space-y-4">
-            {/* Search */}
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search by track, car, or league..."
-                className="w-full pl-10 pr-4 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
-              />
-            </div>
-
-            {/* Filter Row */}
-            <div className="flex flex-wrap gap-4">
-              {/* Status Filter */}
-              <select
-                value={statusFilter}
-                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>
-                <option value="scheduled">Scheduled</option>
-                <option value="running">Live</option>
-                <option value="completed">Completed</option>
-                <option value="cancelled">Cancelled</option>
-              </select>
-
-              {/* League Filter */}
-              <select
-                value={leagueFilter}
-                onChange={(e) => setLeagueFilter(e.target.value)}
-                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.leagueId))].map(leagueId => {
-                  const race = pageData.races.find(r => r.leagueId === leagueId);
-                  return race ? (
-                    <option key={leagueId} value={leagueId}>
-                      {race.leagueName}
-                    </option>
-                  ) : null;
-                })}
-              </select>
-
-              {/* Clear Filters */}
-              {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery) && (
-                <button
-                  onClick={() => {
-                    setStatusFilter('all');
-                    setLeagueFilter('all');
-                    setSearchQuery('');
-                  }}
-                  className="px-4 py-2 text-sm text-primary-blue hover:underline"
-                >
-                  Clear filters
-                </button>
-              )}
-            </div>
-          </div>
-        </Card>
-
-        {/* Race List */}
-        {paginatedRaces.length === 0 ? (
-          <Card className="text-center py-12">
-            <div className="flex flex-col items-center gap-4">
-              <div className="p-4 bg-iron-gray rounded-full">
-                <Calendar className="w-8 h-8 text-gray-500" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">No races found</p>
-                <p className="text-sm text-gray-500">
-                  {races.length === 0 
-                    ? 'No races have been scheduled yet'
-                    : 'Try adjusting your search or filters'}
-                </p>
-              </div>
-            </div>
-          </Card>
-        ) : (
-          <div className="space-y-3">
-            {paginatedRaces.map(race => {
-               const config = statusConfig[race.status as keyof typeof statusConfig];
-               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" />
-                  )}
-
-                  <div className="flex items-center gap-4">
-                    {/* Date Column */}
-                    <div className="hidden sm:flex flex-col items-center min-w-[80px] text-center">
-                      <p className="text-xs text-gray-500 uppercase">
-                        {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
-                      </p>
-                      <p className="text-2xl font-bold text-white">
-                        {new Date(race.scheduledAt).getDate()}
-                      </p>
-                      <p className="text-xs text-gray-500">
-                        {formatTime(race.scheduledAt)}
-                      </p>
-                    </div>
-
-                    {/* Divider */}
-                    <div className="hidden sm:block w-px h-16 bg-charcoal-outline" />
-
-                    {/* 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 flex-wrap items-center gap-x-4 gap-y-1 mt-1">
-                            <span className="flex items-center gap-1.5 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.5 text-sm text-warning-amber">
-                                <Zap className="w-3.5 h-3.5" />
-                                SOF {race.strengthOfField}
-                              </span>
-                            )}
-                            <span className="sm:hidden text-sm text-gray-500">
-                              {formatDate(race.scheduledAt)}
-                            </span>
-                          </div>
-                          <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 */}
-                        <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border flex-shrink-0`}>
-                          <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
-                          <span className={`text-xs font-medium ${config.color}`}>
-                            {config.label}
-                          </span>
-                        </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>
-        )}
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="flex items-center justify-between pt-4">
-            <p className="text-sm text-gray-500">
-              Showing {((currentPage - 1) * ITEMS_PER_PAGE) + 1}–{Math.min(currentPage * ITEMS_PER_PAGE, filteredRaces.length)} of {filteredRaces.length}
-            </p>
-            
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                disabled={currentPage === 1}
-                className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <ChevronLeft className="w-5 h-5" />
-              </button>
-              
-              <div className="flex items-center gap-1">
-                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                  let pageNum: number;
-                  if (totalPages <= 5) {
-                    pageNum = i + 1;
-                  } else if (currentPage <= 3) {
-                    pageNum = i + 1;
-                  } else if (currentPage >= totalPages - 2) {
-                    pageNum = totalPages - 4 + i;
-                  } else {
-                    pageNum = currentPage - 2 + i;
-                  }
-
-                  return (
-                    <button
-                      key={pageNum}
-                      onClick={() => setCurrentPage(pageNum)}
-                      className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${
-                        currentPage === pageNum
-                          ? 'bg-primary-blue text-white'
-                          : 'text-gray-400 hover:text-white hover:bg-iron-gray'
-                      }`}
-                    >
-                      {pageNum}
-                    </button>
-                  );
-                })}
-              </div>
-
-              <button
-                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                disabled={currentPage === totalPages}
-                className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <ChevronRight className="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+export default RacesAllInteractive;

apps/website/app/races/page.tsx

@@ -1,569 +1,3 @@
-'use client';
+import { RacesInteractive } from './RacesInteractive';
 
-import { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
-import { useRacesPageData } from '@/hooks/useRaceService';
-import {
-  Calendar,
-  Clock,
-  Flag,
-  ChevronRight,
-  Filter,
-  MapPin,
-  Car,
-  Trophy,
-  Users,
-  Zap,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  CalendarDays,
-  ArrowRight,
-} from 'lucide-react';
-
-type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
-type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
-
-export default function RacesPage() {
-  const router = useRouter();
-  const { data: pageData, isLoading: loading } = useRacesPageData();
-
-  // Filters
-  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
-  const [leagueFilter, setLeagueFilter] = useState<string>('all');
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
-
-  // Filter races
-  const filteredRaces = useMemo(() => {
-    if (!pageData) return [];
-
-    return pageData.races.filter((race) => {
-      // Status filter
-      if (statusFilter !== 'all' && race.status !== statusFilter) {
-        return false;
-      }
-
-      // League filter
-      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
-        return false;
-      }
-
-      // Time filter
-      if (timeFilter === 'upcoming' && !race.isUpcoming) {
-        return false;
-      }
-      if (timeFilter === 'live' && !race.isLive) {
-        return false;
-      }
-      if (timeFilter === 'past' && !race.isPast) {
-        return false;
-      }
-
-      return true;
-    });
-  }, [pageData, statusFilter, leagueFilter, timeFilter]);
-
-  // Group races by date for calendar view
-  const racesByDate = useMemo(() => {
-    const grouped = new Map<string, typeof filteredRaces[0][]>();
-    filteredRaces.forEach((race) => {
-      const dateKey = race.scheduledAt.split('T')[0]!;
-      if (!grouped.has(dateKey)) {
-        grouped.set(dateKey, []);
-      }
-      grouped.get(dateKey)!.push(race);
-    });
-    return grouped;
-  }, [filteredRaces]);
-
-  const upcomingRaces = filteredRaces.filter(r => r.isUpcoming).slice(0, 5);
-  const liveRaces = filteredRaces.filter(r => r.isLive);
-  const recentResults = filteredRaces.filter(r => r.isPast).slice(0, 5);
-  const stats = {
-    total: pageData?.totalCount ?? 0,
-    scheduled: pageData?.scheduledRaces.length ?? 0,
-    running: pageData?.runningRaces.length ?? 0,
-    completed: pageData?.completedRaces.length ?? 0,
-  };
-
-  const formatDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  const formatFullDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const getRelativeTime = (date?: Date | string) => {
-    if (!date) return '';
-    const now = new Date();
-    const targetDate = typeof date === 'string' ? new Date(date) : date;
-    const diffMs = targetDate.getTime() - now.getTime();
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-    if (diffMs < 0) return 'Past';
-    if (diffHours < 1) return 'Starting soon';
-    if (diffHours < 24) return `In ${diffHours}h`;
-    if (diffDays === 1) return 'Tomorrow';
-    if (diffDays < 7) return `In ${diffDays} days`;
-    return formatDate(targetDate);
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-    },
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-10 bg-iron-gray rounded w-1/4" />
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {[1, 2, 3, 4].map(i => (
-                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
-              ))}
-            </div>
-            <div className="h-64 bg-iron-gray rounded-lg" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl mx-auto space-y-8">
-        {/* Hero Header */}
-        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border border-charcoal-outline p-8">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
-          
-          <div className="relative z-10">
-            <div className="flex items-center gap-3 mb-2">
-              <div className="p-2 bg-primary-blue/10 rounded-lg">
-                <Flag className="w-6 h-6 text-primary-blue" />
-              </div>
-              <Heading level={1} className="text-3xl font-bold text-white">
-                Race Calendar
-              </Heading>
-            </div>
-            <p className="text-gray-400 max-w-2xl">
-              Track upcoming races, view live events, and explore results across all your leagues.
-            </p>
-          </div>
-
-          {/* Quick Stats */}
-          <div className="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
-                <CalendarDays className="w-4 h-4" />
-                <span>Total</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.total}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
-                <Clock className="w-4 h-4" />
-                <span>Scheduled</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.scheduled}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-performance-green text-sm mb-1">
-                <Zap className="w-4 h-4" />
-                <span>Live Now</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.running}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
-                <Trophy className="w-4 h-4" />
-                <span>Completed</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.completed}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Live Races Banner */}
-        {liveRaces.length > 0 && (
-          <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-performance-green/20 via-performance-green/10 to-transparent border border-performance-green/30 p-6">
-            <div className="absolute top-0 right-0 w-32 h-32 bg-performance-green/20 rounded-full blur-2xl animate-pulse" />
-            
-            <div className="relative z-10">
-              <div className="flex items-center gap-2 mb-4">
-                <div className="flex items-center gap-2 px-3 py-1 bg-performance-green/20 rounded-full">
-                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
-                  <span className="text-performance-green font-semibold text-sm">LIVE NOW</span>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                {liveRaces.map((race) => (
-                  <div
-                    key={race.id}
-                    onClick={() => router.push(`/races/${race.id}`)}
-                    className="flex items-center justify-between p-4 bg-deep-graphite/80 rounded-lg border border-performance-green/20 cursor-pointer hover:border-performance-green/40 transition-all"
-                  >
-                    <div className="flex items-center gap-4">
-                      <div className="p-2 bg-performance-green/20 rounded-lg">
-                        <PlayCircle className="w-5 h-5 text-performance-green" />
-                      </div>
-                      <div>
-                        <h3 className="font-semibold text-white">{race.track}</h3>
-                        <p className="text-sm text-gray-400">{race.leagueName}</p>
-                      </div>
-                    </div>
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main Content - Race List */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Filters */}
-            <Card className="!p-4">
-              <div className="flex flex-wrap gap-4">
-                {/* Time Filter Tabs */}
-                <div className="flex items-center gap-1 p-1 bg-deep-graphite rounded-lg">
-                  {(['upcoming', 'live', 'past', 'all'] as TimeFilter[]).map(filter => (
-                    <button
-                      key={filter}
-                      onClick={() => setTimeFilter(filter)}
-                      className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-                        timeFilter === filter
-                          ? 'bg-primary-blue text-white'
-                          : 'text-gray-400 hover:text-white'
-                      }`}
-                    >
-                      {filter === 'live' && <span className="inline-block w-2 h-2 bg-performance-green rounded-full mr-2 animate-pulse" />}
-                      {filter.charAt(0).toUpperCase() + filter.slice(1)}
-                    </button>
-                  ))}
-                </div>
-
-                {/* League Filter */}
-                <select
-                  value={leagueFilter}
-                  onChange={(e) => setLeagueFilter(e.target.value)}
-                  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.leagueId))].map(leagueId => {
-                    const item = pageData.races.find(r => r.leagueId === leagueId);
-                    return item ? (
-                      <option key={leagueId} value={leagueId}>
-                        {item.leagueName}
-                      </option>
-                    ) : null;
-                  })}
-                </select>
-              </div>
-            </Card>
-
-            {/* Race List by Date */}
-            {filteredRaces.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="flex flex-col items-center gap-4">
-                  <div className="p-4 bg-iron-gray rounded-full">
-                    <Calendar className="w-8 h-8 text-gray-500" />
-                  </div>
-                  <div>
-                    <p className="text-white font-medium mb-1">No races found</p>
-                    <p className="text-sm text-gray-500">
-                      {pageData?.totalCount === 0
-                        ? 'No races have been scheduled yet'
-                        : 'Try adjusting your filters'}
-                    </p>
-                  </div>
-                </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>
-
-                   {/* Races for this date */}
-                   <div className="space-y-2">
-                     {dayRaces.map((race) => {
-                       const config = statusConfig[race.status as keyof typeof statusConfig];
-                       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" />
-                           )}
-
-                           <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>
-
-                             {/* 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>
-
-                                 {/* 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" />
-                                   {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>
-           )}
-
-            {/* View All Link */}
-            {filteredRaces.length > 0 && (
-              <div className="text-center">
-                <Link
-                  href="/races/all"
-                  className="inline-flex items-center gap-2 px-6 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:border-primary-blue transition-colors"
-                >
-                  View All Races
-                  <ArrowRight className="w-4 h-4" />
-                </Link>
-              </div>
-            )}
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* Upcoming This Week */}
-            <Card>
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-semibold text-white flex items-center gap-2">
-                  <Clock className="w-4 h-4 text-primary-blue" />
-                  Next Up
-                </h3>
-                <span className="text-xs text-gray-500">This week</span>
-              </div>
-
-              {upcomingRaces.length === 0 ? (
-                <p className="text-sm text-gray-500 text-center py-4">
-                  No races scheduled this week
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {upcomingRaces.map((race) => {
-                    if (!race.scheduledAt) {
-                      return null;
-                    }
-                    const scheduledAtDate = new Date(race.scheduledAt);
-                    return (
-                      <div
-                        key={race.id}
-                        onClick={() => router.push(`/races/${race.id}`)}
-                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
-                      >
-                        <div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
-                          <span className="text-sm font-bold text-primary-blue">
-                            {scheduledAtDate.getDate()}
-                          </span>
-                        </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(scheduledAtDate)}</p>
-                        </div>
-                        <ChevronRight className="w-4 h-4 text-gray-500" />
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </Card>
-
-            {/* Recent Results */}
-            <Card>
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-semibold text-white flex items-center gap-2">
-                  <Trophy className="w-4 h-4 text-warning-amber" />
-                  Recent Results
-                </h3>
-              </div>
-
-              {recentResults.length === 0 ? (
-                <p className="text-sm text-gray-500 text-center py-4">
-                  No completed races yet
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {recentResults.map((race) => (
-                    <div
-                      key={race.id}
-                      onClick={() => router.push(`/races/${race.id}/results`)}
-                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
-                    >
-                      <div className="flex-shrink-0 w-10 h-10 bg-gray-500/10 rounded-lg flex items-center justify-center">
-                        <CheckCircle2 className="w-5 h-5 text-gray-400" />
-                      </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(new Date(race.scheduledAt))}</p>
-                      </div>
-                      <ChevronRight className="w-4 h-4 text-gray-500" />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </Card>
-
-            {/* Quick Actions */}
-            <Card>
-              <h3 className="font-semibold text-white mb-4">Quick Actions</h3>
-              <div className="space-y-2">
-                <Link
-                  href="/leagues"
-                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
-                >
-                  <div className="p-2 bg-primary-blue/10 rounded-lg">
-                    <Users className="w-4 h-4 text-primary-blue" />
-                  </div>
-                  <span className="text-sm text-white">Browse Leagues</span>
-                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
-                </Link>
-                <Link
-                  href="/leaderboards"
-                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
-                >
-                  <div className="p-2 bg-warning-amber/10 rounded-lg">
-                    <Trophy className="w-4 h-4 text-warning-amber" />
-                  </div>
-                  <span className="text-sm text-white">View Leaderboards</span>
-                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
-                </Link>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+export default RacesInteractive;

apps/website/app/teams/TeamsInteractive.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { Users, Search, Sparkles, Crown, Star, TrendingUp, Shield } from 'lucide-react';
+import TeamsTemplate from '@/templates/TeamsTemplate';
+import TeamHeroSection from '@/components/teams/TeamHeroSection';
+import TeamSearchBar from '@/components/teams/TeamSearchBar';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import CreateTeamForm from '@/components/teams/CreateTeamForm';
+import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
+import SkillLevelSection from '@/components/teams/SkillLevelSection';
+import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
+import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
+import { useAllTeams } from '@/hooks/useTeamService';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
+const SKILL_LEVELS: SkillLevel[] = ['pro', 'advanced', 'intermediate', 'beginner'];
+
+export default function TeamsInteractive() {
+  const router = useRouter();
+  const { data: teams = [], isLoading: loading } = useAllTeams();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  // Derive groups by skill level from the loaded teams
+  const groupsBySkillLevel = useMemo(() => {
+    const byLevel: Record<string, typeof teams> = {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    };
+    teams.forEach((team) => {
+      const level = team.performanceLevel || 'intermediate';
+      if (byLevel[level]) {
+        byLevel[level].push(team);
+      }
+    });
+    return byLevel;
+  }, [teams]);
+
+  // Select top teams by rating for the preview section
+  const topTeams = useMemo(() => {
+    const sortedByRating = [...teams].sort((a, b) => {
+      // Rating is not currently part of TeamSummaryViewModel in this build.
+      // Keep deterministic ordering by name until a rating field is exposed.
+      return a.name.localeCompare(b.name);
+    });
+    return sortedByRating.slice(0, 5);
+  }, [teams]);
+
+  const handleTeamClick = (teamId: string) => {
+    if (teamId.startsWith('demo-team-')) {
+      return;
+    }
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleCreateSuccess = (teamId: string) => {
+    setShowCreateForm(false);
+    router.push(`/teams/${teamId}`);
+  };
+
+  // Filter by search query
+  const filteredTeams = teams.filter((team) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      team.name.toLowerCase().includes(query) ||
+      (team.description ?? '').toLowerCase().includes(query) ||
+      (team.region ?? '').toLowerCase().includes(query) ||
+      (team.languages ?? []).some((lang) => lang.toLowerCase().includes(query))
+    );
+  });
+
+  // Group teams by skill level
+  const teamsByLevel = useMemo(() => {
+    return SKILL_LEVELS.reduce(
+      (acc, level) => {
+        const fromGroup = groupsBySkillLevel[level] ?? [];
+        acc[level] = filteredTeams.filter((team) =>
+          fromGroup.some((groupTeam) => groupTeam.id === team.id),
+        );
+        return acc;
+      },
+      {
+        beginner: [],
+        intermediate: [],
+        advanced: [],
+        pro: [],
+      } as Record<string, TeamSummaryViewModel[]>,
+    );
+  }, [groupsBySkillLevel, filteredTeams]);
+
+  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
+
+  const handleSkillLevelClick = (level: SkillLevel) => {
+    const element = document.getElementById(`level-${level}`);
+    element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const handleBrowseTeams = () => {
+    const element = document.getElementById('teams-list');
+    element?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  if (showCreateForm) {
+    return (
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="mb-6">
+          <Button variant="secondary" onClick={() => setShowCreateForm(false)}>
+            ← Back to Teams
+          </Button>
+        </div>
+
+        <Card>
+          <h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
+          <CreateTeamForm onCancel={() => setShowCreateForm(false)} onSuccess={handleCreateSuccess} />
+        </Card>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading teams...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <TeamHeroSection
+        teams={teams}
+        teamsByLevel={teamsByLevel}
+        recruitingCount={recruitingCount}
+        onShowCreateForm={() => setShowCreateForm(true)}
+        onBrowseTeams={handleBrowseTeams}
+        onSkillLevelClick={handleSkillLevelClick}
+      />
+
+      {/* Search Bar */}
+      <TeamSearchBar searchQuery={searchQuery} onSearchChange={setSearchQuery} />
+
+      {/* Why Join Section */}
+      {!searchQuery && <WhyJoinTeamSection />}
+
+      {/* Team Leaderboard Preview */}
+      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
+
+      {/* Featured Recruiting */}
+      {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}
+
+      {/* Teams by Skill Level */}
+      {teams.length === 0 ? (
+        <Card className="text-center py-16">
+          <div className="max-w-md mx-auto">
+            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
+              <Users className="w-8 h-8 text-purple-400" />
+            </div>
+            <Heading level={2} className="text-2xl mb-3">
+              No teams yet
+            </Heading>
+            <p className="text-gray-400 mb-8">
+              Be the first to create a racing team. Gather drivers and compete together in endurance events.
+            </p>
+            <Button
+              variant="primary"
+              onClick={() => setShowCreateForm(true)}
+              className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
+            >
+              <Sparkles className="w-4 h-4" />
+              Create Your First Team
+            </Button>
+          </div>
+        </Card>
+      ) : filteredTeams.length === 0 ? (
+        <Card className="text-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <Search className="w-10 h-10 text-gray-600" />
+            <p className="text-gray-400">No teams found matching "{searchQuery}"</p>
+            <Button variant="secondary" onClick={() => setSearchQuery('')}>
+              Clear search
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <div>
+          {SKILL_LEVELS.map((level, index) => (
+            <div key={level} id={`level-${level}`} className="scroll-mt-8">
+              <SkillLevelSection
+                level={{
+                  id: level,
+                  label: level.charAt(0).toUpperCase() + level.slice(1),
+                  icon: level === 'pro' ? Crown : level === 'advanced' ? Star : level === 'intermediate' ? TrendingUp : Shield,
+                  color: level === 'pro' ? 'text-yellow-400' : level === 'advanced' ? 'text-purple-400' : level === 'intermediate' ? 'text-primary-blue' : 'text-green-400',
+                  bgColor: level === 'pro' ? 'bg-yellow-400/10' : level === 'advanced' ? 'bg-purple-400/10' : level === 'intermediate' ? 'bg-primary-blue/10' : 'bg-green-400/10',
+                  borderColor: level === 'pro' ? 'border-yellow-400/30' : level === 'advanced' ? 'border-purple-400/30' : level === 'intermediate' ? 'border-primary-blue/30' : 'border-green-400/30',
+                  description: level === 'pro' ? 'Elite competition, sponsored teams' : level === 'advanced' ? 'Competitive racing, high consistency' : level === 'intermediate' ? 'Growing skills, regular practice' : 'Learning the basics, friendly environment',
+                }}
+                teams={teamsByLevel[level] ?? []}
+                onTeamClick={handleTeamClick}
+                defaultExpanded={index === 0}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/app/teams/TeamsStatic.tsx

@@ -0,0 +1,58 @@
+import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import TeamsTemplate from '@/templates/TeamsTemplate';
+
+// This is a server component that fetches data server-side
+// It will be used by the page.tsx when server-side rendering is needed
+
+interface TeamsStaticProps {
+  teams: TeamSummaryViewModel[];
+  isLoading?: boolean;
+}
+
+export default function TeamsStatic({ teams, isLoading = false }: TeamsStaticProps) {
+  // Calculate derived data that would normally be done in the template
+  const teamsBySkillLevel = teams.reduce(
+    (acc, team) => {
+      const level = team.performanceLevel || 'intermediate';
+      if (!acc[level]) {
+        acc[level] = [];
+      }
+      acc[level].push(team);
+      return acc;
+    },
+    {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    } as Record<string, TeamSummaryViewModel[]>,
+  );
+
+  const topTeams = [...teams]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .slice(0, 5);
+
+  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
+
+  // For static rendering, we don't have interactive state
+  // So we pass empty values and handlers that won't be used
+  return (
+    <TeamsTemplate
+      teams={teams}
+      isLoading={isLoading}
+      searchQuery=""
+      showCreateForm={false}
+      teamsByLevel={teamsBySkillLevel}
+      topTeams={topTeams}
+      recruitingCount={recruitingCount}
+      filteredTeams={teams}
+      onSearchChange={() => {}}
+      onShowCreateForm={() => {}}
+      onHideCreateForm={() => {}}
+      onTeamClick={() => {}}
+      onCreateSuccess={() => {}}
+      onBrowseTeams={() => {}}
+      onSkillLevelClick={() => {}}
+    />
+  );
+}

apps/website/app/teams/[id]/TeamDetailInteractive.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import TeamDetailTemplate from '@/templates/TeamDetailTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
+import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+
+type Tab = 'overview' | 'roster' | 'standings' | 'admin';
+
+export default function TeamDetailInteractive() {
+    const params = useParams();
+    const teamId = params.id as string;
+    const { teamService } = useServices();
+    const router = useRouter();
+    const currentDriverId = useEffectiveDriverId();
+
+    const [team, setTeam] = useState<TeamDetailsViewModel | null>(null);
+    const [memberships, setMemberships] = useState<TeamMemberViewModel[]>([]);
+    const [activeTab, setActiveTab] = useState<Tab>('overview');
+    const [loading, setLoading] = useState(true);
+    const [isAdmin, setIsAdmin] = useState(false);
+
+    const loadTeamData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId);
+
+            if (!teamDetails) {
+                setTeam(null);
+                setMemberships([]);
+                setIsAdmin(false);
+                return;
+            }
+
+            const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
+
+            const adminStatus = teamDetails.isOwner ||
+                teamMembers.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'));
+
+            setTeam(teamDetails);
+            setMemberships(teamMembers);
+            setIsAdmin(adminStatus);
+        } finally {
+            setLoading(false);
+        }
+    }, [teamId, currentDriverId, teamService]);
+
+    useEffect(() => {
+        void loadTeamData();
+    }, [loadTeamData]);
+
+    const handleUpdate = () => {
+        loadTeamData();
+    };
+
+    const handleRemoveMember = async (driverId: string) => {
+        if (!confirm('Are you sure you want to remove this member?')) {
+            return;
+        }
+
+        try {
+            const performer = await teamService.getMembership(teamId, currentDriverId);
+            if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+                throw new Error('Only owners or admins can remove members');
+            }
+
+            const membership = await teamService.getMembership(teamId, driverId);
+            if (!membership) {
+                throw new Error('Member not found');
+            }
+            if (membership.role === 'owner') {
+                throw new Error('Cannot remove the team owner');
+            }
+
+            await teamService.removeMembership(teamId, driverId);
+            handleUpdate();
+        } catch (error) {
+            alert(error instanceof Error ? error.message : 'Failed to remove member');
+        }
+    };
+
+    const handleChangeRole = async (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
+        try {
+            const performer = await teamService.getMembership(teamId, currentDriverId);
+            if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+                throw new Error('Only owners or admins can update roles');
+            }
+
+            const membership = await teamService.getMembership(teamId, driverId);
+            if (!membership) {
+                throw new Error('Member not found');
+            }
+            if (membership.role === 'owner') {
+                throw new Error('Cannot change the owner role');
+            }
+
+            // Convert 'admin' to 'manager' for the service
+            const serviceRole = newRole === 'admin' ? 'manager' : newRole;
+            await teamService.updateMembership(teamId, driverId, serviceRole);
+            handleUpdate();
+        } catch (error) {
+            alert(error instanceof Error ? error.message : 'Failed to change role');
+        }
+    };
+
+    const handleGoBack = () => {
+        window.history.back();
+    };
+
+    return (
+        <TeamDetailTemplate
+            team={team}
+            memberships={memberships}
+            activeTab={activeTab}
+            loading={loading}
+            isAdmin={isAdmin}
+            onTabChange={setActiveTab}
+            onUpdate={handleUpdate}
+            onRemoveMember={handleRemoveMember}
+            onChangeRole={handleChangeRole}
+            onGoBack={handleGoBack}
+        />
+    );
+}

apps/website/app/teams/[id]/TeamDetailStatic.tsx

@@ -0,0 +1,43 @@
+import TeamDetailTemplate from '@/templates/TeamDetailTemplate';
+import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
+import type { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+
+// This is a server component that can be used for static rendering
+// It receives pre-fetched data and renders the template
+
+interface TeamDetailStaticProps {
+  team: TeamDetailsViewModel | null;
+  memberships: TeamMemberViewModel[];
+  currentDriverId: string;
+  isLoading?: boolean;
+}
+
+export default function TeamDetailStatic({ 
+  team, 
+  memberships, 
+  currentDriverId,
+  isLoading = false 
+}: TeamDetailStaticProps) {
+  // Determine admin status
+  const isAdmin = team ? (
+    team.isOwner ||
+    memberships.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'))
+  ) : false;
+
+  // For static rendering, we don't have interactive state
+  // So we pass empty values and handlers that won't be used
+  return (
+    <TeamDetailTemplate
+      team={team}
+      memberships={memberships}
+      activeTab="overview"
+      loading={isLoading}
+      isAdmin={isAdmin}
+      onTabChange={() => {}}
+      onUpdate={() => {}}
+      onRemoveMember={() => {}}
+      onChangeRole={() => {}}
+      onGoBack={() => {}}
+    />
+  );
+}

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

@@ -1,327 +1,3 @@
-'use client';
+import TeamDetailInteractive from './TeamDetailInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Image from 'next/image';
-import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useState, useMemo } from 'react';
-
-import JoinTeamButton from '@/components/teams/JoinTeamButton';
-import TeamAdmin from '@/components/teams/TeamAdmin';
-import TeamRoster from '@/components/teams/TeamRoster';
-import TeamStandings from '@/components/teams/TeamStandings';
-import StatItem from '@/components/teams/StatItem';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
-import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
-import { getMediaUrl } from '@/lib/utilities/media';
-import PlaceholderImage from '@/components/ui/PlaceholderImage';
-
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-
-type Tab = 'overview' | 'roster' | 'standings' | 'admin';
-
-export default function TeamDetailPage() {
-    const params = useParams();
-    const teamId = params.id as string;
-    const { teamService, mediaService } = useServices();
-
-    const [team, setTeam] = useState<TeamDetailsViewModel | null>(null);
-    const [memberships, setMemberships] = useState<TeamMemberViewModel[]>([]);
-    const [activeTab, setActiveTab] = useState<Tab>('overview');
-    const [loading, setLoading] = useState(true);
-    const [isAdmin, setIsAdmin] = useState(false);
-    const currentDriverId = useEffectiveDriverId();
-    const isSponsorMode = useSponsorMode();
-
-  const loadTeamData = useCallback(async () => {
-    setLoading(true);
-    try {
-      const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId);
-
-      if (!teamDetails) {
-        setTeam(null);
-        setMemberships([]);
-        setIsAdmin(false);
-        return;
-      }
-
-      const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
-
-      const adminStatus = teamDetails.isOwner ||
-        teamMembers.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'));
-
-      setTeam(teamDetails);
-      setMemberships(teamMembers);
-      setIsAdmin(adminStatus);
-    } finally {
-      setLoading(false);
-    }
-  }, [teamId, currentDriverId, teamService]);
-
-  useEffect(() => {
-    void loadTeamData();
-  }, [loadTeamData]);
-
-  const handleUpdate = () => {
-    loadTeamData();
-  };
-
-  const handleRemoveMember = async (driverId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) {
-      return;
-    }
-
-    try {
-      const performer = await teamService.getMembership(teamId, currentDriverId);
-      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
-        throw new Error('Only owners or admins can remove members');
-      }
-
-      const membership = await teamService.getMembership(teamId, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot remove the team owner');
-      }
-
-      await teamService.removeMembership(teamId, driverId);
-      handleUpdate();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to remove member');
-    }
-  };
-
-  const handleChangeRole = async (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
-    try {
-      const performer = await teamService.getMembership(teamId, currentDriverId);
-      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
-        throw new Error('Only owners or admins can update roles');
-      }
-
-      const membership = await teamService.getMembership(teamId, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot change the owner role');
-      }
-
-      // Convert 'admin' to 'manager' for the service
-      const serviceRole = newRole === 'admin' ? 'manager' : newRole;
-      await teamService.updateMembership(teamId, driverId, serviceRole);
-      handleUpdate();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to change role');
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center text-gray-400">Loading team...</div>
-      </div>
-    );
-  }
-
-  if (!team) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <Card>
-          <div className="text-center py-12">
-            <h2 className="text-2xl font-bold text-white mb-2">Team Not Found</h2>
-            <p className="text-gray-400 mb-6">
-              The team you're looking for doesn't exist or has been disbanded.
-            </p>
-            <Button variant="primary" onClick={() => window.history.back()}>
-              Go Back
-            </Button>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  const tabs: { id: Tab; label: string; visible: boolean }[] = [
-    { id: 'overview', label: 'Overview', visible: true },
-    { id: 'roster', label: 'Roster', visible: true },
-    { id: 'standings', label: 'Standings', visible: true },
-    { id: 'admin', label: 'Admin', visible: isAdmin },
-  ];
-
-  const visibleTabs = tabs.filter(tab => tab.visible);
-
-  // Build sponsor insights for team using real membership and league data
-  const leagueCount = team.leagues?.length ?? 0;
-  const teamMetrics = [
-    MetricBuilders.members(memberships.length),
-    MetricBuilders.reach(memberships.length * 15),
-    MetricBuilders.races(leagueCount),
-    MetricBuilders.engagement(82),
-  ];
-
-  return (
-    <div className="max-w-6xl mx-auto">
-      {/* Breadcrumb */}
-      <Breadcrumbs
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Teams', href: '/teams' },
-          { label: team.name }
-        ]}
-      />
-
-      {/* Sponsor Insights Card - Consistent placement at top */}
-      {isSponsorMode && team && (
-        <SponsorInsightsCard
-          entityType="team"
-          entityId={team.id}
-          entityName={team.name}
-          tier="standard"
-          metrics={teamMetrics}
-          slots={SlotTemplates.team(true, true, 500, 250)}
-          trustScore={90}
-          monthlyActivity={85}
-        />
-      )}
-
-      <Card className="mb-6">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-6">
-            <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
-              <Image
-                src={getMediaUrl('team-logo', team.id)}
-                alt={team.name}
-                width={96}
-                height={96}
-                className="w-full h-full object-cover"
-              />
-            </div>
-            
-            <div>
-              <div className="flex items-center gap-3 mb-2">
-                <h1 className="text-3xl font-bold text-white">{team.name}</h1>
-                {team.tag && (
-                  <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
-                    [{team.tag}]
-                  </span>
-                )}
-              </div>
-
-              <p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
-
-              <div className="flex items-center gap-4 text-sm text-gray-400">
-                <span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
-                {team.category && (
-                  <span className="flex items-center gap-1 text-purple-400">
-                    <span className="w-2 h-2 rounded-full bg-purple-400"></span>
-                    {team.category}
-                  </span>
-                )}
-                {team.createdAt && (
-                  <span>
-                    Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-                  </span>
-                )}
-                {leagueCount > 0 && (
-                  <span>
-                    Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <JoinTeamButton teamId={teamId} onUpdate={handleUpdate} />
-        </div>
-      </Card>
-
-      <div className="mb-6">
-        <div className="flex items-center gap-2 border-b border-charcoal-outline">
-          {visibleTabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`
-                px-4 py-3 font-medium transition-all relative
-                ${activeTab === tab.id 
-                  ? 'text-primary-blue' 
-                  : 'text-gray-400 hover:text-white'
-                }
-              `}
-            >
-              {tab.label}
-              {activeTab === tab.id && (
-                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
-              )}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        {activeTab === 'overview' && (
-          <div className="space-y-6">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <Card className="lg:col-span-2">
-                <h3 className="text-xl font-semibold text-white mb-4">About</h3>
-                <p className="text-gray-300 leading-relaxed">{team.description}</p>
-              </Card>
-
-              <Card>
-                <h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
-                <div className="space-y-3">
-                  <StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
-                  {team.category && (
-                    <StatItem label="Category" value={team.category} color="text-purple-400" />
-                  )}
-                  {leagueCount > 0 && (
-                    <StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
-                  )}
-                  {team.createdAt && (
-                    <StatItem
-                      label="Founded"
-                      value={new Date(team.createdAt).toLocaleDateString('en-US', {
-                        month: 'short',
-                        year: 'numeric',
-                      })}
-                      color="text-gray-300"
-                    />
-                  )}
-                </div>
-              </Card>
-            </div>
-
-            <Card>
-              <h3 className="text-xl font-semibold text-white mb-4">Recent Activity</h3>
-              <div className="text-center py-8 text-gray-400">
-                No recent activity to display
-              </div>
-            </Card>
-          </div>
-        )}
-
-        {activeTab === 'roster' && (
-          <TeamRoster
-            teamId={teamId}
-            memberships={memberships}
-            isAdmin={isAdmin}
-            onRemoveMember={handleRemoveMember}
-            onChangeRole={handleChangeRole}
-          />
-        )}
-
-        {activeTab === 'standings' && (
-          <TeamStandings teamId={teamId} leagues={team.leagues} />
-        )}
-
-        {activeTab === 'admin' && isAdmin && (
-          <TeamAdmin team={team} onUpdate={handleUpdate} />
-        )}
-      </div>
-    </div>
-  );
-}
+export default TeamDetailInteractive;

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import TeamLeaderboardTemplate from '@/templates/TeamLeaderboardTemplate';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+interface TeamLeaderboardInteractiveProps {
+  teams: TeamSummaryViewModel[];
+}
+
+export default function TeamLeaderboardInteractive({ teams }: TeamLeaderboardInteractiveProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rating');
+
+  const handleTeamClick = (teamId: string) => {
+    if (teamId.startsWith('demo-team-')) {
+      return;
+    }
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleBackToTeams = () => {
+    router.push('/teams');
+  };
+
+  return (
+    <TeamLeaderboardTemplate
+      teams={teams}
+      searchQuery={searchQuery}
+      filterLevel={filterLevel}
+      sortBy={sortBy}
+      onSearchChange={setSearchQuery}
+      onFilterLevelChange={setFilterLevel}
+      onSortChange={setSortBy}
+      onTeamClick={handleTeamClick}
+      onBackToTeams={handleBackToTeams}
+    />
+  );
+}

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

@@ -0,0 +1,27 @@
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import TeamLeaderboardInteractive from './TeamLeaderboardInteractive';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
+// ============================================================================
+
+export default async function TeamLeaderboardStatic() {
+  // Create services for server-side data fetching
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const teamService = serviceFactory.createTeamService();
+
+  // Fetch data server-side
+  let teams: TeamSummaryViewModel[] = [];
+
+  try {
+    teams = await teamService.getAllTeams();
+  } catch (error) {
+    console.error('Failed to load team leaderboard:', error);
+    teams = [];
+  }
+
+  // Pass data to Interactive wrapper which handles client-side interactions
+  return <TeamLeaderboardInteractive teams={teams} />;
+}

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

@@ -1,514 +1,9 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import {
-  Users,
-  Trophy,
-  Search,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Target,
-  Award,
-  ArrowLeft,
-  Medal,
-  Percent,
-  Hash,
-  Globe,
-  Languages,
-} from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import TopThreePodium from '@/components/teams/TopThreePodium';
-import { useAllTeams } from '@/hooks/useTeamService';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-import { getMediaUrl } from '@/lib/utilities/media';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-
-type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
-
-type TeamDisplayData = TeamSummaryViewModel;
-
-const getSafeRating = (team: TeamDisplayData): number => {
-  void team;
-  return 0;
-};
-
-const getSafeTotalWins = (team: TeamDisplayData): number => {
-  const raw = team.totalWins;
-  const value = typeof raw === 'number' ? raw : 0;
-  return Number.isFinite(value) ? value : 0;
-};
-
-const getSafeTotalRaces = (team: TeamDisplayData): number => {
-  const raw = team.totalRaces;
-  const value = typeof raw === 'number' ? raw : 0;
-  return Number.isFinite(value) ? value : 0;
-};
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: SkillLevel;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-}[] = [
-  {
-    id: 'pro',
-    label: 'Pro',
-    icon: Crown,
-    color: 'text-yellow-400',
-    bgColor: 'bg-yellow-400/10',
-    borderColor: 'border-yellow-400/30',
-  },
-  {
-    id: 'advanced',
-    label: 'Advanced',
-    icon: Star,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-400/10',
-    borderColor: 'border-purple-400/30',
-  },
-  {
-    id: 'intermediate',
-    label: 'Intermediate',
-    icon: TrendingUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-primary-blue/10',
-    borderColor: 'border-primary-blue/30',
-  },
-  {
-    id: 'beginner',
-    label: 'Beginner',
-    icon: Shield,
-    color: 'text-green-400',
-    bgColor: 'bg-green-400/10',
-    borderColor: 'border-green-400/30',
-  },
-];
-
-// ============================================================================
-// SORT OPTIONS
-// ============================================================================
-
-const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
-  { id: 'rating', label: 'Rating', icon: Star },
-  { id: 'wins', label: 'Total Wins', icon: Trophy },
-  { id: 'winRate', label: 'Win Rate', icon: Percent },
-  { id: 'races', label: 'Races', icon: Hash },
-];
-
+import TeamLeaderboardStatic from './TeamLeaderboardStatic';
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
 export default function TeamLeaderboardPage() {
-  const router = useRouter();
-  const { data: teams = [], isLoading: loading } = useAllTeams();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState<SortBy>('rating');
-  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
-
-
-  const handleTeamClick = (teamId: string) => {
-    if (teamId.startsWith('demo-team-')) {
-      return;
-    }
-    router.push(`/teams/${teamId}`);
-  };
-
-  // Filter and sort teams
-  const filteredAndSortedTeams = teams
-    .filter((team) => {
-      // Search filter
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
-          return false;
-        }
-      }
-      // Level filter
-      if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
-        return false;
-      }
-      return true;
-    })
-    .sort((a, b) => {
-      switch (sortBy) {
-        case 'rating': {
-          const aRating = getSafeRating(a);
-          const bRating = getSafeRating(b);
-          return bRating - aRating;
-        }
-        case 'wins': {
-          const aWinsSort = getSafeTotalWins(a);
-          const bWinsSort = getSafeTotalWins(b);
-          return bWinsSort - aWinsSort;
-        }
-        case 'winRate': {
-          const aRaces = getSafeTotalRaces(a);
-          const bRaces = getSafeTotalRaces(b);
-          const aWins = getSafeTotalWins(a);
-          const bWins = getSafeTotalWins(b);
-          const aRate = aRaces > 0 ? aWins / aRaces : 0;
-          const bRate = bRaces > 0 ? bWins / bRaces : 0;
-          return bRate - aRate;
-        }
-        case 'races': {
-          const aRacesSort = getSafeTotalRaces(a);
-          const bRacesSort = getSafeTotalRaces(b);
-          return bRacesSort - aRacesSort;
-        }
-        default:
-          return 0;
-      }
-    });
-
-  const getMedalColor = (position: number) => {
-    switch (position) {
-      case 0:
-        return 'text-yellow-400';
-      case 1:
-        return 'text-gray-300';
-      case 2:
-        return 'text-amber-600';
-      default:
-        return 'text-gray-500';
-    }
-  };
-
-  const getMedalBg = (position: number) => {
-    switch (position) {
-      case 0:
-        return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
-      case 1:
-        return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
-      case 2:
-        return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
-      default:
-        return 'bg-iron-gray/50 border-charcoal-outline';
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading leaderboard...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Header */}
-      <div className="mb-8">
-        <Button
-          variant="secondary"
-          onClick={() => router.push('/teams')}
-          className="flex items-center gap-2 mb-6"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          Back to Teams
-        </Button>
-
-        <div className="flex items-center gap-4 mb-2">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
-            <Award className="w-7 h-7 text-yellow-400" />
-          </div>
-          <div>
-            <Heading level={1} className="text-3xl lg:text-4xl">
-              Team Leaderboard
-            </Heading>
-            <p className="text-gray-400">Rankings of all teams by performance metrics</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Filters and Search */}
-      <div className="mb-6 space-y-4">
-        {/* Search and Level Filter Row */}
-        <div className="flex flex-col lg:flex-row gap-4">
-          <div className="flex-1 relative max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search teams..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-
-          {/* Level Filter */}
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => setFilterLevel('all')}
-              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                filterLevel === 'all'
-                  ? 'bg-purple-600 text-white'
-                  : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-              }`}
-            >
-              All Levels
-            </button>
-            {SKILL_LEVELS.map((level) => {
-              const LevelIcon = level.icon;
-              return (
-                <button
-                  key={level.id}
-                  type="button"
-                  onClick={() => setFilterLevel(level.id)}
-                  className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                    filterLevel === level.id
-                      ? `${level.bgColor} ${level.color} border ${level.borderColor}`
-                      : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-                  }`}
-                >
-                  <LevelIcon className="w-4 h-4" />
-                  {level.label}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Sort Options */}
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">Sort by:</span>
-          <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-            {SORT_OPTIONS.map((option) => (
-              <button
-                key={option.id}
-                type="button"
-                onClick={() => setSortBy(option.id)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  sortBy === option.id
-                    ? 'bg-purple-600 text-white'
-                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
-                }`}
-              >
-                <option.icon className="w-3.5 h-3.5" />
-                {option.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Podium for Top 3 - only show when viewing by rating without filters */}
-      {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
-        <TopThreePodium teams={filteredAndSortedTeams} onClick={handleTeamClick} />
-      )}
-
-      {/* Stats Summary */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Users className="w-4 h-4 text-purple-400" />
-            <span className="text-xs text-gray-500">Total Teams</span>
-          </div>
-          <p className="text-2xl font-bold text-white">{filteredAndSortedTeams.length}</p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Crown className="w-4 h-4 text-yellow-400" />
-            <span className="text-xs text-gray-500">Pro Teams</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.filter((t) => t.performanceLevel === 'pro').length}
-          </p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Trophy className="w-4 h-4 text-performance-green" />
-            <span className="text-xs text-gray-500">Total Wins</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.reduce<number>(
-              (sum, t) => sum + getSafeTotalWins(t),
-              0,
-            )}
-          </p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Target className="w-4 h-4 text-neon-aqua" />
-            <span className="text-xs text-gray-500">Total Races</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.reduce<number>(
-              (sum, t) => sum + getSafeTotalRaces(t),
-              0,
-            )}
-          </p>
-        </div>
-      </div>
-
-      {/* Leaderboard Table */}
-      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-        {/* Table Header */}
-        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
-          <div className="col-span-1 text-center">Rank</div>
-          <div className="col-span-4 lg:col-span-5">Team</div>
-          <div className="col-span-2 text-center hidden lg:block">Members</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
-          <div className="col-span-2 text-center">Win Rate</div>
-        </div>
-
-        {/* Table Body */}
-        <div className="divide-y divide-charcoal-outline/50">
-          {filteredAndSortedTeams.map((team, index) => {
-            const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
-            const LevelIcon = levelConfig?.icon || Shield;
-            const totalRaces = getSafeTotalRaces(team);
-            const totalWins = getSafeTotalWins(team);
-            const winRate =
-              totalRaces > 0 ? ((totalWins / totalRaces) * 100).toFixed(1) : '0.0';
-
-            return (
-              <button
-                key={team.id}
-                type="button"
-                onClick={() => handleTeamClick(team.id)}
-                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
-              >
-                {/* Position */}
-                <div className="col-span-1 flex items-center justify-center">
-                  <div
-                    className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(index)} ${getMedalColor(index)}`}
-                  >
-                    {index < 3 ? (
-                      <Medal className="w-4 h-4" />
-                    ) : (
-                      index + 1
-                    )}
-                  </div>
-                </div>
-
-                {/* Team Info */}
-                <div className="col-span-4 lg:col-span-5 flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
-                    <Image
-                      src={team.logoUrl || getMediaUrl('team-logo', team.id)}
-                      alt={team.name}
-                      width={40}
-                      height={40}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
-                      {team.name}
-                    </p>
-                    <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
-                      <span className={`${levelConfig?.color}`}>{levelConfig?.label}</span>
-                      {team.category && (
-                        <span className="flex items-center gap-1 text-purple-400">
-                          <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
-                          {team.category}
-                        </span>
-                      )}
-                      {team.region && (
-                        <span className="flex items-center gap-1 text-gray-400">
-                          <Globe className="w-3 h-3 text-neon-aqua" />
-                          {team.region}
-                        </span>
-                      )}
-                      {team.languages && team.languages.length > 0 && (
-                        <span className="flex items-center gap-1 text-gray-400">
-                          <Languages className="w-3 h-3 text-purple-400" />
-                          {team.languages.slice(0, 2).join(', ')}
-                          {team.languages.length > 2 && ` +${team.languages.length - 2}`}
-                        </span>
-                      )}
-                      {team.isRecruiting && (
-                        <span className="flex items-center gap-1 text-performance-green">
-                          <div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
-                          Recruiting
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Members */}
-                <div className="col-span-2 items-center justify-center hidden lg:flex">
-                  <span className="flex items-center gap-1 text-gray-400">
-                    <Users className="w-4 h-4" />
-                    {team.memberCount}
-                  </span>
-                </div>
-
-                {/* Rating */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span
-                    className={`font-mono font-semibold ${
-                      sortBy === 'rating' ? 'text-purple-400' : 'text-white'
-                    }`}
-                  >
-                    {getSafeRating(team).toLocaleString()}
-                  </span>
-                </div>
-
-                {/* Wins */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-purple-400' : 'text-white'}`}>
-                    {getSafeTotalWins(team)}
-                  </span>
-                </div>
-
-                {/* Win Rate */}
-                <div className="col-span-2 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-purple-400' : 'text-white'}`}>
-                    {winRate}%
-                  </span>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Empty State */}
-        {filteredAndSortedTeams.length === 0 && (
-          <div className="py-16 text-center">
-            <Trophy className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-            <p className="text-gray-400 mb-2">No teams found</p>
-            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setSearchQuery('');
-                setFilterLevel('all');
-              }}
-              className="mt-4"
-            >
-              Clear Filters
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+  return <TeamLeaderboardStatic />;
 }

apps/website/app/teams/page.tsx

@@ -1,388 +1,3 @@
-'use client';
+import TeamsInteractive from './TeamsInteractive';
 
-import { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Users,
-  Trophy,
-  Search,
-  Plus,
-  Sparkles,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Zap,
-  UserPlus,
-  ChevronRight,
-  Timer,
-  Target,
-  Award,
-  Handshake,
-  MessageCircle,
-  Calendar,
-} from 'lucide-react';
-import TeamCard from '@/components/teams/TeamCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import CreateTeamForm from '@/components/teams/CreateTeamForm';
-import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
-import SkillLevelSection from '@/components/teams/SkillLevelSection';
-import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
-import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
-import { useAllTeams } from '@/hooks/useTeamService';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type TeamDisplayData = TeamSummaryViewModel;
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: SkillLevel;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-  description: string;
-}[] = [
-  {
-    id: 'pro',
-    label: 'Pro',
-    icon: Crown,
-    color: 'text-yellow-400',
-    bgColor: 'bg-yellow-400/10',
-    borderColor: 'border-yellow-400/30',
-    description: 'Elite competition, sponsored teams',
-  },
-  {
-    id: 'advanced',
-    label: 'Advanced',
-    icon: Star,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-400/10',
-    borderColor: 'border-purple-400/30',
-    description: 'Competitive racing, high consistency',
-  },
-  {
-    id: 'intermediate',
-    label: 'Intermediate',
-    icon: TrendingUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-primary-blue/10',
-    borderColor: 'border-primary-blue/30',
-    description: 'Growing skills, regular practice',
-  },
-  {
-    id: 'beginner',
-    label: 'Beginner',
-    icon: Shield,
-    color: 'text-green-400',
-    bgColor: 'bg-green-400/10',
-    borderColor: 'border-green-400/30',
-    description: 'Learning the basics, friendly environment',
-  },
-];
-
-
-
-
-
-// ============================================================================
-// MAIN PAGE COMPONENT
-// ============================================================================
-
-export default function TeamsPage() {
-  const router = useRouter();
-  const { data: teams = [], isLoading: loading } = useAllTeams();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showCreateForm, setShowCreateForm] = useState(false);
-
-  // Derive groups by skill level from the loaded teams
-  const groupsBySkillLevel = useMemo(() => {
-    const byLevel: Record<string, typeof teams> = {
-      beginner: [],
-      intermediate: [],
-      advanced: [],
-      pro: [],
-    };
-    teams.forEach((team) => {
-      const level = team.performanceLevel || 'intermediate';
-      if (byLevel[level]) {
-        byLevel[level].push(team);
-      }
-    });
-    return byLevel;
-  }, [teams]);
-
-  // Select top teams by rating for the preview section
-  const topTeams = useMemo(() => {
-    const sortedByRating = [...teams].sort((a, b) => {
-      // Rating is not currently part of TeamSummaryViewModel in this build.
-      // Keep deterministic ordering by name until a rating field is exposed.
-      return a.name.localeCompare(b.name);
-    });
-    return sortedByRating.slice(0, 5);
-  }, [teams]);
-
-  const handleTeamClick = (teamId: string) => {
-    if (teamId.startsWith('demo-team-')) {
-      return;
-    }
-    router.push(`/teams/${teamId}`);
-  };
-
-  const handleCreateSuccess = (teamId: string) => {
-    setShowCreateForm(false);
-    router.push(`/teams/${teamId}`);
-  };
-
-  // Filter by search query
-  const filteredTeams = teams.filter((team) => {
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return (
-      team.name.toLowerCase().includes(query) ||
-      (team.description ?? '').toLowerCase().includes(query) ||
-      (team.region ?? '').toLowerCase().includes(query) ||
-      (team.languages ?? []).some((lang) => lang.toLowerCase().includes(query))
-    );
-  });
-
-  // Group teams by skill level
-  const teamsByLevel = useMemo(() => {
-    return SKILL_LEVELS.reduce(
-      (acc, level) => {
-        const fromGroup = groupsBySkillLevel[level.id] ?? [];
-        acc[level.id] = filteredTeams.filter((team) =>
-          fromGroup.some((groupTeam) => groupTeam.id === team.id),
-        );
-        return acc;
-      },
-      {
-        beginner: [],
-        intermediate: [],
-        advanced: [],
-        pro: [],
-      } as Record<string, TeamSummaryViewModel[]>,
-    );
-  }, [groupsBySkillLevel, filteredTeams]);
-
-  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
-
-  if (showCreateForm) {
-    return (
-      <div className="max-w-4xl mx-auto px-4">
-        <div className="mb-6">
-          <Button variant="secondary" onClick={() => setShowCreateForm(false)}>
-            ← Back to Teams
-          </Button>
-        </div>
-
-        <Card>
-          <h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
-          <CreateTeamForm onCancel={() => setShowCreateForm(false)} onSuccess={handleCreateSuccess} />
-        </Card>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading teams...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Hero Section - Different from Leagues */}
-      <div className="relative mb-10 overflow-hidden">
-        {/* Main Hero Card */}
-        <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
-          {/* Background decorations */}
-          <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
-          <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
-          <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
-
-          <div className="relative z-10">
-            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
-              <div className="max-w-xl">
-                {/* Badge */}
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
-                  <Users className="w-3.5 h-3.5" />
-                  Team Racing
-                </div>
-
-                <Heading level={1} className="text-4xl lg:text-5xl mb-4">
-                  Find Your
-                  <span className="text-purple-400"> Crew</span>
-                </Heading>
-
-                <p className="text-gray-400 text-lg leading-relaxed mb-6">
-                  Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
-                </p>
-
-                {/* Quick Stats */}
-                <div className="flex flex-wrap gap-4 mb-6">
-                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                    <Users className="w-4 h-4 text-purple-400" />
-                    <span className="text-white font-semibold">{teams.length}</span>
-                    <span className="text-gray-500 text-sm">Teams</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                    <UserPlus className="w-4 h-4 text-performance-green" />
-                    <span className="text-white font-semibold">{recruitingCount}</span>
-                    <span className="text-gray-500 text-sm">Recruiting</span>
-                  </div>
-                </div>
-
-                {/* CTA Buttons */}
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    variant="primary"
-                    onClick={() => setShowCreateForm(true)}
-                    className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
-                  >
-                    <Plus className="w-4 h-4" />
-                    Create Team
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      const element = document.getElementById('teams-list');
-                      element?.scrollIntoView({ behavior: 'smooth' });
-                    }}
-                    className="flex items-center gap-2"
-                  >
-                    <Search className="w-4 h-4" />
-                    Browse Teams
-                  </Button>
-                </div>
-              </div>
-
-              {/* Skill Level Quick Nav */}
-              <div className="lg:w-72">
-                <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
-                <div className="space-y-2">
-                  {SKILL_LEVELS.map((level) => {
-                    const LevelIcon = level.icon;
-                    const count = teamsByLevel[level.id]?.length || 0;
-
-                    return (
-                      <button
-                        key={level.id}
-                        type="button"
-                        onClick={() => {
-                          const element = document.getElementById(`level-${level.id}`);
-                          element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        }}
-                        className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
-                      >
-                        <div className="flex items-center gap-2">
-                          <LevelIcon className={`w-4 h-4 ${level.color}`} />
-                          <span className="text-white font-medium">{level.label}</span>
-                        </div>
-                        <span className="text-gray-400 text-sm">{count} teams</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Search and Filter Bar - Same style as Leagues */}
-      <div id="teams-list" className="mb-6 scroll-mt-8">
-        <div className="flex flex-col lg:flex-row gap-4">
-          {/* Search */}
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search teams by name, description, region, or language..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Why Join Section */}
-      {!searchQuery && <WhyJoinTeamSection />}
-
-      {/* Team Leaderboard Preview */}
-      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
-
-      {/* Featured Recruiting */}
-      {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}
-
-      {/* Teams by Skill Level */}
-      {teams.length === 0 ? (
-        <Card className="text-center py-16">
-          <div className="max-w-md mx-auto">
-            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
-              <Users className="w-8 h-8 text-purple-400" />
-            </div>
-            <Heading level={2} className="text-2xl mb-3">
-              No teams yet
-            </Heading>
-            <p className="text-gray-400 mb-8">
-              Be the first to create a racing team. Gather drivers and compete together in endurance events.
-            </p>
-            <Button
-              variant="primary"
-              onClick={() => setShowCreateForm(true)}
-              className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
-            >
-              <Sparkles className="w-4 h-4" />
-              Create Your First Team
-            </Button>
-          </div>
-        </Card>
-      ) : filteredTeams.length === 0 ? (
-        <Card className="text-center py-12">
-          <div className="flex flex-col items-center gap-4">
-            <Search className="w-10 h-10 text-gray-600" />
-            <p className="text-gray-400">No teams found matching "{searchQuery}"</p>
-            <Button variant="secondary" onClick={() => setSearchQuery('')}>
-              Clear search
-            </Button>
-          </div>
-        </Card>
-      ) : (
-        <div>
-          {SKILL_LEVELS.map((level, index) => (
-            <div key={level.id} id={`level-${level.id}`} className="scroll-mt-8">
-              <SkillLevelSection
-                level={level}
-                teams={teamsByLevel[level.id] ?? []}
-                onTeamClick={handleTeamClick}
-                defaultExpanded={index === 0}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+export default TeamsInteractive;

apps/website/components/DriverRankingsFilter.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Search, Filter, Hash, Star, Trophy, Medal, Percent } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}[] = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
+  { id: 'rank', label: 'Rank', icon: Hash },
+  { id: 'rating', label: 'Rating', icon: Star },
+  { id: 'wins', label: 'Wins', icon: Trophy },
+  { id: 'podiums', label: 'Podiums', icon: Medal },
+  { id: 'winRate', label: 'Win Rate', icon: Percent },
+];
+
+interface DriverRankingsFilterProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  selectedSkill: 'all' | SkillLevel;
+  onSkillChange: (skill: 'all' | SkillLevel) => void;
+  sortBy: SortBy;
+  onSortChange: (sort: SortBy) => void;
+  showFilters: boolean;
+  onToggleFilters: () => void;
+}
+
+export default function DriverRankingsFilter({
+  searchQuery,
+  onSearchChange,
+  selectedSkill,
+  onSkillChange,
+  sortBy,
+  onSortChange,
+  showFilters,
+  onToggleFilters,
+}: DriverRankingsFilterProps) {
+  return (
+    <div className="mb-6 space-y-4">
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search drivers by name or nationality..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-11"
+          />
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onToggleFilters}
+          className="lg:hidden flex items-center gap-2"
+        >
+          <Filter className="w-4 h-4" />
+          Filters
+        </Button>
+      </div>
+
+      <div className={`flex flex-wrap gap-2 ${showFilters ? 'block' : 'hidden lg:flex'}`}>
+        <button
+          type="button"
+          onClick={() => onSkillChange('all')}
+          className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+            selectedSkill === 'all'
+              ? 'bg-primary-blue text-white'
+              : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+          }`}
+        >
+          All Levels
+        </button>
+        {SKILL_LEVELS.map((level) => {
+          return (
+            <button
+              key={level.id}
+              type="button"
+              onClick={() => onSkillChange(level.id)}
+              className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                selectedSkill === level.id
+                  ? `${level.bgColor} ${level.color} border ${level.borderColor}`
+                  : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+              }`}
+            >
+              {level.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-500">Sort by:</span>
+        <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+          {SORT_OPTIONS.map((option) => {
+            const OptionIcon = option.icon;
+            return (
+              <button
+                key={option.id}
+                type="button"
+                onClick={() => onSortChange(option.id)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  sortBy === option.id
+                    ? 'bg-primary-blue text-white'
+                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+                }`}
+              >
+                <OptionIcon className="w-3.5 h-3.5" />
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/DriverTopThreePodium.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Trophy, Medal, Crown } from 'lucide-react';
+import Image from 'next/image';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+interface DriverTopThreePodiumProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export default function DriverTopThreePodium({ drivers, onDriverClick }: DriverTopThreePodiumProps) {
+  if (drivers.length < 3) return null;
+
+  const top3 = drivers.slice(0, 3) as [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel];
+
+  const podiumOrder: [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel] = [
+    top3[1],
+    top3[0],
+    top3[2],
+  ]; // 2nd, 1st, 3rd
+  const podiumHeights = ['h-32', 'h-40', 'h-24'];
+  const podiumColors = [
+    'from-gray-400/20 to-gray-500/10 border-gray-400/40',
+    'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
+    'from-amber-600/20 to-amber-700/10 border-amber-600/40',
+  ];
+  const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
+  const positions = [2, 1, 3];
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-end justify-center gap-4 lg:gap-8">
+        {podiumOrder.map((driver, index) => {
+          const position = positions[index];
+
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="flex flex-col items-center group"
+            >
+              {/* Driver Avatar & Info */}
+              <div className="relative mb-4">
+                {/* Crown for 1st place */}
+                {position === 1 && (
+                  <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
+                    <Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
+                  </div>
+                )}
+
+                {/* Avatar */}
+                <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
+                  <Image
+                    src={driver.avatarUrl}
+                    alt={driver.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                {/* Position badge */}
+                <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
+                  {position}
+                </div>
+              </div>
+
+              {/* Driver Name */}
+              <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
+                {driver.name}
+              </p>
+
+              {/* Rating */}
+              <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
+                {driver.rating.toLocaleString()}
+              </p>
+
+              {/* Stats */}
+              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
+                <span className="flex items-center gap-1">
+                  <Trophy className="w-3 h-3 text-performance-green" />
+                  {driver.wins}
+                </span>
+                <span>•</span>
+                <span className="flex items-center gap-1">
+                  <Medal className="w-3 h-3 text-warning-amber" />
+                  {driver.podiums}
+                </span>
+              </div>
+
+              {/* Podium Stand */}
+              <div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
+                <span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
+                  {position}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/website/components/TeamRankingsFilter.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Search, Star, Trophy, Percent, Hash } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}[] = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
+  { id: 'rating', label: 'Rating', icon: Star },
+  { id: 'wins', label: 'Total Wins', icon: Trophy },
+  { id: 'winRate', label: 'Win Rate', icon: Percent },
+  { id: 'races', label: 'Races', icon: Hash },
+];
+
+interface TeamRankingsFilterProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  filterLevel: SkillLevel | 'all';
+  onFilterLevelChange: (level: SkillLevel | 'all') => void;
+  sortBy: SortBy;
+  onSortChange: (sort: SortBy) => void;
+}
+
+export default function TeamRankingsFilter({
+  searchQuery,
+  onSearchChange,
+  filterLevel,
+  onFilterLevelChange,
+  sortBy,
+  onSortChange,
+}: TeamRankingsFilterProps) {
+  return (
+    <div className="mb-6 space-y-4">
+      {/* Search and Level Filter Row */}
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search teams..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-11"
+          />
+        </div>
+
+        {/* Level Filter */}
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => onFilterLevelChange('all')}
+            className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+              filterLevel === 'all'
+                ? 'bg-purple-600 text-white'
+                : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+            }`}
+          >
+            All Levels
+          </button>
+          {SKILL_LEVELS.map((level) => {
+            return (
+              <button
+                key={level.id}
+                type="button"
+                onClick={() => onFilterLevelChange(level.id)}
+                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                  filterLevel === level.id
+                    ? `${level.bgColor} ${level.color} border ${level.borderColor}`
+                    : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+                }`}
+              >
+                {level.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Sort Options */}
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-500">Sort by:</span>
+        <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+          {SORT_OPTIONS.map((option) => {
+            const OptionIcon = option.icon;
+            return (
+              <button
+                key={option.id}
+                type="button"
+                onClick={() => onSortChange(option.id)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  sortBy === option.id
+                    ? 'bg-purple-600 text-white'
+                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+                }`}
+              >
+                <OptionIcon className="w-3.5 h-3.5" />
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/auth/AuthWorkflowMockup.tsx

@@ -168,10 +168,10 @@ export default function AuthWorkflowMockup() {
           >
             <div className="text-center">
               <p className="text-xs text-gray-400 mb-1">
-                Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep].title}
+                Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep]?.title || ''}
               </p>
               <p className="text-xs text-gray-500">
-                {WORKFLOW_STEPS[activeStep].description}
+                {WORKFLOW_STEPS[activeStep]?.description || ''}
               </p>
             </div>
           </motion.div>

apps/website/components/drivers/CategoryDistribution.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
+];
+
+interface CategoryDistributionProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export function CategoryDistribution({ drivers }: CategoryDistributionProps) {
+  const distribution = CATEGORIES.map((category) => ({
+    ...category,
+    count: drivers.filter((d) => d.category === category.id).length,
+    percentage: drivers.length > 0
+      ? Math.round((drivers.filter((d) => d.category === category.id).length / drivers.length) * 100)
+      : 0,
+  }));
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-400/10 border border-purple-400/20">
+          <BarChart3 className="w-5 h-5 text-purple-400" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Category Distribution</h2>
+          <p className="text-xs text-gray-500">Driver population by category</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        {distribution.map((category) => (
+          <div
+            key={category.id}
+            className={`p-4 rounded-xl ${category.bgColor} border ${category.borderColor}`}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className={`text-2xl font-bold ${category.color}`}>{category.count}</span>
+            </div>
+            <p className="text-white font-medium mb-1">{category.label}</p>
+            <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${
+                  category.id === 'beginner' ? 'bg-green-400' :
+                  category.id === 'intermediate' ? 'bg-primary-blue' :
+                  category.id === 'advanced' ? 'bg-purple-400' :
+                  category.id === 'pro' ? 'bg-yellow-400' :
+                  category.id === 'endurance' ? 'bg-orange-400' :
+                  'bg-red-400'
+                }`}
+                style={{ width: `${category.percentage}%` }}
+              />
+            </div>
+            <p className="text-xs text-gray-500 mt-1">{category.percentage}% of drivers</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/website/components/drivers/CircularProgress.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+interface CircularProgressProps {
+  value: number;
+  max: number;
+  label: string;
+  color: string;
+  size?: number;
+}
+
+export function CircularProgress({ value, max, label, color, size = 80 }: CircularProgressProps) {
+  const percentage = Math.min((value / max) * 100, 100);
+  const strokeWidth = 6;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg className="transform -rotate-90" width={size} height={size}>
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            className="text-charcoal-outline"
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            className={color}
+            style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-lg font-bold text-white">{percentage.toFixed(0)}%</span>
+        </div>
+      </div>
+      <span className="text-xs text-gray-400 mt-2">{label}</span>
+    </div>
+  );
+}

apps/website/components/drivers/DriverProfile.tsx

@@ -43,12 +43,14 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
         // Load team data if available
         if (profile.teamMemberships && profile.teamMemberships.length > 0) {
           const currentTeam = profile.teamMemberships.find(m => m.isCurrent) || profile.teamMemberships[0];
-          setTeamData({
-            team: {
-              name: currentTeam.teamName,
-              tag: currentTeam.teamTag ?? ''
-            }
-          });
+          if (currentTeam) {
+            setTeamData({
+              team: {
+                name: currentTeam.teamName,
+                tag: currentTeam.teamTag ?? ''
+              }
+            });
+          }
         }
       } catch (error) {
         console.error('Failed to load driver profile data:', error);

apps/website/components/drivers/FeaturedDriverCard.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { Trophy, Crown, Star, TrendingUp, Shield, Flag } from 'lucide-react';
+import Image from 'next/image';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', description: 'Elite competition level' },
+  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', description: 'Highly competitive' },
+  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', description: 'Developing skills' },
+  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', description: 'Learning the ropes' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
+];
+
+interface FeaturedDriverCardProps {
+  driver: DriverLeaderboardItemViewModel;
+  position: number;
+  onClick: () => void;
+}
+
+export function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
+  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+  const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+
+  const getBorderColor = (pos: number) => {
+    switch (pos) {
+      case 1: return 'border-yellow-400/50 hover:border-yellow-400';
+      case 2: return 'border-gray-300/50 hover:border-gray-300';
+      case 3: return 'border-amber-600/50 hover:border-amber-600';
+      default: return 'border-charcoal-outline hover:border-primary-blue';
+    }
+  };
+
+  const getMedalColor = (pos: number) => {
+    switch (pos) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`p-5 rounded-xl bg-iron-gray/60 border-2 ${getBorderColor(position)} transition-all duration-200 text-left group hover:scale-[1.02]`}
+    >
+      {/* Header with Position */}
+      <div className="flex items-start justify-between mb-4">
+        <div className={`flex h-10 w-10 items-center justify-center rounded-full ${position <= 3 ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}`}>
+          {position <= 3 ? (
+            <Crown className={`w-5 h-5 ${getMedalColor(position)}`} />
+          ) : (
+            <span className="text-lg font-bold text-gray-400">#{position}</span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          {categoryConfig && (
+            <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${categoryConfig.bgColor} ${categoryConfig.color} border ${categoryConfig.borderColor}`}>
+              {categoryConfig.label}
+            </span>
+          )}
+          <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
+            {levelConfig?.label}
+          </span>
+        </div>
+      </div>
+
+      {/* Avatar & Name */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-charcoal-outline group-hover:border-primary-blue transition-colors">
+          <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
+            {driver.name}
+          </h3>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <Flag className="w-3.5 h-3.5" />
+            {driver.nationality}
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-3">
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-primary-blue">{driver.rating.toLocaleString()}</p>
+          <p className="text-[10px] text-gray-500">Rating</p>
+        </div>
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-performance-green">{driver.wins}</p>
+          <p className="text-[10px] text-gray-500">Wins</p>
+        </div>
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-warning-amber">{driver.podiums}</p>
+          <p className="text-[10px] text-gray-500">Podiums</p>
+        </div>
+      </div>
+    </button>
+  );
+}

apps/website/components/drivers/HorizontalBarChart.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+interface HorizontalBarChartProps {
+  data: { label: string; value: number; color: string }[];
+  maxValue: number;
+}
+
+export function HorizontalBarChart({ data, maxValue }: HorizontalBarChartProps) {
+  return (
+    <div className="space-y-3">
+      {data.map((item) => (
+        <div key={item.label}>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-gray-400">{item.label}</span>
+            <span className="text-white font-medium">{item.value}</span>
+          </div>
+          <div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
+              style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/website/components/drivers/LeaderboardPreview.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Award, Crown, Flag, ChevronRight } from 'lucide-react';
+import Image from 'next/image';
+import Button from '@/components/ui/Button';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
+];
+
+interface LeaderboardPreviewProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
+  const router = useRouter();
+  const top5 = drivers.slice(0, 5);
+
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
+      case 2: return 'bg-gray-300/10 border-gray-300/30';
+      case 3: return 'bg-amber-600/10 border-amber-600/30';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  };
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
+            <Award className="w-5 h-5 text-yellow-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">Top Drivers</h2>
+            <p className="text-xs text-gray-500">Highest rated competitors</p>
+          </div>
+        </div>
+
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/leaderboards/drivers')}
+          className="flex items-center gap-2 text-sm"
+        >
+          Full Rankings
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+        <div className="divide-y divide-charcoal-outline/50">
+          {top5.map((driver, index) => {
+            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+            const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+            const position = index + 1;
+
+            return (
+              <button
+                key={driver.id}
+                type="button"
+                onClick={() => onDriverClick(driver.id)}
+                className="flex items-center gap-4 px-4 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              >
+                {/* Position */}
+                <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                  {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
+                </div>
+
+                {/* Avatar */}
+                <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                  <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
+                </div>
+
+                {/* Info */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
+                    {driver.name}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <Flag className="w-3 h-3" />
+                    {driver.nationality}
+                    {categoryConfig && (
+                      <span className={categoryConfig.color}>{categoryConfig.label}</span>
+                    )}
+                    <span className={levelConfig?.color}>{levelConfig?.label}</span>
+                  </div>
+                </div>
+
+                {/* Stats */}
+                <div className="flex items-center gap-4 text-sm">
+                  <div className="text-center">
+                    <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
+                    <p className="text-[10px] text-gray-500">Rating</p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
+                    <p className="text-[10px] text-gray-500">Wins</p>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/drivers/RecentActivity.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Activity } from 'lucide-react';
+import Image from 'next/image';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
+];
+
+interface RecentActivityProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
+  const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
+          <Activity className="w-5 h-5 text-performance-green" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Active Drivers</h2>
+          <p className="text-xs text-gray-500">Currently competing in leagues</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+        {activeDrivers.map((driver) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="p-3 rounded-xl bg-iron-gray/40 border border-charcoal-outline hover:border-performance-green/40 transition-all group text-center"
+            >
+              <div className="relative w-12 h-12 mx-auto rounded-full overflow-hidden border-2 border-charcoal-outline mb-2">
+                <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
+                <div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-performance-green border-2 border-iron-gray" />
+              </div>
+              <p className="text-sm font-medium text-white truncate group-hover:text-performance-green transition-colors">
+                {driver.name}
+              </p>
+              <div className="flex items-center justify-center gap-1 text-xs">
+                {categoryConfig && (
+                  <span className={categoryConfig.color}>{categoryConfig.label}</span>
+                )}
+                <span className={levelConfig?.color}>{levelConfig?.label}</span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/website/components/drivers/SkillDistribution.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+interface SkillDistributionProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export function SkillDistribution({ drivers }: SkillDistributionProps) {
+  const distribution = SKILL_LEVELS.map((level) => ({
+    ...level,
+    count: drivers.filter((d) => d.skillLevel === level.id).length,
+    percentage: drivers.length > 0
+      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100)
+      : 0,
+  }));
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neon-aqua/10 border border-neon-aqua/20">
+          <BarChart3 className="w-5 h-5 text-neon-aqua" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
+          <p className="text-xs text-gray-500">Driver population by skill level</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {distribution.map((level) => {
+          const Icon = level.icon;
+          return (
+            <div
+              key={level.id}
+              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
+            >
+              <div className="flex items-center justify-between mb-3">
+                <Icon className={`w-5 h-5 ${level.color}`} />
+                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
+              </div>
+              <p className="text-white font-medium mb-1">{level.label}</p>
+              <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${
+                    level.id === 'pro' ? 'bg-yellow-400' :
+                    level.id === 'advanced' ? 'bg-purple-400' :
+                    level.id === 'intermediate' ? 'bg-primary-blue' :
+                    'bg-green-400'
+                  }`}
+                  style={{ width: `${level.percentage}%` }}
+                />
+              </div>
+              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/website/components/races/RaceCard.tsx

@@ -19,7 +19,13 @@ interface RaceCardProps {
 }
 
 export function RaceCard({ race, onClick, className }: RaceCardProps) {
-  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig];
+  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig] || {
+    border: 'border-charcoal-outline',
+    bg: 'bg-charcoal-outline',
+    color: 'text-gray-400',
+    icon: () => null,
+    label: 'Scheduled',
+  };
 
   return (
     <div
@@ -70,7 +76,7 @@ export function RaceCard({ race, onClick, className }: RaceCardProps) {
 
             {/* Status Badge */}
             <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
-              <config.icon className={`w-3.5 h-3.5 ${config.color}`} />
+              {config.icon && <config.icon className={`w-3.5 h-3.5 ${config.color}`} />}
               <span className={`text-xs font-medium ${config.color}`}>
                 {config.label}
               </span>

apps/website/components/races/RaceFilterModal.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { X, Filter, Search } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+
+export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
+export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
+
+interface RaceFilterModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  statusFilter: StatusFilter;
+  setStatusFilter: (filter: StatusFilter) => void;
+  leagueFilter: string;
+  setLeagueFilter: (filter: string) => void;
+  timeFilter: TimeFilter;
+  setTimeFilter: (filter: TimeFilter) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  leagues: Array<{ id: string; name: string }>;
+  showSearch?: boolean;
+  showTimeFilter?: boolean;
+}
+
+export function RaceFilterModal({
+  isOpen,
+  onClose,
+  statusFilter,
+  setStatusFilter,
+  leagueFilter,
+  setLeagueFilter,
+  timeFilter,
+  setTimeFilter,
+  searchQuery,
+  setSearchQuery,
+  leagues,
+  showSearch = true,
+  showTimeFilter = true,
+}: RaceFilterModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
+      <div className="w-full max-w-md" onClick={(e) => e.stopPropagation()}>
+        <Card className="!p-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <Filter className="w-5 h-5 text-primary-blue" />
+              <h3 className="text-lg font-semibold text-white">Filters</h3>
+            </div>
+            <button onClick={onClose} className="text-gray-400 hover:text-white">
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {/* Search */}
+            {showSearch && (
+              <div>
+                <label className="block text-sm text-gray-400 mb-2">Search</label>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Track, car, or league..."
+                    className="w-full pl-10 pr-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Time Filter */}
+            {showTimeFilter && (
+              <div>
+                <label className="block text-sm text-gray-400 mb-2">Time</label>
+                <div className="flex gap-2">
+                  {(['upcoming', 'live', 'past', 'all'] as TimeFilter[]).map(filter => (
+                    <button
+                      key={filter}
+                      onClick={() => setTimeFilter(filter)}
+                      className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                        timeFilter === filter
+                          ? 'bg-primary-blue text-white'
+                          : 'bg-deep-graphite text-gray-400 hover:text-white'
+                      }`}
+                    >
+                      {filter === 'live' && <span className="inline-block w-2 h-2 bg-performance-green rounded-full mr-1 animate-pulse" />}
+                      {filter.charAt(0).toUpperCase() + filter.slice(1)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Status Filter */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-2">Status</label>
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+                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="all">All Statuses</option>
+                <option value="scheduled">Scheduled</option>
+                <option value="running">Live</option>
+                <option value="completed">Completed</option>
+                <option value="cancelled">Cancelled</option>
+              </select>
+            </div>
+
+            {/* League Filter */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-2">League</label>
+              <select
+                value={leagueFilter}
+                onChange={(e) => setLeagueFilter(e.target.value)}
+                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="all">All Leagues</option>
+                {leagues.map(league => (
+                  <option key={league.id} value={league.id}>
+                    {league.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Clear Filters */}
+            {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery || (showTimeFilter && timeFilter !== 'upcoming')) && (
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setLeagueFilter('all');
+                  setSearchQuery('');
+                  if (showTimeFilter) setTimeFilter('upcoming');
+                }}
+                className="w-full"
+              >
+                Clear All Filters
+              </Button>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/RaceJoinButton.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { UserPlus, UserMinus, CheckCircle2, PlayCircle, XCircle } from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface RaceJoinButtonProps {
+  raceStatus: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  isUserRegistered: boolean;
+  canRegister: boolean;
+  onRegister: () => void;
+  onWithdraw: () => void;
+  onCancel: () => void;
+  onReopen?: () => void;
+  onEndRace?: () => void;
+  canReopenRace?: boolean;
+  isOwnerOrAdmin?: boolean;
+  isLoading?: {
+    register?: boolean;
+    withdraw?: boolean;
+    cancel?: boolean;
+    reopen?: boolean;
+  };
+}
+
+export function RaceJoinButton({
+  raceStatus,
+  isUserRegistered,
+  canRegister,
+  onRegister,
+  onWithdraw,
+  onCancel,
+  onReopen,
+  onEndRace,
+  canReopenRace = false,
+  isOwnerOrAdmin = false,
+  isLoading = {},
+}: RaceJoinButtonProps) {
+  // Show registration button for scheduled races
+  if (raceStatus === 'scheduled') {
+    if (canRegister && !isUserRegistered) {
+      return (
+        <Button
+          variant="primary"
+          className="w-full flex items-center justify-center gap-2"
+          onClick={onRegister}
+          disabled={isLoading.register}
+        >
+          <UserPlus className="w-4 h-4" />
+          {isLoading.register ? 'Registering...' : 'Register for Race'}
+        </Button>
+      );
+    }
+
+    if (isUserRegistered) {
+      return (
+        <>
+          <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" />
+            <span className="font-medium">You're Registered</span>
+          </div>
+          <Button
+            variant="secondary"
+            className="w-full flex items-center justify-center gap-2"
+            onClick={onWithdraw}
+            disabled={isLoading.withdraw}
+          >
+            <UserMinus className="w-4 h-4" />
+            {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
+          </Button>
+        </>
+      );
+    }
+
+    // Show cancel button for owners/admins
+    if (isOwnerOrAdmin) {
+      return (
+        <Button
+          variant="secondary"
+          className="w-full flex items-center justify-center gap-2"
+          onClick={onCancel}
+          disabled={isLoading.cancel}
+        >
+          <XCircle className="w-4 h-4" />
+          {isLoading.cancel ? 'Cancelling...' : 'Cancel Race'}
+        </Button>
+      );
+    }
+
+    return null;
+  }
+
+  // Show end race button for running races (owners/admins only)
+  if (raceStatus === 'running' && isOwnerOrAdmin && onEndRace) {
+    return (
+      <Button
+        variant="primary"
+        className="w-full flex items-center justify-center gap-2"
+        onClick={onEndRace}
+      >
+        <CheckCircle2 className="w-4 h-4" />
+        End Race & Process Results
+      </Button>
+    );
+  }
+
+  // Show reopen button for completed/cancelled races (owners/admins only)
+  if ((raceStatus === 'completed' || raceStatus === 'cancelled') && canReopenRace && isOwnerOrAdmin && onReopen) {
+    return (
+      <Button
+        variant="secondary"
+        className="w-full flex items-center justify-center gap-2"
+        onClick={onReopen}
+        disabled={isLoading.reopen}
+      >
+        <PlayCircle className="w-4 h-4" />
+        {isLoading.reopen ? 'Re-opening...' : 'Re-open Race'}
+      </Button>
+    );
+  }
+
+  return null;
+}

apps/website/components/races/RacePagination.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface RacePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export function RacePagination({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+}: RacePaginationProps) {
+  if (totalPages <= 1) return null;
+
+  const startItem = ((currentPage - 1) * itemsPerPage) + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    
+    if (totalPages <= 5) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    if (currentPage <= 3) {
+      return [1, 2, 3, 4, 5];
+    }
+
+    if (currentPage >= totalPages - 2) {
+      return [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+    }
+
+    return [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];
+  };
+
+  return (
+    <div className="flex items-center justify-between pt-4">
+      <p className="text-sm text-gray-500">
+        Showing {startItem}–{endItem} of {totalItems}
+      </p>
+      
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+          disabled={currentPage === 1}
+          className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+        
+        <div className="flex items-center gap-1">
+          {getPageNumbers().map(pageNum => (
+            <button
+              key={pageNum}
+              onClick={() => onPageChange(pageNum)}
+              className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${
+                currentPage === pageNum
+                  ? 'bg-primary-blue text-white'
+                  : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+              }`}
+            >
+              {pageNum}
+            </button>
+          ))}
+        </div>
+
+        <button
+          onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+          disabled={currentPage === totalPages}
+          className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/StewardingTabs.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState } from 'react';
+
+export type StewardingTab = 'pending' | 'resolved' | 'penalties';
+
+interface StewardingTabsProps {
+  activeTab: StewardingTab;
+  onTabChange: (tab: StewardingTab) => void;
+  pendingCount: number;
+}
+
+export function StewardingTabs({ activeTab, onTabChange, pendingCount }: StewardingTabsProps) {
+  const tabs: Array<{ id: StewardingTab; label: string }> = [
+    { id: 'pending', label: 'Pending' },
+    { id: 'resolved', label: 'Resolved' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <div className="border-b border-charcoal-outline">
+      <div className="flex gap-4">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === tab.id
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            {tab.label}
+            {tab.id === 'pending' && pendingCount > 0 && (
+              <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
+                {pendingCount}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/website/components/teams/TeamHeroSection.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import {
+  Users,
+  Search,
+  Plus,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  UserPlus,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
+interface SkillLevelConfig {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  description: string;
+}
+
+const SKILL_LEVELS: SkillLevelConfig[] = [
+  {
+    id: 'pro',
+    label: 'Pro',
+    icon: Crown,
+    color: 'text-yellow-400',
+    bgColor: 'bg-yellow-400/10',
+    borderColor: 'border-yellow-400/30',
+    description: 'Elite competition, sponsored teams',
+  },
+  {
+    id: 'advanced',
+    label: 'Advanced',
+    icon: Star,
+    color: 'text-purple-400',
+    bgColor: 'bg-purple-400/10',
+    borderColor: 'border-purple-400/30',
+    description: 'Competitive racing, high consistency',
+  },
+  {
+    id: 'intermediate',
+    label: 'Intermediate',
+    icon: TrendingUp,
+    color: 'text-primary-blue',
+    bgColor: 'bg-primary-blue/10',
+    borderColor: 'border-primary-blue/30',
+    description: 'Growing skills, regular practice',
+  },
+  {
+    id: 'beginner',
+    label: 'Beginner',
+    icon: Shield,
+    color: 'text-green-400',
+    bgColor: 'bg-green-400/10',
+    borderColor: 'border-green-400/30',
+    description: 'Learning the basics, friendly environment',
+  },
+];
+
+interface TeamHeroSectionProps {
+  teams: TeamSummaryViewModel[];
+  teamsByLevel: Record<string, TeamSummaryViewModel[]>;
+  recruitingCount: number;
+  onShowCreateForm: () => void;
+  onBrowseTeams: () => void;
+  onSkillLevelClick: (level: SkillLevel) => void;
+}
+
+export default function TeamHeroSection({
+  teams,
+  teamsByLevel,
+  recruitingCount,
+  onShowCreateForm,
+  onBrowseTeams,
+  onSkillLevelClick,
+}: TeamHeroSectionProps) {
+  return (
+    <div className="relative mb-10 overflow-hidden">
+      {/* Main Hero Card */}
+      <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
+        {/* Background decorations */}
+        <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+            <div className="max-w-xl">
+              {/* Badge */}
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
+                <Users className="w-3.5 h-3.5" />
+                Team Racing
+              </div>
+
+              <Heading level={1} className="text-4xl lg:text-5xl mb-4">
+                Find Your
+                <span className="text-purple-400"> Crew</span>
+              </Heading>
+
+              <p className="text-gray-400 text-lg leading-relaxed mb-6">
+                Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
+              </p>
+
+              {/* Quick Stats */}
+              <div className="flex flex-wrap gap-4 mb-6">
+                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                  <Users className="w-4 h-4 text-purple-400" />
+                  <span className="text-white font-semibold">{teams.length}</span>
+                  <span className="text-gray-500 text-sm">Teams</span>
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                  <UserPlus className="w-4 h-4 text-performance-green" />
+                  <span className="text-white font-semibold">{recruitingCount}</span>
+                  <span className="text-gray-500 text-sm">Recruiting</span>
+                </div>
+              </div>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-wrap gap-3">
+                <Button
+                  variant="primary"
+                  onClick={onShowCreateForm}
+                  className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
+                >
+                  <Plus className="w-4 h-4" />
+                  Create Team
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={onBrowseTeams}
+                  className="flex items-center gap-2"
+                >
+                  <Search className="w-4 h-4" />
+                  Browse Teams
+                </Button>
+              </div>
+            </div>
+
+            {/* Skill Level Quick Nav */}
+            <div className="lg:w-72">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
+              <div className="space-y-2">
+                {SKILL_LEVELS.map((level) => {
+                  const LevelIcon = level.icon;
+                  const count = teamsByLevel[level.id]?.length || 0;
+
+                  return (
+                    <button
+                      key={level.id}
+                      type="button"
+                      onClick={() => onSkillLevelClick(level.id)}
+                      className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <LevelIcon className={`w-4 h-4 ${level.color}`} />
+                        <span className="text-white font-medium">{level.label}</span>
+                      </div>
+                      <span className="text-gray-400 text-sm">{count} teams</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/teams/TeamSearchBar.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Search } from 'lucide-react';
+import Input from '@/components/ui/Input';
+
+interface TeamSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export default function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
+  return (
+    <div id="teams-list" className="mb-6 scroll-mt-8">
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search teams by name, description, region, or language..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-11"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/lib/infrastructure/GlobalErrorHandler.ts

@@ -270,7 +270,7 @@ export class GlobalErrorHandler {
         const colNum = match[4] || match[3];
         
         // Add source map comment if in development
-        if (process.env.NODE_ENV === 'development' && file.includes('.js')) {
+        if (process.env.NODE_ENV === 'development' && file && file.includes('.js')) {
           return `at ${func} (${file}:${lineNum}:${colNum}) [Source Map: ${file}.map]`;
         }
         

apps/website/lib/leagueMembership.ts

@@ -19,6 +19,6 @@ export function getLeagueMembers(leagueId: string) {
  */
 export function getPrimaryLeagueIdForDriver(driverId: string): string | null {
   const memberships = LeagueMembershipService.getAllMembershipsForDriver(driverId);
-  if (memberships.length === 0) return null;
-  return memberships[0].leagueId;
+  if (!memberships || memberships.length === 0) return null;
+  return memberships[0]?.leagueId || null;
 }

apps/website/lib/services/landing/LandingService.ts

@@ -79,7 +79,7 @@ export class LandingService {
       const signupParams: SignupParamsDTO = {
         email,
         password: 'temp_password_' + Math.random().toString(36).substring(7), // Temporary password
-        displayName: email.split('@')[0], // Use email prefix as display name
+        displayName: email.split('@')[0] || 'user', // Use email prefix as display name, fallback to 'user'
       };
 
       const session: AuthSessionDTO = await this.authApi.signup(signupParams);

apps/website/lib/utils/validation.ts

@@ -20,7 +20,7 @@ export interface ValidationRule<T> {
 export const emailValidation = (email: string): ValidationResult => {
   const errors: string[] = [];
   
-  if (!email.trim()) {
+  if (!email || !email.trim()) {
     errors.push('Email is required');
   } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
     errors.push('Invalid email format');
@@ -63,7 +63,7 @@ export const passwordValidation = (password: string): ValidationResult => {
  */
 export const nameValidation = (name: string, field: string = 'Name'): ValidationResult => {
   const errors: string[] = [];
-  const trimmed = name.trim();
+  const trimmed = name ? name.trim() : '';
   
   if (!trimmed) {
     errors.push(`${field} is required`);
@@ -116,12 +116,12 @@ export interface LoginFormValues {
 export const validateLoginForm = (values: LoginFormValues): Record<string, string> => {
   const errors: Record<string, string> = {};
   
-  const emailResult = emailValidation(values.email);
+  const emailResult = emailValidation(values.email || '');
   if (!emailResult.isValid) {
     errors.email = emailResult.errors[0];
   }
   
-  const passwordResult = passwordValidation(values.password);
+  const passwordResult = passwordValidation(values.password || '');
   if (!passwordResult.isValid) {
     errors.password = passwordResult.errors[0];
   }
@@ -143,27 +143,27 @@ export interface SignupFormValues {
 export const validateSignupForm = (values: SignupFormValues): Record<string, string> => {
   const errors: Record<string, string> = {};
   
-  const firstNameResult = nameValidation(values.firstName, 'First name');
+  const firstNameResult = nameValidation(values.firstName || '', 'First name');
   if (!firstNameResult.isValid) {
     errors.firstName = firstNameResult.errors[0];
   }
   
-  const lastNameResult = nameValidation(values.lastName, 'Last name');
+  const lastNameResult = nameValidation(values.lastName || '', 'Last name');
   if (!lastNameResult.isValid) {
     errors.lastName = lastNameResult.errors[0];
   }
   
-  const emailResult = emailValidation(values.email);
+  const emailResult = emailValidation(values.email || '');
   if (!emailResult.isValid) {
     errors.email = emailResult.errors[0];
   }
   
-  const passwordResult = passwordValidation(values.password);
+  const passwordResult = passwordValidation(values.password || '');
   if (!passwordResult.isValid) {
     errors.password = passwordResult.errors[0];
   }
   
-  const confirmPasswordResult = confirmPasswordValidation(values.password, values.confirmPassword);
+  const confirmPasswordResult = confirmPasswordValidation(values.password || '', values.confirmPassword || '');
   if (!confirmPasswordResult.isValid) {
     errors.confirmPassword = confirmPasswordResult.errors[0];
   }

apps/website/templates/DriverProfileTemplate.tsx

@@ -0,0 +1,816 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  User,
+  Trophy,
+  Star,
+  Calendar,
+  Users,
+  Flag,
+  Award,
+  TrendingUp,
+  UserPlus,
+  ExternalLink,
+  Target,
+  Zap,
+  Clock,
+  Medal,
+  Crown,
+  ChevronRight,
+  Globe,
+  Twitter,
+  Youtube,
+  Twitch,
+  MessageCircle,
+  ArrowLeft,
+  BarChart3,
+  Shield,
+  Percent,
+  Activity,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import { CircularProgress } from '@/components/drivers/CircularProgress';
+import { HorizontalBarChart } from '@/components/drivers/HorizontalBarChart';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+
+type ProfileTab = 'overview' | 'stats';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+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;
+}
+
+interface DriverProfileTemplateProps {
+  driverProfile: DriverProfileViewModel;
+  allTeamMemberships: TeamMembershipInfo[];
+  isLoading?: boolean;
+  error?: string | null;
+  onBackClick: () => void;
+  onAddFriend: () => void;
+  friendRequestSent: boolean;
+  activeTab: ProfileTab;
+  setActiveTab: (tab: ProfileTab) => void;
+  isSponsorMode?: boolean;
+  sponsorInsights?: React.ReactNode;
+}
+
+// Helper functions
+function getCountryFlag(countryCode: string): string {
+  const code = countryCode.toUpperCase();
+  if (code.length === 2) {
+    const codePoints = [...code].map(char => 127397 + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+  }
+  return '🏁';
+}
+
+function getRarityColor(rarity: Achievement['rarity']) {
+  switch (rarity) {
+    case 'common':
+      return 'text-gray-400 bg-gray-400/10 border-gray-400/30';
+    case 'rare':
+      return 'text-primary-blue bg-primary-blue/10 border-primary-blue/30';
+    case 'epic':
+      return 'text-purple-400 bg-purple-400/10 border-purple-400/30';
+    case 'legendary':
+      return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30';
+  }
+}
+
+function getAchievementIcon(icon: Achievement['icon']) {
+  switch (icon) {
+    case 'trophy':
+      return Trophy;
+    case 'medal':
+      return Medal;
+    case 'star':
+      return Star;
+    case 'crown':
+      return Crown;
+    case 'target':
+      return Target;
+    case 'zap':
+      return Zap;
+  }
+}
+
+function getSocialIcon(platform: SocialHandle['platform']) {
+  switch (platform) {
+    case 'twitter':
+      return Twitter;
+    case 'youtube':
+      return Youtube;
+    case 'twitch':
+      return Twitch;
+    case 'discord':
+      return MessageCircle;
+  }
+}
+
+function getSocialColor(platform: SocialHandle['platform']) {
+  switch (platform) {
+    case 'twitter':
+      return 'hover:text-sky-400 hover:bg-sky-400/10';
+    case 'youtube':
+      return 'hover:text-red-500 hover:bg-red-500/10';
+    case 'twitch':
+      return 'hover:text-purple-400 hover:bg-purple-400/10';
+    case 'discord':
+      return 'hover:text-indigo-400 hover:bg-indigo-400/10';
+  }
+}
+
+export function DriverProfileTemplate({
+  driverProfile,
+  allTeamMemberships,
+  isLoading = false,
+  error = null,
+  onBackClick,
+  onAddFriend,
+  friendRequestSent,
+  activeTab,
+  setActiveTab,
+  isSponsorMode = false,
+  sponsorInsights = null,
+}: DriverProfileTemplateProps) {
+  if (isLoading) {
+    return (
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading driver profile...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !driverProfile?.currentDriver) {
+    return (
+      <div className="max-w-4xl mx-auto px-4">
+        <Card className="text-center py-12">
+          <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+          <div className="text-warning-amber mb-4">{error || 'Driver not found'}</div>
+          <Button variant="secondary" onClick={onBackClick}>
+            Back to Drivers
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  const extendedProfile: DriverExtendedProfile = driverProfile.extendedProfile ? {
+    socialHandles: driverProfile.extendedProfile.socialHandles,
+    achievements: driverProfile.extendedProfile.achievements.map((achievement) => ({
+      id: achievement.id,
+      title: achievement.title,
+      description: achievement.description,
+      icon: achievement.icon,
+      rarity: achievement.rarity,
+      earnedAt: new Date(achievement.earnedAt),
+    })),
+    racingStyle: driverProfile.extendedProfile.racingStyle,
+    favoriteTrack: driverProfile.extendedProfile.favoriteTrack,
+    favoriteCar: driverProfile.extendedProfile.favoriteCar,
+    timezone: driverProfile.extendedProfile.timezone,
+    availableHours: driverProfile.extendedProfile.availableHours,
+    lookingForTeam: driverProfile.extendedProfile.lookingForTeam,
+    openToRequests: driverProfile.extendedProfile.openToRequests,
+  } : {
+    socialHandles: [],
+    achievements: [],
+    racingStyle: 'Unknown',
+    favoriteTrack: 'Unknown',
+    favoriteCar: 'Unknown',
+    timezone: 'UTC',
+    availableHours: 'Flexible',
+    lookingForTeam: false,
+    openToRequests: false,
+  };
+
+  const stats = driverProfile?.stats || null;
+  const globalRank = driverProfile?.currentDriver?.globalRank || 1;
+  const driver = driverProfile.currentDriver;
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 pb-12 space-y-6">
+      {/* Back Navigation */}
+      <Button
+        variant="secondary"
+        onClick={onBackClick}
+        className="flex items-center gap-2 mb-4"
+      >
+        <ArrowLeft className="w-4 h-4" />
+        Back to Drivers
+      </Button>
+
+      {/* Breadcrumb */}
+      <Breadcrumbs
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Drivers', href: '/drivers' },
+          { label: driver.name },
+        ]}
+      />
+
+      {/* Sponsor Insights Card */}
+      {isSponsorMode && sponsorInsights}
+
+      {/* Hero Header Section */}
+      <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 opacity-5">
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+            }}
+          />
+        </div>
+
+        <div className="relative p-6 md:p-8">
+          <div className="flex flex-col md:flex-row md:items-start gap-6">
+            {/* Avatar */}
+            <div className="relative">
+              <div className="w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-1 shadow-xl shadow-primary-blue/20">
+                <div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
+                  <Image
+                    src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
+                    alt={driver.name}
+                    width={144}
+                    height={144}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Driver Info */}
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-wrap items-center gap-3 mb-2">
+                <h1 className="text-3xl md:text-4xl font-bold text-white">{driver.name}</h1>
+                <span className="text-4xl" aria-label={`Country: ${driver.country}`}>
+                  {getCountryFlag(driver.country)}
+                </span>
+              </div>
+
+              {/* Rating and Rank */}
+              <div className="flex flex-wrap items-center gap-4 mb-4">
+                {stats && (
+                  <>
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30">
+                      <Star className="w-4 h-4 text-primary-blue" />
+                      <span className="font-mono font-bold text-primary-blue">{stats.rating}</span>
+                      <span className="text-xs text-gray-400">Rating</span>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-yellow-400/10 border border-yellow-400/30">
+                      <Trophy className="w-4 h-4 text-yellow-400" />
+                      <span className="font-mono font-bold text-yellow-400">#{globalRank}</span>
+                      <span className="text-xs text-gray-400">Global</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Meta info */}
+              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
+                <span className="flex items-center gap-1.5">
+                  <Globe className="w-4 h-4" />
+                  iRacing: {driver.iracingId}
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <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>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex flex-col gap-2">
+              <Button
+                variant="primary"
+                onClick={onAddFriend}
+                disabled={friendRequestSent}
+                className="flex items-center gap-2"
+              >
+                <UserPlus className="w-4 h-4" />
+                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Social Handles */}
+          {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>
+                {extendedProfile.socialHandles.map((social: SocialHandle) => {
+                  const Icon = getSocialIcon(social.platform);
+                  return (
+                    <a
+                      key={social.platform}
+                      href={social.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline text-gray-400 transition-all ${getSocialColor(social.platform)}`}
+                    >
+                      <Icon className="w-4 h-4" />
+                      <span className="text-sm">{social.handle}</span>
+                      <ExternalLink className="w-3 h-3 opacity-50" />
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Bio Section */}
+      {driver.bio && (
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+            <User className="w-5 h-5 text-primary-blue" />
+            About
+          </h2>
+          <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
+        </Card>
+      )}
+
+      {/* Team Memberships */}
+      {allTeamMemberships.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>
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {allTeamMemberships.map((membership) => (
+              <Link
+                key={membership.team.id}
+                href={`/teams/${membership.team.id}`}
+                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">
+                  <Users className="w-6 h-6 text-purple-400" />
+                </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}
+                  </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' })}
+                    </span>
+                  </div>
+                </div>
+                <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-purple-400 transition-colors" />
+              </Link>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* Performance Overview with Diagrams */}
+      {stats && (
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
+            <Activity className="w-5 h-5 text-neon-aqua" />
+            Performance Overview
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Circular Progress Charts */}
+            <div className="flex flex-col items-center">
+              <div className="flex gap-6 mb-4">
+                <CircularProgress
+                  value={stats.wins}
+                  max={stats.totalRaces}
+                  label="Win Rate"
+                  color="text-performance-green"
+                />
+                <CircularProgress
+                  value={stats.podiums}
+                  max={stats.totalRaces}
+                  label="Podium Rate"
+                  color="text-warning-amber"
+                />
+              </div>
+              <div className="flex gap-6">
+                <CircularProgress
+                  value={stats.consistency ?? 0}
+                  max={100}
+                  label="Consistency"
+                  color="text-primary-blue"
+                />
+                <CircularProgress
+                  value={stats.totalRaces - stats.dnfs}
+                  max={stats.totalRaces}
+                  label="Finish Rate"
+                  color="text-neon-aqua"
+                />
+              </div>
+            </div>
+
+            {/* Bar chart and key metrics */}
+            <div className="md:col-span-2">
+              <h3 className="text-sm font-medium text-gray-400 mb-4 flex items-center gap-2">
+                <BarChart3 className="w-4 h-4" />
+                Results Breakdown
+              </h3>
+              <HorizontalBarChart
+                data={[
+                  { label: 'Wins', value: stats.wins, color: 'bg-performance-green' },
+                  { label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'bg-warning-amber' },
+                  { label: 'DNFs', value: stats.dnfs, color: 'bg-red-500' },
+                ]}
+                maxValue={stats.totalRaces}
+              />
+
+              <div className="mt-6 grid grid-cols-2 gap-4">
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <TrendingUp className="w-4 h-4 text-performance-green" />
+                    <span className="text-xs text-gray-500 uppercase">Best Finish</span>
+                  </div>
+                  <p className="text-2xl font-bold text-performance-green">P{stats.bestFinish}</p>
+                </div>
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Target className="w-4 h-4 text-primary-blue" />
+                    <span className="text-xs text-gray-500 uppercase">Avg Finish</span>
+                  </div>
+                  <p className="text-2xl font-bold text-primary-blue">
+                    P{(stats.avgFinish ?? 0).toFixed(1)}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Tab Navigation */}
+      <div className="flex items-center gap-1 p-1 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit">
+        <button
+          type="button"
+          onClick={() => setActiveTab('overview')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+            activeTab === 'overview'
+              ? 'bg-primary-blue text-white'
+              : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+          }`}
+        >
+          <User className="w-4 h-4" />
+          Overview
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab('stats')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+            activeTab === 'stats'
+              ? 'bg-primary-blue text-white'
+              : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+          }`}
+        >
+          <BarChart3 className="w-4 h-4" />
+          Detailed Stats
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'overview' && (
+        <>
+          {/* Stats and Profile Grid */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Career Stats */}
+            <Card className="lg:col-span-2">
+              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <TrendingUp className="w-5 h-5 text-performance-green" />
+                Career Statistics
+              </h2>
+              {stats ? (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
+                    <div className="text-3xl font-bold text-white mb-1">{stats.totalRaces}</div>
+                    <div className="text-xs text-gray-500 uppercase tracking-wider">Races</div>
+                  </div>
+                  <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
+                    <div className="text-3xl font-bold text-performance-green mb-1">{stats.wins}</div>
+                    <div className="text-xs text-gray-500 uppercase tracking-wider">Wins</div>
+                  </div>
+                  <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
+                    <div className="text-3xl font-bold text-warning-amber mb-1">{stats.podiums}</div>
+                    <div className="text-xs text-gray-500 uppercase tracking-wider">Podiums</div>
+                  </div>
+                  <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
+                    <div className="text-3xl font-bold text-primary-blue mb-1">{stats.consistency}%</div>
+                    <div className="text-xs text-gray-500 uppercase tracking-wider">Consistency</div>
+                  </div>
+                </div>
+              ) : (
+                <p className="text-gray-400 text-sm">No race statistics available yet.</p>
+              )}
+            </Card>
+
+            {/* Racing Preferences */}
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Flag className="w-5 h-5 text-neon-aqua" />
+                Racing Profile
+              </h2>
+              <div className="space-y-4">
+                <div>
+                  <span className="text-xs text-gray-500 uppercase tracking-wider">Racing Style</span>
+                  <p className="text-white font-medium">{extendedProfile.racingStyle}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-gray-500 uppercase tracking-wider">Favorite Track</span>
+                  <p className="text-white font-medium">{extendedProfile.favoriteTrack}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-gray-500 uppercase tracking-wider">Favorite Car</span>
+                  <p className="text-white font-medium">{extendedProfile.favoriteCar}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-gray-500 uppercase tracking-wider">Available</span>
+                  <p className="text-white font-medium">{extendedProfile.availableHours}</p>
+                </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-3 py-2 rounded-lg bg-performance-green/10 border border-performance-green/30">
+                      <Users className="w-4 h-4 text-performance-green" />
+                      <span className="text-sm text-performance-green font-medium">Looking for Team</span>
+                    </div>
+                  )}
+                  {extendedProfile.openToRequests && (
+                    <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-primary-blue/10 border border-primary-blue/30">
+                      <UserPlus className="w-4 h-4 text-primary-blue" />
+                      <span className="text-sm text-primary-blue font-medium">Open to Friend Requests</span>
+                    </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-3 gap-4">
+              {extendedProfile.achievements.map((achievement: Achievement) => {
+                const Icon = getAchievementIcon(achievement.icon);
+                const rarityClasses = getRarityColor(achievement.rarity);
+                return (
+                  <div
+                    key={achievement.id}
+                    className={`p-4 rounded-xl border ${rarityClasses} transition-all hover:scale-105`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${rarityClasses.split(' ')[1]}`}>
+                        <Icon className={`w-5 h-5 ${rarityClasses.split(' ')[0]}`} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <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',
+                          })}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </Card>
+
+          {/* Friends Preview */}
+          {driverProfile.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">({driverProfile.socialSummary.friends.length})</span>
+                </h2>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                {driverProfile.socialSummary.friends.slice(0, 8).map((friend) => (
+                  <Link
+                    key={friend.id}
+                    href={`/drivers/${friend.id}`}
+                    className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray transition-all"
+                  >
+                    <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
+                     <Image
+                       src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
+                       alt={friend.name}
+                       width={32}
+                       height={32}
+                       className="w-full h-full object-cover"
+                     />
+                    </div>
+                    <span className="text-sm text-white">{friend.name}</span>
+                    <span className="text-lg">{getCountryFlag(friend.country)}</span>
+                  </Link>
+                ))}
+                {driverProfile.socialSummary.friends.length > 8 && (
+                  <div className="flex items-center px-3 py-2 text-sm text-gray-400">+{driverProfile.socialSummary.friends.length - 8} more</div>
+                )}
+              </div>
+            </Card>
+          )}
+        </>
+      )}
+
+      {activeTab === 'stats' && stats && (
+        <div className="space-y-6">
+          {/* Detailed Performance Metrics */}
+          <Card>
+            <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
+              <BarChart3 className="w-5 h-5 text-primary-blue" />
+              Detailed Performance Metrics
+            </h2>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Performance Bars */}
+              <div>
+                <h3 className="text-sm font-medium text-gray-400 mb-4">Results Breakdown</h3>
+                <HorizontalBarChart
+                  data={[
+                    { label: 'Wins', value: stats.wins, color: 'bg-performance-green' },
+                    { label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'bg-warning-amber' },
+                    { label: 'DNFs', value: stats.dnfs, color: 'bg-red-500' },
+                  ]}
+                  maxValue={stats.totalRaces}
+                />
+              </div>
+
+              {/* Key Metrics */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Percent className="w-4 h-4 text-performance-green" />
+                    <span className="text-xs text-gray-500 uppercase">Win Rate</span>
+                  </div>
+                  <p className="text-2xl font-bold text-performance-green">
+                    {((stats.wins / stats.totalRaces) * 100).toFixed(1)}%
+                  </p>
+                </div>
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Percent className="w-4 h-4 text-warning-amber" />
+                    <span className="text-xs text-gray-500 uppercase">Podium Rate</span>
+                  </div>
+                  <p className="text-2xl font-bold text-warning-amber">
+                    {((stats.podiums / stats.totalRaces) * 100).toFixed(1)}%
+                  </p>
+                </div>
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Activity className="w-4 h-4 text-primary-blue" />
+                    <span className="text-xs text-gray-500 uppercase">Consistency</span>
+                  </div>
+                  <p className="text-2xl font-bold text-primary-blue">{stats.consistency}%</p>
+                </div>
+                <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Zap className="w-4 h-4 text-neon-aqua" />
+                    <span className="text-xs text-gray-500 uppercase">Finish Rate</span>
+                  </div>
+                  <p className="text-2xl font-bold text-neon-aqua">
+                    {(((stats.totalRaces - stats.dnfs) / stats.totalRaces) * 100).toFixed(1)}%
+                  </p>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Position Statistics */}
+          <Card>
+            <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
+              <Flag className="w-5 h-5 text-red-400" />
+              Position Statistics
+            </h2>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="p-4 rounded-xl bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 text-center">
+                <div className="text-4xl font-bold text-performance-green mb-1">P{stats.bestFinish}</div>
+                <div className="text-xs text-gray-400 uppercase">Best Finish</div>
+              </div>
+              <div className="p-4 rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 text-center">
+                <div className="text-4xl font-bold text-primary-blue mb-1">
+                  P{(stats.avgFinish ?? 0).toFixed(1)}
+                </div>
+                <div className="text-xs text-gray-400 uppercase">Avg Finish</div>
+              </div>
+              <div className="p-4 rounded-xl bg-gradient-to-br from-warning-amber/20 to-warning-amber/5 border border-warning-amber/30 text-center">
+                <div className="text-4xl font-bold text-warning-amber mb-1">P{stats.worstFinish}</div>
+                <div className="text-xs text-gray-400 uppercase">Worst Finish</div>
+              </div>
+              <div className="p-4 rounded-xl bg-gradient-to-br from-red-500/20 to-red-500/5 border border-red-500/30 text-center">
+                <div className="text-4xl font-bold text-red-400 mb-1">{stats.dnfs}</div>
+                <div className="text-xs text-gray-400 uppercase">DNFs</div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Global Rankings */}
+          <Card>
+            <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
+              <Trophy className="w-5 h-5 text-yellow-400" />
+              Global Rankings
+            </h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="p-6 rounded-xl bg-gradient-to-br from-yellow-400/20 to-yellow-600/5 border border-yellow-400/30 text-center">
+                <Trophy className="w-8 h-8 text-yellow-400 mx-auto mb-3" />
+                <div className="text-3xl font-bold text-yellow-400 mb-1">#{globalRank}</div>
+                <div className="text-sm text-gray-400">Global Rank</div>
+              </div>
+              <div className="p-6 rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 text-center">
+                <Star className="w-8 h-8 text-primary-blue mx-auto mb-3" />
+                <div className="text-3xl font-bold text-primary-blue mb-1">{stats.rating}</div>
+                <div className="text-sm text-gray-400">Rating</div>
+              </div>
+              <div className="p-6 rounded-xl bg-gradient-to-br from-purple-400/20 to-purple-600/5 border border-purple-400/30 text-center">
+                <TrendingUp className="w-8 h-8 text-purple-400 mx-auto mb-3" />
+                <div className="text-3xl font-bold text-purple-400 mb-1">Top {stats.percentile}%</div>
+                <div className="text-sm text-gray-400">Percentile</div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {activeTab === 'stats' && !stats && (
+        <Card className="text-center py-12">
+          <BarChart3 className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+          <p className="text-gray-400 mb-2">No statistics available yet</p>
+          <p className="text-sm text-gray-500">This driver hasn't completed any races yet</p>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/website/templates/DriverRankingsTemplate.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Medal, Search, ArrowLeft } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import DriverRankingsFilter from '@/components/DriverRankingsFilter';
+import DriverTopThreePodium from '@/components/DriverTopThreePodium';
+import Image from 'next/image';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
+
+interface DriverRankingsTemplateProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  searchQuery: string;
+  selectedSkill: 'all' | SkillLevel;
+  sortBy: SortBy;
+  showFilters: boolean;
+  onSearchChange: (query: string) => void;
+  onSkillChange: (skill: 'all' | SkillLevel) => void;
+  onSortChange: (sort: SortBy) => void;
+  onToggleFilters: () => void;
+  onDriverClick: (id: string) => void;
+  onBackToLeaderboards: () => void;
+}
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+const getMedalColor = (position: number) => {
+  switch (position) {
+    case 1: return 'text-yellow-400';
+    case 2: return 'text-gray-300';
+    case 3: return 'text-amber-600';
+    default: return 'text-gray-500';
+  }
+};
+
+const getMedalBg = (position: number) => {
+  switch (position) {
+    case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
+    case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
+    case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
+    default: return 'bg-iron-gray/50 border-charcoal-outline';
+  }
+};
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export default function DriverRankingsTemplate({
+  drivers,
+  searchQuery,
+  selectedSkill,
+  sortBy,
+  showFilters,
+  onSearchChange,
+  onSkillChange,
+  onSortChange,
+  onToggleFilters,
+  onDriverClick,
+  onBackToLeaderboards,
+}: DriverRankingsTemplateProps) {
+  // Filter drivers
+  const filteredDrivers = drivers.filter((driver) => {
+    const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
+    return matchesSearch && matchesSkill;
+  });
+
+  // Sort drivers
+  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
+    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
+    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
+
+    switch (sortBy) {
+      case 'rank':
+        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
+      case 'rating':
+        return b.rating - a.rating;
+      case 'wins':
+        return b.wins - a.wins;
+      case 'podiums':
+        return b.podiums - a.podiums;
+      case 'winRate': {
+        const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
+        const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
+        return bRate - aRate;
+      }
+      default:
+        return 0;
+    }
+  });
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Header */}
+      <div className="mb-8">
+        <Button
+          variant="secondary"
+          onClick={onBackToLeaderboards}
+          className="flex items-center gap-2 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Leaderboards
+        </Button>
+
+        <div className="flex items-center gap-4 mb-2">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+            <Trophy className="w-7 h-7 text-primary-blue" />
+          </div>
+          <div>
+            <Heading level={1} className="text-3xl lg:text-4xl">
+              Driver Leaderboard
+            </Heading>
+            <p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Top 3 Podium */}
+      {!searchQuery && sortBy === 'rank' && <DriverTopThreePodium drivers={sortedDrivers} onDriverClick={onDriverClick} />}
+
+      {/* Filters */}
+      <DriverRankingsFilter
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        selectedSkill={selectedSkill}
+        onSkillChange={onSkillChange}
+        sortBy={sortBy}
+        onSortChange={onSortChange}
+        showFilters={showFilters}
+        onToggleFilters={onToggleFilters}
+      />
+
+      {/* Leaderboard Table */}
+      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+        {/* Table Header */}
+        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
+          <div className="col-span-1 text-center">Rank</div>
+          <div className="col-span-5 lg:col-span-4">Driver</div>
+          <div className="col-span-2 text-center hidden md:block">Races</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
+          <div className="col-span-1 text-center hidden lg:block">Podiums</div>
+          <div className="col-span-2 text-center">Win Rate</div>
+        </div>
+
+        {/* Table Body */}
+        <div className="divide-y divide-charcoal-outline/50">
+          {sortedDrivers.map((driver, index) => {
+            const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
+            const position = index + 1;
+
+            return (
+              <button
+                key={driver.id}
+                type="button"
+                onClick={() => onDriverClick(driver.id)}
+                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              >
+                {/* Position */}
+                <div className="col-span-1 flex items-center justify-center">
+                  <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                    {position <= 3 ? <Medal className="w-4 h-4" /> : position}
+                  </div>
+                </div>
+
+                {/* Driver Info */}
+                <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
+                  <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                    <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
+                      {driver.name}
+                    </p>
+                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                      <span className="flex items-center gap-1">
+                        {driver.nationality}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        {driver.skillLevel}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Races */}
+                <div className="col-span-2 items-center justify-center hidden md:flex">
+                  <span className="text-gray-400">{driver.racesCompleted}</span>
+                </div>
+
+                {/* Rating */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
+                    {driver.rating.toLocaleString()}
+                  </span>
+                </div>
+
+                {/* Wins */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
+                    {driver.wins}
+                  </span>
+                </div>
+
+                {/* Podiums */}
+                <div className="col-span-1 items-center justify-center hidden lg:flex">
+                  <span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
+                    {driver.podiums}
+                  </span>
+                </div>
+
+                {/* Win Rate */}
+                <div className="col-span-2 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
+                    {winRate}%
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Empty State */}
+        {sortedDrivers.length === 0 && (
+          <div className="py-16 text-center">
+            <Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+            <p className="text-gray-400 mb-2">No drivers found</p>
+            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                onSearchChange('');
+                onSkillChange('all');
+              }}
+              className="mt-4"
+            >
+              Clear Filters
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/website/templates/DriversTemplate.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Trophy,
+  Users,
+  Search,
+  Crown,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Card from '@/components/ui/Card';
+import Heading from '@/components/ui/Heading';
+import { FeaturedDriverCard } from '@/components/drivers/FeaturedDriverCard';
+import { SkillDistribution } from '@/components/drivers/SkillDistribution';
+import { CategoryDistribution } from '@/components/drivers/CategoryDistribution';
+import { LeaderboardPreview } from '@/components/drivers/LeaderboardPreview';
+import { RecentActivity } from '@/components/drivers/RecentActivity';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+interface DriversTemplateProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  totalRaces: number;
+  totalWins: number;
+  activeCount: number;
+  isLoading?: boolean;
+}
+
+export function DriversTemplate({ 
+  drivers, 
+  totalRaces, 
+  totalWins, 
+  activeCount, 
+  isLoading = false 
+}: DriversTemplateProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  };
+
+  // Filter by search
+  const filteredDrivers = drivers.filter((driver) => {
+    if (!searchQuery) return true;
+    return (
+      driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  });
+
+  // Featured drivers (top 4)
+  const featuredDrivers = filteredDrivers.slice(0, 4);
+
+  if (isLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading drivers...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden">
+        {/* Background decoration */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+          <div className="max-w-2xl">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+                <Users className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                Drivers
+              </Heading>
+            </div>
+            <p className="text-gray-400 text-lg leading-relaxed mb-6">
+              Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
+            </p>
+
+            {/* Quick Stats */}
+            <div className="flex flex-wrap gap-6">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-primary-blue" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{drivers.length}</span> drivers
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{activeCount}</span> active
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-yellow-400" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{totalWins.toLocaleString()}</span> total wins
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{totalRaces.toLocaleString()}</span> races
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA */}
+          <div className="flex flex-col gap-4">
+            <Button
+              variant="primary"
+              onClick={() => router.push('/leaderboards/drivers')}
+              className="flex items-center gap-2 px-6 py-3"
+            >
+              <Trophy className="w-5 h-5" />
+              View Leaderboard
+            </Button>
+            <p className="text-xs text-gray-500 text-center">See full driver rankings</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="mb-8">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search drivers by name or nationality..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-11"
+          />
+        </div>
+      </div>
+
+      {/* Featured Drivers */}
+      {!searchQuery && (
+        <div className="mb-10">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-400/10 border border-yellow-400/20">
+              <Crown className="w-5 h-5 text-yellow-400" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-white">Featured Drivers</h2>
+              <p className="text-xs text-gray-500">Top performers on the grid</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {featuredDrivers.map((driver, index) => (
+              <FeaturedDriverCard
+                key={driver.id}
+                driver={driver}
+                position={index + 1}
+                onClick={() => handleDriverClick(driver.id)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Active Drivers */}
+      {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={handleDriverClick} />}
+
+      {/* Skill Distribution */}
+      {!searchQuery && <SkillDistribution drivers={drivers} />}
+
+      {/* Category Distribution */}
+      {!searchQuery && <CategoryDistribution drivers={drivers} />}
+
+      {/* Leaderboard Preview */}
+      <LeaderboardPreview drivers={filteredDrivers} onDriverClick={handleDriverClick} />
+
+      {/* Empty State */}
+      {filteredDrivers.length === 0 && (
+        <Card className="text-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <Search className="w-10 h-10 text-gray-600" />
+            <p className="text-gray-400">No drivers found matching "{searchQuery}"</p>
+            <Button variant="secondary" onClick={() => setSearchQuery('')}>
+              Clear search
+            </Button>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/website/templates/LeaderboardsTemplate.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Users, Award } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import DriverLeaderboardPreview from '@/components/leaderboards/DriverLeaderboardPreview';
+import TeamLeaderboardPreview from '@/components/leaderboards/TeamLeaderboardPreview';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface LeaderboardsTemplateProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  teams: TeamSummaryViewModel[];
+  onDriverClick: (driverId: string) => void;
+  onTeamClick: (teamId: string) => void;
+  onNavigateToDrivers: () => void;
+  onNavigateToTeams: () => void;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export default function LeaderboardsTemplate({
+  drivers,
+  teams,
+  onDriverClick,
+  onTeamClick,
+  onNavigateToDrivers,
+  onNavigateToTeams,
+}: LeaderboardsTemplateProps) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
+        {/* Background decoration */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
+              <Award className="w-7 h-7 text-yellow-400" />
+            </div>
+            <div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                Leaderboards
+              </Heading>
+              <p className="text-gray-400">Where champions rise and legends are made</p>
+            </div>
+          </div>
+
+          <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
+            Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
+          </p>
+
+          {/* Quick Nav */}
+          <div className="flex flex-wrap gap-3">
+            <Button
+              variant="secondary"
+              onClick={onNavigateToDrivers}
+              className="flex items-center gap-2"
+            >
+              <Trophy className="w-4 h-4 text-primary-blue" />
+              Driver Rankings
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={onNavigateToTeams}
+              className="flex items-center gap-2"
+            >
+              <Users className="w-4 h-4 text-purple-400" />
+              Team Rankings
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Leaderboard Grids */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <DriverLeaderboardPreview drivers={drivers} onDriverClick={onDriverClick} />
+        <TeamLeaderboardPreview teams={teams} onTeamClick={onTeamClick} />
+      </div>
+    </div>
+  );
+}

apps/website/templates/LeagueDetailTemplate.tsx

@@ -0,0 +1,530 @@
+'use client';
+
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
+import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
+import SponsorInsightsCard, {
+  MetricBuilders,
+  SlotTemplates,
+  type SponsorMetric,
+} from '@/components/sponsors/SponsorInsightsCard';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
+import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+import type { RaceViewModel } from '@/lib/view-models/RaceViewModel';
+import type { DriverSummary } from '@/lib/view-models/LeagueDetailPageViewModel';
+import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
+import { ReactNode } from 'react';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface LeagueDetailTemplateProps {
+  viewModel: LeagueDetailPageViewModel;
+  leagueId: string;
+  isSponsor: boolean;
+  membership: { role: string } | null;
+  currentDriverId: string | null;
+  onMembershipChange: () => void;
+  onEndRaceModalOpen: (raceId: string) => void;
+  onLiveRaceClick: (raceId: string) => void;
+  onBackToLeagues: () => void;
+  children?: ReactNode;
+}
+
+interface LiveRaceCardProps {
+  races: RaceViewModel[];
+  membership: { role: string } | null;
+  onLiveRaceClick: (raceId: string) => void;
+  onEndRaceModalOpen: (raceId: string) => void;
+}
+
+interface LeagueInfoCardProps {
+  viewModel: LeagueDetailPageViewModel;
+}
+
+interface SponsorsSectionProps {
+  sponsors: Array<{
+    id: string;
+    name: string;
+    tier: 'main' | 'secondary';
+    logoUrl?: string;
+    tagline?: string;
+    websiteUrl?: string;
+  }>;
+}
+
+interface ManagementSectionProps {
+  ownerSummary?: DriverSummary | null;
+  adminSummaries: DriverSummary[];
+  stewardSummaries: DriverSummary[];
+  leagueId: string;
+}
+
+// ============================================================================
+// LIVE RACE CARD COMPONENT
+// ============================================================================
+
+function LiveRaceCard({ races, membership, onLiveRaceClick, onEndRaceModalOpen }: LiveRaceCardProps) {
+  if (races.length === 0) return null;
+
+  return (
+    <Card className="border-2 border-performance-green/50 bg-gradient-to-r from-performance-green/10 to-performance-green/5 mb-6">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-3 h-3 bg-performance-green rounded-full animate-pulse"></div>
+        <h2 className="text-xl font-bold text-white">🏁 Live Race in Progress</h2>
+      </div>
+
+      <div className="space-y-3">
+        {races.map((race) => (
+          <div
+            key={race.id}
+            className="p-4 rounded-lg bg-deep-graphite border border-performance-green/30"
+          >
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
+              <div className="flex items-center gap-3">
+                <div className="px-3 py-1 bg-performance-green/20 border border-performance-green/40 rounded-full">
+                  <span className="text-sm font-semibold text-performance-green">LIVE</span>
+                </div>
+                <h3 className="text-lg font-semibold text-white">
+                  {race.name}
+                </h3>
+              </div>
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Button
+                  variant="primary"
+                  onClick={() => onLiveRaceClick(race.id)}
+                  className="bg-performance-green hover:bg-performance-green/80 text-white"
+                >
+                  View Live Race
+                </Button>
+                {membership?.role === 'admin' && (
+                  <Button
+                    variant="secondary"
+                    onClick={() => onEndRaceModalOpen(race.id)}
+                    className="border-performance-green/50 text-performance-green hover:bg-performance-green/10"
+                  >
+                    End Race & Process Results
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-400">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-4 h-4" />
+                <span>Started {new Date(race.date).toLocaleDateString()}</span>
+              </div>
+              {race.registeredCount && (
+                <div className="flex items-center gap-2">
+                  <Users className="w-4 h-4" />
+                  <span>{race.registeredCount} drivers registered</span>
+                </div>
+              )}
+              {race.strengthOfField && (
+                <div className="flex items-center gap-2">
+                  <Trophy className="w-4 h-4" />
+                  <span>SOF: {race.strengthOfField}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+// ============================================================================
+// LEAGUE INFO CARD COMPONENT
+// ============================================================================
+
+function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
+  return (
+    <Card>
+      <h3 className="text-lg font-semibold text-white mb-4">About</h3>
+      
+      {/* Stats Grid */}
+      <div className="grid grid-cols-3 gap-3 mb-4">
+        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
+          <div className="text-xl font-bold text-white">{viewModel.memberships.length}</div>
+          <div className="text-xs text-gray-500">Members</div>
+        </div>
+        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
+          <div className="text-xl font-bold text-white">{viewModel.completedRacesCount}</div>
+          <div className="text-xs text-gray-500">Races</div>
+        </div>
+        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
+          <div className="text-xl font-bold text-warning-amber">{viewModel.averageSOF ?? '—'}</div>
+          <div className="text-xs text-gray-500">Avg SOF</div>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="space-y-2 text-sm">
+        <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
+          <span className="text-gray-500">Structure</span>
+          <span className="text-white">Solo • {viewModel.settings.maxDrivers ?? 32} max</span>
+        </div>
+        <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
+          <span className="text-gray-500">Scoring</span>
+          <span className="text-white">{viewModel.scoringConfig?.scoringPresetName ?? 'Standard'}</span>
+        </div>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-gray-500">Created</span>
+          <span className="text-white">
+            {new Date(viewModel.createdAt).toLocaleDateString('en-US', {
+              month: 'short',
+              year: 'numeric'
+            })}
+          </span>
+        </div>
+      </div>
+
+      {viewModel.socialLinks && (
+        <div className="mt-4 pt-4 border-t border-charcoal-outline">
+          <div className="flex flex-wrap gap-2">
+            {viewModel.socialLinks.discordUrl && (
+              <a
+                href={viewModel.socialLinks.discordUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 rounded-full border border-primary-blue/40 bg-primary-blue/10 px-2 py-1 text-xs text-primary-blue hover:bg-primary-blue/20 transition-colors"
+              >
+                Discord
+              </a>
+            )}
+            {viewModel.socialLinks.youtubeUrl && (
+              <a
+                href={viewModel.socialLinks.youtubeUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 rounded-full border border-red-500/40 bg-red-500/10 px-2 py-1 text-xs text-red-400 hover:bg-red-500/20 transition-colors"
+              >
+                YouTube
+              </a>
+            )}
+            {viewModel.socialLinks.websiteUrl && (
+              <a
+                href={viewModel.socialLinks.websiteUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 rounded-full border border-charcoal-outline bg-iron-gray/70 px-2 py-1 text-xs text-gray-100 hover:bg-iron-gray transition-colors"
+              >
+                Website
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// ============================================================================
+// SPONSORS SECTION COMPONENT
+// ============================================================================
+
+function SponsorsSection({ sponsors }: SponsorsSectionProps) {
+  if (sponsors.length === 0) return null;
+
+  return (
+    <Card>
+      <h3 className="text-lg font-semibold text-white mb-4">
+        {sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
+      </h3>
+      <div className="space-y-3">
+        {/* Main Sponsor - Featured prominently */}
+        {sponsors.filter(s => s.tier === 'main').map(sponsor => (
+          <div
+            key={sponsor.id}
+            className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30"
+          >
+            <div className="flex items-center gap-3">
+              {sponsor.logoUrl ? (
+                <div className="w-12 h-12 rounded-lg bg-white flex items-center justify-center overflow-hidden">
+                  <img
+                    src={sponsor.logoUrl}
+                    alt={sponsor.name}
+                    className="w-10 h-10 object-contain"
+                  />
+                </div>
+              ) : (
+                <div className="w-12 h-12 rounded-lg bg-yellow-500/20 flex items-center justify-center">
+                  <Trophy className="w-6 h-6 text-yellow-400" />
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-semibold text-white truncate">{sponsor.name}</span>
+                  <span className="px-1.5 py-0.5 rounded text-[10px] bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
+                    Main
+                  </span>
+                </div>
+                {sponsor.tagline && (
+                  <p className="text-xs text-gray-400 truncate mt-0.5">{sponsor.tagline}</p>
+                )}
+              </div>
+              {sponsor.websiteUrl && (
+                <a
+                  href={sponsor.websiteUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="p-1.5 rounded-lg bg-iron-gray hover:bg-charcoal-outline transition-colors"
+                >
+                  <ExternalLink className="w-4 h-4 text-gray-400" />
+                </a>
+              )}
+            </div>
+          </div>
+        ))}
+
+        {/* Secondary Sponsors - Smaller display */}
+        {sponsors.filter(s => s.tier === 'secondary').length > 0 && (
+          <div className="grid grid-cols-2 gap-2">
+            {sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
+              <div
+                key={sponsor.id}
+                className="p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline"
+              >
+                <div className="flex items-center gap-2">
+                  {sponsor.logoUrl ? (
+                    <div className="w-8 h-8 rounded bg-white flex items-center justify-center overflow-hidden flex-shrink-0">
+                      <img
+                        src={sponsor.logoUrl}
+                        alt={sponsor.name}
+                        className="w-6 h-6 object-contain"
+                      />
+                    </div>
+                  ) : (
+                    <div className="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                      <Star className="w-4 h-4 text-purple-400" />
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <span className="text-sm text-white truncate block">{sponsor.name}</span>
+                  </div>
+                  {sponsor.websiteUrl && (
+                    <a
+                      href={sponsor.websiteUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="p-1 rounded hover:bg-charcoal-outline transition-colors"
+                    >
+                      <ExternalLink className="w-3 h-3 text-gray-500" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+// ============================================================================
+// MANAGEMENT SECTION COMPONENT
+// ============================================================================
+
+function ManagementSection({ ownerSummary, adminSummaries, stewardSummaries, leagueId }: ManagementSectionProps) {
+  if (!ownerSummary && adminSummaries.length === 0 && stewardSummaries.length === 0) return null;
+
+  return (
+    <Card>
+      <h3 className="text-lg font-semibold text-white mb-4">Management</h3>
+      <div className="space-y-2">
+        {ownerSummary && (() => {
+          const summary = ownerSummary;
+          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('owner');
+          const meta = summary.rating !== null
+            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
+            : null;
+
+          return (
+            <div className="flex items-center gap-2">
+              <div className="flex-1">
+                <DriverIdentity
+                  driver={summary.driver}
+                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
+                  meta={meta}
+                  size="sm"
+                />
+              </div>
+              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
+                {roleDisplay.text}
+              </span>
+            </div>
+          );
+        })()}
+
+        {adminSummaries.map((summary) => {
+          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('admin');
+          const meta = summary.rating !== null
+            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
+            : null;
+
+          return (
+            <div key={summary.driver.id} className="flex items-center gap-2">
+              <div className="flex-1">
+                <DriverIdentity
+                  driver={summary.driver}
+                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
+                  meta={meta}
+                  size="sm"
+                />
+              </div>
+              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
+                {roleDisplay.text}
+              </span>
+            </div>
+          );
+        })}
+
+        {stewardSummaries.map((summary) => {
+          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('steward');
+          const meta = summary.rating !== null
+            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
+            : null;
+
+          return (
+            <div key={summary.driver.id} className="flex items-center gap-2">
+              <div className="flex-1">
+                <DriverIdentity
+                  driver={summary.driver}
+                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
+                  meta={meta}
+                  size="sm"
+                />
+              </div>
+              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
+                {roleDisplay.text}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export function LeagueDetailTemplate({
+  viewModel,
+  leagueId,
+  isSponsor,
+  membership,
+  currentDriverId,
+  onMembershipChange,
+  onEndRaceModalOpen,
+  onLiveRaceClick,
+  onBackToLeagues,
+  children,
+}: LeagueDetailTemplateProps) {
+  // Build metrics for SponsorInsightsCard
+  const leagueMetrics: SponsorMetric[] = [
+    MetricBuilders.views(viewModel.sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
+    MetricBuilders.engagement(viewModel.sponsorInsights.engagementRate),
+    MetricBuilders.reach(viewModel.sponsorInsights.estimatedReach),
+    MetricBuilders.sof(viewModel.averageSOF ?? '—'),
+  ];
+
+  return (
+    <>
+      {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
+      {isSponsor && viewModel && (
+        <SponsorInsightsCard
+          entityType="league"
+          entityId={leagueId}
+          entityName={viewModel.name}
+          tier={viewModel.sponsorInsights.tier}
+          metrics={leagueMetrics}
+          slots={SlotTemplates.league(
+            viewModel.sponsorInsights.mainSponsorAvailable,
+            viewModel.sponsorInsights.secondarySlotsAvailable,
+            viewModel.sponsorInsights.mainSponsorPrice,
+            viewModel.sponsorInsights.secondaryPrice
+          )}
+          trustScore={viewModel.sponsorInsights.trustScore}
+          discordMembers={viewModel.sponsorInsights.discordMembers}
+          monthlyActivity={viewModel.sponsorInsights.monthlyActivity}
+          additionalStats={{
+            label: 'League Stats',
+            items: [
+              { label: 'Total Races', value: viewModel.completedRacesCount },
+              { label: 'Active Members', value: viewModel.memberships.length },
+              { label: 'Total Impressions', value: viewModel.sponsorInsights.totalImpressions },
+            ],
+          }}
+        />
+      )}
+
+      {/* Live Race Card - Prominently show running races */}
+      {viewModel && viewModel.runningRaces.length > 0 && (
+        <LiveRaceCard
+          races={viewModel.runningRaces}
+          membership={membership}
+          onLiveRaceClick={onLiveRaceClick}
+          onEndRaceModalOpen={onEndRaceModalOpen}
+        />
+      )}
+
+      {/* Action Card */}
+      {!membership && !isSponsor && (
+        <Card className="mb-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold text-white mb-2">Join This League</h3>
+              <p className="text-gray-400 text-sm">Become a member to participate in races and track your progress</p>
+            </div>
+            <div className="w-48">
+              <JoinLeagueButton
+                leagueId={leagueId}
+                onMembershipChange={onMembershipChange}
+              />
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* League Overview - Activity Center with Info Sidebar */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Center - Activity Feed */}
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <h2 className="text-xl font-semibold text-white mb-6">Recent Activity</h2>
+            <LeagueActivityFeed leagueId={leagueId} limit={20} />
+          </Card>
+        </div>
+
+        {/* Right Sidebar - League Info */}
+        <div className="space-y-6">
+          {/* League Info - Combined */}
+          <LeagueInfoCard viewModel={viewModel} />
+
+          {/* Sponsors Section - Show sponsor logos */}
+          {viewModel.sponsors.length > 0 && (
+            <SponsorsSection sponsors={viewModel.sponsors} />
+          )}
+
+          {/* Management */}
+          <ManagementSection
+            ownerSummary={viewModel.ownerSummary}
+            adminSummaries={viewModel.adminSummaries}
+            stewardSummaries={viewModel.stewardSummaries}
+            leagueId={leagueId}
+          />
+        </div>
+      </div>
+
+      {/* Children (for modals, etc.) */}
+      {children}
+    </>
+  );
+}

apps/website/templates/LeagueRulebookTemplate.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { useState } from 'react';
+import Card from '@/components/ui/Card';
+import PointsTable from '@/components/leagues/PointsTable';
+import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';
+
+interface LeagueRulebookTemplateProps {
+  viewModel: LeagueDetailPageViewModel;
+  loading?: boolean;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export function LeagueRulebookTemplate({
+  viewModel,
+  loading = false,
+}: LeagueRulebookTemplateProps) {
+  const [activeSection, setActiveSection] = useState<RulebookSection>('scoring');
+
+  if (loading) {
+    return (
+      <Card>
+        <div className="text-center py-12 text-gray-400">Loading rulebook...</div>
+      </Card>
+    );
+  }
+
+  if (!viewModel || !viewModel.scoringConfig) {
+    return (
+      <Card>
+        <div className="text-center py-12 text-gray-400">Unable to load rulebook</div>
+      </Card>
+    );
+  }
+
+  const primaryChampionship = viewModel.scoringConfig.championships.find(c => c.type === 'driver') ?? viewModel.scoringConfig.championships[0];
+  const positionPoints = primaryChampionship?.pointsPreview
+    .filter(p => (p as any).sessionType === primaryChampionship.sessionTypes[0])
+    .map(p => ({ position: Number((p as any).position), points: Number((p as any).points) }))
+    .sort((a, b) => a.position - b.position) || [];
+
+  const sections: { id: RulebookSection; label: string }[] = [
+    { id: 'scoring', label: 'Scoring' },
+    { id: 'conduct', label: 'Conduct' },
+    { id: 'protests', label: 'Protests' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Rulebook</h1>
+          <p className="text-sm text-gray-400 mt-1">Official rules and regulations</p>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
+          <span className="text-sm font-medium text-primary-blue">{viewModel.scoringConfig.scoringPresetName || 'Custom Rules'}</span>
+        </div>
+      </div>
+
+      {/* Navigation Tabs */}
+      <div className="flex gap-1 p-1 bg-deep-graphite rounded-lg border border-charcoal-outline">
+        {sections.map((section) => (
+          <button
+            key={section.id}
+            onClick={() => setActiveSection(section.id)}
+            className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+              activeSection === section.id
+                ? 'bg-iron-gray text-white'
+                : 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
+            }`}
+          >
+            {section.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content Sections */}
+      {activeSection === 'scoring' && (
+        <div className="space-y-6">
+          {/* Quick Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Platform</p>
+              <p className="text-lg font-semibold text-white">{viewModel.scoringConfig.gameName}</p>
+            </div>
+            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Championships</p>
+              <p className="text-lg font-semibold text-white">{viewModel.scoringConfig.championships.length}</p>
+            </div>
+            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Sessions Scored</p>
+              <p className="text-lg font-semibold text-white capitalize">
+                {primaryChampionship?.sessionTypes.join(', ') || 'Main'}
+              </p>
+            </div>
+            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Drop Policy</p>
+              <p className="text-lg font-semibold text-white truncate" title={viewModel.scoringConfig.dropPolicySummary}>
+                {viewModel.scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'}
+              </p>
+            </div>
+          </div>
+
+          {/* Points Table */}
+          <PointsTable points={positionPoints} />
+
+          {/* Bonus Points */}
+          {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4">Bonus Points</h2>
+              <div className="space-y-2">
+                {primaryChampionship.bonusSummary.map((bonus, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center gap-4 p-3 bg-deep-graphite rounded-lg border border-charcoal-outline"
+                  >
+                    <div className="w-8 h-8 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
+                      <span className="text-performance-green text-sm font-bold">+</span>
+                    </div>
+                    <p className="text-sm text-gray-300">{bonus}</p>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          )}
+
+          {/* Drop Policy */}
+          {!viewModel.scoringConfig.dropPolicySummary.includes('All results count') && (
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4">Drop Policy</h2>
+              <p className="text-sm text-gray-300">{viewModel.scoringConfig.dropPolicySummary}</p>
+              <p className="text-xs text-gray-500 mt-3">
+                Drop rules are applied automatically when calculating championship standings.
+              </p>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {activeSection === 'conduct' && (
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-4">Driver Conduct</h2>
+          <div className="space-y-4 text-sm text-gray-300">
+            <div>
+              <h3 className="font-medium text-white mb-2">1. Respect</h3>
+              <p>All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">2. Clean Racing</h3>
+              <p>Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">3. Track Limits</h3>
+              <p>Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">4. Blue Flags</h3>
+              <p>Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">5. Communication</h3>
+              <p>Drivers are expected to communicate respectfully in voice and text chat during sessions.</p>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {activeSection === 'protests' && (
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-4">Protest Process</h2>
+          <div className="space-y-4 text-sm text-gray-300">
+            <div>
+              <h3 className="font-medium text-white mb-2">Filing a Protest</h3>
+              <p>Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">Evidence</h3>
+              <p>Video evidence is highly recommended but not required. Stewards will review available replay data.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">Review Process</h3>
+              <p>League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented.</p>
+            </div>
+            <div>
+              <h3 className="font-medium text-white mb-2">Outcomes</h3>
+              <p>Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity.</p>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {activeSection === 'penalties' && (
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-4">Penalty Guidelines</h2>
+          <div className="space-y-4 text-sm text-gray-300">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-charcoal-outline">
+                    <th className="text-left py-2 font-medium text-gray-400">Infraction</th>
+                    <th className="text-left py-2 font-medium text-gray-400">Typical Penalty</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-charcoal-outline/50">
+                  <tr>
+                    <td className="py-3">Causing avoidable contact</td>
+                    <td className="py-3 text-warning-amber">5-10 second time penalty</td>
+                  </tr>
+                  <tr>
+                    <td className="py-3">Unsafe rejoin</td>
+                    <td className="py-3 text-warning-amber">5 second time penalty</td>
+                  </tr>
+                  <tr>
+                    <td className="py-3">Blocking</td>
+                    <td className="py-3 text-warning-amber">Warning or 3 second penalty</td>
+                  </tr>
+                  <tr>
+                    <td className="py-3">Repeated track limit violations</td>
+                    <td className="py-3 text-warning-amber">5 second penalty</td>
+                  </tr>
+                  <tr>
+                    <td className="py-3">Intentional wrecking</td>
+                    <td className="py-3 text-red-400">Disqualification</td>
+                  </tr>
+                  <tr>
+                    <td className="py-3">Unsportsmanlike conduct</td>
+                    <td className="py-3 text-red-400">Points deduction or ban</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p className="text-xs text-gray-500 mt-4">
+              Penalties are applied at steward discretion based on incident severity and driver history.
+            </p>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import LeagueSchedule from '@/components/leagues/LeagueSchedule';
+import Card from '@/components/ui/Card';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface LeagueScheduleTemplateProps {
+  leagueId: string;
+  loading?: boolean;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export function LeagueScheduleTemplate({
+  leagueId,
+  loading = false,
+}: LeagueScheduleTemplateProps) {
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading schedule...
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <h2 className="text-xl font-semibold text-white mb-4">Schedule</h2>
+        <LeagueSchedule leagueId={leagueId} />
+      </Card>
+    </div>
+  );
+}

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import StandingsTable from '@/components/leagues/StandingsTable';
+import LeagueChampionshipStats from '@/components/leagues/LeagueChampionshipStats';
+import Card from '@/components/ui/Card';
+import type { LeagueMembership } from '@/lib/types/LeagueMembership';
+import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface LeagueStandingsTemplateProps {
+  standings: StandingEntryViewModel[];
+  drivers: DriverViewModel[];
+  memberships: LeagueMembership[];
+  leagueId: string;
+  currentDriverId: string | null;
+  isAdmin: boolean;
+  onRemoveMember: (driverId: string) => void;
+  onUpdateRole: (driverId: string, newRole: string) => void;
+  loading?: boolean;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export function LeagueStandingsTemplate({
+  standings,
+  drivers,
+  memberships,
+  leagueId,
+  currentDriverId,
+  isAdmin,
+  onRemoveMember,
+  onUpdateRole,
+  loading = false,
+}: LeagueStandingsTemplateProps) {
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">
+        Loading standings...
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Championship Stats */}
+      <LeagueChampionshipStats standings={standings} drivers={drivers} />
+
+      <Card>
+        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
+        <StandingsTable
+          standings={standings.map((s) => ({
+            leagueId,
+            driverId: s.driverId,
+            position: s.position,
+            totalPoints: s.points,
+            racesFinished: s.races,
+            racesStarted: s.races,
+            avgFinish: null,
+            penaltyPoints: 0,
+            bonusPoints: 0,
+          }) satisfies {
+            leagueId: string;
+            driverId: string;
+            position: number;
+            totalPoints: number;
+            racesFinished: number;
+            racesStarted: number;
+            avgFinish: number | null;
+            penaltyPoints: number;
+            bonusPoints: number;
+            teamName?: string;
+          })}
+          drivers={drivers}
+          leagueId={leagueId}
+          memberships={memberships}
+          currentDriverId={currentDriverId ?? undefined}
+          isAdmin={isAdmin}
+          onRemoveMember={onRemoveMember}
+          onUpdateRole={onUpdateRole}
+        />
+      </Card>
+    </div>
+  );
+}

apps/website/templates/LeaguesTemplate.tsx

@@ -0,0 +1,670 @@
+'use client';
+
+import { useState, useRef, useCallback } from 'react';
+import {
+  Trophy,
+  Users,
+  Globe,
+  Award,
+  Search,
+  Plus,
+  ChevronLeft,
+  ChevronRight,
+  Sparkles,
+  Flag,
+  Filter,
+  Flame,
+  Clock,
+  Target,
+  Timer,
+} from 'lucide-react';
+import LeagueCard from '@/components/leagues/LeagueCard';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type CategoryId =
+  | 'all'
+  | 'driver'
+  | 'team'
+  | 'nations'
+  | 'trophy'
+  | 'new'
+  | 'popular'
+  | 'iracing'
+  | 'acc'
+  | 'f1'
+  | 'endurance'
+  | 'sprint'
+  | 'openSlots';
+
+interface Category {
+  id: CategoryId;
+  label: string;
+  icon: React.ElementType;
+  description: string;
+  filter: (league: LeagueSummaryViewModel) => boolean;
+  color?: string;
+}
+
+interface LeagueSliderProps {
+  title: string;
+  icon: React.ElementType;
+  description: string;
+  leagues: LeagueSummaryViewModel[];
+  onLeagueClick: (id: string) => void;
+  autoScroll?: boolean;
+  iconColor?: string;
+  scrollSpeedMultiplier?: number;
+  scrollDirection?: 'left' | 'right';
+}
+
+interface LeaguesTemplateProps {
+  leagues: LeagueSummaryViewModel[];
+  loading?: boolean;
+  onLeagueClick: (id: string) => void;
+  onCreateLeagueClick: () => void;
+}
+
+// ============================================================================
+// CATEGORIES
+// ============================================================================
+
+const CATEGORIES: Category[] = [
+  {
+    id: 'all',
+    label: 'All',
+    icon: Globe,
+    description: 'Browse all available leagues',
+    filter: () => true,
+  },
+  {
+    id: 'popular',
+    label: 'Popular',
+    icon: Flame,
+    description: 'Most active leagues right now',
+    filter: (league) => {
+      const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
+      return fillRate > 0.7;
+    },
+    color: 'text-orange-400',
+  },
+  {
+    id: 'new',
+    label: 'New',
+    icon: Sparkles,
+    description: 'Fresh leagues looking for members',
+    filter: (league) => {
+      const oneWeekAgo = new Date();
+      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+      return new Date(league.createdAt) > oneWeekAgo;
+    },
+    color: 'text-performance-green',
+  },
+  {
+    id: 'openSlots',
+    label: 'Open Slots',
+    icon: Target,
+    description: 'Leagues with available spots',
+    filter: (league) => {
+      // Check for team slots if it's a team league
+      if (league.maxTeams && league.maxTeams > 0) {
+        const usedTeams = league.usedTeamSlots ?? 0;
+        return usedTeams < league.maxTeams;
+      }
+      // Otherwise check driver slots
+      const used = league.usedDriverSlots ?? 0;
+      const max = league.maxDrivers ?? 0;
+      return max > 0 && used < max;
+    },
+    color: 'text-neon-aqua',
+  },
+  {
+    id: 'driver',
+    label: 'Driver',
+    icon: Trophy,
+    description: 'Compete as an individual',
+    filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
+  },
+  {
+    id: 'team',
+    label: 'Team',
+    icon: Users,
+    description: 'Race together as a team',
+    filter: (league) => league.scoring?.primaryChampionshipType === 'team',
+  },
+  {
+    id: 'nations',
+    label: 'Nations',
+    icon: Flag,
+    description: 'Represent your country',
+    filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
+  },
+  {
+    id: 'trophy',
+    label: 'Trophy',
+    icon: Award,
+    description: 'Special championship events',
+    filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
+  },
+  {
+    id: 'endurance',
+    label: 'Endurance',
+    icon: Timer,
+    description: 'Long-distance racing',
+    filter: (league) =>
+      league.scoring?.scoringPresetId?.includes('endurance') ??
+      league.timingSummary?.includes('h Race') ??
+      false,
+  },
+  {
+    id: 'sprint',
+    label: 'Sprint',
+    icon: Clock,
+    description: 'Quick, intense races',
+    filter: (league) =>
+      (league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
+      !(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
+  },
+];
+
+// ============================================================================
+// LEAGUE SLIDER COMPONENT
+// ============================================================================
+
+function LeagueSlider({
+  title,
+  icon: Icon,
+  description,
+  leagues,
+  onLeagueClick,
+  autoScroll = true,
+  iconColor = 'text-primary-blue',
+  scrollSpeedMultiplier = 1,
+  scrollDirection = 'right',
+}: LeagueSliderProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+  const [isHovering, setIsHovering] = useState(false);
+  const animationRef = useRef<number | null>(null);
+  const scrollPositionRef = useRef(0);
+
+  const checkScrollButtons = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
+    }
+  }, []);
+
+  const scroll = useCallback((direction: 'left' | 'right') => {
+    if (scrollRef.current) {
+      const cardWidth = 340;
+      const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
+      // Update the ref so auto-scroll continues from new position
+      scrollPositionRef.current = scrollRef.current.scrollLeft + scrollAmount;
+      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+  }, []);
+
+  // Initialize scroll position for left-scrolling sliders
+  const initializeScroll = useCallback(() => {
+    if (scrollDirection === 'left' && scrollRef.current) {
+      const { scrollWidth, clientWidth } = scrollRef.current;
+      scrollPositionRef.current = scrollWidth - clientWidth;
+      scrollRef.current.scrollLeft = scrollPositionRef.current;
+    }
+  }, [scrollDirection]);
+
+  // Smooth continuous auto-scroll using requestAnimationFrame with variable speed and direction
+  const setupAutoScroll = useCallback(() => {
+    // Allow scroll even with just 2 leagues (minimum threshold = 1)
+    if (!autoScroll || leagues.length <= 1) return;
+
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer) return;
+
+    let lastTimestamp = 0;
+    // Base speed with multiplier for variation between sliders
+    const baseSpeed = 0.025;
+    const scrollSpeed = baseSpeed * scrollSpeedMultiplier;
+    const directionMultiplier = scrollDirection === 'left' ? -1 : 1;
+
+    const animate = (timestamp: number) => {
+      if (!isHovering && scrollContainer) {
+        const delta = lastTimestamp ? timestamp - lastTimestamp : 0;
+        lastTimestamp = timestamp;
+
+        scrollPositionRef.current += scrollSpeed * delta * directionMultiplier;
+
+        const { scrollWidth, clientWidth } = scrollContainer;
+        const maxScroll = scrollWidth - clientWidth;
+
+        // Handle wrap-around for both directions
+        if (scrollDirection === 'right' && scrollPositionRef.current >= maxScroll) {
+          scrollPositionRef.current = 0;
+        } else if (scrollDirection === 'left' && scrollPositionRef.current <= 0) {
+          scrollPositionRef.current = maxScroll;
+        }
+
+        scrollContainer.scrollLeft = scrollPositionRef.current;
+      } else {
+        lastTimestamp = timestamp;
+      }
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [autoScroll, leagues.length, isHovering, scrollSpeedMultiplier, scrollDirection]);
+
+  // Sync scroll position when user manually scrolls
+  const setupManualScroll = useCallback(() => {
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer) return;
+
+    const handleScroll = () => {
+      scrollPositionRef.current = scrollContainer.scrollLeft;
+      checkScrollButtons();
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+  }, [checkScrollButtons]);
+
+  // Initialize effects
+  useState(() => {
+    initializeScroll();
+  });
+
+  // Setup auto-scroll effect
+  useState(() => {
+    setupAutoScroll();
+  });
+
+  // Setup manual scroll effect
+  useState(() => {
+    setupManualScroll();
+  });
+
+  if (leagues.length === 0) return null;
+
+  return (
+    <div className="mb-10">
+      {/* Section header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className={`flex h-10 w-10 items-center justify-center rounded-xl bg-iron-gray border border-charcoal-outline`}>
+            <Icon className={`w-5 h-5 ${iconColor}`} />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">{title}</h2>
+            <p className="text-xs text-gray-500">{description}</p>
+          </div>
+          <span className="ml-2 px-2 py-0.5 rounded-full text-xs bg-charcoal-outline/50 text-gray-400">
+            {leagues.length}
+          </span>
+        </div>
+
+        {/* Navigation arrows */}
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => scroll('left')}
+            disabled={!canScrollLeft}
+            className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
+              canScrollLeft
+                ? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
+                : 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
+            }`}
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => scroll('right')}
+            disabled={!canScrollRight}
+            className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
+              canScrollRight
+                ? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
+                : 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
+            }`}
+          >
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Scrollable container with fade edges */}
+      <div className="relative">
+        {/* Left fade gradient */}
+        <div className="absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-deep-graphite to-transparent z-10 pointer-events-none" />
+        {/* Right fade gradient */}
+        <div className="absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-deep-graphite to-transparent z-10 pointer-events-none" />
+        
+        <div
+          ref={scrollRef}
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+          className="flex gap-4 overflow-x-auto pb-4 px-4"
+          style={{
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+        >
+          <style jsx>{`
+            div::-webkit-scrollbar {
+              display: none;
+            }
+          `}</style>
+          {leagues.map((league) => (
+            <div key={league.id} className="flex-shrink-0 w-[320px] h-full">
+              <LeagueCard league={league} onClick={() => onLeagueClick(league.id)} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export function LeaguesTemplate({
+  leagues,
+  loading = false,
+  onLeagueClick,
+  onCreateLeagueClick,
+}: LeaguesTemplateProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
+  const [showFilters, setShowFilters] = useState(false);
+
+  // Filter by search query
+  const searchFilteredLeagues = leagues.filter((league) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      league.name.toLowerCase().includes(query) ||
+      (league.description ?? '').toLowerCase().includes(query) ||
+      (league.scoring?.gameName ?? '').toLowerCase().includes(query)
+    );
+  });
+
+  // Get leagues for active category
+  const activeCategoryData = CATEGORIES.find((c) => c.id === activeCategory);
+  const categoryFilteredLeagues = activeCategoryData
+    ? searchFilteredLeagues.filter(activeCategoryData.filter)
+    : searchFilteredLeagues;
+
+  // Group leagues by category for slider view
+  const leaguesByCategory = CATEGORIES.reduce(
+    (acc, category) => {
+      // First try to use the dedicated category field, fall back to scoring-based filtering
+      acc[category.id] = searchFilteredLeagues.filter((league) => {
+        // If league has a category field, use it directly
+        if (league.category) {
+          return league.category === category.id;
+        }
+        // Otherwise fall back to the existing scoring-based filter
+        return category.filter(league);
+      });
+      return acc;
+    },
+    {} as Record<CategoryId, LeagueSummaryViewModel[]>,
+  );
+
+  // Featured categories to show as sliders with different scroll speeds and alternating directions
+  const featuredCategoriesWithSpeed: { id: CategoryId; speed: number; direction: 'left' | 'right' }[] = [
+    { id: 'popular', speed: 1.0, direction: 'right' },
+    { id: 'new', speed: 1.3, direction: 'left' },
+    { id: 'driver', speed: 0.8, direction: 'right' },
+    { id: 'team', speed: 1.1, direction: 'left' },
+    { id: 'nations', speed: 0.9, direction: 'right' },
+    { id: 'endurance', speed: 0.7, direction: 'left' },
+    { id: 'sprint', speed: 1.2, direction: 'right' },
+  ];
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading leagues...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 overflow-hidden">
+        {/* Background decoration */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+
+        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+          <div className="max-w-2xl">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+                <Trophy className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                Find Your Grid
+              </Heading>
+            </div>
+            <p className="text-gray-400 text-lg leading-relaxed mb-6">
+              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
+            </p>
+
+            {/* Stats */}
+            <div className="flex flex-wrap gap-6">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{leagues.length}</span> active leagues
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-primary-blue" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{leaguesByCategory.new.length}</span> new this week
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{leaguesByCategory.openSlots.length}</span> with open slots
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA */}
+          <div className="flex flex-col gap-4">
+            <Button
+              variant="primary"
+              onClick={onCreateLeagueClick}
+              className="flex items-center gap-2 px-6 py-3"
+            >
+              <Plus className="w-5 h-5" />
+              <span>Create League</span>
+            </Button>
+            <p className="text-xs text-gray-500 text-center">Set up your own racing series</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Search and Filter Bar */}
+      <div className="mb-6">
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1 relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+            <Input
+              type="text"
+              placeholder="Search leagues by name, description, or game..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-11"
+            />
+          </div>
+
+          {/* Filter toggle (mobile) */}
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setShowFilters(!showFilters)}
+            className="lg:hidden flex items-center gap-2"
+          >
+            <Filter className="w-4 h-4" />
+            Filters
+          </Button>
+        </div>
+
+        {/* Category Tabs */}
+        <div className={`mt-4 ${showFilters ? 'block' : 'hidden lg:block'}`}>
+          <div className="flex flex-wrap gap-2">
+            {CATEGORIES.map((category) => {
+              const Icon = category.icon;
+              const count = leaguesByCategory[category.id].length;
+              const isActive = activeCategory === category.id;
+
+              return (
+                <button
+                  key={category.id}
+                  type="button"
+                  onClick={() => setActiveCategory(category.id)}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 ${
+                    isActive
+                      ? 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.3)]'
+                      : 'bg-iron-gray/60 text-gray-400 border border-charcoal-outline hover:border-gray-500 hover:text-white'
+                  }`}
+                >
+                  <Icon className={`w-3.5 h-3.5 ${!isActive && category.color ? category.color : ''}`} />
+                  <span>{category.label}</span>
+                  {count > 0 && (
+                    <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${isActive ? 'bg-white/20' : 'bg-charcoal-outline/50'}`}>
+                      {count}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      {leagues.length === 0 ? (
+        /* Empty State */
+        <Card className="text-center py-16">
+          <div className="max-w-md mx-auto">
+            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
+              <Trophy className="w-8 h-8 text-primary-blue" />
+            </div>
+            <Heading level={2} className="text-2xl mb-3">
+              No leagues yet
+            </Heading>
+            <p className="text-gray-400 mb-8">
+              Be the first to create a racing series. Start your own league and invite drivers to compete for glory.
+            </p>
+            <Button
+              variant="primary"
+              onClick={onCreateLeagueClick}
+              className="flex items-center gap-2 mx-auto"
+            >
+              <Sparkles className="w-4 h-4" />
+              Create Your First League
+            </Button>
+          </div>
+        </Card>
+      ) : activeCategory === 'all' && !searchQuery ? (
+        /* Slider View - Show featured categories with sliders at different speeds and directions */
+        <div>
+          {featuredCategoriesWithSpeed
+            .map(({ id, speed, direction }) => {
+              const category = CATEGORIES.find((c) => c.id === id)!;
+              return { category, speed, direction };
+            })
+            .filter(({ category }) => leaguesByCategory[category.id].length > 0)
+            .map(({ category, speed, direction }) => (
+              <LeagueSlider
+                key={category.id}
+                title={category.label}
+                icon={category.icon}
+                description={category.description}
+                leagues={leaguesByCategory[category.id]}
+                onLeagueClick={onLeagueClick}
+                autoScroll={true}
+                iconColor={category.color || 'text-primary-blue'}
+                scrollSpeedMultiplier={speed}
+                scrollDirection={direction}
+              />
+            ))}
+        </div>
+      ) : (
+        /* Grid View - Filtered by category or search */
+        <div>
+          {categoryFilteredLeagues.length > 0 ? (
+            <>
+              <div className="flex items-center justify-between mb-6">
+                <p className="text-sm text-gray-400">
+                  Showing <span className="text-white font-medium">{categoryFilteredLeagues.length}</span>{' '}
+                  {categoryFilteredLeagues.length === 1 ? 'league' : 'leagues'}
+                  {searchQuery && (
+                    <span>
+                      {' '}
+                      for "<span className="text-primary-blue">{searchQuery}</span>"
+                    </span>
+                  )}
+                </p>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {categoryFilteredLeagues.map((league) => (
+                  <LeagueCard key={league.id} league={league} onClick={() => onLeagueClick(league.id)} />
+                ))}
+              </div>
+            </>
+          ) : (
+            <Card className="text-center py-12">
+              <div className="flex flex-col items-center gap-4">
+                <Search className="w-10 h-10 text-gray-600" />
+                <p className="text-gray-400">
+                  No leagues found{searchQuery ? ` matching "${searchQuery}"` : ' in this category'}
+                </p>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setSearchQuery('');
+                    setActiveCategory('all');
+                  }}
+                >
+                  Clear filters
+                </Button>
+              </div>
+            </Card>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/templates/RaceDetailTemplate.tsx

@@ -0,0 +1,853 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import { RaceJoinButton } from '@/components/races/RaceJoinButton';
+import {
+  AlertTriangle,
+  ArrowLeft,
+  ArrowRight,
+  Calendar,
+  Car,
+  CheckCircle2,
+  Clock,
+  Flag,
+  PlayCircle,
+  Scale,
+  Trophy,
+  UserMinus,
+  UserPlus,
+  Users,
+  XCircle,
+  Zap,
+} from 'lucide-react';
+
+export interface RaceDetailEntryViewModel {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  country: string;
+  rating?: number | null;
+  isCurrentUser: boolean;
+}
+
+export interface RaceDetailUserResultViewModel {
+  position: number;
+  startPosition: number;
+  positionChange: number;
+  incidents: number;
+  isClean: boolean;
+  isPodium: boolean;
+  ratingChange?: number;
+}
+
+export interface RaceDetailLeague {
+  id: string;
+  name: string;
+  description?: string;
+  settings: {
+    maxDrivers: number;
+    qualifyingFormat: string;
+  };
+}
+
+export interface RaceDetailRace {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+}
+
+export interface RaceDetailRegistration {
+  isUserRegistered: boolean;
+  canRegister: boolean;
+}
+
+export interface RaceDetailViewModel {
+  race: RaceDetailRace;
+  league?: RaceDetailLeague;
+  entryList: RaceDetailEntryViewModel[];
+  registration: RaceDetailRegistration;
+  userResult?: RaceDetailUserResultViewModel;
+  canReopenRace: boolean;
+}
+
+export interface RaceDetailTemplateProps {
+  viewModel?: RaceDetailViewModel;
+  isLoading: boolean;
+  error?: Error | null;
+  // Actions
+  onBack: () => void;
+  onRegister: () => void;
+  onWithdraw: () => void;
+  onCancel: () => void;
+  onReopen: () => void;
+  onEndRace: () => void;
+  onFileProtest: () => void;
+  onResultsClick: () => void;
+  onStewardingClick: () => void;
+  onLeagueClick: (leagueId: string) => void;
+  onDriverClick: (driverId: string) => void;
+  // User state
+  currentDriverId?: string;
+  isOwnerOrAdmin?: boolean;
+  // UI State
+  showProtestModal: boolean;
+  setShowProtestModal: (show: boolean) => void;
+  showEndRaceModal: boolean;
+  setShowEndRaceModal: (show: boolean) => void;
+  // Loading states
+  mutationLoading?: {
+    register?: boolean;
+    withdraw?: boolean;
+    cancel?: boolean;
+    reopen?: boolean;
+    complete?: boolean;
+  };
+}
+
+export function RaceDetailTemplate({
+  viewModel,
+  isLoading,
+  error,
+  onBack,
+  onRegister,
+  onWithdraw,
+  onCancel,
+  onReopen,
+  onEndRace,
+  onFileProtest,
+  onResultsClick,
+  onStewardingClick,
+  onLeagueClick,
+  onDriverClick,
+  currentDriverId,
+  isOwnerOrAdmin = false,
+  showProtestModal,
+  setShowProtestModal,
+  showEndRaceModal,
+  setShowEndRaceModal,
+  mutationLoading = {},
+}: RaceDetailTemplateProps) {
+  const [ratingChange, setRatingChange] = useState<number | null>(null);
+  const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
+
+  // Set rating change when viewModel changes
+  useEffect(() => {
+    if (viewModel?.userResult?.ratingChange !== undefined) {
+      setRatingChange(viewModel.userResult.ratingChange);
+    }
+  }, [viewModel?.userResult?.ratingChange]);
+
+  // Animate rating change when it changes
+  useEffect(() => {
+    if (ratingChange !== null) {
+      let start = 0;
+      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);
+        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 formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const formatTime = (date: Date) => {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+  };
+
+  const getTimeUntil = (date: Date) => {
+    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`;
+  };
+
+  const statusConfig = {
+    scheduled: {
+      icon: Clock,
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30',
+      label: 'Scheduled',
+      description: 'This race is scheduled and waiting to start',
+    },
+    running: {
+      icon: PlayCircle,
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30',
+      label: 'LIVE NOW',
+      description: 'This race is currently in progress',
+    },
+    completed: {
+      icon: CheckCircle2,
+      color: 'text-gray-400',
+      bg: 'bg-gray-500/10',
+      border: 'border-gray-500/30',
+      label: 'Completed',
+      description: 'This race has finished',
+    },
+    cancelled: {
+      icon: XCircle,
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30',
+      label: 'Cancelled',
+      description: 'This race has been cancelled',
+    },
+  } as const;
+
+  const getCountryFlag = (countryCode: string): string => {
+    const codePoints = countryCode
+      .toUpperCase()
+      .split('')
+      .map(char => 127397 + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+  };
+
+  if (isLoading) {
+    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">
+          <div className="animate-pulse space-y-6">
+            <div className="h-6 bg-iron-gray rounded w-1/4" />
+            <div className="h-48 bg-iron-gray rounded-xl" />
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-2 h-64 bg-iron-gray rounded-xl" />
+              <div className="h-64 bg-iron-gray rounded-xl" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+                <AlertTriangle className="w-8 h-8 text-warning-amber" />
+              </div>
+              <div>
+                <p className="text-white font-medium mb-1">{error instanceof Error ? error.message : 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>
+              </div>
+              <Button
+                variant="secondary"
+                onClick={onBack}
+                className="mt-4"
+              >
+                Back to Races
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const race = viewModel.race;
+  const league = viewModel.league;
+  const entryList = viewModel.entryList;
+  const userResult = viewModel.userResult;
+  const raceSOF = null; // TODO: Add strength of field to race details response
+
+  const config = statusConfig[race.status as keyof typeof statusConfig];
+  const StatusIcon = config.icon;
+  const timeUntil = race.status === 'scheduled' ? getTimeUntil(new Date(race.scheduledAt)) : null;
+
+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
+    { label: race.track },
+  ];
+
+  return (
+    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl 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
+            variant="secondary"
+            onClick={onBack}
+            className="flex items-center gap-2 text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back
+          </Button>
+        </div>
+
+        {/* User Result - Premium Achievement Card */}
+        {userResult && (
+          <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
+                ? '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'
+            }
+          `}
+          >
+            <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">
+                  <div className="absolute top-4 left-[10%] w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
+                  <div className="absolute top-8 left-[25%] w-1.5 h-1.5 bg-yellow-300 rounded-full animate-pulse delay-100" />
+                  <div className="absolute top-6 right-[20%] w-2 h-2 bg-yellow-500 rounded-full animate-pulse delay-200" />
+                  <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={`
+                      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
+                          ? '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'
+                      }
+                    `}
+                    >
+                      {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>
+                      <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' : ''}>
+                          {userResult.incidents}x incidents
+                          {userResult.isClean && ' ✨'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Right: Stats cards */}
+                  <div className="flex flex-wrap gap-3">
+                    {/* Position change */}
+                    {userResult.positionChange !== 0 && (
+                      <div
+                        className={`
+                        flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
+                        ${
+                          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.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"
+                              />
+                            </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"
+                              />
+                            </svg>
+                          )}
+                          {Math.abs(userResult.positionChange)}
+                        </div>
+                        <div className="text-xs text-gray-400 mt-0.5">
+                          {userResult.positionChange > 0 ? 'Gained' : 'Lost'}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Rating change */}
+                    {ratingChange !== null && (
+                      <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={`
+                          font-mono font-black text-2xl
+                          ${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
+                        `}
+                        >
+                          {animatedRatingChange > 0 ? '+' : ''}
+                          {animatedRatingChange}
+                        </div>
+                        <div className="text-xs text-gray-400 mt-0.5">Rating</div>
+                      </div>
+                    )}
+
+                    {/* Clean race bonus */}
+                    {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>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Hero Header */}
+        <div className={`relative overflow-hidden rounded-2xl ${config.bg} border ${config.border} p-6 sm:p-8`}>
+          {/* 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="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">
+              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${config.bg} border ${config.border}`}>
+                {race.status === 'running' && (
+                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
+                )}
+                <StatusIcon className={`w-4 h-4 ${config.color}`} />
+                <span className={`text-sm font-semibold ${config.color}`}>{config.label}</span>
+              </div>
+              {timeUntil && (
+                <span className="text-sm text-gray-400">
+                  Starts in <span className="text-white font-medium">{timeUntil}</span>
+                </span>
+              )}
+            </div>
+
+            {/* Title */}
+            <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(new Date(race.scheduledAt))}
+              </span>
+              <span className="flex items-center gap-2">
+                <Clock className="w-4 h-4" />
+                {formatTime(new Date(race.scheduledAt))}
+              </span>
+              <span className="flex items-center gap-2">
+                <Car className="w-4 h-4" />
+                {race.car}
+              </span>
+            </div>
+          </div>
+          {/* Prominent SOF Badge - Electric Design */}
+          {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
+                    </div>
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-3xl font-black text-warning-amber font-mono tracking-tight drop-shadow-lg">
+                        {raceSOF}
+                      </span>
+                      <span className="text-sm text-warning-amber/70 font-medium">SOF</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Race Details */}
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <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>
+                  <p className="text-white font-medium">{race.track}</p>
+                </div>
+                <div className="p-4 bg-deep-graphite rounded-lg">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Car</p>
+                  <p className="text-white font-medium">{race.car}</p>
+                </div>
+                <div className="p-4 bg-deep-graphite rounded-lg">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Session Type</p>
+                  <p className="text-white font-medium capitalize">{race.sessionType}</p>
+                </div>
+                <div className="p-4 bg-deep-graphite rounded-lg">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
+                  <p className={`font-medium ${config.color}`}>{config.label}</p>
+                </div>
+                <div className="p-4 bg-deep-graphite rounded-lg">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Strength of Field</p>
+                  <p className="text-warning-amber font-medium flex items-center gap-1.5">
+                    <Zap className="w-4 h-4" />
+                    {raceSOF ?? '—'}
+                  </p>
+                </div>
+              </div>
+            </Card>
+
+            {/* Entry List */}
+            <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-primary-blue" />
+                  Entry List
+                </h2>
+                <span className="text-sm text-gray-400">
+                  {entryList.length} driver{entryList.length !== 1 ? 's' : ''}
+                </span>
+              </div>
+
+              {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>
+                </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={() => onDriverClick(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'
+                          }
+                        `}
+                      >
+                        {/* Position number */}
+                        <div
+                          className={`
+                            flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
+                            ${
+                              race.status === 'completed' && index === 0
+                                ? 'bg-yellow-500/20 text-yellow-400'
+                                : race.status === 'completed' && index === 1
+                                ? 'bg-gray-400/20 text-gray-300'
+                                : race.status === 'completed' && 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={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>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* League Card - Premium Design */}
+            {league && (
+              <Card className="overflow-hidden">
+                <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={`league-logo-${league.id}`}
+                      alt={league.name}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-0.5">League</p>
+                    <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>
+                    <p className="text-white font-medium">{(league.settings as any).maxDrivers ?? 32}</p>
+                  </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 as any).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"
+                >
+                  View League
+                  <ArrowRight className="w-4 h-4" />
+                </Link>
+              </Card>
+            )}
+
+            {/* Quick Actions Card */}
+            <Card>
+              <h2 className="text-lg font-semibold text-white mb-4">Actions</h2>
+
+              <div className="space-y-3">
+                {/* Registration Actions */}
+                <RaceJoinButton
+                  raceStatus={race.status}
+                  isUserRegistered={viewModel.registration.isUserRegistered}
+                  canRegister={viewModel.registration.canRegister}
+                  onRegister={onRegister}
+                  onWithdraw={onWithdraw}
+                  onCancel={onCancel}
+                  onReopen={onReopen}
+                  onEndRace={onEndRace}
+                  canReopenRace={viewModel.canReopenRace}
+                  isOwnerOrAdmin={isOwnerOrAdmin}
+                  isLoading={mutationLoading}
+                />
+
+                {/* Results and Stewarding for completed races */}
+                {race.status === 'completed' && (
+                  <>
+                    <Button
+                      variant="primary"
+                      className="w-full flex items-center justify-center gap-2"
+                      onClick={onResultsClick}
+                    >
+                      <Trophy className="w-4 h-4" />
+                      View Results
+                    </Button>
+                    {userResult && (
+                      <Button
+                        variant="secondary"
+                        className="w-full flex items-center justify-center gap-2"
+                        onClick={onFileProtest}
+                      >
+                        <Scale className="w-4 h-4" />
+                        File Protest
+                      </Button>
+                    )}
+                    <Button
+                      variant="secondary"
+                      className="w-full flex items-center justify-center gap-2"
+                      onClick={onStewardingClick}
+                    >
+                      <Scale className="w-4 h-4" />
+                      Stewarding
+                    </Button>
+                  </>
+                )}
+              </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}`}>
+                  <StatusIcon className={`w-5 h-5 ${config.color}`} />
+                </div>
+                <div>
+                  <p className={`font-medium ${config.color}`}>{config.label}</p>
+                  <p className="text-sm text-gray-400 mt-1">{config.description}</p>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      {/* Modals would be rendered by parent */}
+    </div>
+  );
+}

apps/website/templates/RaceResultsTemplate.tsx

@@ -0,0 +1,363 @@
+'use client';
+
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
+
+export interface ResultEntry {
+  position: number;
+  driverId: string;
+  driverName: string;
+  driverAvatar: string;
+  country: string;
+  car: string;
+  laps: number;
+  time: string;
+  fastestLap: string;
+  points: number;
+  incidents: number;
+  isCurrentUser: boolean;
+}
+
+export interface PenaltyEntry {
+  driverId: string;
+  driverName: string;
+  type: 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points';
+  value: number;
+  reason: string;
+  notes?: string;
+}
+
+export interface RaceResultsTemplateProps {
+  raceTrack?: string;
+  raceScheduledAt?: string;
+  totalDrivers?: number;
+  leagueName?: string;
+  raceSOF?: number | null;
+  results: ResultEntry[];
+  penalties: PenaltyEntry[];
+  pointsSystem: Record<string, number>;
+  fastestLapTime: number;
+  currentDriverId: string;
+  isAdmin: boolean;
+  isLoading: boolean;
+  error?: Error | null;
+  // Actions
+  onBack: () => void;
+  onImportResults: (results: any[]) => void;
+  onPenaltyClick: (driver: { id: string; name: string }) => void;
+  // UI State
+  importing: boolean;
+  importSuccess: boolean;
+  importError: string | null;
+  showImportForm: boolean;
+  setShowImportForm: (show: boolean) => void;
+}
+
+export function RaceResultsTemplate({
+  raceTrack,
+  raceScheduledAt,
+  totalDrivers,
+  leagueName,
+  raceSOF,
+  results,
+  penalties,
+  pointsSystem,
+  fastestLapTime,
+  currentDriverId,
+  isAdmin,
+  isLoading,
+  error,
+  onBack,
+  onImportResults,
+  onPenaltyClick,
+  importing,
+  importSuccess,
+  importError,
+  showImportForm,
+  setShowImportForm,
+}: RaceResultsTemplateProps) {
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const formatTime = (ms: number) => {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    const milliseconds = Math.floor((ms % 1000) / 10);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
+  };
+
+  const getCountryFlag = (countryCode: string): string => {
+    const codePoints = countryCode
+      .toUpperCase()
+      .split('')
+      .map(char => 127397 + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+  };
+
+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    ...(leagueName ? [{ label: leagueName, href: `/leagues/${leagueName}` }] : []),
+    ...(raceTrack ? [{ label: raceTrack, href: `/races/${raceTrack}` }] : []),
+    { label: 'Results' },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center text-gray-400">Loading results...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !raceTrack) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto">
+          <Card className="text-center py-12">
+            <div className="text-warning-amber mb-4">
+              {error?.message || 'Race not found'}
+            </div>
+            <Button
+              variant="secondary"
+              onClick={onBack}
+            >
+              Back to Races
+            </Button>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const hasResults = results.length > 0;
+
+  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">
+        <div className="flex items-center justify-between">
+          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
+          <Button
+            variant="secondary"
+            onClick={onBack}
+            className="flex items-center gap-2 text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back
+          </Button>
+        </div>
+
+        {/* Header */}
+        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
+              <Trophy className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-white">Race Results</h1>
+              <p className="text-sm text-gray-400">
+                {raceTrack} • {raceScheduledAt ? formatDate(raceScheduledAt) : ''}
+              </p>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="p-3 bg-deep-graphite/60 rounded-lg">
+              <p className="text-xs text-gray-400 mb-1">Drivers</p>
+              <p className="text-lg font-bold text-white">{totalDrivers ?? 0}</p>
+            </div>
+            <div className="p-3 bg-deep-graphite/60 rounded-lg">
+              <p className="text-xs text-gray-400 mb-1">League</p>
+              <p className="text-sm font-medium text-white truncate">{leagueName ?? '—'}</p>
+            </div>
+            <div className="p-3 bg-deep-graphite/60 rounded-lg">
+              <p className="text-xs text-gray-400 mb-1">SOF</p>
+              <p className="text-lg font-bold text-warning-amber flex items-center gap-1">
+                <Zap className="w-4 h-4" />
+                {raceSOF ?? '—'}
+              </p>
+            </div>
+            <div className="p-3 bg-deep-graphite/60 rounded-lg">
+              <p className="text-xs text-gray-400 mb-1">Fastest Lap</p>
+              <p className="text-lg font-bold text-performance-green">
+                {fastestLapTime ? formatTime(fastestLapTime) : '—'}
+              </p>
+            </div>
+          </div>
+        </Card>
+
+        {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>
+        )}
+
+        {importError && (
+          <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
+            <strong>Error:</strong> {importError}
+          </div>
+        )}
+
+        <Card>
+          {hasResults ? (
+            <div className="space-y-4">
+              {/* Results Table */}
+              <div className="space-y-2">
+                {results.map((result) => {
+                  const isCurrentUser = result.driverId === currentDriverId;
+                  const countryFlag = getCountryFlag(result.country);
+                  const points = pointsSystem[result.position.toString()] ?? 0;
+
+                  return (
+                    <div
+                      key={result.driverId}
+                      className={`
+                        flex items-center gap-3 p-3 rounded-xl
+                        ${isCurrentUser ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent border border-primary-blue/40' : 'bg-deep-graphite'}
+                      `}
+                    >
+                      {/* Position */}
+                      <div className={`
+                        flex items-center justify-center w-10 h-10 rounded-lg font-bold
+                        ${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' :
+                          'bg-iron-gray text-gray-500'}
+                      `}>
+                        {result.position}
+                      </div>
+
+                      {/* Avatar */}
+                      <div className="relative flex-shrink-0">
+                        <img
+                          src={result.driverAvatar}
+                          alt={result.driverName}
+                          className={`w-10 h-10 rounded-full object-cover ${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}`}
+                        />
+                        <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'}`}>
+                            {result.driverName}
+                          </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>
+                        <div className="flex items-center gap-3 text-xs text-gray-400 mt-0.5">
+                          <span>{result.car}</span>
+                          <span>•</span>
+                          <span>Laps: {result.laps}</span>
+                          <span>•</span>
+                          <span>Incidents: {result.incidents}</span>
+                        </div>
+                      </div>
+
+                      {/* Times */}
+                      <div className="text-right min-w-[100px]">
+                        <p className="text-sm font-mono text-white">{result.time}</p>
+                        <p className="text-xs text-performance-green">FL: {result.fastestLap}</p>
+                      </div>
+
+                      {/* Points */}
+                      <div className="flex-shrink-0">
+                        <div className="flex flex-col items-center px-3 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
+                          <span className="text-xs text-gray-400">PTS</span>
+                          <span className="text-sm font-bold text-warning-amber">{points}</span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Penalties Section */}
+              {penalties.length > 0 && (
+                <div className="mt-6 pt-6 border-t border-charcoal-outline">
+                  <h3 className="text-lg font-semibold text-white mb-4">Penalties</h3>
+                  <div className="space-y-2">
+                    {penalties.map((penalty, index) => (
+                      <div key={index} className="flex items-center gap-3 p-3 bg-deep-graphite rounded-lg">
+                        <div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+                          <span className="text-red-400 font-bold text-sm">!</span>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="font-medium text-white">{penalty.driverName}</span>
+                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+                              {penalty.type.replace('_', ' ')}
+                            </span>
+                          </div>
+                          <p className="text-sm text-gray-400">{penalty.reason}</p>
+                          {penalty.notes && (
+                            <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
+                          )}
+                        </div>
+                        <div className="text-right">
+                          <span className="text-2xl font-bold text-red-400">
+                            {penalty.type === 'time_penalty' && `+${penalty.value}s`}
+                            {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
+                            {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
+                            {penalty.type === 'disqualification' && 'DSQ'}
+                            {penalty.type === 'warning' && 'Warning'}
+                            {penalty.type === 'license_points' && `${penalty.value} LP`}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <h2 className="text-xl font-semibold text-white mb-6">Import Results</h2>
+              <p className="text-gray-400 text-sm mb-6">
+                No results imported. Upload CSV to test the standings system.
+              </p>
+              {importing ? (
+                <div className="text-center py-8 text-gray-400">
+                  Importing results and updating standings...
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <p className="text-sm text-gray-400">
+                    This is a placeholder for the import form. In the actual implementation,
+                    this would render the ImportResultsForm component.
+                  </p>
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      // Mock import for demo
+                      onImportResults([]);
+                    }}
+                    disabled={importing}
+                  >
+                    Import Results (Demo)
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/website/templates/RaceStewardingTemplate.tsx

@@ -0,0 +1,435 @@
+'use client';
+
+import { useState } from 'react';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import RaceStewardingStats from '@/components/races/RaceStewardingStats';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import { StewardingTabs } from '@/components/races/StewardingTabs';
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowLeft,
+  CheckCircle,
+  Clock,
+  Flag,
+  Gavel,
+  Scale,
+  Video
+} from 'lucide-react';
+import Link from 'next/link';
+
+export type StewardingTab = 'pending' | 'resolved' | 'penalties';
+
+export interface Protest {
+  id: string;
+  status: string;
+  protestingDriverId: string;
+  accusedDriverId: string;
+  filedAt: string;
+  incident: {
+    lap: number;
+    description: string;
+  };
+  proofVideoUrl?: string;
+  decisionNotes?: string;
+}
+
+export interface Penalty {
+  id: string;
+  driverId: string;
+  type: string;
+  value: number;
+  reason: string;
+  notes?: string;
+}
+
+export interface Driver {
+  id: string;
+  name: string;
+}
+
+export interface RaceStewardingData {
+  race?: {
+    id: string;
+    track: string;
+    scheduledAt: string;
+  } | null;
+  league?: {
+    id: string;
+  } | null;
+  pendingProtests: Protest[];
+  resolvedProtests: Protest[];
+  penalties: Penalty[];
+  driverMap: Record<string, Driver>;
+  pendingCount: number;
+  resolvedCount: number;
+  penaltiesCount: number;
+}
+
+export interface RaceStewardingTemplateProps {
+  stewardingData?: RaceStewardingData;
+  isLoading: boolean;
+  error?: Error | null;
+  // Actions
+  onBack: () => void;
+  onReviewProtest: (protestId: string) => void;
+  // User state
+  isAdmin: boolean;
+  // UI State
+  activeTab: StewardingTab;
+  setActiveTab: (tab: StewardingTab) => void;
+}
+
+export function RaceStewardingTemplate({
+  stewardingData,
+  isLoading,
+  error,
+  onBack,
+  onReviewProtest,
+  isAdmin,
+  activeTab,
+  setActiveTab,
+}: RaceStewardingTemplateProps) {
+  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',
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'pending':
+      case 'under_review':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
+            Pending
+          </span>
+        );
+      case 'upheld':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+            Upheld
+          </span>
+        );
+      case 'dismissed':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
+            Dismissed
+          </span>
+        );
+      case 'withdrawn':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
+            Withdrawn
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (isLoading) {
+    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">
+          <div className="animate-pulse space-y-6">
+            <div className="h-6 bg-iron-gray rounded w-1/4" />
+            <div className="h-48 bg-iron-gray rounded-xl" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!stewardingData?.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">
+          <Card className="text-center py-12">
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-4 bg-warning-amber/10 rounded-full">
+                <AlertTriangle className="w-8 h-8 text-warning-amber" />
+              </div>
+              <div>
+                <p className="text-white font-medium mb-1">Race not found</p>
+                <p className="text-sm text-gray-500">
+                  The race you're looking for doesn't exist.
+                </p>
+              </div>
+              <Button variant="secondary" onClick={onBack}>
+                Back to Races
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    { label: stewardingData.race.track, href: `/races/${stewardingData.race.id}` },
+    { label: 'Stewarding' },
+  ];
+
+  const pendingProtests = stewardingData.pendingProtests ?? [];
+  const resolvedProtests = stewardingData.resolvedProtests ?? [];
+
+  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 space-y-6">
+        {/* Navigation */}
+        <div className="flex items-center justify-between">
+          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
+          <Button
+            variant="secondary"
+            onClick={() => onBack()}
+            className="flex items-center gap-2 text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Race
+          </Button>
+        </div>
+
+        {/* Header */}
+        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
+              <Scale className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-white">Stewarding</h1>
+              <p className="text-sm text-gray-400">
+                {stewardingData.race.track} • {stewardingData.race.scheduledAt ? formatDate(stewardingData.race.scheduledAt) : ''}
+              </p>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <RaceStewardingStats
+            pendingCount={stewardingData.pendingCount ?? 0}
+            resolvedCount={stewardingData.resolvedCount ?? 0}
+            penaltiesCount={stewardingData.penaltiesCount ?? 0}
+          />
+        </Card>
+
+        {/* Tab Navigation */}
+        <StewardingTabs
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          pendingCount={pendingProtests.length}
+        />
+
+        {/* Content */}
+        {activeTab === 'pending' && (
+          <div className="space-y-4">
+            {pendingProtests.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
+                  <Flag className="w-8 h-8 text-performance-green" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">All Clear!</p>
+                <p className="text-sm text-gray-400">No pending protests to review</p>
+              </Card>
+            ) : (
+              pendingProtests.map((protest) => {
+                const protester = stewardingData.driverMap[protest.protestingDriverId];
+                const accused = stewardingData.driverMap[protest.accusedDriverId];
+                const daysSinceFiled = Math.floor(
+                  (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
+                );
+                const isUrgent = daysSinceFiled > 2;
+
+                return (
+                  <Card
+                    key={protest.id}
+                    className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
+                          <Link
+                            href={`/drivers/${protest.protestingDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {protester?.name || 'Unknown'}
+                          </Link>
+                          <span className="text-gray-400">vs</span>
+                          <Link
+                            href={`/drivers/${protest.accusedDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {accused?.name || 'Unknown'}
+                          </Link>
+                          {getStatusBadge(protest.status)}
+                          {isUrgent && (
+                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
+                              <AlertTriangle className="w-3 h-3" />
+                              {daysSinceFiled}d old
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
+                          <span>Lap {protest.incident.lap}</span>
+                          <span>•</span>
+                          <span>Filed {formatDate(protest.filedAt)}</span>
+                          {protest.proofVideoUrl && (
+                            <>
+                              <span>•</span>
+                              <a
+                                href={protest.proofVideoUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-1 text-primary-blue hover:underline"
+                              >
+                                <Video className="w-3 h-3" />
+                                Video Evidence
+                              </a>
+                            </>
+                          )}
+                        </div>
+                        <p className="text-sm text-gray-300">{protest.incident.description}</p>
+                      </div>
+                      {isAdmin && stewardingData?.league && (
+                        <Button
+                          variant="primary"
+                          onClick={() => onReviewProtest(protest.id)}
+                        >
+                          Review
+                        </Button>
+                      )}
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+
+        {activeTab === 'resolved' && (
+          <div className="space-y-4">
+            {resolvedProtests.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
+                  <CheckCircle className="w-8 h-8 text-gray-500" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
+                <p className="text-sm text-gray-400">
+                  Resolved protests will appear here
+                </p>
+              </Card>
+            ) : (
+              resolvedProtests.map((protest) => {
+                const protester = stewardingData.driverMap[protest.protestingDriverId];
+                const accused = stewardingData.driverMap[protest.accusedDriverId];
+
+                return (
+                  <Card key={protest.id}>
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                          <Link
+                            href={`/drivers/${protest.protestingDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {protester?.name || 'Unknown'}
+                          </Link>
+                          <span className="text-gray-400">vs</span>
+                          <Link
+                            href={`/drivers/${protest.accusedDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {accused?.name || 'Unknown'}
+                          </Link>
+                          {getStatusBadge(protest.status)}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
+                          <span>Lap {protest.incident.lap}</span>
+                          <span>•</span>
+                          <span>Filed {formatDate(protest.filedAt)}</span>
+                        </div>
+                        <p className="text-sm text-gray-300 mb-2">
+                          {protest.incident.description}
+                        </p>
+                        {protest.decisionNotes && (
+                          <div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
+                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
+                              Steward Decision
+                            </p>
+                            <p className="text-sm text-gray-300">{protest.decisionNotes}</p>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+
+        {activeTab === 'penalties' && (
+          <div className="space-y-4">
+            {stewardingData?.penalties.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
+                  <Gavel className="w-8 h-8 text-gray-500" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">No Penalties</p>
+                <p className="text-sm text-gray-400">
+                  Penalties issued for this race will appear here
+                </p>
+              </Card>
+            ) : (
+              stewardingData?.penalties.map((penalty) => {
+                const driver = stewardingData.driverMap[penalty.driverId];
+                return (
+                  <Card key={penalty.id}>
+                    <div className="flex items-center gap-4">
+                      <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+                        <Gavel className="w-6 h-6 text-red-400" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Link
+                            href={`/drivers/${penalty.driverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {driver?.name || 'Unknown'}
+                          </Link>
+                          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+                            {penalty.type.replace('_', ' ')}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-400">{penalty.reason}</p>
+                        {penalty.notes && (
+                          <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
+                        )}
+                      </div>
+                      <div className="text-right">
+                        <span className="text-2xl font-bold text-red-400">
+                          {penalty.type === 'time_penalty' && `+${penalty.value}s`}
+                          {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
+                          {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
+                          {penalty.type === 'disqualification' && 'DSQ'}
+                          {penalty.type === 'warning' && 'Warning'}
+                          {penalty.type === 'license_points' && `${penalty.value} LP`}
+                        </span>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/website/templates/RacesAllTemplate.tsx

@@ -0,0 +1,416 @@
+'use client';
+
+import { useMemo, useEffect } from 'react';
+import Link from 'next/link';
+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 {
+  Calendar,
+  Clock,
+  Flag,
+  ChevronRight,
+  ChevronLeft,
+  Car,
+  Trophy,
+  Zap,
+  PlayCircle,
+  CheckCircle2,
+  XCircle,
+  Search,
+  SlidersHorizontal,
+} from 'lucide-react';
+import { RaceFilterModal } from '@/components/races/RaceFilterModal';
+import { RacePagination } from '@/components/races/RacePagination';
+
+export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
+
+export interface Race {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+  leagueId?: string;
+  leagueName?: string;
+  strengthOfField?: number | null;
+}
+
+export interface RacesAllTemplateProps {
+  races: Race[];
+  isLoading: boolean;
+  // Pagination
+  currentPage: number;
+  totalPages: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+  // Filters
+  statusFilter: StatusFilter;
+  setStatusFilter: (filter: StatusFilter) => void;
+  leagueFilter: string;
+  setLeagueFilter: (filter: string) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  // UI State
+  showFilters: boolean;
+  setShowFilters: (show: boolean) => void;
+  showFilterModal: boolean;
+  setShowFilterModal: (show: boolean) => void;
+  // Actions
+  onRaceClick: (raceId: string) => void;
+  onLeagueClick: (leagueId: string) => void;
+}
+
+export function RacesAllTemplate({
+  races,
+  isLoading,
+  currentPage,
+  totalPages,
+  itemsPerPage,
+  onPageChange,
+  statusFilter,
+  setStatusFilter,
+  leagueFilter,
+  setLeagueFilter,
+  searchQuery,
+  setSearchQuery,
+  showFilters,
+  setShowFilters,
+  showFilterModal,
+  setShowFilterModal,
+  onRaceClick,
+  onLeagueClick,
+}: RacesAllTemplateProps) {
+  // Filter races
+  const filteredRaces = useMemo(() => {
+    return races.filter(race => {
+      if (statusFilter !== 'all' && race.status !== statusFilter) {
+        return false;
+      }
+
+      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
+        return false;
+      }
+
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const matchesTrack = race.track.toLowerCase().includes(query);
+        const matchesCar = race.car.toLowerCase().includes(query);
+        const matchesLeague = race.leagueName?.toLowerCase().includes(query);
+        if (!matchesTrack && !matchesCar && !matchesLeague) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [races, statusFilter, leagueFilter, searchQuery]);
+
+  // Paginate
+  const paginatedRaces = useMemo(() => {
+    const start = (currentPage - 1) * itemsPerPage;
+    return filteredRaces.slice(start, start + itemsPerPage);
+  }, [filteredRaces, currentPage, itemsPerPage]);
+
+  // Reset page when filters change
+  useEffect(() => {
+    onPageChange(1);
+  }, [statusFilter, leagueFilter, searchQuery]);
+
+  const formatDate = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const formatTime = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const statusConfig = {
+    scheduled: {
+      icon: Clock,
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30',
+      label: 'Scheduled',
+    },
+    running: {
+      icon: PlayCircle,
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30',
+      label: 'LIVE',
+    },
+    completed: {
+      icon: CheckCircle2,
+      color: 'text-gray-400',
+      bg: 'bg-gray-500/10',
+      border: 'border-gray-500/30',
+      label: 'Completed',
+    },
+    cancelled: {
+      icon: XCircle,
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30',
+      label: 'Cancelled',
+    },
+  };
+
+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    { label: 'All Races' },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-5xl mx-auto">
+          <div className="animate-pulse space-y-6">
+            <div className="h-6 bg-iron-gray rounded w-1/4" />
+            <div className="h-10 bg-iron-gray rounded w-1/3" />
+            <div className="space-y-4">
+              {[1, 2, 3, 4, 5].map(i => (
+                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-5xl mx-auto space-y-6">
+        {/* Breadcrumbs */}
+        <Breadcrumbs items={breadcrumbItems} />
+
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <Heading level={1} className="text-2xl font-bold text-white flex items-center gap-3">
+              <Flag className="w-6 h-6 text-primary-blue" />
+              All Races
+            </Heading>
+            <p className="text-gray-400 text-sm mt-1">
+              {filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
+            </p>
+          </div>
+          
+          <Button
+            variant="secondary"
+            onClick={() => setShowFilters(!showFilters)}
+            className="flex items-center gap-2"
+          >
+            <SlidersHorizontal className="w-4 h-4" />
+            Filters
+          </Button>
+        </div>
+
+        {/* Search & Filters */}
+        <Card className={`!p-4 ${showFilters ? '' : 'hidden sm:block'}`}>
+          <div className="space-y-4">
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search by track, car, or league..."
+                className="w-full pl-10 pr-4 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
+              />
+            </div>
+
+            {/* Filter Row */}
+            <div className="flex flex-wrap gap-4">
+              {/* Status Filter */}
+              <select
+                value={statusFilter}
+                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>
+                <option value="scheduled">Scheduled</option>
+                <option value="running">Live</option>
+                <option value="completed">Completed</option>
+                <option value="cancelled">Cancelled</option>
+              </select>
+
+              {/* League Filter */}
+              <select
+                value={leagueFilter}
+                onChange={(e) => setLeagueFilter(e.target.value)}
+                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>
+                {races && [...new Set(races.map(r => r.leagueId))].filter(Boolean).map(leagueId => {
+                  const race = races.find(r => r.leagueId === leagueId);
+                  return race ? (
+                    <option key={leagueId} value={leagueId}>
+                      {race.leagueName}
+                    </option>
+                  ) : null;
+                })}
+              </select>
+
+              {/* Clear Filters */}
+              {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery) && (
+                <button
+                  onClick={() => {
+                    setStatusFilter('all');
+                    setLeagueFilter('all');
+                    setSearchQuery('');
+                  }}
+                  className="px-4 py-2 text-sm text-primary-blue hover:underline"
+                >
+                  Clear filters
+                </button>
+              )}
+            </div>
+          </div>
+        </Card>
+
+        {/* Race List */}
+        {paginatedRaces.length === 0 ? (
+          <Card className="text-center py-12">
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-4 bg-iron-gray rounded-full">
+                <Calendar className="w-8 h-8 text-gray-500" />
+              </div>
+              <div>
+                <p className="text-white font-medium mb-1">No races found</p>
+                <p className="text-sm text-gray-500">
+                  {races.length === 0 
+                    ? 'No races have been scheduled yet'
+                    : 'Try adjusting your search or filters'}
+                </p>
+              </div>
+            </div>
+          </Card>
+        ) : (
+          <div className="space-y-3">
+            {paginatedRaces.map(race => {
+               const config = statusConfig[race.status as keyof typeof statusConfig];
+               const StatusIcon = config.icon;
+
+              return (
+                <div
+                  key={race.id}
+                  onClick={() => onRaceClick(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-center gap-4">
+                    {/* Date Column */}
+                    <div className="hidden sm:flex flex-col items-center min-w-[80px] text-center">
+                      <p className="text-xs text-gray-500 uppercase">
+                        {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
+                      </p>
+                      <p className="text-2xl font-bold text-white">
+                        {new Date(race.scheduledAt).getDate()}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {formatTime(race.scheduledAt)}
+                      </p>
+                    </div>
+
+                    {/* Divider */}
+                    <div className="hidden sm:block w-px h-16 bg-charcoal-outline" />
+
+                    {/* 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 flex-wrap items-center gap-x-4 gap-y-1 mt-1">
+                            <span className="flex items-center gap-1.5 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.5 text-sm text-warning-amber">
+                                <Zap className="w-3.5 h-3.5" />
+                                SOF {race.strengthOfField}
+                              </span>
+                            )}
+                            <span className="sm:hidden text-sm text-gray-500">
+                              {formatDate(race.scheduledAt)}
+                            </span>
+                          </div>
+                          <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 */}
+                        <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border flex-shrink-0`}>
+                          <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
+                          <span className={`text-xs font-medium ${config.color}`}>
+                            {config.label}
+                          </span>
+                        </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>
+        )}
+
+        {/* Pagination */}
+        <RacePagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalItems={filteredRaces.length}
+          itemsPerPage={itemsPerPage}
+          onPageChange={onPageChange}
+        />
+
+        {/* Filter Modal */}
+        <RaceFilterModal
+          isOpen={showFilterModal}
+          onClose={() => setShowFilterModal(false)}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          leagueFilter={leagueFilter}
+          setLeagueFilter={setLeagueFilter}
+          timeFilter="all"
+          setTimeFilter={() => {}}
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          leagues={[...new Set(races.map(r => ({ id: r.leagueId || '', name: r.leagueName || '' })))]}
+          showSearch={true}
+          showTimeFilter={false}
+        />
+      </div>
+    </div>
+  );
+}

apps/website/templates/RacesTemplate.tsx

@@ -0,0 +1,663 @@
+'use client';
+
+import { useMemo } from 'react';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Heading from '@/components/ui/Heading';
+import {
+  Calendar,
+  Clock,
+  Flag,
+  ChevronRight,
+  MapPin,
+  Car,
+  Trophy,
+  Users,
+  Zap,
+  PlayCircle,
+  CheckCircle2,
+  XCircle,
+  CalendarDays,
+  ArrowRight,
+} from 'lucide-react';
+import { RaceFilterModal } from '@/components/races/RaceFilterModal';
+import { RaceJoinButton } from '@/components/races/RaceJoinButton';
+
+export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
+export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
+
+export interface Race {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+  leagueId?: string;
+  leagueName?: string;
+  strengthOfField?: number | null;
+  isUpcoming: boolean;
+  isLive: boolean;
+  isPast: boolean;
+}
+
+export interface RacesTemplateProps {
+  races: Race[];
+  totalCount: number;
+  scheduledRaces: Race[];
+  runningRaces: Race[];
+  completedRaces: Race[];
+  isLoading: boolean;
+  // Filters
+  statusFilter: RaceStatusFilter;
+  setStatusFilter: (filter: RaceStatusFilter) => void;
+  leagueFilter: string;
+  setLeagueFilter: (filter: string) => void;
+  timeFilter: TimeFilter;
+  setTimeFilter: (filter: TimeFilter) => void;
+  // Actions
+  onRaceClick: (raceId: string) => void;
+  onLeagueClick: (leagueId: string) => void;
+  onRegister: (raceId: string, leagueId: string) => void;
+  onWithdraw: (raceId: string) => void;
+  onCancel: (raceId: string) => void;
+  // UI State
+  showFilterModal: boolean;
+  setShowFilterModal: (show: boolean) => void;
+  // User state
+  currentDriverId?: string;
+  userMemberships?: Array<{ leagueId: string; role: string }>;
+}
+
+export function RacesTemplate({
+  races,
+  totalCount,
+  scheduledRaces,
+  runningRaces,
+  completedRaces,
+  isLoading,
+  statusFilter,
+  setStatusFilter,
+  leagueFilter,
+  setLeagueFilter,
+  timeFilter,
+  setTimeFilter,
+  onRaceClick,
+  onLeagueClick,
+  onRegister,
+  onWithdraw,
+  onCancel,
+  showFilterModal,
+  setShowFilterModal,
+  currentDriverId,
+  userMemberships,
+}: RacesTemplateProps) {
+  // Filter 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;
+      }
+
+      // Time filter
+      if (timeFilter === 'upcoming' && !race.isUpcoming) {
+        return false;
+      }
+      if (timeFilter === 'live' && !race.isLive) {
+        return false;
+      }
+      if (timeFilter === 'past' && !race.isPast) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [races, statusFilter, leagueFilter, timeFilter]);
+
+  // Group races by date for calendar view
+  const racesByDate = useMemo(() => {
+    const grouped = new Map<string, typeof filteredRaces[0][]>();
+    filteredRaces.forEach((race) => {
+      const dateKey = race.scheduledAt.split('T')[0]!;
+      if (!grouped.has(dateKey)) {
+        grouped.set(dateKey, []);
+      }
+      grouped.get(dateKey)!.push(race);
+    });
+    return grouped;
+  }, [filteredRaces]);
+
+  const upcomingRaces = filteredRaces.filter(r => r.isUpcoming).slice(0, 5);
+  const liveRaces = filteredRaces.filter(r => r.isLive);
+  const recentResults = filteredRaces.filter(r => r.isPast).slice(0, 5);
+  const stats = {
+    total: totalCount,
+    scheduled: scheduledRaces.length,
+    running: runningRaces.length,
+    completed: completedRaces.length,
+  };
+
+  const formatDate = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const formatTime = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const formatFullDate = (date: Date | string) => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const getRelativeTime = (date?: Date | string) => {
+    if (!date) return '';
+    const now = new Date();
+    const targetDate = typeof date === 'string' ? new Date(date) : date;
+    const diffMs = targetDate.getTime() - now.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (diffMs < 0) return 'Past';
+    if (diffHours < 1) return 'Starting soon';
+    if (diffHours < 24) return `In ${diffHours}h`;
+    if (diffDays === 1) return 'Tomorrow';
+    if (diffDays < 7) return `In ${diffDays} days`;
+    return formatDate(targetDate);
+  };
+
+  const statusConfig = {
+    scheduled: {
+      icon: Clock,
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30',
+      label: 'Scheduled',
+    },
+    running: {
+      icon: PlayCircle,
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30',
+      label: 'LIVE',
+    },
+    completed: {
+      icon: CheckCircle2,
+      color: 'text-gray-400',
+      bg: 'bg-gray-500/10',
+      border: 'border-gray-500/30',
+      label: 'Completed',
+    },
+    cancelled: {
+      icon: XCircle,
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30',
+      label: 'Cancelled',
+    },
+  };
+
+  const isUserRegistered = (race: Race) => {
+    // This would need actual registration data
+    return false;
+  };
+
+  const canRegister = (race: Race) => {
+    // This would need actual registration rules
+    return race.status === 'scheduled';
+  };
+
+  const isOwnerOrAdmin = (leagueId?: string) => {
+    if (!leagueId || !userMemberships) return false;
+    const membership = userMemberships.find(m => m.leagueId === leagueId);
+    return membership?.role === 'owner' || membership?.role === 'admin';
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="animate-pulse space-y-6">
+            <div className="h-10 bg-iron-gray rounded w-1/4" />
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {[1, 2, 3, 4].map(i => (
+                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
+              ))}
+            </div>
+            <div className="h-64 bg-iron-gray rounded-lg" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Hero Header */}
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border border-charcoal-outline p-8">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
+          <div className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
+          
+          <div className="relative z-10">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-2 bg-primary-blue/10 rounded-lg">
+                <Flag className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl font-bold text-white">
+                Race Calendar
+              </Heading>
+            </div>
+            <p className="text-gray-400 max-w-2xl">
+              Track upcoming races, view live events, and explore results across all your leagues.
+            </p>
+          </div>
+
+          {/* Quick Stats */}
+          <div className="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
+                <CalendarDays className="w-4 h-4" />
+                <span>Total</span>
+              </div>
+              <p className="text-2xl font-bold text-white">{stats.total}</p>
+            </div>
+            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+              <div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
+                <Clock className="w-4 h-4" />
+                <span>Scheduled</span>
+              </div>
+              <p className="text-2xl font-bold text-white">{stats.scheduled}</p>
+            </div>
+            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+              <div className="flex items-center gap-2 text-performance-green text-sm mb-1">
+                <Zap className="w-4 h-4" />
+                <span>Live Now</span>
+              </div>
+              <p className="text-2xl font-bold text-white">{stats.running}</p>
+            </div>
+            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
+                <Trophy className="w-4 h-4" />
+                <span>Completed</span>
+              </div>
+              <p className="text-2xl font-bold text-white">{stats.completed}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Live Races Banner */}
+        {liveRaces.length > 0 && (
+          <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-performance-green/20 via-performance-green/10 to-transparent border border-performance-green/30 p-6">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-performance-green/20 rounded-full blur-2xl animate-pulse" />
+            
+            <div className="relative z-10">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="flex items-center gap-2 px-3 py-1 bg-performance-green/20 rounded-full">
+                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
+                  <span className="text-performance-green font-semibold text-sm">LIVE NOW</span>
+                </div>
+              </div>
+              
+              <div className="space-y-3">
+                {liveRaces.map((race) => (
+                  <div
+                    key={race.id}
+                    onClick={() => onRaceClick(race.id)}
+                    className="flex items-center justify-between p-4 bg-deep-graphite/80 rounded-lg border border-performance-green/20 cursor-pointer hover:border-performance-green/40 transition-all"
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className="p-2 bg-performance-green/20 rounded-lg">
+                        <PlayCircle className="w-5 h-5 text-performance-green" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-white">{race.track}</h3>
+                        <p className="text-sm text-gray-400">{race.leagueName}</p>
+                      </div>
+                    </div>
+                    <ChevronRight className="w-5 h-5 text-gray-400" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Content - Race List */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Filters */}
+            <Card className="!p-4">
+              <div className="flex flex-wrap gap-4">
+                {/* Time Filter Tabs */}
+                <div className="flex items-center gap-1 p-1 bg-deep-graphite rounded-lg">
+                  {(['upcoming', 'live', 'past', 'all'] as TimeFilter[]).map(filter => (
+                    <button
+                      key={filter}
+                      onClick={() => setTimeFilter(filter)}
+                      className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                        timeFilter === filter
+                          ? 'bg-primary-blue text-white'
+                          : 'text-gray-400 hover:text-white'
+                      }`}
+                    >
+                      {filter === 'live' && <span className="inline-block w-2 h-2 bg-performance-green rounded-full mr-2 animate-pulse" />}
+                      {filter.charAt(0).toUpperCase() + filter.slice(1)}
+                    </button>
+                  ))}
+                </div>
+
+                {/* League Filter */}
+                <select
+                  value={leagueFilter}
+                  onChange={(e) => setLeagueFilter(e.target.value)}
+                  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>
+                  {races && [...new Set(races.map(r => r.leagueId))].filter(Boolean).map(leagueId => {
+                    const item = races.find(r => r.leagueId === leagueId);
+                    return item ? (
+                      <option key={leagueId} value={leagueId}>
+                        {item.leagueName}
+                      </option>
+                    ) : null;
+                  })}
+                </select>
+
+                {/* Filter Button */}
+                <button
+                  onClick={() => setShowFilterModal(true)}
+                  className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white text-sm hover:border-primary-blue transition-colors"
+                >
+                  More Filters
+                </button>
+              </div>
+            </Card>
+
+            {/* Race List by Date */}
+            {filteredRaces.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="flex flex-col items-center gap-4">
+                  <div className="p-4 bg-iron-gray rounded-full">
+                    <Calendar className="w-8 h-8 text-gray-500" />
+                  </div>
+                  <div>
+                    <p className="text-white font-medium mb-1">No races found</p>
+                    <p className="text-sm text-gray-500">
+                      {totalCount === 0
+                        ? 'No races have been scheduled yet'
+                        : 'Try adjusting your filters'}
+                    </p>
+                  </div>
+                </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>
+
+                    {/* Races for this date */}
+                    <div className="space-y-2">
+                      {dayRaces.map((race) => {
+                        const config = statusConfig[race.status as keyof typeof statusConfig];
+                        const StatusIcon = config.icon;
+
+                        return (
+                          <div
+                            key={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`}
+                            onClick={() => onRaceClick(race.id)}
+                          >
+                            {/* 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>
+
+                              {/* 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>
+
+                                  {/* 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" />
+                                    {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>
+            )}
+
+            {/* View All Link */}
+            {filteredRaces.length > 0 && (
+              <div className="text-center">
+                <Link
+                  href="/races/all"
+                  className="inline-flex items-center gap-2 px-6 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:border-primary-blue transition-colors"
+                >
+                  View All Races
+                  <ArrowRight className="w-4 h-4" />
+                </Link>
+              </div>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Upcoming This Week */}
+            <Card>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-semibold text-white flex items-center gap-2">
+                  <Clock className="w-4 h-4 text-primary-blue" />
+                  Next Up
+                </h3>
+                <span className="text-xs text-gray-500">This week</span>
+              </div>
+
+              {upcomingRaces.length === 0 ? (
+                <p className="text-sm text-gray-500 text-center py-4">
+                  No races scheduled this week
+                </p>
+              ) : (
+                <div className="space-y-3">
+                  {upcomingRaces.map((race) => {
+                    if (!race.scheduledAt) {
+                      return null;
+                    }
+                    const scheduledAtDate = new Date(race.scheduledAt);
+                    return (
+                      <div
+                        key={race.id}
+                        onClick={() => onRaceClick(race.id)}
+                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
+                      >
+                        <div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
+                          <span className="text-sm font-bold text-primary-blue">
+                            {scheduledAtDate.getDate()}
+                          </span>
+                        </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(scheduledAtDate)}</p>
+                        </div>
+                        <ChevronRight className="w-4 h-4 text-gray-500" />
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </Card>
+
+            {/* Recent Results */}
+            <Card>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-semibold text-white flex items-center gap-2">
+                  <Trophy className="w-4 h-4 text-warning-amber" />
+                  Recent Results
+                </h3>
+              </div>
+
+              {recentResults.length === 0 ? (
+                <p className="text-sm text-gray-500 text-center py-4">
+                  No completed races yet
+                </p>
+              ) : (
+                <div className="space-y-3">
+                  {recentResults.map((race) => (
+                    <div
+                      key={race.id}
+                      onClick={() => onRaceClick(race.id)}
+                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
+                    >
+                      <div className="flex-shrink-0 w-10 h-10 bg-gray-500/10 rounded-lg flex items-center justify-center">
+                        <CheckCircle2 className="w-5 h-5 text-gray-400" />
+                      </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(new Date(race.scheduledAt))}</p>
+                      </div>
+                      <ChevronRight className="w-4 h-4 text-gray-500" />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+
+            {/* Quick Actions */}
+            <Card>
+              <h3 className="font-semibold text-white mb-4">Quick Actions</h3>
+              <div className="space-y-2">
+                <Link
+                  href="/leagues"
+                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
+                >
+                  <div className="p-2 bg-primary-blue/10 rounded-lg">
+                    <Users className="w-4 h-4 text-primary-blue" />
+                  </div>
+                  <span className="text-sm text-white">Browse Leagues</span>
+                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
+                </Link>
+                <Link
+                  href="/leaderboards"
+                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
+                >
+                  <div className="p-2 bg-warning-amber/10 rounded-lg">
+                    <Trophy className="w-4 h-4 text-warning-amber" />
+                  </div>
+                  <span className="text-sm text-white">View Leaderboards</span>
+                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
+                </Link>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* Filter Modal */}
+        <RaceFilterModal
+          isOpen={showFilterModal}
+          onClose={() => setShowFilterModal(false)}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          leagueFilter={leagueFilter}
+          setLeagueFilter={setLeagueFilter}
+          timeFilter={timeFilter}
+          setTimeFilter={setTimeFilter}
+          searchQuery=""
+          setSearchQuery={() => {}}
+          leagues={[...new Set(races.map(r => ({ id: r.leagueId || '', name: r.leagueName || '' })))]}
+          showSearch={false}
+          showTimeFilter={false}
+        />
+      </div>
+    </div>
+  );
+}

apps/website/templates/TeamDetailTemplate.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import Image from 'next/image';
+import { useMemo } from 'react';
+
+import JoinTeamButton from '@/components/teams/JoinTeamButton';
+import TeamAdmin from '@/components/teams/TeamAdmin';
+import TeamRoster from '@/components/teams/TeamRoster';
+import TeamStandings from '@/components/teams/TeamStandings';
+import StatItem from '@/components/teams/StatItem';
+import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
+import type { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
+
+type Tab = 'overview' | 'roster' | 'standings' | 'admin';
+
+// ============================================================================
+// TEMPLATE PROPS
+// ============================================================================
+
+export interface TeamDetailTemplateProps {
+  // Data props
+  team: TeamDetailsViewModel | null;
+  memberships: TeamMemberViewModel[];
+  activeTab: Tab;
+  loading: boolean;
+  isAdmin: boolean;
+  
+  // Event handlers
+  onTabChange: (tab: Tab) => void;
+  onUpdate: () => void;
+  onRemoveMember: (driverId: string) => void;
+  onChangeRole: (driverId: string, newRole: 'owner' | 'admin' | 'member') => void;
+  onGoBack: () => void;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export default function TeamDetailTemplate({
+  team,
+  memberships,
+  activeTab,
+  loading,
+  isAdmin,
+  onTabChange,
+  onUpdate,
+  onRemoveMember,
+  onChangeRole,
+  onGoBack,
+}: TeamDetailTemplateProps) {
+  const isSponsorMode = useSponsorMode();
+
+  // Show loading state
+  if (loading) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center text-gray-400">Loading team...</div>
+      </div>
+    );
+  }
+
+  // Show not found state
+  if (!team) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <Card>
+          <div className="text-center py-12">
+            <h2 className="text-2xl font-bold text-white mb-2">Team Not Found</h2>
+            <p className="text-gray-400 mb-6">
+              The team you're looking for doesn't exist or has been disbanded.
+            </p>
+            <Button variant="primary" onClick={onGoBack}>
+              Go Back
+            </Button>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  const tabs: { id: Tab; label: string; visible: boolean }[] = [
+    { id: 'overview', label: 'Overview', visible: true },
+    { id: 'roster', label: 'Roster', visible: true },
+    { id: 'standings', label: 'Standings', visible: true },
+    { id: 'admin', label: 'Admin', visible: isAdmin },
+  ];
+
+  const visibleTabs = tabs.filter(tab => tab.visible);
+
+  // Build sponsor insights for team using real membership and league data
+  const leagueCount = team.leagues?.length ?? 0;
+  const teamMetrics = [
+    MetricBuilders.members(memberships.length),
+    MetricBuilders.reach(memberships.length * 15),
+    MetricBuilders.races(leagueCount),
+    MetricBuilders.engagement(82),
+  ];
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      {/* Breadcrumb */}
+      <Breadcrumbs
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Teams', href: '/teams' },
+          { label: team.name }
+        ]}
+      />
+
+      {/* Sponsor Insights Card - Consistent placement at top */}
+      {isSponsorMode && team && (
+        <SponsorInsightsCard
+          entityType="team"
+          entityId={team.id}
+          entityName={team.name}
+          tier="standard"
+          metrics={teamMetrics}
+          slots={SlotTemplates.team(true, true, 500, 250)}
+          trustScore={90}
+          monthlyActivity={85}
+        />
+      )}
+
+      <Card className="mb-6">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-6">
+            <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
+              <Image
+                src={getMediaUrl('team-logo', team.id)}
+                alt={team.name}
+                width={96}
+                height={96}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            
+            <div>
+              <div className="flex items-center gap-3 mb-2">
+                <h1 className="text-3xl font-bold text-white">{team.name}</h1>
+                {team.tag && (
+                  <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
+                    [{team.tag}]
+                  </span>
+                )}
+              </div>
+
+              <p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
+
+              <div className="flex items-center gap-4 text-sm text-gray-400">
+                <span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
+                {team.category && (
+                  <span className="flex items-center gap-1 text-purple-400">
+                    <span className="w-2 h-2 rounded-full bg-purple-400"></span>
+                    {team.category}
+                  </span>
+                )}
+                {team.createdAt && (
+                  <span>
+                    Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                  </span>
+                )}
+                {leagueCount > 0 && (
+                  <span>
+                    Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
+        </div>
+      </Card>
+
+      <div className="mb-6">
+        <div className="flex items-center gap-2 border-b border-charcoal-outline">
+          {visibleTabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`
+                px-4 py-3 font-medium transition-all relative
+                ${activeTab === tab.id 
+                  ? 'text-primary-blue' 
+                  : 'text-gray-400 hover:text-white'
+                }
+              `}
+            >
+              {tab.label}
+              {activeTab === tab.id && (
+                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <Card className="lg:col-span-2">
+                <h3 className="text-xl font-semibold text-white mb-4">About</h3>
+                <p className="text-gray-300 leading-relaxed">{team.description}</p>
+              </Card>
+
+              <Card>
+                <h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
+                <div className="space-y-3">
+                  <StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
+                  {team.category && (
+                    <StatItem label="Category" value={team.category} color="text-purple-400" />
+                  )}
+                  {leagueCount > 0 && (
+                    <StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
+                  )}
+                  {team.createdAt && (
+                    <StatItem
+                      label="Founded"
+                      value={new Date(team.createdAt).toLocaleDateString('en-US', {
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                      color="text-gray-300"
+                    />
+                  )}
+                </div>
+              </Card>
+            </div>
+
+            <Card>
+              <h3 className="text-xl font-semibold text-white mb-4">Recent Activity</h3>
+              <div className="text-center py-8 text-gray-400">
+                No recent activity to display
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {activeTab === 'roster' && (
+          <TeamRoster
+            teamId={team.id}
+            memberships={memberships}
+            isAdmin={isAdmin}
+            onRemoveMember={onRemoveMember}
+            onChangeRole={onChangeRole}
+          />
+        )}
+
+        {activeTab === 'standings' && (
+          <TeamStandings teamId={team.id} leagues={team.leagues} />
+        )}
+
+        {activeTab === 'admin' && isAdmin && (
+          <TeamAdmin team={team} onUpdate={onUpdate} />
+        )}
+      </div>
+    </div>
+  );
+}

apps/website/templates/TeamLeaderboardTemplate.tsx

@@ -0,0 +1,374 @@
+'use client';
+
+import React from 'react';
+import { Users, Trophy, Crown, Award, ArrowLeft, Medal, Percent, Hash, Globe, Languages, Target } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+import TopThreePodium from '@/components/teams/TopThreePodium';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import TeamRankingsFilter from '@/components/TeamRankingsFilter';
+import Image from 'next/image';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+interface TeamLeaderboardTemplateProps {
+  teams: TeamSummaryViewModel[];
+  searchQuery: string;
+  filterLevel: SkillLevel | 'all';
+  sortBy: SortBy;
+  onSearchChange: (query: string) => void;
+  onFilterLevelChange: (level: SkillLevel | 'all') => void;
+  onSortChange: (sort: SortBy) => void;
+  onTeamClick: (id: string) => void;
+  onBackToTeams: () => void;
+}
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+const getSafeRating = (team: TeamSummaryViewModel): number => {
+  return 0;
+};
+
+const getSafeTotalWins = (team: TeamSummaryViewModel): number => {
+  const raw = team.totalWins;
+  const value = typeof raw === 'number' ? raw : 0;
+  return Number.isFinite(value) ? value : 0;
+};
+
+const getSafeTotalRaces = (team: TeamSummaryViewModel): number => {
+  const raw = team.totalRaces;
+  const value = typeof raw === 'number' ? raw : 0;
+  return Number.isFinite(value) ? value : 0;
+};
+
+const getMedalColor = (position: number) => {
+  switch (position) {
+    case 0:
+      return 'text-yellow-400';
+    case 1:
+      return 'text-gray-300';
+    case 2:
+      return 'text-amber-600';
+    default:
+      return 'text-gray-500';
+  }
+};
+
+const getMedalBg = (position: number) => {
+  switch (position) {
+    case 0:
+      return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
+    case 1:
+      return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
+    case 2:
+      return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
+    default:
+      return 'bg-iron-gray/50 border-charcoal-outline';
+  }
+};
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export default function TeamLeaderboardTemplate({
+  teams,
+  searchQuery,
+  filterLevel,
+  sortBy,
+  onSearchChange,
+  onFilterLevelChange,
+  onSortChange,
+  onTeamClick,
+  onBackToTeams,
+}: TeamLeaderboardTemplateProps) {
+  // Filter and sort teams
+  const filteredAndSortedTeams = teams
+    .filter((team) => {
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
+          return false;
+        }
+      }
+      // Level filter
+      if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
+        return false;
+      }
+      return true;
+    })
+    .sort((a, b) => {
+      switch (sortBy) {
+        case 'rating': {
+          const aRating = getSafeRating(a);
+          const bRating = getSafeRating(b);
+          return bRating - aRating;
+        }
+        case 'wins': {
+          const aWinsSort = getSafeTotalWins(a);
+          const bWinsSort = getSafeTotalWins(b);
+          return bWinsSort - aWinsSort;
+        }
+        case 'winRate': {
+          const aRaces = getSafeTotalRaces(a);
+          const bRaces = getSafeTotalRaces(b);
+          const aWins = getSafeTotalWins(a);
+          const bWins = getSafeTotalWins(b);
+          const aRate = aRaces > 0 ? aWins / aRaces : 0;
+          const bRate = bRaces > 0 ? bWins / bRaces : 0;
+          return bRate - aRate;
+        }
+        case 'races': {
+          const aRacesSort = getSafeTotalRaces(a);
+          const bRacesSort = getSafeTotalRaces(b);
+          return bRacesSort - aRacesSort;
+        }
+        default:
+          return 0;
+      }
+    });
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Header */}
+      <div className="mb-8">
+        <Button
+          variant="secondary"
+          onClick={onBackToTeams}
+          className="flex items-center gap-2 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Teams
+        </Button>
+
+        <div className="flex items-center gap-4 mb-2">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
+            <Award className="w-7 h-7 text-yellow-400" />
+          </div>
+          <div>
+            <Heading level={1} className="text-3xl lg:text-4xl">
+              Team Leaderboard
+            </Heading>
+            <p className="text-gray-400">Rankings of all teams by performance metrics</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Filters and Search */}
+      <TeamRankingsFilter
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        filterLevel={filterLevel}
+        onFilterLevelChange={onFilterLevelChange}
+        sortBy={sortBy}
+        onSortChange={onSortChange}
+      />
+
+      {/* Podium for Top 3 - only show when viewing by rating without filters */}
+      {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
+        <TopThreePodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
+      )}
+
+      {/* Stats Summary */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
+          <div className="flex items-center gap-2 mb-1">
+            <Users className="w-4 h-4 text-purple-400" />
+            <span className="text-xs text-gray-500">Total Teams</span>
+          </div>
+          <p className="text-2xl font-bold text-white">{filteredAndSortedTeams.length}</p>
+        </div>
+        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
+          <div className="flex items-center gap-2 mb-1">
+            <Crown className="w-4 h-4 text-yellow-400" />
+            <span className="text-xs text-gray-500">Pro Teams</span>
+          </div>
+          <p className="text-2xl font-bold text-white">
+            {filteredAndSortedTeams.filter((t) => t.performanceLevel === 'pro').length}
+          </p>
+        </div>
+        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
+          <div className="flex items-center gap-2 mb-1">
+            <Trophy className="w-4 h-4 text-performance-green" />
+            <span className="text-xs text-gray-500">Total Wins</span>
+          </div>
+          <p className="text-2xl font-bold text-white">
+            {filteredAndSortedTeams.reduce<number>(
+              (sum, t) => sum + getSafeTotalWins(t),
+              0,
+            )}
+          </p>
+        </div>
+        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
+          <div className="flex items-center gap-2 mb-1">
+            <Target className="w-4 h-4 text-neon-aqua" />
+            <span className="text-xs text-gray-500">Total Races</span>
+          </div>
+          <p className="text-2xl font-bold text-white">
+            {filteredAndSortedTeams.reduce<number>(
+              (sum, t) => sum + getSafeTotalRaces(t),
+              0,
+            )}
+          </p>
+        </div>
+      </div>
+
+      {/* Leaderboard Table */}
+      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+        {/* Table Header */}
+        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
+          <div className="col-span-1 text-center">Rank</div>
+          <div className="col-span-4 lg:col-span-5">Team</div>
+          <div className="col-span-2 text-center hidden lg:block">Members</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
+          <div className="col-span-2 text-center">Win Rate</div>
+        </div>
+
+        {/* Table Body */}
+        <div className="divide-y divide-charcoal-outline/50">
+          {filteredAndSortedTeams.map((team, index) => {
+            const levelConfig = ['beginner', 'intermediate', 'advanced', 'pro'].find((l) => l === team.performanceLevel);
+            const LevelIcon = levelConfig === 'pro' ? Crown : levelConfig === 'advanced' ? Crown : levelConfig === 'intermediate' ? Crown : () => null;
+            const totalRaces = getSafeTotalRaces(team);
+            const totalWins = getSafeTotalWins(team);
+            const winRate =
+              totalRaces > 0 ? ((totalWins / totalRaces) * 100).toFixed(1) : '0.0';
+
+            return (
+              <button
+                key={team.id}
+                type="button"
+                onClick={() => onTeamClick(team.id)}
+                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              >
+                {/* Position */}
+                <div className="col-span-1 flex items-center justify-center">
+                  <div
+                    className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(index)} ${getMedalColor(index)}`}
+                  >
+                    {index < 3 ? (
+                      <Medal className="w-4 h-4" />
+                    ) : (
+                      index + 1
+                    )}
+                  </div>
+                </div>
+
+                {/* Team Info */}
+                <div className="col-span-4 lg:col-span-5 flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
+                    <Image
+                      src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                      alt={team.name}
+                      width={40}
+                      height={40}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
+                      {team.name}
+                    </p>
+                    <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
+                      <span className={`${team.performanceLevel === 'pro' ? 'text-yellow-400' : team.performanceLevel === 'advanced' ? 'text-purple-400' : team.performanceLevel === 'intermediate' ? 'text-primary-blue' : 'text-green-400'}`}>
+                        {team.performanceLevel}
+                      </span>
+                      {team.category && (
+                        <span className="flex items-center gap-1 text-purple-400">
+                          <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
+                          {team.category}
+                        </span>
+                      )}
+                      {team.region && (
+                        <span className="flex items-center gap-1 text-gray-400">
+                          <Globe className="w-3 h-3 text-neon-aqua" />
+                          {team.region}
+                        </span>
+                      )}
+                      {team.languages && team.languages.length > 0 && (
+                        <span className="flex items-center gap-1 text-gray-400">
+                          <Languages className="w-3 h-3 text-purple-400" />
+                          {team.languages.slice(0, 2).join(', ')}
+                          {team.languages.length > 2 && ` +${team.languages.length - 2}`}
+                        </span>
+                      )}
+                      {team.isRecruiting && (
+                        <span className="flex items-center gap-1 text-performance-green">
+                          <div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
+                          Recruiting
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Members */}
+                <div className="col-span-2 items-center justify-center hidden lg:flex">
+                  <span className="flex items-center gap-1 text-gray-400">
+                    <Users className="w-4 h-4" />
+                    {team.memberCount}
+                  </span>
+                </div>
+
+                {/* Rating */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span
+                    className={`font-mono font-semibold ${
+                      sortBy === 'rating' ? 'text-purple-400' : 'text-white'
+                    }`}
+                  >
+                    {getSafeRating(team).toLocaleString()}
+                  </span>
+                </div>
+
+                {/* Wins */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-purple-400' : 'text-white'}`}>
+                    {getSafeTotalWins(team)}
+                  </span>
+                </div>
+
+                {/* Win Rate */}
+                <div className="col-span-2 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-purple-400' : 'text-white'}`}>
+                    {winRate}%
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Empty State */}
+        {filteredAndSortedTeams.length === 0 && (
+          <div className="py-16 text-center">
+            <Trophy className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+            <p className="text-gray-400 mb-2">No teams found</p>
+            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                onSearchChange('');
+                onFilterLevelChange('all');
+              }}
+              className="mt-4"
+            >
+              Clear Filters
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/website/templates/TeamsTemplate.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import {
+  Users,
+  Trophy,
+  Search,
+  Plus,
+  Sparkles,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  Zap,
+  UserPlus,
+  ChevronRight,
+  Timer,
+  Target,
+  Award,
+  Handshake,
+  MessageCircle,
+  Calendar,
+} from 'lucide-react';
+import TeamCard from '@/components/teams/TeamCard';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+import CreateTeamForm from '@/components/teams/CreateTeamForm';
+import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
+import SkillLevelSection from '@/components/teams/SkillLevelSection';
+import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
+import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type TeamDisplayData = TeamSummaryViewModel;
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
+// ============================================================================
+// SKILL LEVEL CONFIG
+// ============================================================================
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  description: string;
+}[] = [
+  {
+    id: 'pro',
+    label: 'Pro',
+    icon: Crown,
+    color: 'text-yellow-400',
+    bgColor: 'bg-yellow-400/10',
+    borderColor: 'border-yellow-400/30',
+    description: 'Elite competition, sponsored teams',
+  },
+  {
+    id: 'advanced',
+    label: 'Advanced',
+    icon: Star,
+    color: 'text-purple-400',
+    bgColor: 'bg-purple-400/10',
+    borderColor: 'border-purple-400/30',
+    description: 'Competitive racing, high consistency',
+  },
+  {
+    id: 'intermediate',
+    label: 'Intermediate',
+    icon: TrendingUp,
+    color: 'text-primary-blue',
+    bgColor: 'bg-primary-blue/10',
+    borderColor: 'border-primary-blue/30',
+    description: 'Growing skills, regular practice',
+  },
+  {
+    id: 'beginner',
+    label: 'Beginner',
+    icon: Shield,
+    color: 'text-green-400',
+    bgColor: 'bg-green-400/10',
+    borderColor: 'border-green-400/30',
+    description: 'Learning the basics, friendly environment',
+  },
+];
+
+// ============================================================================
+// TEMPLATE PROPS
+// ============================================================================
+
+export interface TeamsTemplateProps {
+  // Data props
+  teams: TeamDisplayData[];
+  isLoading?: boolean;
+  
+  // UI state props
+  searchQuery: string;
+  showCreateForm: boolean;
+  
+  // Derived data props
+  teamsByLevel: Record<string, TeamDisplayData[]>;
+  topTeams: TeamDisplayData[];
+  recruitingCount: number;
+  filteredTeams: TeamDisplayData[];
+  
+  // Event handlers
+  onSearchChange: (query: string) => void;
+  onShowCreateForm: () => void;
+  onHideCreateForm: () => void;
+  onTeamClick: (teamId: string) => void;
+  onCreateSuccess: (teamId: string) => void;
+  onBrowseTeams: () => void;
+  onSkillLevelClick: (level: SkillLevel) => void;
+}
+
+// ============================================================================
+// MAIN TEMPLATE COMPONENT
+// ============================================================================
+
+export default function TeamsTemplate({
+  teams,
+  isLoading = false,
+  searchQuery,
+  showCreateForm,
+  teamsByLevel,
+  topTeams,
+  recruitingCount,
+  filteredTeams,
+  onSearchChange,
+  onShowCreateForm,
+  onHideCreateForm,
+  onTeamClick,
+  onCreateSuccess,
+  onBrowseTeams,
+  onSkillLevelClick,
+}: TeamsTemplateProps) {
+  // Show create form view
+  if (showCreateForm) {
+    return (
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="mb-6">
+          <Button variant="secondary" onClick={onHideCreateForm}>
+            ← Back to Teams
+          </Button>
+        </div>
+
+        <Card>
+          <h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
+          <CreateTeamForm onCancel={onHideCreateForm} onSuccess={onCreateSuccess} />
+        </Card>
+      </div>
+    );
+  }
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading teams...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section - Different from Leagues */}
+      <div className="relative mb-10 overflow-hidden">
+        {/* Main Hero Card */}
+        <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
+          {/* Background decorations */}
+          <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
+          <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+          <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
+
+          <div className="relative z-10">
+            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+              <div className="max-w-xl">
+                {/* Badge */}
+                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
+                  <Users className="w-3.5 h-3.5" />
+                  Team Racing
+                </div>
+
+                <Heading level={1} className="text-4xl lg:text-5xl mb-4">
+                  Find Your
+                  <span className="text-purple-400"> Crew</span>
+                </Heading>
+
+                <p className="text-gray-400 text-lg leading-relaxed mb-6">
+                  Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
+                </p>
+
+                {/* Quick Stats */}
+                <div className="flex flex-wrap gap-4 mb-6">
+                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                    <Users className="w-4 h-4 text-purple-400" />
+                    <span className="text-white font-semibold">{teams.length}</span>
+                    <span className="text-gray-500 text-sm">Teams</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                    <UserPlus className="w-4 h-4 text-performance-green" />
+                    <span className="text-white font-semibold">{recruitingCount}</span>
+                    <span className="text-gray-500 text-sm">Recruiting</span>
+                  </div>
+                </div>
+
+                {/* CTA Buttons */}
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    variant="primary"
+                    onClick={onShowCreateForm}
+                    className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
+                  >
+                    <Plus className="w-4 h-4" />
+                    Create Team
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={onBrowseTeams}
+                    className="flex items-center gap-2"
+                  >
+                    <Search className="w-4 h-4" />
+                    Browse Teams
+                  </Button>
+                </div>
+              </div>
+
+              {/* Skill Level Quick Nav */}
+              <div className="lg:w-72">
+                <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
+                <div className="space-y-2">
+                  {SKILL_LEVELS.map((level) => {
+                    const LevelIcon = level.icon;
+                    const count = teamsByLevel[level.id]?.length || 0;
+
+                    return (
+                      <button
+                        key={level.id}
+                        type="button"
+                        onClick={() => onSkillLevelClick(level.id)}
+                        className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <LevelIcon className={`w-4 h-4 ${level.color}`} />
+                          <span className="text-white font-medium">{level.label}</span>
+                        </div>
+                        <span className="text-gray-400 text-sm">{count} teams</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Search and Filter Bar - Same style as Leagues */}
+      <div id="teams-list" className="mb-6 scroll-mt-8">
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1 relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+            <Input
+              type="text"
+              placeholder="Search teams by name, description, region, or language..."
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-11"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Why Join Section */}
+      {!searchQuery && <WhyJoinTeamSection />}
+
+      {/* Team Leaderboard Preview */}
+      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={onTeamClick} />}
+
+      {/* Featured Recruiting */}
+      {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={onTeamClick} />}
+
+      {/* Teams by Skill Level */}
+      {teams.length === 0 ? (
+        <Card className="text-center py-16">
+          <div className="max-w-md mx-auto">
+            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
+              <Users className="w-8 h-8 text-purple-400" />
+            </div>
+            <Heading level={2} className="text-2xl mb-3">
+              No teams yet
+            </Heading>
+            <p className="text-gray-400 mb-8">
+              Be the first to create a racing team. Gather drivers and compete together in endurance events.
+            </p>
+            <Button
+              variant="primary"
+              onClick={onShowCreateForm}
+              className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
+            >
+              <Sparkles className="w-4 h-4" />
+              Create Your First Team
+            </Button>
+          </div>
+        </Card>
+      ) : filteredTeams.length === 0 ? (
+        <Card className="text-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <Search className="w-10 h-10 text-gray-600" />
+            <p className="text-gray-400">No teams found matching "{searchQuery}"</p>
+            <Button variant="secondary" onClick={() => onSearchChange('')}>
+              Clear search
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <div>
+          {SKILL_LEVELS.map((level, index) => (
+            <div key={level.id} id={`level-${level.id}`} className="scroll-mt-8">
+              <SkillLevelSection
+                level={level}
+                teams={teamsByLevel[level.id] ?? []}
+                onTeamClick={onTeamClick}
+                defaultExpanded={index === 0}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}