diff --git a/apps/website/app/404/NotFoundPageClient.tsx b/apps/website/app/404/NotFoundPageClient.tsx
new file mode 100644
index 000000000..e2ebdf806
--- /dev/null
+++ b/apps/website/app/404/NotFoundPageClient.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { NotFoundTemplate, type NotFoundViewData } from '@/templates/NotFoundTemplate';
+
+/**
+ * NotFoundPageClient
+ * 
+ * Client-side entry point for the 404 page.
+ * Manages navigation logic and wires it to the template.
+ */
+export function NotFoundPageClient() {
+  const router = useRouter();
+  
+  const handleHomeClick = () => {
+    router.push(routes.public.home);
+  };
+
+  const viewData: NotFoundViewData = {
+    errorCode: 'Error 404',
+    title: 'OFF TRACK',
+    message: 'The requested sector does not exist. You have been returned to the pits.',
+    actionLabel: 'Return to Pits'
+  };
+  
+  return <NotFoundTemplate viewData={viewData} onHomeClick={handleHomeClick} />;
+}
diff --git a/apps/website/app/404/page.tsx b/apps/website/app/404/page.tsx
index c0f3b5b85..280b3ffa0 100644
--- a/apps/website/app/404/page.tsx
+++ b/apps/website/app/404/page.tsx
@@ -1,22 +1,11 @@
-'use client';
-
-import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
-import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
-import { routes } from '@/lib/routing/RouteConfig';
-import { useRouter } from 'next/navigation';
+import { NotFoundPageClient } from './NotFoundPageClient';
 
+/**
+ * Custom404Page
+ * 
+ * Entry point for the /404 route.
+ * Orchestrates the 404 page rendering.
+ */
 export default function Custom404Page() {
-  const router = useRouter();
-  
-  return (
-    <ErrorPageContainer
-      errorCode="404"
-      description="This page doesn't exist."
-    >
-      <ErrorActionButtons 
-        onHomeClick={() => router.push(routes.public.home)}
-        homeLabel="Drive home"
-      />
-    </ErrorPageContainer>
-  );
-}
\ No newline at end of file
+  return <NotFoundPageClient />;
+}
diff --git a/apps/website/app/500/ServerErrorPageClient.test.tsx b/apps/website/app/500/ServerErrorPageClient.test.tsx
new file mode 100644
index 000000000..ba5db8336
--- /dev/null
+++ b/apps/website/app/500/ServerErrorPageClient.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ServerErrorPageClient } from './ServerErrorPageClient';
+import { useRouter } from 'next/navigation';
+
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+}));
+
+describe('ServerErrorPageClient', () => {
+  it('renders the server error page with correct content', () => {
+    const push = vi.fn();
+    (useRouter as any).mockReturnValue({ push });
+
+    render(<ServerErrorPageClient />);
+
+    expect(screen.getByText('CRITICAL_SYSTEM_FAILURE')).toBeDefined();
+    expect(screen.getByText(/The application engine encountered an unrecoverable state/)).toBeDefined();
+    expect(screen.getByText(/Internal Server Error/)).toBeDefined();
+  });
+
+  it('handles home navigation', () => {
+    const push = vi.fn();
+    (useRouter as any).mockReturnValue({ push });
+
+    render(<ServerErrorPageClient />);
+
+    const homeButton = screen.getByText('Return to Pits');
+    fireEvent.click(homeButton);
+
+    expect(push).toHaveBeenCalledWith('/');
+  });
+
+  it('handles retry via page reload', () => {
+    const push = vi.fn();
+    (useRouter as any).mockReturnValue({ push });
+    
+    const reloadFn = vi.fn();
+    vi.stubGlobal('location', { reload: reloadFn });
+
+    render(<ServerErrorPageClient />);
+
+    const retryButton = screen.getByText('Retry Session');
+    fireEvent.click(retryButton);
+
+    expect(reloadFn).toHaveBeenCalled();
+    
+    vi.unstubAllGlobals();
+  });
+});
diff --git a/apps/website/app/500/ServerErrorPageClient.tsx b/apps/website/app/500/ServerErrorPageClient.tsx
new file mode 100644
index 000000000..d55595d18
--- /dev/null
+++ b/apps/website/app/500/ServerErrorPageClient.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { ServerErrorTemplate, type ServerErrorViewData } from '@/templates/ServerErrorTemplate';
+
+/**
+ * ServerErrorPageClient
+ * 
+ * Client-side entry point for the 500 page.
+ * Manages navigation and retry logic and wires it to the template.
+ */
+export function ServerErrorPageClient() {
+  const router = useRouter();
+  
+  const handleHome = () => {
+    router.push(routes.public.home);
+  };
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  const error = new Error('Internal Server Error') as Error & { digest?: string };
+  error.digest = 'HTTP_500';
+
+  const viewData: ServerErrorViewData = {
+    error,
+    incidentId: error.digest
+  };
+
+  return (
+    <ServerErrorTemplate 
+      viewData={viewData} 
+      onRetry={handleRetry} 
+      onHome={handleHome} 
+    />
+  );
+}
diff --git a/apps/website/app/500/page.tsx b/apps/website/app/500/page.tsx
index 80382c945..bec83f4b1 100644
--- a/apps/website/app/500/page.tsx
+++ b/apps/website/app/500/page.tsx
@@ -1,22 +1,11 @@
-'use client';
-
-import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
-import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
-import { routes } from '@/lib/routing/RouteConfig';
-import { useRouter } from 'next/navigation';
+import { ServerErrorPageClient } from './ServerErrorPageClient';
 
+/**
+ * Custom500Page
+ * 
+ * Entry point for the /500 route.
+ * Orchestrates the 500 page rendering.
+ */
 export default function Custom500Page() {
-  const router = useRouter();
-  
-  return (
-    <ErrorPageContainer
-      errorCode="500"
-      description="Something went wrong."
-    >
-      <ErrorActionButtons 
-        onHomeClick={() => router.push(routes.public.home)}
-        homeLabel="Drive home"
-      />
-    </ErrorPageContainer>
-  );
-}
\ No newline at end of file
+  return <ServerErrorPageClient />;
+}
diff --git a/apps/website/app/admin/actions.ts b/apps/website/app/actions/adminActions.ts
similarity index 100%
rename from apps/website/app/admin/actions.ts
rename to apps/website/app/actions/adminActions.ts
diff --git a/apps/website/app/onboarding/completeOnboardingAction.ts b/apps/website/app/actions/completeOnboardingAction.ts
similarity index 100%
rename from apps/website/app/onboarding/completeOnboardingAction.ts
rename to apps/website/app/actions/completeOnboardingAction.ts
diff --git a/apps/website/app/onboarding/generateAvatarsAction.ts b/apps/website/app/actions/generateAvatarsAction.ts
similarity index 100%
rename from apps/website/app/onboarding/generateAvatarsAction.ts
rename to apps/website/app/actions/generateAvatarsAction.ts
diff --git a/apps/website/app/leagues/[id]/schedule/admin/actions.ts b/apps/website/app/actions/leagueScheduleActions.ts
similarity index 86%
rename from apps/website/app/leagues/[id]/schedule/admin/actions.ts
rename to apps/website/app/actions/leagueScheduleActions.ts
index 107faad8b..730470064 100644
--- a/apps/website/app/leagues/[id]/schedule/admin/actions.ts
+++ b/apps/website/app/actions/leagueScheduleActions.ts
@@ -5,6 +5,7 @@ import { Result } from '@/lib/contracts/Result';
 import { ScheduleAdminMutation } from '@/lib/mutations/leagues/ScheduleAdminMutation';
 import { routes } from '@/lib/routing/RouteConfig';
 
+// eslint-disable-next-line gridpilot-rules/server-actions-interface
 export async function publishScheduleAction(leagueId: string, seasonId: string): Promise<Result<void, string>> {
   const mutation = new ScheduleAdminMutation();
   const result = await mutation.publishSchedule(leagueId, seasonId);
@@ -16,6 +17,7 @@ export async function publishScheduleAction(leagueId: string, seasonId: string):
   return result;
 }
 
+// eslint-disable-next-line gridpilot-rules/server-actions-interface
 export async function unpublishScheduleAction(leagueId: string, seasonId: string): Promise<Result<void, string>> {
   const mutation = new ScheduleAdminMutation();
   const result = await mutation.unpublishSchedule(leagueId, seasonId);
@@ -27,6 +29,7 @@ export async function unpublishScheduleAction(leagueId: string, seasonId: string
   return result;
 }
 
+// eslint-disable-next-line gridpilot-rules/server-actions-interface
 export async function createRaceAction(
   leagueId: string, 
   seasonId: string, 
@@ -42,6 +45,7 @@ export async function createRaceAction(
   return result;
 }
 
+// eslint-disable-next-line gridpilot-rules/server-actions-interface
 export async function updateRaceAction(
   leagueId: string, 
   seasonId: string, 
@@ -58,6 +62,7 @@ export async function updateRaceAction(
   return result;
 }
 
+// eslint-disable-next-line gridpilot-rules/server-actions-interface
 export async function deleteRaceAction(leagueId: string, seasonId: string, raceId: string): Promise<Result<void, string>> {
   const mutation = new ScheduleAdminMutation();
   const result = await mutation.deleteRace(leagueId, seasonId, raceId);
diff --git a/apps/website/app/profile/actions.ts b/apps/website/app/actions/profileActions.ts
similarity index 100%
rename from apps/website/app/profile/actions.ts
rename to apps/website/app/actions/profileActions.ts
diff --git a/apps/website/app/profile/sponsorship-requests/actions.ts b/apps/website/app/actions/sponsorshipActions.ts
similarity index 100%
rename from apps/website/app/profile/sponsorship-requests/actions.ts
rename to apps/website/app/actions/sponsorshipActions.ts
diff --git a/apps/website/app/admin/AdminDashboardWrapper.tsx b/apps/website/app/admin/AdminDashboardWrapper.tsx
index 914507241..a73e6f333 100644
--- a/apps/website/app/admin/AdminDashboardWrapper.tsx
+++ b/apps/website/app/admin/AdminDashboardWrapper.tsx
@@ -29,4 +29,4 @@ export function AdminDashboardWrapper({ initialViewData }: AdminDashboardWrapper
       isLoading={loading}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/admin/users/AdminUsersWrapper.tsx b/apps/website/app/admin/users/AdminUsersWrapper.tsx
index 44cfe3489..0bd7d7152 100644
--- a/apps/website/app/admin/users/AdminUsersWrapper.tsx
+++ b/apps/website/app/admin/users/AdminUsersWrapper.tsx
@@ -4,8 +4,9 @@ import { useState, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
-import { updateUserStatus, deleteUser } from '@/app/admin/actions';
+import { updateUserStatus, deleteUser } from '@/app/actions/adminActions';
 import { routes } from '@/lib/routing/RouteConfig';
+import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
 
 interface AdminUsersWrapperProps {
   initialViewData: AdminUsersViewData;
@@ -19,12 +20,35 @@ export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [deletingUser, setDeletingUser] = useState<string | null>(null);
+  const [userToDelete, setUserToDelete] = useState<string | null>(null);
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
 
   // Current filter values from URL
   const search = searchParams.get('search') || '';
   const roleFilter = searchParams.get('role') || '';
   const statusFilter = searchParams.get('status') || '';
 
+  // Selection handlers
+  const handleSelectUser = useCallback((userId: string) => {
+    setSelectedUserIds(prev => 
+      prev.includes(userId) 
+        ? prev.filter(id => id !== userId) 
+        : [...prev, userId]
+    );
+  }, []);
+
+  const handleSelectAll = useCallback(() => {
+    if (selectedUserIds.length === initialViewData.users.length) {
+      setSelectedUserIds([]);
+    } else {
+      setSelectedUserIds(initialViewData.users.map(u => u.id));
+    }
+  }, [selectedUserIds.length, initialViewData.users]);
+
+  const handleClearSelection = useCallback(() => {
+    setSelectedUserIds([]);
+  }, []);
+
   // Callbacks that update URL (triggers RSC re-render)
   const handleSearch = useCallback((newSearch: string) => {
     const params = new URLSearchParams(searchParams);
@@ -79,13 +103,16 @@ export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
   }, [router]);
 
   const handleDeleteUser = useCallback(async (userId: string) => {
-    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
-      return;
-    }
+    setUserToDelete(userId);
+  }, []);
+
+  const confirmDeleteUser = useCallback(async () => {
+    if (!userToDelete) return;
 
     try {
-      setDeletingUser(userId);
-      const result = await deleteUser(userId);
+      setDeletingUser(userToDelete);
+      setError(null);
+      const result = await deleteUser(userToDelete);
 
       if (result.isErr()) {
         setError(result.getError());
@@ -94,29 +121,46 @@ export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
 
       // Revalidate data
       router.refresh();
+      setUserToDelete(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to delete user');
     } finally {
       setDeletingUser(null);
     }
-  }, [router]);
+  }, [router, userToDelete]);
 
   return (
-    <AdminUsersTemplate
-      viewData={initialViewData}
-      onRefresh={handleRefresh}
-      onSearch={handleSearch}
-      onFilterRole={handleFilterRole}
-      onFilterStatus={handleFilterStatus}
-      onClearFilters={handleClearFilters}
-      onUpdateStatus={handleUpdateStatus}
-      onDeleteUser={handleDeleteUser}
-      search={search}
-      roleFilter={roleFilter}
-      statusFilter={statusFilter}
-      loading={loading}
-      error={error}
-      deletingUser={deletingUser}
-    />
+    <>
+      <AdminUsersTemplate
+        viewData={initialViewData}
+        onRefresh={handleRefresh}
+        onSearch={handleSearch}
+        onFilterRole={handleFilterRole}
+        onFilterStatus={handleFilterStatus}
+        onClearFilters={handleClearFilters}
+        onUpdateStatus={handleUpdateStatus}
+        onDeleteUser={handleDeleteUser}
+        search={search}
+        roleFilter={roleFilter}
+        statusFilter={statusFilter}
+        loading={loading}
+        error={error}
+        deletingUser={deletingUser}
+        selectedUserIds={selectedUserIds}
+        onSelectUser={handleSelectUser}
+        onSelectAll={handleSelectAll}
+        onClearSelection={handleClearSelection}
+      />
+      <ConfirmDialog
+        isOpen={!!userToDelete}
+        onClose={() => setUserToDelete(null)}
+        onConfirm={confirmDeleteUser}
+        title="Delete User"
+        description="Are you sure you want to delete this user? This action cannot be undone and will permanently remove the user's access."
+        confirmLabel="Delete User"
+        variant="danger"
+        isLoading={!!deletingUser}
+      />
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/auth/layout.tsx b/apps/website/app/auth/layout.tsx
index f23a4661f..bb33a0fb9 100644
--- a/apps/website/app/auth/layout.tsx
+++ b/apps/website/app/auth/layout.tsx
@@ -1,7 +1,7 @@
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { createRouteGuard } from '@/lib/auth/createRouteGuard';
-import { AuthContainer } from '@/ui/AuthContainer';
+import { AuthShell } from '@/components/auth/AuthShell';
 
 interface AuthLayoutProps {
   children: React.ReactNode;
@@ -27,5 +27,5 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
     redirect(result.to);
   }
   
-  return <AuthContainer>{children}</AuthContainer>;
+  return <AuthShell>{children}</AuthShell>;
 }
diff --git a/apps/website/app/dashboard/layout.tsx b/apps/website/app/dashboard/layout.tsx
index 648712751..16ee6d298 100644
--- a/apps/website/app/dashboard/layout.tsx
+++ b/apps/website/app/dashboard/layout.tsx
@@ -1,9 +1,7 @@
-import { DashboardLayoutWrapper } from '@/ui/DashboardLayoutWrapper';
-
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <DashboardLayoutWrapper>{children}</DashboardLayoutWrapper>;
-}
\ No newline at end of file
+  return <>{children}</>;
+}
diff --git a/apps/website/app/error.tsx b/apps/website/app/error.tsx
index d91584c28..6af5fa54d 100644
--- a/apps/website/app/error.tsx
+++ b/apps/website/app/error.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
-import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
-import { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
+import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { ErrorScreen } from '@/components/errors/ErrorScreen';
 
 export default function ErrorPage({
   error,
@@ -14,22 +13,17 @@ export default function ErrorPage({
   reset: () => void;
 }) {
   const router = useRouter();
-  
+
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Route Error Boundary:', error);
+  }, [error]);
+
   return (
-    <ErrorPageContainer
-      errorCode="Error"
-      description={error?.message || 'An unexpected error occurred.'}
-    >
-      {error?.digest && (
-        <Text size="xs" color="text-gray-500" font="mono">
-          Error ID: {error.digest}
-        </Text>
-      )}
-      <ErrorActionButtons
-        onRetry={reset}
-        onHomeClick={() => router.push(routes.public.home)}
-        showRetry={true}
-      />
-    </ErrorPageContainer>
+    <ErrorScreen
+      error={error}
+      reset={reset}
+      onHome={() => router.push(routes.public.home)}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/global-error.tsx b/apps/website/app/global-error.tsx
index 3832e9e92..caef0e602 100644
--- a/apps/website/app/global-error.tsx
+++ b/apps/website/app/global-error.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
-import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
-import { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
 import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { GlobalErrorScreen } from '@/components/errors/GlobalErrorScreen';
+import './globals.css';
 
 export default function GlobalError({
   error,
@@ -16,24 +15,14 @@ export default function GlobalError({
   const router = useRouter();
   
   return (
-    <html lang="en">
-      <body className="antialiased">
-        <ErrorPageContainer
-          errorCode="Error"
-          description={error?.message || 'An unexpected error occurred.'}
-        >
-          {error?.digest && (
-            <Text size="xs" color="text-gray-500" font="mono">
-              Error ID: {error.digest}
-            </Text>
-          )}
-          <ErrorActionButtons
-            onRetry={reset}
-            onHomeClick={() => router.push(routes.public.home)}
-            showRetry={true}
-          />
-        </ErrorPageContainer>
+    <html lang="en" className="dark scroll-smooth overflow-x-hidden">
+      <body className="antialiased bg-base-black text-white overflow-x-hidden">
+        <GlobalErrorScreen
+          error={error}
+          reset={reset}
+          onHome={() => router.push(routes.public.home)}
+        />
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/globals.css b/apps/website/app/globals.css
index 2de174740..4651e67ed 100644
--- a/apps/website/app/globals.css
+++ b/apps/website/app/globals.css
@@ -6,13 +6,29 @@
 
 @layer base {
   :root {
-    --color-deep-graphite: #0E0F11;
-    --color-iron-gray: #181B1F;
-    --color-charcoal-outline: #22262A;
-    --color-primary-blue: #198CFF;
-    --color-performance-green: #6FE37A;
-    --color-warning-amber: #FFC556;
-    --color-neon-aqua: #43C9E6;
+    /* Core Theme Colors (from THEME.md) */
+    --color-base: #0C0D0F;
+    --color-surface: #141619;
+    --color-outline: #23272B;
+    --color-primary: #198CFF;
+    --color-telemetry: #4ED4E0;
+    --color-warning: #FFBE4D;
+    --color-success: #6FE37A;
+    --color-critical: #E35C5C;
+
+    /* Text Colors */
+    --color-text-high: #FFFFFF;
+    --color-text-med: #A1A1AA;
+    --color-text-low: #71717A;
+
+    /* Selection */
+    --color-selection-bg: rgba(25, 140, 255, 0.3);
+    --color-selection-text: #FFFFFF;
+
+    /* Focus */
+    --color-focus-ring: rgba(25, 140, 255, 0.5);
+
+    /* Safe Area Insets */
     --sat: env(safe-area-inset-top);
     --sar: env(safe-area-inset-right);
     --sab: env(safe-area-inset-bottom);
@@ -21,192 +37,146 @@
 
   * {
     -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
+    border-color: var(--color-outline);
   }
 
   html {
     overscroll-behavior: none;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
+    background-color: var(--color-base);
+    color: var(--color-text-high);
+    font-family: 'Inter', system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   body {
-    @apply bg-deep-graphite text-white antialiased;
+    background-color: var(--color-base);
+    color: var(--color-text-high);
+    line-height: 1.5;
     overscroll-behavior: none;
   }
 
-  button, a {
+  ::selection {
+    background-color: var(--color-selection-bg);
+    color: var(--color-selection-text);
+  }
+
+  /* Focus States */
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--color-focus-ring);
+  }
+
+  /* Scrollbars */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-base);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-outline);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-low);
+  }
+
+  /* Typography Scale & Smoothing */
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-text-high);
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  h1 { font-size: 2.25rem; }
+  h2 { font-size: 1.875rem; }
+  h3 { font-size: 1.5rem; }
+  h4 { font-size: 1.25rem; }
+  h5 { font-size: 1.125rem; }
+  h6 { font-size: 1rem; }
+
+  p {
+    color: var(--color-text-med);
+    line-height: 1.6;
+  }
+
+  /* Link Styles */
+  a {
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: opacity 0.2s ease;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }
 
-  .scroll-container {
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
+  a:hover {
+    opacity: 0.8;
   }
 
-  /* Mobile typography optimization - lighter and more spacious */
+  button {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  /* Mobile typography optimization */
   @media (max-width: 640px) {
-    h1 {
-      font-size: clamp(1.5rem, 6vw, 2rem);
-      font-weight: 600;
-      line-height: 1.2;
-    }
-    
-    h2 {
-      font-size: clamp(1.125rem, 4.5vw, 1.5rem);
-      font-weight: 600;
-      line-height: 1.3;
-    }
-    
-    h3 {
-      font-size: 1rem;
-      font-weight: 500;
-    }
-    
-    p {
-      font-size: 0.8125rem; /* 13px */
-      line-height: 1.6;
-    }
+    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
+    h2 { font-size: clamp(1.125rem, 4.5vw, 1.5rem); }
+    h3 { font-size: 1.25rem; }
+    p { font-size: 0.875rem; }
   }
 }
 
 @layer utilities {
-  .animate-spring {
-    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Precision Racing Utilities */
+  .glass-panel {
+    background: rgba(20, 22, 25, 0.7);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--color-outline);
   }
-  
-  /* Racing stripe patterns */
-  .racing-stripes {
-    background: linear-gradient(
-      45deg,
-      transparent 25%,
-      rgba(25, 140, 255, 0.03) 25%,
-      rgba(25, 140, 255, 0.03) 50%,
-      transparent 50%,
-      transparent 75%,
-      rgba(25, 140, 255, 0.03) 75%
-    );
-    background-size: 60px 60px;
+
+  .subtle-gradient {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
   }
-  
-  /* Checkered flag pattern */
-  .checkered-pattern {
-    background-image:
-      linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
-      linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%),
-      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
-    background-size: 20px 20px;
-    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  }
-  
-  /* Speed lines animation */
-  @keyframes speed-lines {
-    0% {
-      transform: translateX(0) scaleX(0);
-      opacity: 0;
-    }
-    50% {
-      opacity: 0.3;
-    }
-    100% {
-      transform: translateX(100px) scaleX(1);
-      opacity: 0;
-    }
-  }
-  
-  .animate-speed-lines {
-    animation: speed-lines 1.5s ease-out infinite;
-  }
-  
-  /* Racing accent line */
-  .racing-accent {
+
+  .racing-border {
     position: relative;
   }
-  
-  .racing-accent::before {
+
+  .racing-border::after {
     content: '';
     position: absolute;
-    left: -16px;
-    top: 0;
     bottom: 0;
-    width: 3px;
-    background: linear-gradient(to bottom, #FF0000, #198CFF);
-    border-radius: 2px;
-  }
-  
-  /* Carbon fiber texture */
-  .carbon-fiber {
-    background-image:
-      linear-gradient(27deg, rgba(255,255,255,0.02) 5%, transparent 5%),
-      linear-gradient(207deg, rgba(255,255,255,0.02) 5%, transparent 5%),
-      linear-gradient(27deg, rgba(0,0,0,0.05) 5%, transparent 5%),
-      linear-gradient(207deg, rgba(0,0,0,0.05) 5%, transparent 5%);
-    background-size: 10px 10px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
+    opacity: 0.5;
   }
 
-  /* Racing red-white-blue animated gradient */
-  @keyframes racing-gradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
+  /* Instrument-grade glows */
+  .glow-primary {
+    box-shadow: 0 0 20px -5px rgba(25, 140, 255, 0.3);
   }
 
-  .animate-racing-gradient {
-    background: linear-gradient(
-      90deg,
-      #DC0000 0%,
-      #FFFFFF 25%,
-      #0066FF 50%,
-      #DC0000 75%,
-      #FFFFFF 100%
-    );
-    background-size: 300% 100%;
-    animation: racing-gradient 12s linear infinite;
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
-
-  /* Static red-white-blue gradient (no animation) */
-  .static-racing-gradient {
-    background: linear-gradient(
-      90deg,
-      #DC0000 0%,
-      #FFFFFF 50%,
-      #2563eb 100%
-    );
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .animate-racing-gradient {
-      animation: none;
-    }
+  .glow-telemetry {
+    box-shadow: 0 0 20px -5px rgba(78, 212, 224, 0.3);
   }
 
   /* Entrance animations */
   @keyframes fade-in-up {
     from {
       opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
+      transform: translateY(10px);
     }
     to {
       opacity: 1;
@@ -215,19 +185,14 @@
   }
 
   .animate-fade-in-up {
-    animation: fade-in-up 0.6s ease-out forwards;
-  }
-
-  .animate-fade-in {
-    animation: fade-in 0.4s ease-out forwards;
+    animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .animate-fade-in-up,
-    .animate-fade-in {
+    .animate-fade-in-up {
       animation: none;
       opacity: 1;
       transform: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
index 55f288899..71ca31db0 100644
--- a/apps/website/app/layout.tsx
+++ b/apps/website/app/layout.tsx
@@ -5,9 +5,7 @@ import { Metadata, Viewport } from 'next';
 import React from 'react';
 import './globals.css';
 import { AppWrapper } from '@/components/AppWrapper';
-import { Header } from '@/ui/Header';
-import { HeaderContent } from '@/components/layout/HeaderContent';
-import { MainContent } from '@/ui/MainContent';
+import { RootAppShellTemplate } from '@/templates/layout/RootAppShellTemplate';
 
 export const dynamic = 'force-dynamic';
 
@@ -76,12 +74,9 @@ export default async function RootLayout({
       </head>
       <body className="antialiased overflow-x-hidden">
         <AppWrapper enabledFlags={enabledFlags}>
-          <Header>
-            <HeaderContent />
-          </Header>
-          <MainContent>
+          <RootAppShellTemplate>
             {children}
-          </MainContent>
+          </RootAppShellTemplate>
         </AppWrapper>
       </body>
     </html>
diff --git a/apps/website/app/leaderboards/drivers/DriverRankingsPageClient.tsx b/apps/website/app/leaderboards/drivers/DriverRankingsPageClient.tsx
new file mode 100644
index 000000000..26edf2680
--- /dev/null
+++ b/apps/website/app/leaderboards/drivers/DriverRankingsPageClient.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DriverRankingsTemplate } from '@/templates/DriverRankingsTemplate';
+import { routes } from '@/lib/routing/RouteConfig';
+import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
+
+interface DriverRankingsPageClientProps {
+  viewData: DriverRankingsViewData;
+}
+
+export function DriverRankingsPageClient({ viewData }: DriverRankingsPageClientProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleDriverClick = (id: string) => {
+    router.push(routes.driver.detail(id));
+  };
+
+  const handleBackToLeaderboards = () => {
+    router.push(routes.leaderboards.root);
+  };
+
+  const filteredDrivers = viewData.drivers.filter(driver => 
+    driver.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <DriverRankingsTemplate
+      viewData={{
+        ...viewData,
+        drivers: filteredDrivers
+      }}
+      searchQuery={searchQuery}
+      onSearchChange={setSearchQuery}
+      onDriverClick={handleDriverClick}
+      onBackToLeaderboards={handleBackToLeaderboards}
+    />
+  );
+}
diff --git a/apps/website/app/leaderboards/drivers/page.tsx b/apps/website/app/leaderboards/drivers/page.tsx
index fb9728420..7b44ca725 100644
--- a/apps/website/app/leaderboards/drivers/page.tsx
+++ b/apps/website/app/leaderboards/drivers/page.tsx
@@ -1,6 +1,6 @@
 import { notFound, redirect } from 'next/navigation';
 import { DriverRankingsPageQuery } from '@/lib/page-queries/DriverRankingsPageQuery';
-import { DriverRankingsTemplate } from '@/templates/DriverRankingsTemplate';
+import { DriverRankingsPageClient } from './DriverRankingsPageClient';
 import { routes } from '@/lib/routing/RouteConfig';
 
 export default async function DriverLeaderboardPage() {
@@ -23,5 +23,5 @@ export default async function DriverLeaderboardPage() {
   
   // Success
   const viewData = result.unwrap();
-  return <DriverRankingsTemplate viewData={viewData} />;
-}
\ No newline at end of file
+  return <DriverRankingsPageClient viewData={viewData} />;
+}
diff --git a/apps/website/app/leagues/LeaguesPageClient.tsx b/apps/website/app/leagues/LeaguesPageClient.tsx
index 15eb872ec..9e552f24c 100644
--- a/apps/website/app/leagues/LeaguesPageClient.tsx
+++ b/apps/website/app/leagues/LeaguesPageClient.tsx
@@ -1,42 +1,32 @@
 'use client';
 
-import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
+import React, { useState } from 'react';
+import { LeagueCard } from '@/components/leagues/LeagueCard';
 import { routes } from '@/lib/routing/RouteConfig';
-import { LeagueSummaryViewModelBuilder } from '@/lib/builders/view-models/LeagueSummaryViewModelBuilder';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { Heading } from '@/ui/Heading';
-import { Icon as UIIcon } from '@/ui/Icon';
-import { Input } from '@/ui/Input';
-import { Link as UILink } from '@/ui/Link';
-import { PageHero } from '@/ui/PageHero';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
 import {
-  Award,
-  ChevronLeft,
-  ChevronRight,
-  Clock,
-  Filter,
-  Flag,
   Flame,
   Globe,
   Plus,
   Search,
   Sparkles,
   Target,
-  Timer,
   Trophy,
   Users,
+  Flag,
+  Award,
+  Timer,
+  Clock,
   type LucideIcon,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useRef, useState } from 'react';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 // ============================================================================
 // TYPES
@@ -50,12 +40,9 @@ type CategoryId =
   | 'trophy'
   | 'new'
   | 'popular'
-  | 'iracing'
-  | 'acc'
-  | 'f1'
+  | 'openSlots'
   | 'endurance'
-  | 'sprint'
-  | 'openSlots';
+  | 'sprint';
 
 interface Category {
   id: CategoryId;
@@ -66,17 +53,6 @@ interface Category {
   color?: string;
 }
 
-interface LeagueSliderProps {
-  title: string;
-  icon: LucideIcon;
-  description: string;
-  leagues: LeaguesViewData['leagues'];
-  autoScroll?: boolean;
-  iconColor?: string;
-  scrollSpeedMultiplier?: number;
-  scrollDirection?: 'left' | 'right';
-}
-
 interface LeaguesTemplateProps {
   viewData: LeaguesViewData;
 }
@@ -114,7 +90,7 @@ const CATEGORIES: Category[] = [
       oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
       return new Date(league.createdAt) > oneWeekAgo;
     },
-    color: 'text-performance-green',
+    color: 'text-green-500',
   },
   {
     id: 'openSlots',
@@ -122,17 +98,15 @@ const CATEGORIES: Category[] = [
     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',
+    color: 'text-cyan-400',
   },
   {
     id: 'driver',
@@ -183,459 +157,132 @@ const CATEGORIES: Category[] = [
   },
 ];
 
-// ============================================================================
-// LEAGUE SLIDER COMPONENT
-// ============================================================================
+export function LeaguesPageClient({ viewData }: LeaguesTemplateProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
 
-function LeagueSlider({
-  title,
-  icon: Icon,
-  description,
-  leagues,
-  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 filteredLeagues = viewData.leagues.filter((league) => {
+    const matchesSearch = !searchQuery || 
+      league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (league.description ?? '').toLowerCase().includes(searchQuery.toLowerCase());
+    
+    const category = CATEGORIES.find(c => c.id === activeCategory);
+    const matchesCategory = !category || category.filter(league);
 
-  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();
+    return matchesSearch && matchesCategory;
   });
 
-  // Setup auto-scroll effect
-  useState(() => {
-    setupAutoScroll();
-  });
-
-  // Setup manual scroll effect
-  useState(() => {
-    setupManualScroll();
-  });
-
-  if (leagues.length === 0) return null;
-
   return (
-    <Box mb={10}>
-      {/* Section header */}
-      <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
-        <Stack direction="row" align="center" gap={3}>
-          <Box display="flex" h={10} w={10} alignItems="center" justifyContent="center" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline">
-            <UIIcon icon={Icon} size={5} color={iconColor} />
-          </Box>
-          <Box>
-            <Heading level={2}>{title}</Heading>
-            <Text size="xs" color="text-gray-500">{description}</Text>
-          </Box>
-          <Box as="span" ml={2} px={2} py={0.5} rounded="full" fontSize="0.75rem" bg="bg-charcoal-outline/50" color="text-gray-400">
-            {leagues.length}
-          </Box>
-        </Stack>
+    <Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
+      <Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={12}>
+        {/* Hero */}
+        <Box as="header" display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems={{ base: 'start', md: 'end' }} justifyContent="between" gap={8} mb={16}>
+          <Stack gap={4}>
+            <Box display="flex" alignItems="center" gap={3} color="text-blue-500">
+              <Trophy size={24} />
+              <Text fontSize="xs" weight="bold" uppercase letterSpacing="widest">Competition Hub</Text>
+            </Box>
+            <Heading level={1} fontSize="5xl" weight="bold" color="text-white">
+              Find Your <Text as="span" color="text-blue-500">Grid</Text>
+            </Heading>
+            <Text color="text-zinc-400" maxWidth="md" leading="relaxed">
+              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
+            </Text>
+          </Stack>
 
-        {/* Navigation arrows */}
-        <Stack direction="row" align="center" gap={2}>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => scroll('left')}
-            disabled={!canScrollLeft}
-            size="sm"
-            w="2rem"
-            h="2rem"
-            p={0}
-          >
-            <UIIcon icon={ChevronLeft} size={4} />
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => scroll('right')}
-            disabled={!canScrollRight}
-            size="sm"
-            w="2rem"
-            h="2rem"
-            p={0}
-          >
-            <UIIcon icon={ChevronRight} size={4} />
-          </Button>
-        </Stack>
-      </Box>
+          <Box display="flex" alignItems="center" gap={4}>
+            <Box display="flex" flexDirection="col" alignItems="end">
+              <Text fontSize="2xl" weight="bold" color="text-white" font="mono">{viewData.leagues.length}</Text>
+              <Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Active Leagues</Text>
+            </Box>
+            <Box w="px" h="8" bg="zinc-800" />
+            <Button 
+              onClick={() => router.push(routes.league.create)}
+              variant="primary"
+              size="lg"
+            >
+              <Stack direction="row" align="center" gap={2}>
+                <Plus size={16} />
+                Create League
+              </Stack>
+            </Button>
+          </Box>
+        </Box>
 
-      {/* Scrollable container with fade edges */}
-      <Box position="relative">
-        {/* Left fade gradient */}
-        <Box position="absolute" top={0} bottom={4} left={0} w="3rem" bg="bg-gradient-to-r from-deep-graphite to-transparent" zIndex={10} pointerEvents="none" />
-        {/* Right fade gradient */}
-        <Box position="absolute" top={0} bottom={4} right={0} w="3rem" bg="bg-gradient-to-l from-deep-graphite to-transparent" zIndex={10} pointerEvents="none" />
-        
-        <Box
-          ref={scrollRef}
-          onMouseEnter={() => setIsHovering(true)}
-          onMouseLeave={() => setIsHovering(false)}
-          display="flex"
-          gap={4}
-          overflow="auto"
-          pb={4}
-          px={4}
-          hideScrollbar
-        >
-          {leagues.map((league) => {
-            const viewModel = LeagueSummaryViewModelBuilder.build(league);
-            
-            return (
-              <Box key={league.id} flexShrink={0} w="320px" h="full">
-                <UILink href={routes.league.detail(league.id)} block h="full">
-                  <LeagueCard league={viewModel} />
-                </UILink>
+        {/* Search & Filters */}
+        <Box as="section" display="flex" flexDirection="col" gap={8} mb={12}>
+          <Input
+            type="text"
+            placeholder="Search leagues by name, description, or game..."
+            value={searchQuery}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+            icon={<Search size={20} />}
+          />
+
+          <Box as="nav" display="flex" flexWrap="wrap" gap={2}>
+            {CATEGORIES.map((category) => {
+              const isActive = activeCategory === category.id;
+              const CategoryIcon = category.icon;
+              return (
+                <Button
+                  key={category.id}
+                  onClick={() => setActiveCategory(category.id)}
+                  variant={isActive ? 'primary' : 'secondary'}
+                  size="sm"
+                >
+                  <Stack direction="row" align="center" gap={2}>
+                    <Box 
+                      color={!isActive && category.color ? category.color : undefined}
+                    >
+                      <CategoryIcon size={14} />
+                    </Box>
+                    <Text>{category.label}</Text>
+                  </Stack>
+                </Button>
+              );
+            })}
+          </Box>
+        </Box>
+
+        {/* Grid */}
+        <Box as="main">
+          {filteredLeagues.length > 0 ? (
+            <Box display="grid" responsiveGridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
+              {filteredLeagues.map((league) => (
+                <LeagueCard
+                  key={league.id}
+                  id={league.id}
+                  name={league.name}
+                  description={league.description || undefined}
+                  coverUrl={getMediaUrl('league-cover', league.id)}
+                  logoUrl={league.logoUrl || undefined}
+                  gameName={league.scoring?.gameName}
+                  memberCount={league.usedDriverSlots || 0}
+                  maxMembers={league.maxDrivers}
+                  championshipType={(league.scoring?.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy') || 'driver'}
+                  onClick={() => router.push(routes.league.detail(league.id))}
+                />
+              ))}
+            </Box>
+          ) : (
+            <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={24} border borderStyle="dashed" borderColor="zinc-800" bg="zinc-900/20">
+              <Box color="text-zinc-800" mb={4}>
+                <Search size={48} />
               </Box>
-            );
-          })}
+              <Heading level={3} fontSize="xl" weight="bold" color="text-zinc-500">No Leagues Found</Heading>
+              <Text color="text-zinc-600" size="sm" mt={2}>Try adjusting your search or filters</Text>
+              <Button 
+                variant="ghost"
+                mt={6}
+                onClick={() => { setSearchQuery(''); setActiveCategory('all'); }}
+              >
+                Clear All Filters
+              </Button>
+            </Box>
+          )}
         </Box>
       </Box>
     </Box>
   );
 }
-
-// ============================================================================
-// MAIN TEMPLATE COMPONENT
-// ============================================================================
-
-export function LeaguesPageClient({
-  viewData,
-}: LeaguesTemplateProps) {
-  const router = useRouter();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
-  const [showFilters, setShowFilters] = useState(false);
-
-  // Filter by search query
-  const searchFilteredLeagues = viewData.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, LeaguesViewData['leagues']>,
-  );
-
-  // 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' },
-  ];
-
-  return (
-    <Container size="lg" pb={12}>
-      {/* Hero Section */}
-      <PageHero
-        title="Find Your Grid"
-        description="From casual sprints to epic endurance battles — discover the perfect league for your racing style."
-        icon={Trophy}
-        stats={[
-          { value: viewData.leagues.length, label: 'active leagues', color: 'bg-performance-green', animate: true },
-          { value: leaguesByCategory.new.length, label: 'new this week', color: 'bg-primary-blue' },
-          { value: leaguesByCategory.openSlots.length, label: 'with open slots', color: 'bg-neon-aqua' },
-        ]}
-        actions={[
-          {
-            label: 'Create League',
-            onClick: () => { router.push(routes.league.create); },
-            icon: Plus,
-            description: 'Set up your own racing series'
-          }
-        ]}
-      />
-
-      {/* Search and Filter Bar */}
-      <Box mb={6}>
-        <Stack direction="row" gap={4} wrap>
-          {/* Search */}
-          <Box display="flex" position="relative" flexGrow={1}>
-            <Input
-              type="text"
-              placeholder="Search leagues by name, description, or game..."
-              value={searchQuery}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
-              icon={<UIIcon icon={Search} size={5} color="text-gray-500" />}
-            />
-          </Box>
-
-          {/* Filter toggle (mobile) */}
-          <Box display={{ base: 'block', lg: 'none' }}>
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => setShowFilters(!showFilters)}
-            >
-              <Stack direction="row" align="center" gap={2}>
-                <UIIcon icon={Filter} size={4} />
-                <Text>Filters</Text>
-              </Stack>
-            </Button>
-          </Box>
-        </Stack>
-
-        {/* Category Tabs */}
-        <Box mt={4} display={showFilters ? 'block' : { base: 'none', lg: 'block' }}>
-          <Stack direction="row" gap={2} wrap>
-            {CATEGORIES.map((category) => {
-              const count = leaguesByCategory[category.id].length;
-              const isActive = activeCategory === category.id;
-
-              return (
-                <Button
-                  key={category.id}
-                  type="button"
-                  variant={isActive ? 'primary' : 'secondary'}
-                  onClick={() => setActiveCategory(category.id)}
-                  size="sm"
-                  rounded="full"
-                >
-                  <Stack direction="row" align="center" gap={1.5}>
-                    <UIIcon icon={category.icon} size={3.5} color={!isActive && category.color ? category.color : undefined} />
-                    <Text size="xs" weight="medium">{category.label}</Text>
-                    {count > 0 && (
-                      <Box as="span" px={1.5} py={0.5} rounded="full" fontSize="10px" bg={isActive ? 'bg-white/20' : 'bg-charcoal-outline/50'}>
-                        {count}
-                      </Box>
-                    )}
-                  </Stack>
-                </Button>
-              );
-            })}
-          </Stack>
-        </Box>
-      </Box>
-
-      {/* Content */}
-      {viewData.leagues.length === 0 ? (
-        /* Empty State */
-        <Card>
-          <Box py={16} textAlign="center">
-            <Box maxWidth="28rem" mx="auto">
-              <Box display="flex" center mb={6} rounded="2xl" p={4} bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" mx="auto" w="4rem" h="4rem">
-                <UIIcon icon={Trophy} size={8} color="text-primary-blue" />
-              </Box>
-              <Heading level={2}>
-                No leagues yet
-              </Heading>
-              <Box mt={3} mb={8}>
-                <Text color="text-gray-400">
-                  Be the first to create a racing series. Start your own league and invite drivers to compete for glory.
-                </Text>
-              </Box>
-              <Button
-                onClick={() => { router.push(routes.league.create); }}
-              >
-                <Stack direction="row" align="center" gap={2}>
-                  <UIIcon icon={Sparkles} size={4} />
-                  <Text>Create Your First League</Text>
-                </Stack>
-              </Button>
-            </Box>
-          </Box>
-        </Card>
-      ) : activeCategory === 'all' && !searchQuery ? (
-        /* Slider View - Show featured categories with sliders at different speeds and directions */
-        <Box>
-          {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]}
-                autoScroll={true}
-                iconColor={category.color || 'text-primary-blue'}
-                scrollSpeedMultiplier={speed}
-                scrollDirection={direction}
-              />
-            ))}
-        </Box>
-      ) : (
-        /* Grid View - Filtered by category or search */
-        <Box>
-          {categoryFilteredLeagues.length > 0 ? (
-            <>
-              <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
-                <Text size="sm" color="text-gray-400">
-                  Showing <Text color="text-white" weight="medium">{categoryFilteredLeagues.length}</Text>{' '}
-                  {categoryFilteredLeagues.length === 1 ? 'league' : 'leagues'}
-                  {searchQuery && (
-                    <Box as="span">
-                      {' '}
-                      for &quot;<Text color="text-primary-blue">{searchQuery}</Text>&quot;
-                    </Box>
-                  )}
-                </Text>
-              </Box>
-              <Grid cols={1} mdCols={2} lgCols={3} gap={6}>
-                {categoryFilteredLeagues.map((league) => {
-                  const viewModel = LeagueSummaryViewModelBuilder.build(league);
-                  
-                  return (
-                    <GridItem key={league.id}>
-                      <UILink href={routes.league.detail(league.id)} block h="full">
-                        <LeagueCard league={viewModel} />
-                      </UILink>
-                    </GridItem>
-                  );
-                })}
-              </Grid>
-            </>
-          ) : (
-            <Card>
-              <Box py={12} textAlign="center">
-                <Stack align="center" gap={4}>
-                  <UIIcon icon={Search} size={10} color="text-gray-600" />
-                  <Text color="text-gray-400">
-                    No leagues found{searchQuery ? ` matching "${searchQuery}"` : ' in this category'}
-                  </Text>
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      setSearchQuery('');
-                      setActiveCategory('all');
-                    }}
-                  >
-                    Clear filters
-                  </Button>
-                </Stack>
-              </Box>
-            </Card>
-          )}
-        </Box>
-      )}
-    </Container>
-  );
-}
diff --git a/apps/website/app/leagues/[id]/page.tsx b/apps/website/app/leagues/[id]/page.tsx
index 242d94b2c..fffb22dfc 100644
--- a/apps/website/app/leagues/[id]/page.tsx
+++ b/apps/website/app/leagues/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { LeagueOverviewTemplate } from '@/templates/LeagueOverviewTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
 import { ErrorBanner } from '@/ui/ErrorBanner';
@@ -49,8 +49,6 @@ export default async function Page({ params }: Props) {
   });
   
   return (
-    <LeagueDetailTemplate viewData={viewData} tabs={[]}>
-      {null}
-    </LeagueDetailTemplate>
+    <LeagueOverviewTemplate viewData={viewData} />
   );
 }
diff --git a/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx b/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
index e61111802..68b58e32e 100644
--- a/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
+++ b/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
@@ -16,13 +16,14 @@ import {
   createRaceAction,
   updateRaceAction,
   deleteRaceAction
-} from './actions';
+} from '@/app/actions/leagueScheduleActions';
 import { RaceScheduleCommandModel } from '@/lib/command-models/leagues/RaceScheduleCommandModel';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
+import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
 
 export function LeagueAdminSchedulePageClient() {
   const params = useParams();
@@ -39,6 +40,8 @@ export function LeagueAdminSchedulePageClient() {
   const [isPublishing, setIsPublishing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [deletingRaceId, setDeletingRaceId] = useState<string | null>(null);
+  const [raceToDelete, setRaceToDelete] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   // Check admin status using domain hook
   const { data: isAdmin, isLoading: isAdminLoading } = useLeagueAdminStatus(leagueId, currentDriverId);
@@ -48,7 +51,7 @@ export function LeagueAdminSchedulePageClient() {
 
   // Auto-select season
   const selectedSeasonId = seasonId || (seasonsData && seasonsData.length > 0
-    ? (seasonsData.find((s) => s.status === 'active') ?? seasonsData[0])?.seasonId
+    ? (seasonsData.find((s) => s.status === 'active') ?? seasonsData[0])?.seasonId || ''
     : '');
 
   // Load schedule using domain hook
@@ -65,6 +68,7 @@ export function LeagueAdminSchedulePageClient() {
     if (!schedule || !selectedSeasonId) return;
     
     setIsPublishing(true);
+    setError(null);
     try {
       const result = schedule.published
         ? await unpublishScheduleAction(leagueId, selectedSeasonId)
@@ -73,7 +77,7 @@ export function LeagueAdminSchedulePageClient() {
       if (result.isOk()) {
         router.refresh();
       } else {
-        alert(result.getError());
+        setError(result.getError());
       }
     } finally {
       setIsPublishing(false);
@@ -89,6 +93,7 @@ export function LeagueAdminSchedulePageClient() {
     }
     
     setIsSaving(true);
+    setError(null);
     try {
       const result = !editingRaceId
         ? await createRaceAction(leagueId, selectedSeasonId, form.toCommand())
@@ -100,7 +105,7 @@ export function LeagueAdminSchedulePageClient() {
         setEditingRaceId(null);
         router.refresh();
       } else {
-        alert(result.getError());
+        setError(result.getError());
       }
     } finally {
       setIsSaving(false);
@@ -120,18 +125,22 @@ export function LeagueAdminSchedulePageClient() {
     }));
   };
 
-  const handleDelete = async (raceId: string) => {
-    if (!selectedSeasonId) return;
-    const confirmed = window.confirm('Delete this race?');
-    if (!confirmed) return;
+  const handleDelete = (raceId: string) => {
+    setRaceToDelete(raceId);
+  };
+
+  const confirmDelete = async () => {
+    if (!selectedSeasonId || !raceToDelete) return;
     
-    setDeletingRaceId(raceId);
+    setDeletingRaceId(raceToDelete);
+    setError(null);
     try {
-      const result = await deleteRaceAction(leagueId, selectedSeasonId, raceId);
+      const result = await deleteRaceAction(leagueId, selectedSeasonId, raceToDelete);
       if (result.isOk()) {
         router.refresh();
+        setRaceToDelete(null);
       } else {
-        alert(result.getError());
+        setError(result.getError());
       }
     } finally {
       setDeletingRaceId(null);
@@ -186,34 +195,47 @@ export function LeagueAdminSchedulePageClient() {
     if (!data) return null;
     
     return (
-      <LeagueAdminScheduleTemplate
-        viewData={data}
-        onSeasonChange={handleSeasonChange}
-        onPublishToggle={handlePublishToggle}
-        onAddOrSave={handleAddOrSave}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-        onCancelEdit={handleCancelEdit}
-        track={form.track}
-        car={form.car}
-        scheduledAtIso={form.scheduledAtIso}
-        editingRaceId={editingRaceId}
-        isPublishing={isPublishing}
-        isSaving={isSaving}
-        isDeleting={deletingRaceId}
-        setTrack={(val) => {
-          form.track = val;
-          setForm(new RaceScheduleCommandModel(form.toCommand()));
-        }}
-        setCar={(val) => {
-          form.car = val;
-          setForm(new RaceScheduleCommandModel(form.toCommand()));
-        }}
-        setScheduledAtIso={(val) => {
-          form.scheduledAtIso = val;
-          setForm(new RaceScheduleCommandModel(form.toCommand()));
-        }}
-      />
+      <>
+        <LeagueAdminScheduleTemplate
+          viewData={data}
+          onSeasonChange={handleSeasonChange}
+          onPublishToggle={handlePublishToggle}
+          onAddOrSave={handleAddOrSave}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onCancelEdit={handleCancelEdit}
+          track={form.track}
+          car={form.car}
+          scheduledAtIso={form.scheduledAtIso}
+          editingRaceId={editingRaceId}
+          isPublishing={isPublishing}
+          isSaving={isSaving}
+          isDeleting={deletingRaceId}
+          error={error}
+          setTrack={(val) => {
+            form.track = val;
+            setForm(new RaceScheduleCommandModel(form.toCommand()));
+          }}
+          setCar={(val) => {
+            form.car = val;
+            setForm(new RaceScheduleCommandModel(form.toCommand()));
+          }}
+          setScheduledAtIso={(val) => {
+            form.scheduledAtIso = val;
+            setForm(new RaceScheduleCommandModel(form.toCommand()));
+          }}
+        />
+        <ConfirmDialog
+          isOpen={!!raceToDelete}
+          onClose={() => setRaceToDelete(null)}
+          onConfirm={confirmDelete}
+          title="Delete Race"
+          description="Are you sure you want to delete this race? This will remove it from the schedule and cannot be undone."
+          confirmLabel="Delete Race"
+          variant="danger"
+          isLoading={!!deletingRaceId}
+        />
+      </>
     );
   };
 
diff --git a/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx b/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
index d48465d54..249e16dc4 100644
--- a/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
+++ b/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
 import { PenaltyFAB } from '@/ui/PenaltyFAB';
 import { QuickPenaltyModal } from '@/components/leagues/QuickPenaltyModal';
 import { ReviewProtestModal } from '@/components/leagues/ReviewProtestModal';
@@ -8,12 +9,10 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { useLeagueStewardingMutations } from "@/hooks/league/useLeagueStewardingMutations";
 import { useMemo, useState } from 'react';
-import { PendingProtestsList } from '@/components/leagues/PendingProtestsList';
 import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
 import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
 import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
@@ -26,7 +25,7 @@ interface StewardingTemplateProps {
   onRefetch: () => void;
 }
 
-export function StewardingPageClient({ data, leagueId, currentDriverId, onRefetch }: StewardingTemplateProps) {
+export function StewardingPageClient({ data, currentDriverId, onRefetch }: StewardingTemplateProps) {
   const [activeTab, setActiveTab] = useState<'pending' | 'history'>('pending');
   const [selectedProtest, setSelectedProtest] = useState<ProtestViewModel | null>(null);
   const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
@@ -36,19 +35,16 @@ export function StewardingPageClient({ data, leagueId, currentDriverId, onRefetc
 
   // Flatten protests for the specialized list components
   const allPendingProtests = useMemo(() => {
-    return data.races.flatMap(r => r.pendingProtests.map(p => new ProtestViewModel({
+    return data.races.flatMap(r => r.pendingProtests.map(p => ({
       id: p.id,
-      protestingDriverId: p.protestingDriverId,
-      accusedDriverId: p.accusedDriverId,
+      raceName: r.track || 'Unknown Track',
+      protestingDriver: data.drivers.find(d => d.id === p.protestingDriverId)?.name || 'Unknown',
+      accusedDriver: data.drivers.find(d => d.id === p.accusedDriverId)?.name || 'Unknown',
       description: p.incident.description,
       submittedAt: p.filedAt,
-      status: p.status,
-      raceId: r.id,
-      incident: p.incident,
-      proofVideoUrl: p.proofVideoUrl,
-      decisionNotes: p.decisionNotes,
-    } as never)));
-  }, [data.races]);
+      status: p.status as 'pending' | 'under_review' | 'resolved' | 'rejected',
+    })));
+  }, [data.races, data.drivers]);
 
   const allResolvedProtests = useMemo(() => {
     return data.races.flatMap(r => r.resolvedProtests.map(p => new ProtestViewModel({
@@ -131,84 +127,91 @@ export function StewardingPageClient({ data, leagueId, currentDriverId, onRefetc
     });
   };
 
+  const handleReviewProtest = (id: string) => {
+    // Find the protest in the data
+    let foundProtest: ProtestViewModel | null = null;
+    data.races.forEach(r => {
+      const p = r.pendingProtests.find(p => p.id === id);
+      if (p) {
+        foundProtest = new ProtestViewModel({
+          id: p.id,
+          protestingDriverId: p.protestingDriverId,
+          accusedDriverId: p.accusedDriverId,
+          description: p.incident.description,
+          submittedAt: p.filedAt,
+          status: p.status,
+          raceId: r.id,
+          incident: p.incident,
+          proofVideoUrl: p.proofVideoUrl,
+          decisionNotes: p.decisionNotes,
+        } as never);
+      }
+    });
+    if (foundProtest) setSelectedProtest(foundProtest);
+  };
+
   return (
     <Stack gap={6}>
-      <Card>
-        <Box p={6}>
-          <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
-            <Box>
-              <Heading level={2}>Stewarding</Heading>
-              <Box mt={1}>
-                <Text size="sm" color="text-gray-400">
-                  Quick overview of protests and penalties across all races
-                </Text>
-              </Box>
-            </Box>
+      <StewardingStats
+        totalPending={data.totalPending}
+        totalResolved={data.totalResolved}
+        totalPenalties={data.totalPenalties}
+      />
+
+      {/* Tab navigation */}
+      <Box borderBottom borderColor="border-charcoal-outline">
+        <Stack direction="row" gap={4}>
+          <Box 
+            borderBottom={activeTab === 'pending'} 
+            borderColor={activeTab === 'pending' ? 'border-primary-blue' : undefined}
+          >
+            <Button
+              variant="ghost"
+              onClick={() => setActiveTab('pending')}
+              rounded="none"
+            >
+              <Stack direction="row" align="center" gap={2}>
+                <Text weight="medium" color={activeTab === 'pending' ? 'text-primary-blue' : undefined}>Pending Protests</Text>
+                {data.totalPending > 0 && (
+                  <Box px={2} py={0.5} fontSize="0.75rem" bg="bg-warning-amber/20" color="text-warning-amber" rounded="full">
+                    {data.totalPending}
+                  </Box>
+                )}
+              </Stack>
+            </Button>
           </Box>
-
-          {/* Stats summary */}
-          <StewardingStats
-            totalPending={data.totalPending}
-            totalResolved={data.totalResolved}
-            totalPenalties={data.totalPenalties}
-          />
-
-          {/* Tab navigation */}
-          <Box borderBottom borderColor="border-charcoal-outline" mb={6}>
-            <Stack direction="row" gap={4}>
-              <Box 
-                borderBottom={activeTab === 'pending'} 
-                borderColor={activeTab === 'pending' ? 'border-primary-blue' : undefined}
-              >
-                <Button
-                  variant="ghost"
-                  onClick={() => setActiveTab('pending')}
-                  rounded="none"
-                >
-                  <Stack direction="row" align="center" gap={2}>
-                    <Text weight="medium" color={activeTab === 'pending' ? 'text-primary-blue' : undefined}>Pending Protests</Text>
-                    {data.totalPending > 0 && (
-                      <Box px={2} py={0.5} fontSize="0.75rem" bg="bg-warning-amber/20" color="text-warning-amber" rounded="full">
-                        {data.totalPending}
-                      </Box>
-                    )}
-                  </Stack>
-                </Button>
-              </Box>
-              <Box 
-                borderBottom={activeTab === 'history'} 
-                borderColor={activeTab === 'history' ? 'border-primary-blue' : undefined}
-              >
-                <Button
-                  variant="ghost"
-                  onClick={() => setActiveTab('history')}
-                  rounded="none"
-                >
-                  <Text weight="medium" color={activeTab === 'history' ? 'text-primary-blue' : undefined}>History</Text>
-                </Button>
-              </Box>
-            </Stack>
+          <Box 
+            borderBottom={activeTab === 'history'} 
+            borderColor={activeTab === 'history' ? 'border-primary-blue' : undefined}
+          >
+            <Button
+              variant="ghost"
+              onClick={() => setActiveTab('history')}
+              rounded="none"
+            >
+              <Text weight="medium" color={activeTab === 'history' ? 'text-primary-blue' : undefined}>History</Text>
+            </Button>
           </Box>
+        </Stack>
+      </Box>
 
-          {/* Content */}
-          {activeTab === 'pending' ? (
-            <PendingProtestsList 
-              protests={allPendingProtests}
-              races={racesMap}
-              drivers={driverMap}
-              leagueId={leagueId}
-              onReviewProtest={setSelectedProtest}
-              onProtestReviewed={onRefetch}
-            />
-          ) : (
+      {/* Content */}
+      {activeTab === 'pending' ? (
+        <StewardingQueuePanel 
+          protests={allPendingProtests}
+          onReview={handleReviewProtest}
+        />
+      ) : (
+        <Card>
+          <Box p={6}>
             <PenaltyHistoryList 
               protests={allResolvedProtests}
               races={racesMap}
               drivers={driverMap}
             />
-          )}
-        </Box>
-      </Card>
+          </Box>
+        </Card>
+      )}
 
       {activeTab === 'history' && (
         <PenaltyFAB onClick={() => setShowQuickPenaltyModal(true)} />
diff --git a/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx b/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
index c98d7a2b3..69efc68dc 100644
--- a/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
+++ b/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
@@ -1,26 +1,18 @@
 'use client';
 
-import React, { useState, useMemo } from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { TransactionRow } from '@/components/leagues/TransactionRow';
+import React from 'react';
+import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
 import { Icon as UIIcon } from '@/ui/Icon';
 import {
-  Wallet,
-  DollarSign,
-  ArrowUpRight,
-  Clock,
-  AlertTriangle,
-  Download,
-  TrendingUp
+  Download
 } from 'lucide-react';
+import { Button } from '@/ui/Button';
 
 interface WalletTemplateProps {
   viewData: LeagueWalletViewData;
@@ -29,29 +21,15 @@ interface WalletTemplateProps {
   mutationLoading?: boolean;
 }
 
-export function LeagueWalletPageClient({ viewData, onWithdraw, onExport, mutationLoading = false }: WalletTemplateProps) {
-  const [withdrawAmount, setWithdrawAmount] = useState('');
-  const [showWithdrawModal, setShowWithdrawModal] = useState(false);
-  const [filterType, setFilterType] = useState<'all' | 'sponsorship' | 'membership' | 'withdrawal' | 'prize'>('all');
-
-  const filteredTransactions = useMemo(() => {
-    if (filterType === 'all') return viewData.transactions;
-    return viewData.transactions.filter(t => t.type === filterType);
-  }, [viewData.transactions, filterType]);
-
-  const handleWithdrawClick = () => {
-    const amount = parseFloat(withdrawAmount);
-    if (!amount || amount <= 0) return;
-    
-    if (onWithdraw) {
-      onWithdraw(amount);
-      setShowWithdrawModal(false);
-      setWithdrawAmount('');
-    }
-  };
-
-  const canWithdraw = viewData.balance > 0;
-  const withdrawalBlockReason = !canWithdraw ? 'Balance is zero' : undefined;
+export function LeagueWalletPageClient({ viewData, onExport }: WalletTemplateProps) {
+  // Map transactions to the format expected by WalletSummaryPanel
+  const transactions = viewData.transactions.map(t => ({
+    id: t.id,
+    type: t.type === 'withdrawal' ? 'debit' : 'credit' as 'credit' | 'debit',
+    amount: parseFloat(t.formattedAmount.replace(/[^0-9.-]+/g, '')),
+    description: t.description,
+    date: t.formattedDate,
+  }));
 
   return (
     <Container size="lg" py={8}>
@@ -61,314 +39,29 @@ export function LeagueWalletPageClient({ viewData, onWithdraw, onExport, mutatio
           <Heading level={1}>League Wallet</Heading>
           <Text color="text-gray-400">Manage your league&apos;s finances and payouts</Text>
         </Box>
-        <Stack direction="row" align="center" gap={2}>
-          <Button variant="secondary" onClick={onExport}>
-            <Stack direction="row" align="center" gap={2}>
-              <UIIcon icon={Download} size={4} />
-              <Text>Export</Text>
-            </Stack>
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => setShowWithdrawModal(true)}
-            disabled={!canWithdraw || !onWithdraw}
-          >
-            <Stack direction="row" align="center" gap={2}>
-              <UIIcon icon={ArrowUpRight} size={4} />
-              <Text>Withdraw</Text>
-            </Stack>
-          </Button>
-        </Stack>
+        <Button variant="secondary" onClick={onExport}>
+          <Stack direction="row" align="center" gap={2}>
+            <UIIcon icon={Download} size={4} />
+            <Text>Export</Text>
+          </Stack>
+        </Button>
       </Box>
 
-      {/* Withdrawal Warning */}
-      {!canWithdraw && withdrawalBlockReason && (
-        <Box mb={6} p={4} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30">
-          <Stack direction="row" align="start" gap={3}>
-            <UIIcon icon={AlertTriangle} size={5} color="text-warning-amber" flexShrink={0} mt={0.5} />
-            <Box>
-              <Text weight="medium" color="text-warning-amber" block>Withdrawals Temporarily Unavailable</Text>
-              <Text size="sm" color="text-gray-400" block mt={1}>{withdrawalBlockReason}</Text>
-            </Box>
-          </Stack>
-        </Box>
-      )}
-
-      {/* Stats Grid */}
-      <Grid cols={1} mdCols={2} lgCols={4} gap={4} mb={8}>
-        <Card>
-          <Box p={4}>
-            <Stack direction="row" align="center" gap={3}>
-              <Box display="flex" h={12} w={12} alignItems="center" justifyContent="center" rounded="xl" bg="bg-performance-green/10">
-                <UIIcon icon={Wallet} size={6} color="text-performance-green" />
-              </Box>
-              <Box>
-                <Text size="2xl" weight="bold" color="text-white" block>{viewData.formattedBalance}</Text>
-                <Text size="sm" color="text-gray-400" block>Available Balance</Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-
-        <Card>
-          <Box p={4}>
-            <Stack direction="row" align="center" gap={3}>
-              <Box display="flex" h={12} w={12} alignItems="center" justifyContent="center" rounded="xl" bg="bg-primary-blue/10">
-                <UIIcon icon={TrendingUp} size={6} color="text-primary-blue" />
-              </Box>
-              <Box>
-                <Text size="2xl" weight="bold" color="text-white" block>{viewData.formattedTotalRevenue}</Text>
-                <Text size="sm" color="text-gray-400" block>Total Revenue</Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-
-        <Card>
-          <Box p={4}>
-            <Stack direction="row" align="center" gap={3}>
-              <Box display="flex" h={12} w={12} alignItems="center" justifyContent="center" rounded="xl" bg="bg-warning-amber/10">
-                <UIIcon icon={DollarSign} size={6} color="text-warning-amber" />
-              </Box>
-              <Box>
-                <Text size="2xl" weight="bold" color="text-white" block>{viewData.formattedTotalFees}</Text>
-                <Text size="sm" color="text-gray-400" block>Platform Fees (10%)</Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-
-        <Card>
-          <Box p={4}>
-            <Stack direction="row" align="center" gap={3}>
-              <Box display="flex" h={12} w={12} alignItems="center" justifyContent="center" rounded="xl" bg="bg-purple-500/10">
-                <UIIcon icon={Clock} size={6} color="text-purple-400" />
-              </Box>
-              <Box>
-                <Text size="2xl" weight="bold" color="text-white" block>{viewData.formattedPendingPayouts}</Text>
-                <Text size="sm" color="text-gray-400" block>Pending Payouts</Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-      </Grid>
-
-      {/* Transactions */}
-      <Card>
-        <Box display="flex" alignItems="center" justifyContent="between" p={4} borderBottom borderColor="border-charcoal-outline">
-          <Heading level={2}>Transaction History</Heading>
-          <Box as="select"
-            value={filterType}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFilterType(e.target.value as typeof filterType)}
-            p={1.5}
-            rounded="lg"
-            border
-            borderColor="border-charcoal-outline"
-            bg="bg-iron-gray"
-            color="text-white"
-            fontSize="sm"
-          >
-            <Box as="option" value="all">All Transactions</Box>
-            <Box as="option" value="sponsorship">Sponsorships</Box>
-            <Box as="option" value="membership">Memberships</Box>
-            <Box as="option" value="withdrawal">Withdrawals</Box>
-            <Box as="option" value="prize">Prizes</Box>
-          </Box>
-        </Box>
-
-        {filteredTransactions.length === 0 ? (
-          <Box py={12} textAlign="center">
-            <Box display="flex" justifyContent="center" mb={4}>
-              <UIIcon icon={Wallet} size={12} color="text-gray-500" />
-            </Box>
-            <Heading level={3}>No Transactions</Heading>
-            <Box mt={2}>
-              <Text color="text-gray-400">
-                {filterType === 'all' 
-                  ? 'Revenue from sponsorships and fees will appear here.'
-                  : `No ${filterType} transactions found.`}
-              </Text>
-            </Box>
-          </Box>
-        ) : (
-          <Box>
-            {filteredTransactions.map((transaction) => (
-              <TransactionRow 
-                key={transaction.id} 
-                transaction={{
-                  id: transaction.id,
-                  type: transaction.type,
-                  description: transaction.description,
-                  formattedDate: transaction.formattedDate,
-                  formattedAmount: transaction.formattedAmount,
-                  typeColor: transaction.type === 'withdrawal' ? 'text-red-400' : 'text-performance-green',
-                  status: transaction.status,
-                  statusColor: transaction.status === 'completed' ? 'text-performance-green' : 'text-warning-amber',
-                  amountColor: transaction.type === 'withdrawal' ? 'text-red-400' : 'text-performance-green',
-                }} 
-              />
-            ))}
-          </Box>
-        )}
-      </Card>
-
-      {/* Revenue Breakdown */}
-      <Grid cols={1} lgCols={2} gap={6} mt={6}>
-        <Card>
-          <Box p={4}>
-            <Heading level={3} mb={4}>Revenue Breakdown</Heading>
-            <Stack gap={3}>
-              <Box display="flex" alignItems="center" justifyContent="between">
-                <Stack direction="row" align="center" gap={2}>
-                  <Box w={3} h={3} rounded="full" bg="bg-primary-blue" />
-                  <Text color="text-gray-400">Sponsorships</Text>
-                </Stack>
-                <Text weight="medium" color="text-white">$1,600.00</Text>
-              </Box>
-              <Box display="flex" alignItems="center" justifyContent="between">
-                <Stack direction="row" align="center" gap={2}>
-                  <Box w={3} h={3} rounded="full" bg="bg-performance-green" />
-                  <Text color="text-gray-400">Membership Fees</Text>
-                </Stack>
-                <Text weight="medium" color="text-white">$1,600.00</Text>
-              </Box>
-              <Box display="flex" alignItems="center" justifyContent="between" pt={2} borderTop borderColor="border-charcoal-outline">
-                <Text weight="medium" color="text-gray-300">Total Gross Revenue</Text>
-                <Text weight="bold" color="text-white">$3,200.00</Text>
-              </Box>
-              <Box display="flex" alignItems="center" justifyContent="between">
-                <Text size="sm" color="text-warning-amber">Platform Fee (10%)</Text>
-                <Text size="sm" color="text-warning-amber">-$320.00</Text>
-              </Box>
-              <Box display="flex" alignItems="center" justifyContent="between" pt={2} borderTop borderColor="border-charcoal-outline">
-                <Text weight="medium" color="text-performance-green">Net Revenue</Text>
-                <Text weight="bold" color="text-performance-green">$2,880.00</Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-
-        <Card>
-          <Box p={4}>
-            <Heading level={3} mb={4}>Payout Schedule</Heading>
-            <Stack gap={3}>
-              <Box p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
-                <Box display="flex" alignItems="center" justifyContent="between" mb={1}>
-                  <Text size="sm" weight="medium" color="text-white">Season 2 Prize Pool</Text>
-                  <Text size="sm" weight="medium" color="text-warning-amber">Pending</Text>
-                </Box>
-                <Text size="xs" color="text-gray-500">
-                  Distributed after season completion to top 3 drivers
-                </Text>
-              </Box>
-              <Box p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
-                <Box display="flex" alignItems="center" justifyContent="between" mb={1}>
-                  <Text size="sm" weight="medium" color="text-white">Available for Withdrawal</Text>
-                  <Text size="sm" weight="medium" color="text-performance-green">{viewData.formattedBalance}</Text>
-                </Box>
-                <Text size="xs" color="text-gray-500">
-                  Available after Season 2 ends (estimated: Jan 15, 2026)
-                </Text>
-              </Box>
-            </Stack>
-          </Box>
-        </Card>
-      </Grid>
-
-      {/* Withdraw Modal */}
-      {showWithdrawModal && onWithdraw && (
-        <Box position="fixed" inset="0" bg="bg-black/50" display="flex" alignItems="center" justifyContent="center" zIndex={50}>
-          <Card>
-            <Box p={6} w="full" maxWidth="28rem">
-              <Heading level={2} mb={4}>Withdraw Funds</Heading>
-              
-              {!canWithdraw ? (
-                <Box p={4} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" mb={4}>
-                  <Text size="sm" color="text-warning-amber">{withdrawalBlockReason}</Text>
-                </Box>
-              ) : (
-                <Stack gap={4}>
-                  <Box>
-                    <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                      Amount to Withdraw
-                    </Text>
-                    <Box position="relative">
-                      <Box position="absolute" left={3} top="50%" transform="translateY(-50%)">
-                        <Text color="text-gray-500">$</Text>
-                      </Box>
-                      <Box as="input"
-                        type="number"
-                        value={withdrawAmount}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setWithdrawAmount(e.target.value)}
-                        max={viewData.balance}
-                        w="full"
-                        pl={8}
-                        pr={4}
-                        py={2}
-                        rounded="lg"
-                        border
-                        borderColor="border-charcoal-outline"
-                        bg="bg-iron-gray"
-                        color="text-white"
-                        placeholder="0.00"
-                      />
-                    </Box>
-                    <Text size="xs" color="text-gray-500" block mt={1}>
-                      Available: {viewData.formattedBalance}
-                    </Text>
-                  </Box>
-
-                  <Box>
-                    <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                      Destination
-                    </Text>
-                    <Box as="select"
-                      w="full"
-                      px={3}
-                      py={2}
-                      rounded="lg"
-                      border
-                      borderColor="border-charcoal-outline"
-                      bg="bg-iron-gray"
-                      color="text-white"
-                    >
-                      <Box as="option">Bank Account ***1234</Box>
-                    </Box>
-                  </Box>
-                </Stack>
-              )}
-
-              <Stack direction="row" gap={3} mt={6}>
-                <Button
-                  variant="secondary"
-                  onClick={() => setShowWithdrawModal(false)}
-                  fullWidth
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="primary"
-                  onClick={handleWithdrawClick}
-                  disabled={!canWithdraw || mutationLoading || !withdrawAmount}
-                  fullWidth
-                >
-                  {mutationLoading ? 'Processing...' : 'Withdraw'}
-                </Button>
-              </Stack>
-            </Box>
-          </Card>
-        </Box>
-      )}
+      <WalletSummaryPanel 
+        balance={viewData.balance}
+        currency="USD"
+        transactions={transactions}
+        onDeposit={() => {}} // Not implemented for leagues yet
+        onWithdraw={() => {}} // Not implemented for leagues yet
+      />
 
       {/* Alpha Notice */}
       <Box mt={6} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
         <Text size="xs" color="text-gray-400">
           <Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Wallet management is demonstration-only.
           Real payment processing and bank integrations will be available when the payment system is fully implemented.
-          The 10% platform fee and season-based withdrawal restrictions are enforced in the actual implementation.
         </Text>
       </Box>
     </Container>
   );
 }
-
diff --git a/apps/website/app/media/MediaPageClient.tsx b/apps/website/app/media/MediaPageClient.tsx
new file mode 100644
index 000000000..7a044382e
--- /dev/null
+++ b/apps/website/app/media/MediaPageClient.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { MediaTemplate } from '@/templates/MediaTemplate';
+import { MediaAsset } from '@/components/media/MediaGallery';
+
+export interface MediaPageClientProps {
+  initialAssets: MediaAsset[];
+  categories: { label: string; value: string }[];
+}
+
+export function MediaPageClient({
+  initialAssets,
+  categories,
+}: MediaPageClientProps) {
+  return (
+    <MediaTemplate
+      assets={initialAssets}
+      categories={categories}
+      title="Media Library"
+      description="Manage and view all racing assets, telemetry captures, and brand identities."
+    />
+  );
+}
diff --git a/apps/website/app/media/avatar/page.tsx b/apps/website/app/media/avatar/page.tsx
new file mode 100644
index 000000000..5c882ade7
--- /dev/null
+++ b/apps/website/app/media/avatar/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function AvatarsPage() {
+  const assets = [
+    { id: '1', src: '/media/avatar/driver-1', title: 'Driver Avatar 1', category: 'avatars', dimensions: '512x512' },
+    { id: '2', src: '/media/avatar/driver-2', title: 'Driver Avatar 2', category: 'avatars', dimensions: '512x512' },
+  ];
+
+  const categories = [
+    { label: 'Avatars', value: 'avatars' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/media/leagues/page.tsx b/apps/website/app/media/leagues/page.tsx
new file mode 100644
index 000000000..6ad4745a1
--- /dev/null
+++ b/apps/website/app/media/leagues/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function LeaguesMediaPage() {
+  const assets = [
+    { id: 'l1', src: '/media/leagues/league-1/logo', title: 'League Logo 1', category: 'leagues', dimensions: '1024x1024' },
+    { id: 'l1c', src: '/media/leagues/league-1/cover', title: 'League Cover 1', category: 'leagues', dimensions: '1920x400' },
+  ];
+
+  const categories = [
+    { label: 'Leagues', value: 'leagues' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/media/page.tsx b/apps/website/app/media/page.tsx
new file mode 100644
index 000000000..66f4fdb19
--- /dev/null
+++ b/apps/website/app/media/page.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { MediaPageClient } from './MediaPageClient';
+
+export default async function MediaPage() {
+  // In a real app, we would fetch this data from an API or database
+  // For now, we'll provide some sample data to demonstrate the redesign
+  const assets = [
+    { id: '1', src: '/media/avatar/driver-1', title: 'Driver Avatar 1', category: 'avatars', dimensions: '512x512' },
+    { id: '2', src: '/media/teams/team-1/logo', title: 'Team Logo 1', category: 'teams', dimensions: '1024x1024' },
+    { id: '3', src: '/media/leagues/league-1/logo', title: 'League Logo 1', category: 'leagues', dimensions: '1024x1024' },
+    { id: '4', src: '/media/tracks/track-1/image', title: 'Track Image 1', category: 'tracks', dimensions: '1920x1080' },
+    { id: '5', src: '/media/sponsors/sponsor-1/logo', title: 'Sponsor Logo 1', category: 'sponsors', dimensions: '800x400' },
+  ];
+
+  const categories = [
+    { label: 'All Assets', value: 'all' },
+    { label: 'Avatars', value: 'avatars' },
+    { label: 'Teams', value: 'teams' },
+    { label: 'Leagues', value: 'leagues' },
+    { label: 'Tracks', value: 'tracks' },
+    { label: 'Sponsors', value: 'sponsors' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/media/sponsors/page.tsx b/apps/website/app/media/sponsors/page.tsx
new file mode 100644
index 000000000..9cbbde0f2
--- /dev/null
+++ b/apps/website/app/media/sponsors/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function SponsorsMediaPage() {
+  const assets = [
+    { id: 's1', src: '/media/sponsors/sponsor-1/logo', title: 'Sponsor Logo 1', category: 'sponsors', dimensions: '800x400' },
+    { id: 's2', src: '/media/sponsors/sponsor-2/logo', title: 'Sponsor Logo 2', category: 'sponsors', dimensions: '800x400' },
+  ];
+
+  const categories = [
+    { label: 'Sponsors', value: 'sponsors' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/media/teams/page.tsx b/apps/website/app/media/teams/page.tsx
new file mode 100644
index 000000000..ebb1ebba2
--- /dev/null
+++ b/apps/website/app/media/teams/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function TeamsMediaPage() {
+  const assets = [
+    { id: 't1', src: '/media/teams/team-1/logo', title: 'Team Logo 1', category: 'teams', dimensions: '1024x1024' },
+    { id: 't2', src: '/media/teams/team-2/logo', title: 'Team Logo 2', category: 'teams', dimensions: '1024x1024' },
+  ];
+
+  const categories = [
+    { label: 'Teams', value: 'teams' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/media/tracks/page.tsx b/apps/website/app/media/tracks/page.tsx
new file mode 100644
index 000000000..ddfddcc70
--- /dev/null
+++ b/apps/website/app/media/tracks/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function TracksMediaPage() {
+  const assets = [
+    { id: 'tr1', src: '/media/tracks/track-1/image', title: 'Track Image 1', category: 'tracks', dimensions: '1920x1080' },
+    { id: 'tr2', src: '/media/tracks/track-2/image', title: 'Track Image 2', category: 'tracks', dimensions: '1920x1080' },
+  ];
+
+  const categories = [
+    { label: 'Tracks', value: 'tracks' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}
diff --git a/apps/website/app/not-found.tsx b/apps/website/app/not-found.tsx
index 226a8a6fe..92c7d53fc 100644
--- a/apps/website/app/not-found.tsx
+++ b/apps/website/app/not-found.tsx
@@ -1,35 +1,29 @@
 'use client';
 
-import { Link } from '@/ui/Link';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { NotFoundTemplate, type NotFoundViewData } from '@/templates/NotFoundTemplate';
 
+/**
+ * NotFound
+ * 
+ * App-level 404 handler.
+ * Orchestrates the NotFoundTemplate with appropriate racing-themed copy.
+ */
 export default function NotFound() {
-  return (
-    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" bg="bg-deep-graphite" color="text-white" px={6}>
-      <Box maxWidth="md" textAlign="center">
-        <Stack gap={4}>
-          <Heading level={1} fontSize="3xl" weight="semibold">Page not found</Heading>
-          <Text size="sm" color="text-gray-400" block>
-            The page you requested doesn&apos;t exist (or isn&apos;t available in this mode).
-          </Text>
-          <Box pt={2}>
-            <Link
-              href="/"
-              variant="primary"
-              size="sm"
-              weight="medium"
-              rounded="md"
-              px={4}
-              py={2}
-            >
-              Drive home
-            </Link>
-          </Box>
-        </Stack>
-      </Box>
-    </Box>
-  );
-}
\ No newline at end of file
+  const router = useRouter();
+  
+  const handleHomeClick = () => {
+    router.push(routes.public.home);
+  };
+
+  const viewData: NotFoundViewData = {
+    errorCode: 'Error 404',
+    title: 'OFF TRACK',
+    message: 'The requested sector does not exist. You have been returned to the pits.',
+    actionLabel: 'Return to Pits'
+  };
+  
+  return <NotFoundTemplate viewData={viewData} onHomeClick={handleHomeClick} />;
+}
diff --git a/apps/website/app/onboarding/OnboardingWizardClient.tsx b/apps/website/app/onboarding/OnboardingWizardClient.tsx
index 3fafd1ede..76fd1db9e 100644
--- a/apps/website/app/onboarding/OnboardingWizardClient.tsx
+++ b/apps/website/app/onboarding/OnboardingWizardClient.tsx
@@ -1,13 +1,50 @@
 'use client';
 
-import { OnboardingWizard } from '@/components/onboarding/OnboardingWizard';
+import { OnboardingTemplate } from '@/templates/onboarding/OnboardingTemplate';
 import { routes } from '@/lib/routing/RouteConfig';
-import { completeOnboardingAction } from '@/app/onboarding/completeOnboardingAction';
-import { generateAvatarsAction } from '@/app/onboarding/generateAvatarsAction';
+import { completeOnboardingAction } from '@/app/actions/completeOnboardingAction';
+import { generateAvatarsAction } from '@/app/actions/generateAvatarsAction';
 import { useAuth } from '@/components/auth/AuthContext';
+import { useState } from 'react';
+import { PersonalInfo } from '@/components/onboarding/PersonalInfoStep';
+import { AvatarInfo } from '@/components/onboarding/AvatarStep';
+
+type OnboardingStep = 1 | 2;
+
+interface FormErrors {
+  [key: string]: string | undefined;
+  firstName?: string;
+  lastName?: string;
+  displayName?: string;
+  country?: string;
+  facePhoto?: string;
+  avatar?: string;
+  submit?: string;
+}
 
 export function OnboardingWizardClient() {
   const { session } = useAuth();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [step, setStep] = useState<OnboardingStep>(1);
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  // Form state
+  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
+    firstName: '',
+    lastName: '',
+    displayName: '',
+    country: '',
+    timezone: '',
+  });
+
+  const [avatarInfo, setAvatarInfo] = useState<AvatarInfo>({
+    facePhoto: null,
+    suitColor: 'blue',
+    generatedAvatars: [],
+    selectedAvatarIndex: null,
+    isGenerating: false,
+    isValidating: false,
+  });
 
   const handleCompleteOnboarding = async (input: {
     firstName: string;
@@ -16,16 +53,19 @@ export function OnboardingWizardClient() {
     country: string;
     timezone?: string;
   }) => {
+    setIsProcessing(true);
     try {
       const result = await completeOnboardingAction(input);
 
       if (result.isErr()) {
+        setIsProcessing(false);
         return { success: false, error: result.getError() };
       }
 
       window.location.href = routes.protected.dashboard;
       return { success: true };
     } catch (error) {
+      setIsProcessing(false);
       return { success: false, error: 'Failed to complete onboarding' };
     }
   };
@@ -38,6 +78,7 @@ export function OnboardingWizardClient() {
       return { success: false, error: 'Not authenticated' };
     }
 
+    setIsProcessing(true);
     try {
       const result = await generateAvatarsAction({
         userId: session.user.userId,
@@ -46,23 +87,37 @@ export function OnboardingWizardClient() {
       });
 
       if (result.isErr()) {
+        setIsProcessing(false);
         return { success: false, error: result.getError() };
       }
 
       const data = result.unwrap();
+      setIsProcessing(false);
       return { success: true, data };
     } catch (error) {
+      setIsProcessing(false);
       return { success: false, error: 'Failed to generate avatars' };
     }
   };
 
   return (
-    <OnboardingWizard
-      onCompleted={() => {
-        window.location.href = routes.protected.dashboard;
+    <OnboardingTemplate
+      viewData={{
+        onCompleted: () => {
+          window.location.href = routes.protected.dashboard;
+        },
+        onCompleteOnboarding: handleCompleteOnboarding,
+        onGenerateAvatars: handleGenerateAvatars,
+        isProcessing: isProcessing,
+        step,
+        setStep,
+        errors,
+        setErrors,
+        personalInfo,
+        setPersonalInfo,
+        avatarInfo,
+        setAvatarInfo,
       }}
-      onCompleteOnboarding={handleCompleteOnboarding}
-      onGenerateAvatars={handleGenerateAvatars}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/app/profile/ProfilePageClient.tsx b/apps/website/app/profile/ProfilePageClient.tsx
index 600d789f6..b64c41a60 100644
--- a/apps/website/app/profile/ProfilePageClient.tsx
+++ b/apps/website/app/profile/ProfilePageClient.tsx
@@ -2,23 +2,21 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { ProfileTemplate, type ProfileTab } from '@/templates/ProfileTemplate';
+import { ProfileTemplate } from '@/templates/ProfileTemplate';
+import { type ProfileTab } from '@/components/profile/ProfileNavTabs';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
-import type { Result } from '@/lib/contracts/Result';
 
 interface ProfilePageClientProps {
   viewData: ProfileViewData;
   mode: 'profile-exists' | 'needs-profile';
-  onSaveSettings: (updates: { bio?: string; country?: string }) => Promise<Result<void, string>>;
 }
 
-export function ProfilePageClient({ viewData, mode, onSaveSettings }: ProfilePageClientProps) {
+export function ProfilePageClient({ viewData, mode }: ProfilePageClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const tabParam = searchParams.get('tab') as ProfileTab | null;
 
   const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
-  const [editMode, setEditMode] = useState(false);
   const [friendRequestSent, setFriendRequestSent] = useState(false);
 
   useEffect(() => {
@@ -49,19 +47,8 @@ export function ProfilePageClient({ viewData, mode, onSaveSettings }: ProfilePag
       mode={mode}
       activeTab={activeTab}
       onTabChange={setActiveTab}
-      editMode={editMode}
-      onEditModeChange={setEditMode}
       friendRequestSent={friendRequestSent}
       onFriendRequestSend={() => setFriendRequestSent(true)}
-      onSaveSettings={async (updates) => {
-        const result = await onSaveSettings(updates);
-        if (result.isErr()) {
-          // In a real app, we'd show a toast or error message.
-          // For now, we just throw to let the UI handle it if needed,
-          // or we could add an error state to this client component.
-          throw new Error(result.getError());
-        }
-      }}
     />
   );
 }
diff --git a/apps/website/app/profile/layout.tsx b/apps/website/app/profile/layout.tsx
index 3a99485f4..95439efc2 100644
--- a/apps/website/app/profile/layout.tsx
+++ b/apps/website/app/profile/layout.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
-import { ProfileLayoutShell } from '@/ui/ProfileLayoutShell';
+import { ProfileLayoutShellTemplate } from '@/templates/ProfileLayoutShellTemplate';
 import { createRouteGuard } from '@/lib/auth/createRouteGuard';
 
 interface ProfileLayoutProps {
@@ -18,5 +18,5 @@ export default async function ProfileLayout({ children }: ProfileLayoutProps) {
     redirect(result.to);
   }
 
-  return <ProfileLayoutShell>{children}</ProfileLayoutShell>;
+  return <ProfileLayoutShellTemplate viewData={{}}>{children}</ProfileLayoutShellTemplate>;
 }
diff --git a/apps/website/app/profile/liveries/page.tsx b/apps/website/app/profile/liveries/page.tsx
index d6d85ffb4..efba7cab9 100644
--- a/apps/website/app/profile/liveries/page.tsx
+++ b/apps/website/app/profile/liveries/page.tsx
@@ -1,13 +1,4 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
-import { routes } from '@/lib/routing/RouteConfig';
-import { LiveryCard } from '@/ui/LiveryCard';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
+import { ProfileLiveriesTemplate } from '@/templates/ProfileLiveriesTemplate';
 
 export default async function ProfileLiveriesPage() {
   const mockLiveries = [
@@ -29,29 +20,5 @@ export default async function ProfileLiveriesPage() {
     }
   ];
 
-  return (
-    <Container size="lg" py={8}>
-      <Stack direction="row" align="center" justify="between" mb={8}>
-        <Box>
-          <Heading level={1}>My Liveries</Heading>
-          <Text color="text-gray-400" mt={1} block>Manage your custom car liveries</Text>
-        </Box>
-        <Link href={routes.protected.profileLiveryUpload}>
-          <Button variant="primary">Upload livery</Button>
-        </Link>
-      </Stack>
-
-      <Grid cols={3} gap={6}>
-        {mockLiveries.map((livery) => (
-          <LiveryCard key={livery.id} livery={livery} />
-        ))}
-      </Grid>
-
-      <Box mt={12}>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
-      </Box>
-    </Container>
-  );
+  return <ProfileLiveriesTemplate viewData={{ liveries: mockLiveries }} />;
 }
diff --git a/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx b/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx
new file mode 100644
index 000000000..63fe87cd1
--- /dev/null
+++ b/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { routes } from '@/lib/routing/RouteConfig';
+import { UploadDropzone } from '@/components/media/UploadDropzone';
+import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
+import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
+
+export function ProfileLiveryUploadPageClient() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFilesSelected = (files: File[]) => {
+    if (files.length > 0) {
+      const file = files[0];
+      setSelectedFile(file);
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) return;
+    setIsUploading(true);
+    // Mock upload delay
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsUploading(false);
+    alert('Livery uploaded successfully! (Mock)');
+  };
+
+  return (
+    <Container size="md">
+      <Box mb={6}>
+        <Heading level={1}>Upload livery</Heading>
+        <Text color="text-gray-500">
+          Upload your custom car livery. Supported formats: .png, .jpg, .tga
+        </Text>
+      </Box>
+
+      <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+        <Box>
+          <Card>
+            <UploadDropzone
+              onFilesSelected={handleFilesSelected}
+              accept=".png,.jpg,.jpeg,.tga"
+              maxSize={10 * 1024 * 1024} // 10MB
+              isLoading={isUploading}
+            />
+            
+            <Box mt={6} display="flex" justifyContent="end" gap={3}>
+              <Link href={routes.protected.profileLiveries}>
+                <Button variant="ghost">Cancel</Button>
+              </Link>
+              <Button 
+                variant="primary" 
+                disabled={!selectedFile || isUploading}
+                onClick={handleUpload}
+                isLoading={isUploading}
+              >
+                Upload Livery
+              </Button>
+            </Box>
+          </Card>
+        </Box>
+
+        <Box>
+          {previewUrl ? (
+            <Box display="flex" flexDirection="col" gap={6}>
+              <MediaPreviewCard
+                src={previewUrl}
+                title={selectedFile?.name}
+                subtitle="Preview"
+                aspectRatio="16/9"
+              />
+              
+              <MediaMetaPanel
+                items={mapMediaMetadata({
+                  filename: selectedFile?.name,
+                  size: selectedFile?.size,
+                  contentType: selectedFile?.type || 'image/tga',
+                  createdAt: new Date(),
+                })}
+              />
+            </Box>
+          ) : (
+            <Card center p={12}>
+              <Text color="text-gray-500" align="center">
+                Select a file to see preview and details
+              </Text>
+            </Card>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+}
diff --git a/apps/website/app/profile/liveries/upload/page.tsx b/apps/website/app/profile/liveries/upload/page.tsx
index 57f317cdd..0e6c85aa5 100644
--- a/apps/website/app/profile/liveries/upload/page.tsx
+++ b/apps/website/app/profile/liveries/upload/page.tsx
@@ -1,21 +1,6 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
+import React from 'react';
+import { ProfileLiveryUploadPageClient } from './ProfileLiveryUploadPageClient';
 
 export default async function ProfileLiveryUploadPage() {
-  return (
-    <Container size="md">
-      <Heading level={1}>Upload livery</Heading>
-      <Card>
-        <Text block mb={4}>Livery upload is currently unavailable.</Text>
-        <Link href={routes.protected.profileLiveries}>
-          <Button variant="secondary">Back to liveries</Button>
-        </Link>
-      </Card>
-    </Container>
-  );
+  return <ProfileLiveryUploadPageClient />;
 }
diff --git a/apps/website/app/profile/page.tsx b/apps/website/app/profile/page.tsx
index 5a628ae18..c69bef3dd 100644
--- a/apps/website/app/profile/page.tsx
+++ b/apps/website/app/profile/page.tsx
@@ -1,6 +1,5 @@
 import { ProfilePageQuery } from '@/lib/page-queries/ProfilePageQuery';
 import { notFound } from 'next/navigation';
-import { updateProfileAction } from './actions';
 import { ProfilePageClient } from './ProfilePageClient';
 
 export default async function ProfilePage() {
@@ -18,7 +17,6 @@ export default async function ProfilePage() {
     <ProfilePageClient
       viewData={viewData}
       mode={mode}
-      onSaveSettings={updateProfileAction}
     />
   );
 }
diff --git a/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx b/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx
new file mode 100644
index 000000000..f3c2ac061
--- /dev/null
+++ b/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import type { Result } from '@/lib/contracts/Result';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { Box } from '@/ui/Box';
+
+interface ProfileSettingsPageClientProps {
+  viewData: ProfileViewData;
+  onSave: (updates: { bio?: string; country?: string }) => Promise<Result<void, string>>;
+}
+
+export function ProfileSettingsPageClient({ viewData, onSave }: ProfileSettingsPageClientProps) {
+  const router = useRouter();
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [bio, setBio] = useState(viewData.driver.bio || '');
+  const [country, setCountry] = useState(viewData.driver.countryCode);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      const result = await onSave({ bio, country });
+      if (result.isErr()) {
+        setError(result.getError());
+      } else {
+        router.refresh();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <ProgressLine isLoading={isSaving} />
+      {error && (
+        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
+          <InlineNotice
+            variant="error"
+            title="Update Failed"
+            message={error}
+          />
+        </Box>
+      )}
+      <ProfileSettingsTemplate
+        viewData={viewData}
+        bio={bio}
+        country={country}
+        onBioChange={setBio}
+        onCountryChange={setCountry}
+        onSave={handleSave}
+      />
+    </>
+  );
+}
diff --git a/apps/website/app/profile/settings/page.tsx b/apps/website/app/profile/settings/page.tsx
index c724ffcfe..f4136eee8 100644
--- a/apps/website/app/profile/settings/page.tsx
+++ b/apps/website/app/profile/settings/page.tsx
@@ -1,21 +1,22 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
+import { ProfilePageQuery } from '@/lib/page-queries/ProfilePageQuery';
+import { notFound } from 'next/navigation';
+import { updateProfileAction } from '@/app/actions/profileActions';
+import { ProfileSettingsPageClient } from './ProfileSettingsPageClient';
 
 export default async function ProfileSettingsPage() {
+  const query = new ProfilePageQuery();
+  const result = await query.execute();
+
+  if (result.isErr()) {
+    notFound();
+  }
+
+  const viewData = result.unwrap();
+
   return (
-    <Container size="md">
-      <Heading level={1}>Settings</Heading>
-      <Card>
-        <Text block mb={4}>Settings are currently unavailable.</Text>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
-      </Card>
-    </Container>
+    <ProfileSettingsPageClient
+      viewData={viewData}
+      onSave={updateProfileAction}
+    />
   );
 }
diff --git a/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx b/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
index 3e4bb6507..dfe865ee5 100644
--- a/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
+++ b/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
@@ -1,8 +1,13 @@
 'use client';
 
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import type { Result } from '@/lib/contracts/Result';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { Box } from '@/ui/Box';
 
 interface SponsorshipRequestsClientProps {
   viewData: SponsorshipRequestsViewData;
@@ -11,25 +16,54 @@ interface SponsorshipRequestsClientProps {
 }
 
 export function SponsorshipRequestsClient({ viewData, onAccept, onReject }: SponsorshipRequestsClientProps) {
+  const router = useRouter();
+  const [isProcessing, setIsProcessing] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
   const handleAccept = async (requestId: string) => {
+    setIsProcessing(requestId);
+    setError(null);
     const result = await onAccept(requestId);
     if (result.isErr()) {
-      console.error('Failed to accept request:', result.getError());
+      setError(result.getError());
+      setIsProcessing(null);
+    } else {
+      router.refresh();
+      setIsProcessing(null);
     }
   };
 
   const handleReject = async (requestId: string, reason?: string) => {
+    setIsProcessing(requestId);
+    setError(null);
     const result = await onReject(requestId, reason);
     if (result.isErr()) {
-      console.error('Failed to reject request:', result.getError());
+      setError(result.getError());
+      setIsProcessing(null);
+    } else {
+      router.refresh();
+      setIsProcessing(null);
     }
   };
 
   return (
-    <SponsorshipRequestsTemplate
-      viewData={viewData}
-      onAccept={handleAccept}
-      onReject={handleReject}
-    />
+    <>
+      <ProgressLine isLoading={!!isProcessing} />
+      {error && (
+        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
+          <InlineNotice
+            variant="error"
+            title="Action Failed"
+            message={error}
+          />
+        </Box>
+      )}
+      <SponsorshipRequestsTemplate
+        viewData={viewData}
+        onAccept={handleAccept}
+        onReject={handleReject}
+        processingId={isProcessing}
+      />
+    </>
   );
 }
diff --git a/apps/website/app/profile/sponsorship-requests/page.tsx b/apps/website/app/profile/sponsorship-requests/page.tsx
index 7546f21e3..c20bbba86 100644
--- a/apps/website/app/profile/sponsorship-requests/page.tsx
+++ b/apps/website/app/profile/sponsorship-requests/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import { SponsorshipRequestsPageQuery } from '@/lib/page-queries/SponsorshipRequestsPageQuery';
 import { SponsorshipRequestsClient } from './SponsorshipRequestsClient';
-import { acceptSponsorshipRequest, rejectSponsorshipRequest } from './actions';
+import { acceptSponsorshipRequest, rejectSponsorshipRequest } from '@/app/actions/sponsorshipActions';
 
 export default async function SponsorshipRequestsPage() {
   // Execute PageQuery
diff --git a/apps/website/app/races/[id]/RaceDetailPageClient.tsx b/apps/website/app/races/[id]/RaceDetailPageClient.tsx
index ad1d7b2a3..0fd5c9e23 100644
--- a/apps/website/app/races/[id]/RaceDetailPageClient.tsx
+++ b/apps/website/app/races/[id]/RaceDetailPageClient.tsx
@@ -8,7 +8,7 @@ interface Props {
   data: RaceDetailViewData;
 }
 
-export default function RaceDetailPageClient({ data: viewData }: Props) {
+export function RaceDetailPageClient({ data: viewData }: Props) {
   const router = useRouter();
   const [animatedRatingChange] = useState(0);
 
diff --git a/apps/website/app/races/[id]/page.tsx b/apps/website/app/races/[id]/page.tsx
index de3464099..612972fd0 100644
--- a/apps/website/app/races/[id]/page.tsx
+++ b/apps/website/app/races/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';
-import RaceDetailPageClient from './RaceDetailPageClient';
+import { RaceDetailPageClient } from './RaceDetailPageClient';
 
 interface RaceDetailPageProps {
   params: Promise<{
@@ -29,8 +29,8 @@ export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
     return (
       <PageWrapper
         data={undefined}
-        Template={RaceDetailPageClient as any}
-        error={new Error('Failed to load race details')}
+        Template={RaceDetailPageClient}
+        error={new globalThis.Error('Failed to load race details')}
       />
     );
   }
diff --git a/apps/website/app/races/[id]/results/RaceResultsPageClient.tsx b/apps/website/app/races/[id]/results/RaceResultsPageClient.tsx
index 958a0df1c..260090659 100644
--- a/apps/website/app/races/[id]/results/RaceResultsPageClient.tsx
+++ b/apps/website/app/races/[id]/results/RaceResultsPageClient.tsx
@@ -9,7 +9,7 @@ interface Props {
   data: RaceResultsViewData;
 }
 
-export default function RaceResultsPageClient({ data: viewData }: Props) {
+export function RaceResultsPageClient({ data: viewData }: Props) {
   const router = useRouter();
   const [importing, setImporting] = useState(false);
   const [importSuccess, setImportSuccess] = useState(false);
diff --git a/apps/website/app/races/[id]/results/page.tsx b/apps/website/app/races/[id]/results/page.tsx
index d4189ff5c..1119923e6 100644
--- a/apps/website/app/races/[id]/results/page.tsx
+++ b/apps/website/app/races/[id]/results/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
-import RaceResultsPageClient from './RaceResultsPageClient';
+import { RaceResultsPageClient } from './RaceResultsPageClient';
 
 interface RaceResultsPageProps {
   params: Promise<{
@@ -29,8 +29,8 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
     return (
       <PageWrapper
         data={undefined}
-        Template={RaceResultsPageClient as any}
-        error={new Error('Failed to load race results')}
+        Template={RaceResultsPageClient}
+        error={new globalThis.Error('Failed to load race results')}
       />
     );
   }
diff --git a/apps/website/app/sponsor/billing/page.tsx b/apps/website/app/sponsor/billing/page.tsx
index c390c6991..1c95276e1 100644
--- a/apps/website/app/sponsor/billing/page.tsx
+++ b/apps/website/app/sponsor/billing/page.tsx
@@ -1,251 +1,13 @@
 'use client';
 
-import { useState } from 'react';
-import { motion, useReducedMotion } from 'framer-motion';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { StatCard } from '@/ui/StatCard';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { SectionHeader } from '@/ui/SectionHeader';
-import { InfoBanner } from '@/ui/InfoBanner';
-import { PageHeader } from '@/ui/PageHeader';
-import { Icon } from '@/ui/Icon';
-import { siteConfig } from '@/lib/siteConfig';
 import { useSponsorBilling } from "@/hooks/sponsor/useSponsorBilling";
-import {
-  CreditCard,
-  DollarSign,
-  Calendar,
-  Download,
-  Plus,
-  Check,
-  AlertTriangle,
-  FileText,
-  TrendingUp,
-  Receipt,
-  Building2,
-  Wallet,
-  Clock,
-  ChevronRight,
-  Info,
-  ExternalLink,
-  Percent,
-  Loader2
-} from 'lucide-react';
-import type { PaymentMethodDTO, InvoiceDTO } from '@/lib/types/tbd/SponsorBillingDTO';
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function PaymentMethodCardComponent({
-  method,
-  onSetDefault,
-  onRemove
-}: {
-  method: PaymentMethodDTO;
-  onSetDefault: () => void;
-  onRemove: () => void;
-}) {
-  const shouldReduceMotion = useReducedMotion();
-  
-  const getIcon = () => {
-    if (method.type === 'sepa') return Building2;
-    return CreditCard;
-  };
-  
-  const MethodIcon = getIcon();
-  
-  const displayLabel = method.type === 'sepa' && method.bankName
-    ? `${method.bankName} •••• ${method.last4}`
-    : `${method.brand} •••• ${method.last4}`;
-
-  const expiryDisplay = method.expiryMonth && method.expiryYear
-    ? `${method.expiryMonth}/${method.expiryYear}`
-    : null;
-
-  return (
-    <Box
-      as={motion.div}
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
-      p={4}
-      rounded="xl"
-      border
-      borderColor={method.isDefault ? 'border-primary-blue/50' : 'border-charcoal-outline'}
-      bg={method.isDefault ? 'bg-gradient-to-r from-primary-blue/10 to-transparent' : 'bg-iron-gray/30'}
-      shadow={method.isDefault ? '0_0_20px_rgba(25,140,255,0.1)' : undefined}
-      hoverBorderColor={!method.isDefault ? 'border-charcoal-outline/80' : undefined}
-      transition-all
-    >
-      <Box display="flex" alignItems="center" justifyContent="between">
-        <Box display="flex" alignItems="center" gap={4}>
-          <Box
-            w="12"
-            h="12"
-            rounded="xl"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            bg={method.isDefault ? 'bg-primary-blue/20' : 'bg-iron-gray'}
-          >
-            <Icon icon={MethodIcon} size={6} color={method.isDefault ? 'text-primary-blue' : 'text-gray-400'} />
-          </Box>
-          <Box>
-            <Box display="flex" alignItems="center" gap={2}>
-              <Text weight="medium" color="text-white">{displayLabel}</Text>
-              {method.isDefault && (
-                <Box px={2} py={0.5} rounded="full" bg="bg-primary-blue/20">
-                  <Text size="xs" color="text-primary-blue" weight="medium">
-                    Default
-                  </Text>
-                </Box>
-              )}
-            </Box>
-            {expiryDisplay && (
-              <Text size="sm" color="text-gray-500" block>
-                Expires {expiryDisplay}
-              </Text>
-            )}
-            {method.type === 'sepa' && (
-              <Text size="sm" color="text-gray-500" block>SEPA Direct Debit</Text>
-            )}
-          </Box>
-        </Box>
-        <Box display="flex" alignItems="center" gap={2}>
-          {!method.isDefault && (
-            <Button variant="secondary" onClick={onSetDefault} size="sm">
-              Set Default
-            </Button>
-          )}
-          <Button variant="secondary" onClick={onRemove} size="sm" color="text-gray-400" hoverTextColor="text-racing-red">
-            Remove
-          </Button>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-function InvoiceRowComponent({ invoice, index }: { invoice: InvoiceDTO; index: number }) {
-  const shouldReduceMotion = useReducedMotion();
-  
-  const statusConfig = {
-    paid: {
-      icon: Check,
-      label: 'Paid',
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30'
-    },
-    pending: {
-      icon: Clock,
-      label: 'Pending',
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30'
-    },
-    overdue: {
-      icon: AlertTriangle,
-      label: 'Overdue',
-      color: 'text-racing-red',
-      bg: 'bg-racing-red/10',
-      border: 'border-racing-red/30'
-    },
-    failed: {
-      icon: AlertTriangle,
-      label: 'Failed',
-      color: 'text-racing-red',
-      bg: 'bg-racing-red/10',
-      border: 'border-racing-red/30'
-    },
-  };
-
-  const typeLabels = {
-    league: 'League',
-    team: 'Team',
-    driver: 'Driver',
-    race: 'Race',
-    platform: 'Platform',
-  };
-
-  const status = statusConfig[invoice.status as keyof typeof statusConfig];
-  const StatusIcon = status.icon;
-
-  return (
-    <Box
-      as={motion.div}
-      initial={{ opacity: 0, x: -10 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ duration: shouldReduceMotion ? 0 : 0.2, delay: shouldReduceMotion ? 0 : index * 0.05 }}
-      display="flex"
-      alignItems="center"
-      justifyContent="between"
-      p={4}
-      borderBottom
-      borderColor="border-charcoal-outline/50"
-      hoverBg="bg-iron-gray/20"
-      transition-colors
-      group
-    >
-      <Box display="flex" alignItems="center" gap={4} flexGrow={1}>
-        <Box w="10" h="10" rounded="lg" bg="bg-iron-gray" display="flex" alignItems="center" justifyContent="center">
-          <Icon icon={Receipt} size={5} color="text-gray-400" />
-        </Box>
-        <Box flexGrow={1} minWidth="0">
-          <Box display="flex" alignItems="center" gap={2} mb={0.5}>
-            <Text weight="medium" color="text-white" truncate>{invoice.description}</Text>
-            <Box px={2} py={0.5} rounded bg="bg-iron-gray">
-              <Text size="xs" color="text-gray-400">
-                {typeLabels[invoice.sponsorshipType as keyof typeof typeLabels]}
-              </Text>
-            </Box>
-          </Box>
-          <Box display="flex" alignItems="center" gap={3}>
-            <Text size="sm" color="text-gray-500">{invoice.invoiceNumber}</Text>
-            <Text size="sm" color="text-gray-500">•</Text>
-            <Text size="sm" color="text-gray-500">
-              {new globalThis.Date(invoice.date).toLocaleDateString()}
-            </Text>
-          </Box>
-        </Box>
-      </Box>
-      
-      <Box display="flex" alignItems="center" gap={6}>
-        <Box textAlign="right">
-          <Text weight="semibold" color="text-white" block>
-            ${invoice.totalAmount.toFixed(2)}
-          </Text>
-          <Text size="xs" color="text-gray-500" block>
-            incl. ${invoice.vatAmount.toFixed(2)} VAT
-          </Text>
-        </Box>
-
-        <Box display="flex" alignItems="center" gap={1.5} px={2.5} py={1} rounded="full" bg={status.bg} border borderColor={status.border}>
-          <Icon icon={StatusIcon} size={3} color={status.color} />
-          <Text size="xs" weight="medium" color={status.color}>{status.label}</Text>
-        </Box>
-        
-        <Button variant="secondary" size="sm" opacity={0} groupHoverTextColor="opacity-100" transition-opacity icon={<Icon icon={Download} size={3} />}>
-          PDF
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
+import { SponsorBillingTemplate } from "@/templates/SponsorBillingTemplate";
+import { Box } from "@/ui/Box";
+import { Text } from "@/ui/Text";
+import { Button } from "@/ui/Button";
+import { DollarSign, AlertTriangle, Calendar, TrendingUp } from "lucide-react";
 
 export default function SponsorBillingPage() {
-  const shouldReduceMotion = useReducedMotion();
-  const [showAllInvoices, setShowAllInvoices] = useState(false);
-
   const { data: billingData, isLoading, error, retry } = useSponsorBilling('demo-sponsor-1');
 
   if (isLoading) {
@@ -274,228 +36,68 @@ export default function SponsorBillingPage() {
     );
   }
 
-  const data = billingData;
-
   const handleSetDefault = (methodId: string) => {
-    // In a real app, this would call an API
     console.log('Setting default payment method:', methodId);
   };
 
   const handleRemoveMethod = (methodId: string) => {
     if (window.confirm('Remove this payment method?')) {
-      // In a real app, this would call an API
       console.log('Removing payment method:', methodId);
     }
   };
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: shouldReduceMotion ? 0 : 0.1,
-      },
-    },
+  const handleDownloadInvoice = (invoiceId: string) => {
+    console.log('Downloading invoice:', invoiceId);
   };
 
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
-  };
+  const billingStats = [
+    {
+      label: 'Total Spent',
+      value: `$${billingData.stats.totalSpent.toFixed(2)}`,
+      subValue: 'All time',
+      icon: DollarSign,
+      variant: 'success' as const,
+    },
+    {
+      label: 'Pending Payments',
+      value: `$${billingData.stats.pendingAmount.toFixed(2)}`,
+      subValue: `${billingData.invoices.filter(i => i.status === 'pending' || i.status === 'overdue').length} invoices`,
+      icon: AlertTriangle,
+      variant: (billingData.stats.pendingAmount > 0 ? 'warning' : 'default') as 'warning' | 'default',
+    },
+    {
+      label: 'Next Payment',
+      value: new Date(billingData.stats.nextPaymentDate).toLocaleDateString(),
+      subValue: `$${billingData.stats.nextPaymentAmount.toFixed(2)}`,
+      icon: Calendar,
+      variant: 'info' as const,
+    },
+    {
+      label: 'Monthly Average',
+      value: `$${billingData.stats.averageMonthlySpend.toFixed(2)}`,
+      subValue: 'Last 6 months',
+      icon: TrendingUp,
+      variant: 'default' as const,
+    },
+  ];
+
+  const transactions = billingData.invoices.map(inv => ({
+    id: inv.id,
+    date: inv.date,
+    description: inv.description,
+    amount: inv.totalAmount,
+    status: inv.status as any,
+    invoiceNumber: inv.invoiceNumber,
+    type: inv.sponsorshipType,
+  }));
 
   return (
-    <Box
-      maxWidth="5xl"
-      mx="auto"
-      py={8}
-      px={4}
-      as={motion.div}
-      // @ts-ignore
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
-    >
-      {/* Header */}
-      <Box as={motion.div} variants={itemVariants}>
-        <PageHeader
-          icon={Wallet}
-          title="Billing & Payments"
-          description="Manage payment methods, view invoices, and track your sponsorship spending"
-          iconGradient="from-warning-amber/20 to-warning-amber/5"
-          iconBorder="border-warning-amber/30"
-        />
-      </Box>
-
-      {/* Stats Grid */}
-      <Box as={motion.div} variants={itemVariants} display="grid" gridCols={{ base: 1, md: 2, lg: 4 }} gap={4} mb={8}>
-        <StatCard
-          icon={DollarSign}
-          label="Total Spent"
-          value={`$${data.stats.totalSpent.toFixed(2)}`}
-          subValue="All time"
-          variant="green"
-        />
-        <StatCard
-          icon={AlertTriangle}
-          label="Pending Payments"
-          value={`$${data.stats.pendingAmount.toFixed(2)}`}
-          subValue={`${data.invoices.filter((i: { status: string }) => i.status === 'pending' || i.status === 'overdue').length} invoices`}
-          variant="orange"
-        />
-        <StatCard
-          icon={Calendar}
-          label="Next Payment"
-          value={new globalThis.Date(data.stats.nextPaymentDate).toLocaleDateString()}
-          subValue={`$${data.stats.nextPaymentAmount.toFixed(2)}`}
-          variant="blue"
-        />
-        <StatCard
-          icon={TrendingUp}
-          label="Monthly Average"
-          value={`$${data.stats.averageMonthlySpend.toFixed(2)}`}
-          subValue="Last 6 months"
-          variant="blue"
-        />
-      </Box>
-
-      {/* Payment Methods */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card mb={8} overflow="hidden">
-          <SectionHeader
-            icon={CreditCard}
-            title="Payment Methods"
-            action={
-              <Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
-                Add Payment Method
-              </Button>
-            }
-          />
-          <Box p={5} display="flex" flexDirection="col" gap={3}>
-            {data.paymentMethods.map((method: PaymentMethodDTO) => (
-              <PaymentMethodCardComponent
-                key={method.id}
-                method={method}
-                onSetDefault={() => handleSetDefault(method.id)}
-                onRemove={() => handleRemoveMethod(method.id)}
-              />
-            ))}
-          </Box>
-          <Box px={5} pb={5}>
-            <InfoBanner type="info">
-              <Text block mb={1}>We support Visa, Mastercard, American Express, and SEPA Direct Debit.</Text>
-              <Text block>All payment information is securely processed and stored by our payment provider.</Text>
-            </InfoBanner>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Billing History */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card mb={8} overflow="hidden">
-          <SectionHeader
-            icon={FileText}
-            title="Billing History"
-            color="text-warning-amber"
-            action={
-              <Button variant="secondary" size="sm" icon={<Icon icon={Download} size={4} />}>
-                Export All
-              </Button>
-            }
-          />
-          <Box>
-            {data.invoices.slice(0, showAllInvoices ? data.invoices.length : 4).map((invoice: InvoiceDTO, index: number) => (
-              <InvoiceRowComponent key={invoice.id} invoice={invoice} index={index} />
-            ))}
-          </Box>
-          {data.invoices.length > 4 && (
-            <Box p={4} borderTop borderColor="border-charcoal-outline">
-              <Button
-                variant="secondary"
-                fullWidth
-                onClick={() => setShowAllInvoices(!showAllInvoices)}
-                icon={<Icon icon={ChevronRight} size={4} className={showAllInvoices ? 'rotate-90' : ''} />}
-                flexDirection="row-reverse"
-              >
-                {showAllInvoices ? 'Show Less' : `View All ${data.invoices.length} Invoices`}
-              </Button>
-            </Box>
-          )}
-        </Card>
-      </Box>
-
-      {/* Platform Fee & VAT Information */}
-      <Box as={motion.div} variants={itemVariants} display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
-        {/* Platform Fee */}
-        <Card overflow="hidden">
-          <Box p={5} borderBottom borderColor="border-charcoal-outline" bg="bg-gradient-to-r from-iron-gray/30 to-transparent">
-            <Heading level={3} fontSize="base" weight="semibold" color="text-white" icon={<Box p={2} rounded="lg" bg="bg-iron-gray/50"><Icon icon={Percent} size={4} color="text-primary-blue" /></Box>}>
-              Platform Fee
-            </Heading>
-          </Box>
-          <Box p={5}>
-            <Text size="3xl" weight="bold" color="text-white" block mb={2}>
-              {siteConfig.fees.platformFeePercent}%
-            </Text>
-            <Text size="sm" color="text-gray-400" block mb={4}>
-              {siteConfig.fees.description}
-            </Text>
-            <Box display="flex" flexDirection="col" gap={1}>
-              <Text size="xs" color="text-gray-500" block>• Applied to all sponsorship payments</Text>
-              <Text size="xs" color="text-gray-500" block>• Covers platform maintenance and analytics</Text>
-              <Text size="xs" color="text-gray-500" block>• Ensures quality sponsorship placements</Text>
-            </Box>
-          </Box>
-        </Card>
-
-        {/* VAT Information */}
-        <Card overflow="hidden">
-          <Box p={5} borderBottom borderColor="border-charcoal-outline" bg="bg-gradient-to-r from-iron-gray/30 to-transparent">
-            <Heading level={3} fontSize="base" weight="semibold" color="text-white" icon={<Box p={2} rounded="lg" bg="bg-iron-gray/50"><Icon icon={Receipt} size={4} color="text-performance-green" /></Box>}>
-              VAT Information
-            </Heading>
-          </Box>
-          <Box p={5}>
-            <Text size="sm" color="text-gray-400" block mb={4}>
-              {siteConfig.vat.notice}
-            </Text>
-            <Box display="flex" flexDirection="col" gap={3}>
-              <Box display="flex" justifyContent="between" alignItems="center" py={2} borderBottom borderColor="border-charcoal-outline/50">
-                <Text color="text-gray-500">Standard VAT Rate</Text>
-                <Text color="text-white" weight="medium">{siteConfig.vat.standardRate}%</Text>
-              </Box>
-              <Box display="flex" justifyContent="between" alignItems="center" py={2}>
-                <Text color="text-gray-500">B2B Reverse Charge</Text>
-                <Text color="text-performance-green" weight="medium">Available</Text>
-              </Box>
-            </Box>
-            <Text size="xs" color="text-gray-500" block mt={4}>
-              Enter your VAT ID in Settings to enable reverse charge for B2B transactions.
-            </Text>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Billing Support */}
-      <Box as={motion.div} variants={itemVariants} mt={6}>
-        <Card p={5}>
-          <Box display="flex" alignItems="center" justifyContent="between">
-            <Stack direction="row" align="center" gap={4}>
-              <Box p={3} rounded="xl" bg="bg-iron-gray">
-                <Icon icon={Info} size={5} color="text-gray-400" />
-              </Box>
-              <Box>
-                <Heading level={3} fontSize="base" weight="medium" color="text-white">Need help with billing?</Heading>
-                <Text size="sm" color="text-gray-500" block>
-                  Contact our billing support for questions about invoices, payments, or refunds.
-                </Text>
-              </Box>
-            </Stack>
-            <Button variant="secondary" icon={<Icon icon={ExternalLink} size={4} />}>
-              Contact Support
-            </Button>
-          </Box>
-        </Card>
-      </Box>
-    </Box>
+    <SponsorBillingTemplate 
+      viewData={billingData}
+      billingStats={billingStats}
+      transactions={transactions}
+      onSetDefaultPaymentMethod={handleSetDefault}
+      onDownloadInvoice={handleDownloadInvoice}
+    />
   );
 }
diff --git a/apps/website/app/sponsor/campaigns/page.tsx b/apps/website/app/sponsor/campaigns/page.tsx
index 615339765..b24030593 100644
--- a/apps/website/app/sponsor/campaigns/page.tsx
+++ b/apps/website/app/sponsor/campaigns/page.tsx
@@ -1,619 +1,74 @@
 'use client';
 
 import { useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { motion, useReducedMotion } from 'framer-motion';
-import Link from 'next/link';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { InfoBanner } from '@/ui/InfoBanner';
 import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
-import {
-  Megaphone,
-  Trophy,
-  Users,
-  Eye,
-  Calendar,
-  ExternalLink,
-  Plus,
-  ChevronRight,
-  Check,
-  Clock,
-  XCircle,
-  Car,
-  Flag,
-  Search,
-  TrendingUp,
-  BarChart3,
-  ArrowUpRight,
-  ArrowDownRight,
-  Send,
-  ThumbsUp,
-  ThumbsDown,
-  RefreshCw,
-} from 'lucide-react';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type SponsorshipType = 'all' | 'leagues' | 'teams' | 'drivers' | 'races' | 'platform';
-type SponsorshipStatus = 'all' | 'active' | 'pending_approval' | 'approved' | 'rejected' | 'expired';
-
-// ============================================================================
-// Configuration
-// ============================================================================
-
-const TYPE_CONFIG = {
-  leagues: { icon: Trophy, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'League' },
-  teams: { icon: Users, color: 'text-purple-400', bgColor: 'bg-purple-400/10', label: 'Team' },
-  drivers: { icon: Car, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Driver' },
-  races: { icon: Flag, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Race' },
-  platform: { icon: Megaphone, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Platform' },
-  all: { icon: BarChart3, color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'All' },
-};
-
-const STATUS_CONFIG = {
-  active: {
-    icon: Check,
-    color: 'text-performance-green',
-    bgColor: 'bg-performance-green/10',
-    borderColor: 'border-performance-green/30',
-    label: 'Active'
-  },
-  pending_approval: {
-    icon: Clock,
-    color: 'text-warning-amber',
-    bgColor: 'bg-warning-amber/10',
-    borderColor: 'border-warning-amber/30',
-    label: 'Awaiting Approval'
-  },
-  approved: {
-    icon: ThumbsUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-primary-blue/10',
-    borderColor: 'border-primary-blue/30',
-    label: 'Approved'
-  },
-  rejected: {
-    icon: ThumbsDown,
-    color: 'text-racing-red',
-    bgColor: 'bg-racing-red/10',
-    borderColor: 'border-racing-red/30',
-    label: 'Declined'
-  },
-  expired: {
-    icon: XCircle,
-    color: 'text-gray-400',
-    bgColor: 'bg-gray-400/10',
-    borderColor: 'border-gray-400/30',
-    label: 'Expired'
-  },
-};
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function SponsorshipCard({ sponsorship }: { sponsorship: unknown }) {
-  const shouldReduceMotion = useReducedMotion();
-  
-  const s = sponsorship as any; // Temporary cast to avoid breaking logic
-  const typeConfig = TYPE_CONFIG[s.type as keyof typeof TYPE_CONFIG];
-  const statusConfig = STATUS_CONFIG[s.status as keyof typeof STATUS_CONFIG];
-  const TypeIcon = typeConfig.icon;
-  const StatusIcon = statusConfig.icon;
-
-  const daysRemaining = Math.ceil((s.endDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
-  const isExpiringSoon = daysRemaining > 0 && daysRemaining <= 30;
-  const isPending = s.status === 'pending_approval';
-  const isRejected = s.status === 'rejected';
-  const isApproved = s.status === 'approved';
-
-  const getEntityLink = () => {
-    switch (s.type) {
-      case 'leagues': return `/leagues/${s.entityId}`;
-      case 'teams': return `/teams/${s.entityId}`;
-      case 'drivers': return `/drivers/${s.entityId}`;
-      case 'races': return `/races/${s.entityId}`;
-      default: return '#';
-    }
-  };
-
-  return (
-    <motion.div
-      initial={shouldReduceMotion ? {} : { opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      whileHover={{ y: -2 }}
-      transition={{ duration: 0.2 }}
-    >
-      <Card className={`hover:border-primary-blue/30 transition-all duration-300 ${
-        isPending ? 'border-warning-amber/30' :
-        isRejected ? 'border-racing-red/20 opacity-75' :
-        isApproved ? 'border-primary-blue/30' : ''
-      }`}>
-        {/* Header */}
-        <Stack direction="row" align="start" justify="between" mb={4}>
-          <Stack direction="row" align="center" gap={3}>
-            <Box w="10" h="10" rounded="lg" bg={typeConfig.bgColor} display="flex" alignItems="center" justifyContent="center">
-              <TypeIcon className={`w-5 h-5 ${typeConfig.color}`} />
-            </Box>
-            <Box>
-              <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
-                <Text size="xs" weight="medium" px={2} py={0.5} rounded="md" bg={typeConfig.bgColor} color={typeConfig.color}>
-                  {typeConfig.label}
-                </Text>
-                {s.tier && (
-                  <Text size="xs" weight="medium" px={2} py={0.5} rounded="md" bg={s.tier === 'main' ? 'bg-primary-blue/20' : 'bg-purple-400/20'} color={s.tier === 'main' ? 'text-primary-blue' : 'text-purple-400'}>
-                    {s.tier === 'main' ? 'Main Sponsor' : 'Secondary'}
-                  </Text>
-                )}
-              </Box>
-            </Box>
-          </Stack>
-          <Box display="flex" alignItems="center" gap={1} px={2.5} py={1} rounded="full" border bg={statusConfig.bgColor} color={statusConfig.color} borderColor={statusConfig.borderColor}>
-            <StatusIcon className="w-3 h-3" />
-            <Text size="xs" weight="medium">{statusConfig.label}</Text>
-          </Box>
-        </Stack>
-
-        {/* Entity Name */}
-        <Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={1}>{s.entityName}</Heading>
-        {s.details && (
-          <Text size="sm" color="text-gray-500" block mb={3}>{s.details}</Text>
-        )}
-
-        {/* Application/Approval Info for non-active states */}
-        {isPending && (
-          <Box mb={4} p={3} rounded="lg" bg="bg-warning-amber/5" border borderColor="border-warning-amber/20">
-            <Stack direction="row" align="center" gap={2} color="text-warning-amber" mb={2}>
-              <Send className="w-4 h-4" />
-              <Text size="sm" weight="medium">Application Pending</Text>
-            </Stack>
-            <Text size="xs" color="text-gray-400" block mb={2}>
-              Sent to <Text color="text-gray-300">{s.entityOwner}</Text> on{' '}
-              {s.applicationDate?.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
-            </Text>
-            {s.applicationMessage && (
-              <Text size="xs" color="text-gray-500" italic block>&quot;{s.applicationMessage}&quot;</Text>
-            )}
-          </Box>
-        )}
-
-        {isApproved && (
-          <Box mb={4} p={3} rounded="lg" bg="bg-primary-blue/5" border borderColor="border-primary-blue/20">
-            <Stack direction="row" align="center" gap={2} color="text-primary-blue" mb={1}>
-              <ThumbsUp className="w-4 h-4" />
-              <Text size="sm" weight="medium">Approved!</Text>
-            </Stack>
-            <Text size="xs" color="text-gray-400" block>
-              Approved by <Text color="text-gray-300">{s.entityOwner}</Text> on{' '}
-              {s.approvalDate?.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
-            </Text>
-            <Text size="xs" color="text-gray-500" block mt={1}>
-              Starts {s.startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-            </Text>
-          </Box>
-        )}
-
-        {isRejected && (
-          <Box mb={4} p={3} rounded="lg" bg="bg-racing-red/5" border borderColor="border-racing-red/20">
-            <Stack direction="row" align="center" gap={2} color="text-racing-red" mb={1}>
-              <ThumbsDown className="w-4 h-4" />
-              <Text size="sm" weight="medium">Application Declined</Text>
-            </Stack>
-            {s.rejectionReason && (
-              <Text size="xs" color="text-gray-400" block mt={1}>
-                Reason: <Text color="text-gray-300">{s.rejectionReason}</Text>
-              </Text>
-            )}
-            <Button variant="secondary" className="mt-2 text-xs">
-              <RefreshCw className="w-3 h-3 mr-1" />
-              Reapply
-            </Button>
-          </Box>
-        )}
-
-        {/* Metrics Grid - Only show for active sponsorships */}
-        {s.status === 'active' && (
-          <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={3} mb={4}>
-            <Box bg="bg-iron-gray/50" rounded="lg" p={3}>
-              <Box display="flex" alignItems="center" gap={1} color="text-gray-400" mb={1}>
-                <Eye className="w-3 h-3" />
-                <Text size="xs">Impressions</Text>
-              </Box>
-              <Stack direction="row" align="center" gap={2}>
-                <Text color="text-white" weight="semibold">{s.formattedImpressions}</Text>
-                {s.impressionsChange !== undefined && s.impressionsChange !== 0 && (
-                  <Text size="xs" display="flex" alignItems="center" color={s.impressionsChange > 0 ? 'text-performance-green' : 'text-racing-red'}>
-                    {s.impressionsChange > 0 ? <ArrowUpRight className="w-3 h-3" /> : <ArrowDownRight className="w-3 h-3" />}
-                    {Math.abs(s.impressionsChange)}%
-                  </Text>
-                )}
-              </Stack>
-            </Box>
-            
-            {s.engagement && (
-              <Box bg="bg-iron-gray/50" rounded="lg" p={3}>
-                <Box display="flex" alignItems="center" gap={1} color="text-gray-400" mb={1}>
-                  <TrendingUp className="w-3 h-3" />
-                  <Text size="xs">Engagement</Text>
-                </Box>
-                <Text color="text-white" weight="semibold">{s.engagement}%</Text>
-              </Box>
-            )}
-            
-            <Box bg="bg-iron-gray/50" rounded="lg" p={3}>
-              <Box display="flex" alignItems="center" gap={1} color="text-gray-400" mb={1}>
-                <Calendar className="w-3 h-3" />
-                <Text size="xs">Period</Text>
-              </Box>
-              <Text color="text-white" weight="semibold" size="xs">
-                {s.startDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} - {s.endDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-              </Text>
-            </Box>
-            
-            <Box bg="bg-iron-gray/50" rounded="lg" p={3}>
-              <Box display="flex" alignItems="center" gap={1} color="text-gray-400" mb={1}>
-                <Trophy className="w-3 h-3" />
-                <Text size="xs">Investment</Text>
-              </Box>
-              <Text color="text-white" weight="semibold">{s.formattedPrice}</Text>
-            </Box>
-          </Box>
-        )}
-
-        {/* Basic info for non-active */}
-        {s.status !== 'active' && (
-          <Stack direction="row" align="center" gap={4} mb={4}>
-            <Box display="flex" alignItems="center" gap={1} color="text-gray-400">
-              <Calendar className="w-3.5 h-3.5" />
-              <Text size="sm">{s.periodDisplay}</Text>
-            </Box>
-            <Box display="flex" alignItems="center" gap={1} color="text-gray-400">
-              <Trophy className="w-3.5 h-3.5" />
-              <Text size="sm">{s.formattedPrice}</Text>
-            </Box>
-          </Stack>
-        )}
-
-        {/* Footer */}
-        <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-charcoal-outline/50">
-          <Box display="flex" alignItems="center" gap={2}>
-            {s.status === 'active' && (
-              <Text size="xs" color={isExpiringSoon ? 'text-warning-amber' : 'text-gray-500'}>
-                {daysRemaining > 0 ? `${daysRemaining} days remaining` : 'Ended'}
-              </Text>
-            )}
-            {isPending && (
-              <Text size="xs" color="text-gray-500">
-                Waiting for response...
-              </Text>
-            )}
-          </Box>
-          <Stack direction="row" align="center" gap={2}>
-            {s.type !== 'platform' && (
-              <Link href={getEntityLink()}>
-                <Button variant="secondary" className="text-xs">
-                  <ExternalLink className="w-3 h-3 mr-1" />
-                  View
-                </Button>
-              </Link>
-            )}
-            {isPending && (
-              <Button variant="secondary" className="text-xs text-racing-red hover:bg-racing-red/10">
-                Cancel Application
-              </Button>
-            )}
-            {s.status === 'active' && (
-              <Button variant="secondary" className="text-xs">
-                Details
-                <ChevronRight className="w-3 h-3 ml-1" />
-              </Button>
-            )}
-          </Stack>
-        </Box>
-      </Card>
-    </motion.div>
-  );
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
+import { SponsorCampaignsTemplate, SponsorshipType } from "@/templates/SponsorCampaignsTemplate";
+import { Box } from "@/ui/Box";
+import { Text } from "@/ui/Text";
+import { Button } from "@/ui/Button";
 
 export default function SponsorCampaignsPage() {
-  const searchParams = useSearchParams();
-  const shouldReduceMotion = useReducedMotion();
-
-  const initialType = (searchParams.get('type') as SponsorshipType) || 'all';
-  const [typeFilter, setTypeFilter] = useState<SponsorshipType>(initialType);
-  const [statusFilter, setStatusFilter] = useState<SponsorshipStatus>('all');
+  const [typeFilter, setTypeFilter] = useState<SponsorshipType>('all');
   const [searchQuery, setSearchQuery] = useState('');
-
   const { data: sponsorshipsData, isLoading, error, retry } = useSponsorSponsorships('demo-sponsor-1');
 
   if (isLoading) {
     return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-primary-blue border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-          <p className="text-gray-400">Loading sponsorships...</p>
-        </div>
-      </div>
+      <Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
+        <Box textAlign="center">
+          <Box w="8" h="8" border borderTop={false} borderColor="border-primary-blue" rounded="full" animate="spin" mx="auto" mb={4} />
+          <Text color="text-gray-400">Loading sponsorships...</Text>
+        </Box>
+      </Box>
     );
   }
 
   if (error || !sponsorshipsData) {
     return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
-        <div className="text-center">
-          <p className="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</p>
+      <Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
+        <Box textAlign="center">
+          <Text color="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</Text>
           {error && (
-            <Button variant="secondary" onClick={retry} className="mt-4">
+            <Button variant="secondary" onClick={retry} mt={4}>
               Retry
             </Button>
           )}
-        </div>
-      </div>
+        </Box>
+      </Box>
     );
   }
 
-  const data = sponsorshipsData;
+  // Calculate stats
+  const stats = {
+    total: sponsorshipsData.sponsorships.length,
+    active: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').length,
+    pending: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'pending_approval').length,
+    approved: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'approved').length,
+    rejected: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'rejected').length,
+    totalInvestment: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0),
+    totalImpressions: sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0),
+  };
 
-  // Filter sponsorships
-  const filteredSponsorships = data.sponsorships.filter((s: unknown) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const sponsorship = s as any;
-    if (typeFilter !== 'all' && sponsorship.type !== typeFilter) return false;
-    if (statusFilter !== 'all' && sponsorship.status !== statusFilter) return false;
-    if (searchQuery && !sponsorship.entityName.toLowerCase().includes(searchQuery.toLowerCase())) return false;
+  const viewData = {
+    sponsorships: sponsorshipsData.sponsorships as any,
+    stats,
+  };
+
+  const filteredSponsorships = sponsorshipsData.sponsorships.filter((s: any) => {
+    // For now, we only have leagues in the DTO
+    if (typeFilter !== 'all' && typeFilter !== 'leagues') return false;
+    if (searchQuery && !s.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) return false;
     return true;
   });
 
-  // Calculate stats
-  const stats = {
-    total: data.sponsorships.length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    active: data.sponsorships.filter((s: any) => s.status === 'active').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    pending: data.sponsorships.filter((s: any) => s.status === 'pending_approval').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    approved: data.sponsorships.filter((s: any) => s.status === 'approved').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rejected: data.sponsorships.filter((s: any) => s.status === 'rejected').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    totalInvestment: data.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    totalImpressions: data.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0),
-  };
-
-  // Stats by type
-  const statsByType = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    leagues: data.sponsorships.filter((s: any) => s.type === 'leagues').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    teams: data.sponsorships.filter((s: any) => s.type === 'teams').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    drivers: data.sponsorships.filter((s: any) => s.type === 'drivers').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    races: data.sponsorships.filter((s: any) => s.type === 'races').length,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    platform: data.sponsorships.filter((s: any) => s.type === 'platform').length,
-  };
-
   return (
-    <Box maxWidth="7xl" mx="auto" py={8} px={4}>
-      {/* Header */}
-      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={4} mb={8}>
-        <Box>
-          <Heading level={1} fontSize="2xl" weight="bold" color="text-white" icon={<Megaphone className="w-7 h-7 text-primary-blue" />}>
-            My Sponsorships
-          </Heading>
-          <Text color="text-gray-400" mt={1} block>Manage applications and active sponsorship campaigns</Text>
-        </Box>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Link href="/leagues">
-            <Button variant="primary">
-              <Plus className="w-4 h-4 mr-2" />
-              Find Opportunities
-            </Button>
-          </Link>
-        </Box>
-      </Stack>
-
-      {/* Info Banner about how sponsorships work */}
-      {stats.pending > 0 && (
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-6"
-        >
-          <InfoBanner type="info" title="Sponsorship Applications">
-            <Text size="sm">
-              You have <Text weight="bold" color="text-white">{stats.pending} pending application{stats.pending !== 1 ? 's' : ''}</Text> waiting for approval.
-              League admins, team owners, and drivers review applications before accepting sponsorships.
-            </Text>
-          </InfoBanner>
-        </motion.div>
-      )}
-
-      {/* Quick Stats */}
-      <Box display="grid" gridCols={{ base: 2, md: 6 }} gap={4} mb={8}>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-        >
-          <Card className="p-4">
-            <Text size="2xl" weight="bold" color="text-white" block>{stats.total}</Text>
-            <Text size="sm" color="text-gray-400">Total</Text>
-          </Card>
-        </motion.div>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.05 }}
-        >
-          <Card className="p-4">
-            <Text size="2xl" weight="bold" color="text-performance-green" block>{stats.active}</Text>
-            <Text size="sm" color="text-gray-400">Active</Text>
-          </Card>
-        </motion.div>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1 }}
-        >
-          <Card className={`p-4 ${stats.pending > 0 ? 'border-warning-amber/30' : ''}`}>
-            <Text size="2xl" weight="bold" color="text-warning-amber" block>{stats.pending}</Text>
-            <Text size="sm" color="text-gray-400">Pending</Text>
-          </Card>
-        </motion.div>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15 }}
-        >
-          <Card className="p-4">
-            <Text size="2xl" weight="bold" color="text-primary-blue" block>{stats.approved}</Text>
-            <Text size="sm" color="text-gray-400">Approved</Text>
-          </Card>
-        </motion.div>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
-        >
-          <Card className="p-4">
-            <Text size="2xl" weight="bold" color="text-white" block>${stats.totalInvestment.toLocaleString()}</Text>
-            <Text size="sm" color="text-gray-400">Active Investment</Text>
-          </Card>
-        </motion.div>
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.25 }}
-        >
-          <Card className="p-4">
-            <Text size="2xl" weight="bold" color="text-primary-blue" block>{(stats.totalImpressions / 1000).toFixed(0)}k</Text>
-            <Text size="sm" color="text-gray-400">Impressions</Text>
-          </Card>
-        </motion.div>
-      </Box>
-
-      {/* Filters */}
-      <Stack direction={{ base: 'col', lg: 'row' }} gap={4} mb={6}>
-        {/* Search */}
-        <Box position="relative" flexGrow={1}>
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-          <input
-            type="text"
-            placeholder="Search sponsorships..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
-          />
-        </Box>
-        
-        {/* Type Filter */}
-        <Box display="flex" alignItems="center" gap={2} overflow="auto" pb={{ base: 2, lg: 0 }}>
-          {(['all', 'leagues', 'teams', 'drivers', 'races', 'platform'] as const).map((type) => {
-            const config = TYPE_CONFIG[type];
-            const Icon = config.icon;
-            const count = type === 'all' ? stats.total : statsByType[type];
-            return (
-              <button
-                key={type}
-                onClick={() => setTypeFilter(type)}
-                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
-                  typeFilter === type
-                    ? 'bg-primary-blue text-white'
-                    : 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
-                } border-0 cursor-pointer`}
-              >
-                <Icon className="w-4 h-4" />
-                {config.label}
-                <Text size="xs" px={1.5} py={0.5} rounded="sm" bg={typeFilter === type ? 'bg-white/20' : 'bg-charcoal-outline'}>
-                  {count}
-                </Text>
-              </button>
-            );
-          })}
-        </Box>
-
-        {/* Status Filter */}
-        <Box display="flex" alignItems="center" gap={2} overflow="auto">
-          {(['all', 'active', 'pending_approval', 'approved', 'rejected'] as const).map((status) => {
-            const config = status === 'all'
-              ? { label: 'All', color: 'text-gray-400' }
-              : STATUS_CONFIG[status];
-            const count = status === 'all'
-              ? stats.total
-              : data.sponsorships.filter((s: any) => s.status === status).length;
-            return (
-              <button
-                key={status}
-                onClick={() => setStatusFilter(status)}
-                className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${
-                  statusFilter === status
-                    ? 'bg-iron-gray text-white border border-charcoal-outline'
-                    : 'text-gray-500 hover:text-gray-300'
-                } border-0 cursor-pointer`}
-              >
-                {config.label}
-                {count > 0 && status !== 'all' && (
-                  <Text size="xs" ml={1.5} px={1.5} py={0.5} rounded="sm" bg={status === 'pending_approval' ? 'bg-warning-amber/20' : 'bg-charcoal-outline'} color={status === 'pending_approval' ? 'text-warning-amber' : ''}>
-                    {count}
-                  </Text>
-                )}
-              </button>
-            );
-          })}
-        </Box>
-      </Stack>
-
-      {/* Sponsorship List */}
-      {filteredSponsorships.length === 0 ? (
-        <Card className="text-center py-16">
-          <Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-          <Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={2}>No sponsorships found</Heading>
-          <Text color="text-gray-400" mb={6} maxWidth="md" mx="auto" block>
-            {searchQuery || typeFilter !== 'all' || statusFilter !== 'all'
-              ? 'Try adjusting your filters to see more results.'
-              : 'Start sponsoring leagues, teams, or drivers to grow your brand visibility.'}
-          </Text>
-          <Stack direction={{ base: 'col', md: 'row' }} gap={3} justify="center">
-            <Link href="/leagues">
-              <Button variant="primary">
-                <Trophy className="w-4 h-4 mr-2" />
-                Browse Leagues
-              </Button>
-            </Link>
-            <Link href="/teams">
-              <Button variant="secondary">
-                <Users className="w-4 h-4 mr-2" />
-                Browse Teams
-              </Button>
-            </Link>
-            <Link href="/drivers">
-              <Button variant="secondary">
-                <Car className="w-4 h-4 mr-2" />
-                Browse Drivers
-              </Button>
-            </Link>
-          </Stack>
-        </Card>
-      ) : (
-        <Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={4}>
-          {filteredSponsorships.map((sponsorship: any) => (
-            <SponsorshipCard key={sponsorship.id} sponsorship={sponsorship} />
-          ))}
-        </Box>
-      )}
-    </Box>
+    <SponsorCampaignsTemplate 
+      viewData={viewData} 
+      filteredSponsorships={filteredSponsorships as any}
+      typeFilter={typeFilter}
+      setTypeFilter={setTypeFilter}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+    />
   );
 }
\ No newline at end of file
diff --git a/apps/website/app/sponsor/settings/page.tsx b/apps/website/app/sponsor/settings/page.tsx
index babed73ed..ee806ab14 100644
--- a/apps/website/app/sponsor/settings/page.tsx
+++ b/apps/website/app/sponsor/settings/page.tsx
@@ -1,92 +1,16 @@
 'use client';
 
 import { useState } from 'react';
-import { motion, useReducedMotion } from 'framer-motion';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Toggle } from '@/ui/Toggle';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { SectionHeader } from '@/ui/SectionHeader';
-import { FormField } from '@/ui/FormField';
-import { PageHeader } from '@/ui/PageHeader';
-import { Image } from '@/ui/Image';
-import {
-  Settings,
-  Building2,
-  Mail,
-  Globe,
-  Upload,
-  Save,
-  Bell,
-  Shield,
-  Eye,
-  Trash2,
-  CheckCircle,
-  User,
-  Phone,
-  MapPin,
-  FileText,
-  Link as LinkIcon,
-  Image as ImageIcon,
-  Lock,
-  Key,
-  Smartphone,
-  AlertCircle
-} from 'lucide-react';
+import { SponsorSettingsTemplate } from '@/templates/SponsorSettingsTemplate';
 import { logoutAction } from '@/app/actions/logoutAction';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface SponsorProfile {
-  companyName: string;
-  contactName: string;
-  contactEmail: string;
-  contactPhone: string;
-  website: string;
-  description: string;
-  logoUrl: string | null;
-  industry: string;
-  address: {
-    street: string;
-    city: string;
-    country: string;
-    postalCode: string;
-  };
-  taxId: string;
-  socialLinks: {
-    twitter: string;
-    linkedin: string;
-    instagram: string;
-  };
-}
-
-interface NotificationSettings {
-  emailNewSponsorships: boolean;
-  emailWeeklyReport: boolean;
-  emailRaceAlerts: boolean;
-  emailPaymentAlerts: boolean;
-  emailNewOpportunities: boolean;
-  emailContractExpiry: boolean;
-}
-
-interface PrivacySettings {
-  publicProfile: boolean;
-  showStats: boolean;
-  showActiveSponsorships: boolean;
-  allowDirectContact: boolean;
-}
+import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { useRouter } from 'next/navigation';
 
 // ============================================================================
 // Mock Data
 // ============================================================================
 
-const MOCK_PROFILE: SponsorProfile = {
+const MOCK_PROFILE = {
   companyName: 'Acme Racing Co.',
   contactName: 'John Smith',
   contactEmail: 'sponsor@acme-racing.com',
@@ -109,7 +33,7 @@ const MOCK_PROFILE: SponsorProfile = {
   },
 };
 
-const MOCK_NOTIFICATIONS: NotificationSettings = {
+const MOCK_NOTIFICATIONS = {
   emailNewSponsorships: true,
   emailWeeklyReport: true,
   emailRaceAlerts: false,
@@ -118,581 +42,71 @@ const MOCK_NOTIFICATIONS: NotificationSettings = {
   emailContractExpiry: true,
 };
 
-const MOCK_PRIVACY: PrivacySettings = {
+const MOCK_PRIVACY = {
   publicProfile: true,
   showStats: false,
   showActiveSponsorships: true,
   allowDirectContact: true,
 };
 
-const INDUSTRY_OPTIONS = [
-  'Racing Equipment',
-  'Automotive',
-  'Technology',
-  'Gaming & Esports',
-  'Energy Drinks',
-  'Apparel',
-  'Financial Services',
-  'Other',
-];
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function SavedIndicator({ visible }: { visible: boolean }) {
-  const shouldReduceMotion = useReducedMotion();
-  
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: 20 }}
-      animate={{ opacity: visible ? 1 : 0, x: visible ? 0 : 20 }}
-      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
-      className="flex items-center gap-2 text-performance-green"
-    >
-      <CheckCircle className="w-4 h-4" />
-      <span className="text-sm font-medium">Changes saved</span>
-    </motion.div>
-  );
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
 export default function SponsorSettingsPage() {
-  const shouldReduceMotion = useReducedMotion();
+  const router = useRouter();
   const [profile, setProfile] = useState(MOCK_PROFILE);
   const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
-  const [privacy, setPrivacy] = useState(MOCK_PRIVACY);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
 
   const handleSaveProfile = async () => {
     setSaving(true);
     await new Promise(resolve => setTimeout(resolve, 800));
+    console.log('Profile saved:', profile);
     setSaving(false);
     setSaved(true);
     setTimeout(() => setSaved(false), 3000);
   };
 
   const handleDeleteAccount = async () => {
-    if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone. All sponsorship data will be permanently removed.')) {
-      // Call the logout action and handle result
-      const result = await logoutAction();
-      if (result.isErr()) {
-        console.error('Logout failed:', result.getError());
-        // Could show error toast here
-        return;
-      }
-      // Redirect to login after successful logout
-      window.location.href = '/auth/login';
+    setIsDeleting(true);
+    const result = await logoutAction();
+    if (result.isErr()) {
+      console.error('Logout failed:', result.getError());
+      setIsDeleting(false);
+      return;
     }
+    router.push('/auth/login');
   };
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: shouldReduceMotion ? 0 : 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
+  const viewData = {
+    profile: MOCK_PROFILE,
+    notifications: MOCK_NOTIFICATIONS,
+    privacy: MOCK_PRIVACY,
   };
 
   return (
-    <Box
-      maxWidth="4xl"
-      mx="auto"
-      py={8}
-      px={4}
-      as={motion.div}
-      // @ts-ignore
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
-    >
-      {/* Header */}
-      <Box as={motion.div} variants={itemVariants}>
-        <PageHeader
-          icon={Settings}
-          title="Sponsor Settings"
-          description="Manage your company profile, notifications, and security preferences"
-          action={<SavedIndicator visible={saved} />}
-        />
-      </Box>
-
-      {/* Company Profile */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card className="mb-6 overflow-hidden">
-          <SectionHeader
-            icon={Building2}
-            title="Company Profile"
-            description="Your public-facing company information"
-          />
-          <Box p={6} className="space-y-6">
-            {/* Company Basic Info */}
-            <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
-              <FormField label="Company Name" icon={Building2} required>
-                <Input
-                  type="text"
-                  value={profile.companyName}
-                  onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
-                  placeholder="Your company name"
-                />
-              </FormField>
-
-              <FormField label="Industry">
-                <Box as="select"
-                  value={profile.industry}
-                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setProfile({ ...profile, industry: e.target.value })}
-                  w="full"
-                  px={3}
-                  py={2}
-                  bg="bg-iron-gray"
-                  border
-                  borderColor="border-charcoal-outline"
-                  rounded="lg"
-                  color="text-white"
-                  className="focus:outline-none focus:border-primary-blue"
-                >
-                  {INDUSTRY_OPTIONS.map(industry => (
-                    <option key={industry} value={industry}>{industry}</option>
-                  ))}
-                </Box>
-              </FormField>
-            </Box>
-
-            {/* Contact Information */}
-            <Box pt={4} borderTop borderColor="border-charcoal-outline/50">
-              <Heading level={3} fontSize="sm" weight="semibold" color="text-gray-400" mb={4}>
-                Contact Information
-              </Heading>
-              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
-                <FormField label="Contact Name" icon={User} required>
-                  <Input
-                    type="text"
-                    value={profile.contactName}
-                    onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
-                    placeholder="Full name"
-                  />
-                </FormField>
-
-                <FormField label="Contact Email" icon={Mail} required>
-                  <Input
-                    type="email"
-                    value={profile.contactEmail}
-                    onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
-                    placeholder="sponsor@company.com"
-                  />
-                </FormField>
-
-                <FormField label="Phone Number" icon={Phone}>
-                  <Input
-                    type="tel"
-                    value={profile.contactPhone}
-                    onChange={(e) => setProfile({ ...profile, contactPhone: e.target.value })}
-                    placeholder="+1 (555) 123-4567"
-                  />
-                </FormField>
-
-                <FormField label="Website" icon={Globe}>
-                  <Input
-                    type="url"
-                    value={profile.website}
-                    onChange={(e) => setProfile({ ...profile, website: e.target.value })}
-                    placeholder="https://company.com"
-                  />
-                </FormField>
-              </Box>
-            </Box>
-
-            {/* Address */}
-            <Box pt={4} borderTop borderColor="border-charcoal-outline/50">
-              <Heading level={3} fontSize="sm" weight="semibold" color="text-gray-400" mb={4}>
-                Business Address
-              </Heading>
-              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
-                <Box colSpan={{ base: 1, md: 2 }}>
-                  <FormField label="Street Address" icon={MapPin}>
-                    <Input
-                      type="text"
-                      value={profile.address.street}
-                      onChange={(e) => setProfile({
-                        ...profile,
-                        address: { ...profile.address, street: e.target.value }
-                      })}
-                      placeholder="123 Main Street"
-                    />
-                  </FormField>
-                </Box>
-
-                <FormField label="City">
-                  <Input
-                    type="text"
-                    value={profile.address.city}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      address: { ...profile.address, city: e.target.value }
-                    })}
-                    placeholder="City"
-                  />
-                </FormField>
-
-                <FormField label="Postal Code">
-                  <Input
-                    type="text"
-                    value={profile.address.postalCode}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      address: { ...profile.address, postalCode: e.target.value }
-                    })}
-                    placeholder="12345"
-                  />
-                </FormField>
-
-                <FormField label="Country">
-                  <Input
-                    type="text"
-                    value={profile.address.country}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      address: { ...profile.address, country: e.target.value }
-                    })}
-                    placeholder="Country"
-                  />
-                </FormField>
-
-                <FormField label="Tax ID / VAT Number" icon={FileText}>
-                  <Input
-                    type="text"
-                    value={profile.taxId}
-                    onChange={(e) => setProfile({ ...profile, taxId: e.target.value })}
-                    placeholder="XX12-3456789"
-                  />
-                </FormField>
-              </Box>
-            </Box>
-
-            {/* Description */}
-            <Box pt={4} borderTop borderColor="border-charcoal-outline/50">
-              <FormField label="Company Description">
-                <Box as="textarea"
-                  value={profile.description}
-                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setProfile({ ...profile, description: e.target.value })}
-                  placeholder="Tell potential sponsorship partners about your company, products, and what you're looking for in sponsorship opportunities..."
-                  rows={4}
-                  w="full"
-                  px={4}
-                  py={3}
-                  bg="bg-iron-gray"
-                  border
-                  borderColor="border-charcoal-outline"
-                  rounded="lg"
-                  color="text-white"
-                  className="placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
-                />
-                <Text size="xs" color="text-gray-500" block mt={1}>
-                  This description appears on your public sponsor profile.
-                </Text>
-              </FormField>
-            </Box>
-
-            {/* Social Links */}
-            <Box pt={4} borderTop borderColor="border-charcoal-outline/50">
-              <Heading level={3} fontSize="sm" weight="semibold" color="text-gray-400" mb={4}>
-                Social Media
-              </Heading>
-              <Box display="grid" gridCols={{ base: 1, md: 3 }} gap={6}>
-                <FormField label="Twitter / X" icon={LinkIcon}>
-                  <Input
-                    type="text"
-                    value={profile.socialLinks.twitter}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      socialLinks: { ...profile.socialLinks, twitter: e.target.value }
-                    })}
-                    placeholder="@username"
-                  />
-                </FormField>
-
-                <FormField label="LinkedIn" icon={LinkIcon}>
-                  <Input
-                    type="text"
-                    value={profile.socialLinks.linkedin}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      socialLinks: { ...profile.socialLinks, linkedin: e.target.value }
-                    })}
-                    placeholder="company-name"
-                  />
-                </FormField>
-
-                <FormField label="Instagram" icon={LinkIcon}>
-                  <Input
-                    type="text"
-                    value={profile.socialLinks.instagram}
-                    onChange={(e) => setProfile({
-                      ...profile,
-                      socialLinks: { ...profile.socialLinks, instagram: e.target.value }
-                    })}
-                    placeholder="@username"
-                  />
-                </FormField>
-              </Box>
-            </Box>
-
-            {/* Logo Upload */}
-            <Box pt={4} borderTop borderColor="border-charcoal-outline/50">
-              <FormField label="Company Logo" icon={ImageIcon}>
-                <Stack direction="row" align="start" gap={6}>
-                  <Box w="24" h="24" rounded="xl" bg="bg-gradient-to-br from-iron-gray to-deep-graphite" border borderColor="border-charcoal-outline" borderStyle="dashed" display="flex" alignItems="center" justifyContent="center" overflow="hidden">
-                    {profile.logoUrl ? (
-                      <Image src={profile.logoUrl} alt="Company logo" width={96} height={96} objectFit="cover" />
-                    ) : (
-                      <Building2 className="w-10 h-10 text-gray-600" />
-                    )}
-                  </Box>
-                  <Box flexGrow={1}>
-                    <Stack direction="row" align="center" gap={3}>
-                      <Text as="label" cursor="pointer">
-                        <input
-                          type="file"
-                          accept="image/png,image/jpeg,image/svg+xml"
-                          className="hidden"
-                        />
-                        <Box px={4} py={2} rounded="lg" bg="bg-iron-gray" border borderColor="border-charcoal-outline" color="text-gray-300" transition className="hover:bg-charcoal-outline" display="flex" alignItems="center" gap={2}>
-                          <Upload className="w-4 h-4" />
-                          <Text>Upload Logo</Text>
-                        </Box>
-                      </Text>
-                      {profile.logoUrl && (
-                        <Button variant="secondary" className="text-sm text-gray-400">
-                          Remove
-                        </Button>
-                      )}
-                    </Stack>
-                    <Text size="xs" color="text-gray-500" block mt={2}>
-                      PNG, JPEG, or SVG. Max 2MB. Recommended size: 400x400px.
-                    </Text>
-                  </Box>
-                </Stack>
-              </FormField>
-            </Box>
-
-            {/* Save Button */}
-            <Box pt={6} borderTop borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="end" gap={4}>
-              <Button
-                variant="primary"
-                onClick={handleSaveProfile}
-                disabled={saving}
-                className="min-w-[160px]"
-              >
-                {saving ? (
-                  <Stack direction="row" align="center" gap={2}>
-                    <Box w="4" h="4" border borderColor="border-white/30" borderTopColor="border-t-white" rounded="full" animate="spin" />
-                    <Text>Saving...</Text>
-                  </Stack>
-                ) : (
-                  <Stack direction="row" align="center" gap={2}>
-                    <Save className="w-4 h-4" />
-                    <Text>Save Profile</Text>
-                  </Stack>
-                )}
-              </Button>
-            </Box>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Notification Preferences */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card className="mb-6 overflow-hidden">
-          <SectionHeader
-            icon={Bell}
-            title="Email Notifications"
-            description="Control which emails you receive from GridPilot"
-            color="text-warning-amber"
-          />
-          <Box p={6}>
-            <Box className="space-y-1">
-              <Toggle
-                checked={notifications.emailNewSponsorships}
-                onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
-                label="Sponsorship Approvals"
-                description="Receive confirmation when your sponsorship requests are approved"
-              />
-              <Toggle
-                checked={notifications.emailWeeklyReport}
-                onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
-                label="Weekly Analytics Report"
-                description="Get a weekly summary of your sponsorship performance"
-              />
-              <Toggle
-                checked={notifications.emailRaceAlerts}
-                onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
-                label="Race Day Alerts"
-                description="Be notified when sponsored leagues have upcoming races"
-              />
-              <Toggle
-                checked={notifications.emailPaymentAlerts}
-                onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
-                label="Payment & Invoice Notifications"
-                description="Receive invoices and payment confirmations"
-              />
-              <Toggle
-                checked={notifications.emailNewOpportunities}
-                onChange={(checked) => setNotifications({ ...notifications, emailNewOpportunities: checked })}
-                label="New Sponsorship Opportunities"
-                description="Get notified about new leagues and drivers seeking sponsors"
-              />
-              <Toggle
-                checked={notifications.emailContractExpiry}
-                onChange={(checked) => setNotifications({ ...notifications, emailContractExpiry: checked })}
-                label="Contract Expiry Reminders"
-                description="Receive reminders before your sponsorship contracts expire"
-              />
-            </Box>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Privacy & Visibility */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card className="mb-6 overflow-hidden">
-          <SectionHeader
-            icon={Eye}
-            title="Privacy & Visibility"
-            description="Control how your profile appears to others"
-            color="text-performance-green"
-          />
-          <Box p={6}>
-            <Box className="space-y-1">
-              <Toggle
-                checked={privacy.publicProfile}
-                onChange={(checked) => setPrivacy({ ...privacy, publicProfile: checked })}
-                label="Public Profile"
-                description="Allow leagues, teams, and drivers to view your sponsor profile"
-              />
-              <Toggle
-                checked={privacy.showStats}
-                onChange={(checked) => setPrivacy({ ...privacy, showStats: checked })}
-                label="Show Sponsorship Statistics"
-                description="Display your total sponsorships and investment amounts"
-              />
-              <Toggle
-                checked={privacy.showActiveSponsorships}
-                onChange={(checked) => setPrivacy({ ...privacy, showActiveSponsorships: checked })}
-                label="Show Active Sponsorships"
-                description="Let others see which leagues and teams you currently sponsor"
-              />
-              <Toggle
-                checked={privacy.allowDirectContact}
-                onChange={(checked) => setPrivacy({ ...privacy, allowDirectContact: checked })}
-                label="Allow Direct Contact"
-                description="Enable leagues and teams to send you sponsorship proposals"
-              />
-            </Box>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Security */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card className="mb-6 overflow-hidden">
-          <SectionHeader
-            icon={Shield}
-            title="Account Security"
-            description="Protect your sponsor account"
-            color="text-primary-blue"
-          />
-          <Box p={6} className="space-y-4">
-            <Box display="flex" alignItems="center" justifyContent="between" py={3} borderBottom borderColor="border-charcoal-outline/50">
-              <Stack direction="row" align="center" gap={4}>
-                <Box p={2} rounded="lg" bg="bg-iron-gray">
-                  <Key className="w-5 h-5 text-gray-400" />
-                </Box>
-                <Box>
-                  <Text color="text-gray-200" weight="medium" block>Password</Text>
-                  <Text size="sm" color="text-gray-500" block>Last changed 3 months ago</Text>
-                </Box>
-              </Stack>
-              <Button variant="secondary">
-                Change Password
-              </Button>
-            </Box>
-
-            <Box display="flex" alignItems="center" justifyContent="between" py={3} borderBottom borderColor="border-charcoal-outline/50">
-              <Stack direction="row" align="center" gap={4}>
-                <Box p={2} rounded="lg" bg="bg-iron-gray">
-                  <Smartphone className="w-5 h-5 text-gray-400" />
-                </Box>
-                <Box>
-                  <Text color="text-gray-200" weight="medium" block>Two-Factor Authentication</Text>
-                  <Text size="sm" color="text-gray-500" block>Add an extra layer of security to your account</Text>
-                </Box>
-              </Stack>
-              <Button variant="secondary">
-                Enable 2FA
-              </Button>
-            </Box>
-
-            <Box display="flex" alignItems="center" justifyContent="between" py={3}>
-              <Stack direction="row" align="center" gap={4}>
-                <Box p={2} rounded="lg" bg="bg-iron-gray">
-                  <Lock className="w-5 h-5 text-gray-400" />
-                </Box>
-                <Box>
-                  <Text color="text-gray-200" weight="medium" block>Active Sessions</Text>
-                  <Text size="sm" color="text-gray-500" block>Manage devices where you&apos;re logged in</Text>
-                </Box>
-              </Stack>
-              <Button variant="secondary">
-                View Sessions
-              </Button>
-            </Box>
-          </Box>
-        </Card>
-      </Box>
-
-      {/* Danger Zone */}
-      <Box as={motion.div} variants={itemVariants}>
-        <Card className="border-racing-red/30 overflow-hidden">
-          <Box p={5} borderBottom borderColor="border-racing-red/30" bg="bg-gradient-to-r from-racing-red/10 to-transparent">
-            <Heading level={2} fontSize="lg" weight="semibold" color="text-racing-red" icon={<Box p={2} rounded="lg" bg="bg-racing-red/10"><AlertCircle className="w-5 h-5 text-racing-red" /></Box>}>
-              Danger Zone
-            </Heading>
-          </Box>
-          <Box p={6}>
-            <Box display="flex" alignItems="center" justifyContent="between">
-              <Stack direction="row" align="center" gap={4}>
-                <Box p={2} rounded="lg" bg="bg-racing-red/10">
-                  <Trash2 className="w-5 h-5 text-racing-red" />
-                </Box>
-                <Box>
-                  <Text color="text-gray-200" weight="medium" block>Delete Sponsor Account</Text>
-                  <Text size="sm" color="text-gray-500" block>
-                    Permanently delete your account and all associated sponsorship data.
-                    This action cannot be undone.
-                  </Text>
-                </Box>
-              </Stack>
-              <Button
-                variant="secondary"
-                onClick={handleDeleteAccount}
-                className="text-racing-red border-racing-red/30 hover:bg-racing-red/10"
-              >
-                Delete Account
-              </Button>
-            </Box>
-          </Box>
-        </Card>
-      </Box>
-    </Box>
+    <>
+      <SponsorSettingsTemplate 
+        viewData={viewData}
+        profile={profile}
+        setProfile={setProfile as any}
+        notifications={notifications}
+        setNotifications={setNotifications as any}
+        onSaveProfile={handleSaveProfile}
+        onDeleteAccount={() => setIsDeleteDialogOpen(true)}
+        saving={saving}
+        saved={saved}
+      />
+      <ConfirmDialog
+        isOpen={isDeleteDialogOpen}
+        onClose={() => setIsDeleteDialogOpen(false)}
+        onConfirm={handleDeleteAccount}
+        title="Delete Sponsor Account"
+        description="Are you sure you want to delete your sponsor account? This action cannot be undone. All sponsorship data, contracts, and history will be permanently removed."
+        confirmLabel="Delete Account"
+        variant="danger"
+        isLoading={isDeleting}
+      />
+    </>
   );
 }
\ No newline at end of file
diff --git a/apps/website/app/teams/[id]/TeamDetailPageClient.tsx b/apps/website/app/teams/[id]/TeamDetailPageClient.tsx
index 6fea72564..92b84ac70 100644
--- a/apps/website/app/teams/[id]/TeamDetailPageClient.tsx
+++ b/apps/website/app/teams/[id]/TeamDetailPageClient.tsx
@@ -36,13 +36,6 @@ export function TeamDetailPageClient({ viewData }: TeamDetailPageClientProps) {
     alert('Remove member functionality would be implemented here');
   };
   
-  const handleChangeRole = (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
-    // This would call an API to change the role
-    console.log('Change role:', driverId, newRole);
-    // In a real implementation, you'd have a mutation hook here
-    alert('Change role functionality would be implemented here');
-  };
-  
   const handleGoBack = () => {
     router.back();
   };
@@ -55,7 +48,6 @@ export function TeamDetailPageClient({ viewData }: TeamDetailPageClientProps) {
       onTabChange={handleTabChange}
       onUpdate={handleUpdate}
       onRemoveMember={handleRemoveMember}
-      onChangeRole={handleChangeRole}
       onGoBack={handleGoBack}
     />
   );
diff --git a/apps/website/app/teams/leaderboard/page.tsx b/apps/website/app/teams/leaderboard/page.tsx
index 8b0c873a5..8a054843f 100644
--- a/apps/website/app/teams/leaderboard/page.tsx
+++ b/apps/website/app/teams/leaderboard/page.tsx
@@ -1,56 +1,15 @@
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { TeamService } from '@/lib/services/teams/TeamService';
-import { Trophy } from 'lucide-react';
-import { redirect } from 'next/navigation';
-import { routes } from '@/lib/routing/RouteConfig';
+import { notFound } from 'next/navigation';
+import { TeamLeaderboardPageQuery } from '@/lib/page-queries/TeamLeaderboardPageQuery';
 import { TeamLeaderboardPageWrapper } from './TeamLeaderboardPageWrapper';
-import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-
-// ============================================================================
-// MAIN PAGE COMPONENT
-// ============================================================================
 
 export default async function TeamLeaderboardPage() {
-  // Manual wiring: create dependencies
-  const service = new TeamService();
+  const query = new TeamLeaderboardPageQuery();
+  const result = await query.execute();
 
-  // Fetch data through service
-  const result = await service.getAllTeams();
-
-  // Handle result
-  let data = null;
-  let error = null;
-  
-  if (result.isOk()) {
-    data = result.unwrap().map(t => new TeamSummaryViewModel(t));
-  } else {
-    const domainError = result.getError();
-    error = new Error(domainError.message);
+  if (result.isErr()) {
+    notFound();
   }
 
-  const hasData = (data?.length ?? 0) > 0;
-
-  // Handle loading state (should be fast since we're using async/await)
-  const isLoading = false;
-  const retry = () => {
-    // In server components, we can't retry without a reload
-    redirect(routes.team.detail('leaderboard'));
-  };
-
-  return (
-    <PageWrapper
-      data={hasData ? data : null}
-      isLoading={isLoading}
-      error={error}
-      retry={retry}
-      Template={TeamLeaderboardPageWrapper}
-      loading={{ variant: 'full-screen', message: 'Loading team leaderboard...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: Trophy,
-        title: 'No teams found',
-        description: 'There are no teams in the system yet.',
-      }}
-    />
-  );
+  const data = result.unwrap();
+  return <TeamLeaderboardPageWrapper data={data.teams} />;
 }
diff --git a/apps/website/components/actions/ActionFiltersBar.tsx b/apps/website/components/actions/ActionFiltersBar.tsx
new file mode 100644
index 000000000..9e3f8477c
--- /dev/null
+++ b/apps/website/components/actions/ActionFiltersBar.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Select } from '@/ui/Select';
+import { Input } from '@/ui/Input';
+
+export function ActionFiltersBar() {
+  const [filter, setFilter] = useState('all');
+  
+  return (
+    <Box 
+      h="12" 
+      borderBottom 
+      borderColor="border-[#23272B]" 
+      display="flex" 
+      alignItems="center" 
+      px={6} 
+      bg="bg-[#0C0D0F]" 
+      gap={6}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>Filter:</Text>
+        <Select 
+          options={[
+            { label: 'All Types', value: 'all' },
+            { label: 'User Update', value: 'user' },
+            { label: 'Onboarding', value: 'onboarding' }
+          ]}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          fullWidth={false}
+        />
+      </Box>
+      <Box display="flex" alignItems="center" gap={2}>
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>Status:</Text>
+        <Select 
+          options={[
+            { label: 'All Status', value: 'all' },
+            { label: 'Completed', value: 'completed' },
+            { label: 'Pending', value: 'pending' },
+            { label: 'Failed', value: 'failed' }
+          ]}
+          value="all"
+          onChange={() => {}}
+          fullWidth={false}
+        />
+      </Box>
+      <Box ml="auto">
+        <Input 
+          placeholder="SEARCH_ID..." 
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/actions/ActionList.tsx b/apps/website/components/actions/ActionList.tsx
new file mode 100644
index 000000000..5025e60be
--- /dev/null
+++ b/apps/website/components/actions/ActionList.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { ActionItem } from '@/lib/queries/ActionsPageQuery';
+import { ActionStatusBadge } from './ActionStatusBadge';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+
+interface ActionListProps {
+  actions: ActionItem[];
+}
+
+export function ActionList({ actions }: ActionListProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Timestamp</TableHeader>
+          <TableHeader>Type</TableHeader>
+          <TableHeader>Initiator</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Details</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {actions.map((action) => (
+          <TableRow 
+            key={action.id} 
+            clickable
+          >
+            <TableCell>
+              <Text font="mono" size="xs" color="text-gray-400">{action.timestamp}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" weight="medium" color="text-gray-200">{action.type}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{action.initiator}</Text>
+            </TableCell>
+            <TableCell>
+              <ActionStatusBadge status={action.status} />
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">
+                {action.details}
+              </Text>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/actions/ActionStatusBadge.tsx b/apps/website/components/actions/ActionStatusBadge.tsx
new file mode 100644
index 000000000..818fd00f2
--- /dev/null
+++ b/apps/website/components/actions/ActionStatusBadge.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface ActionStatusBadgeProps {
+  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
+}
+
+export function ActionStatusBadge({ status }: ActionStatusBadgeProps) {
+  const styles = {
+    PENDING: { bg: 'bg-amber-500/10', text: 'text-[#FFBE4D]', border: 'border-amber-500/20' },
+    COMPLETED: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
+    FAILED: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
+    IN_PROGRESS: { bg: 'bg-blue-500/10', text: 'text-[#198CFF]', border: 'border-blue-500/20' },
+  };
+
+  const config = styles[status];
+
+  return (
+    <Box 
+      as="span" 
+      px={2} 
+      py={0.5} 
+      rounded="sm" 
+      bg={config.bg} 
+      border 
+      borderColor={config.border}
+      display="inline-block"
+    >
+      <Text 
+        size="xs" 
+        weight="bold" 
+        color={config.text} 
+        uppercase 
+        letterSpacing="tight"
+        fontSize="10px"
+      >
+        {status.replace('_', ' ')}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/website/components/actions/ActionsHeader.tsx b/apps/website/components/actions/ActionsHeader.tsx
new file mode 100644
index 000000000..02792c91d
--- /dev/null
+++ b/apps/website/components/actions/ActionsHeader.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Activity } from 'lucide-react';
+import { StatusIndicator } from '@/ui/StatusIndicator';
+
+interface ActionsHeaderProps {
+  title: string;
+}
+
+export function ActionsHeader({ title }: ActionsHeaderProps) {
+  return (
+    <Box 
+      as="header" 
+      h="16" 
+      borderBottom 
+      borderColor="border-[#23272B]" 
+      display="flex" 
+      alignItems="center" 
+      px={6} 
+      bg="bg-[#141619]"
+    >
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box 
+          w="2" 
+          h="6" 
+          bg="bg-[#198CFF]" 
+          rounded="sm" 
+          shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
+        />
+        <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
+          {title}
+        </Text>
+      </Box>
+      <Box ml="auto" display="flex" alignItems="center" gap={4}>
+        <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/admin/AdminDangerZonePanel.tsx b/apps/website/components/admin/AdminDangerZonePanel.tsx
new file mode 100644
index 000000000..17d3506e5
--- /dev/null
+++ b/apps/website/components/admin/AdminDangerZonePanel.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface AdminDangerZonePanelProps {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+/**
+ * AdminDangerZonePanel
+ * 
+ * Semantic panel for destructive or dangerous admin actions.
+ * Restrained but clear warning styling.
+ */
+export function AdminDangerZonePanel({
+  title,
+  description,
+  children
+}: AdminDangerZonePanelProps) {
+  return (
+    <Card borderColor="border-error-red/30" bg="bg-error-red/5">
+      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={6}>
+        <Box>
+          <Heading level={4} weight="bold" color="text-error-red">
+            {title}
+          </Heading>
+          <Text size="sm" color="text-gray-400" block mt={1}>
+            {description}
+          </Text>
+        </Box>
+        <Box>
+          {children}
+        </Box>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/apps/website/components/admin/AdminDataTable.tsx b/apps/website/components/admin/AdminDataTable.tsx
new file mode 100644
index 000000000..c298b7624
--- /dev/null
+++ b/apps/website/components/admin/AdminDataTable.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+
+interface AdminDataTableProps {
+  children: React.ReactNode;
+  maxHeight?: string | number;
+}
+
+/**
+ * AdminDataTable
+ * 
+ * Semantic wrapper for high-density admin tables.
+ * Provides a consistent container with "Precision Racing Minimal" styling.
+ */
+export function AdminDataTable({
+  children,
+  maxHeight
+}: AdminDataTableProps) {
+  return (
+    <Card p={0} overflow="hidden">
+      <Box 
+        overflow="auto" 
+        maxHeight={maxHeight}
+      >
+        {children}
+      </Box>
+    </Card>
+  );
+}
diff --git a/apps/website/components/admin/AdminEmptyState.tsx b/apps/website/components/admin/AdminEmptyState.tsx
new file mode 100644
index 000000000..8716a5a78
--- /dev/null
+++ b/apps/website/components/admin/AdminEmptyState.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface AdminEmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+/**
+ * AdminEmptyState
+ * 
+ * Semantic empty state for admin lists and tables.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function AdminEmptyState({
+  icon,
+  title,
+  description,
+  action
+}: AdminEmptyStateProps) {
+  return (
+    <Stack center py={20} gap={4}>
+      <Icon icon={icon} size={12} color="#23272B" />
+      <Box textAlign="center">
+        <Text size="lg" weight="bold" color="text-white" block>
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" color="text-gray-500" block mt={1}>
+            {description}
+          </Text>
+        )}
+      </Box>
+      {action && (
+        <Box mt={2}>
+          {action}
+        </Box>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/admin/AdminHeaderPanel.tsx b/apps/website/components/admin/AdminHeaderPanel.tsx
new file mode 100644
index 000000000..3150b6a98
--- /dev/null
+++ b/apps/website/components/admin/AdminHeaderPanel.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+
+interface AdminHeaderPanelProps {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  isLoading?: boolean;
+}
+
+/**
+ * AdminHeaderPanel
+ * 
+ * Semantic header for admin pages.
+ * Includes title, description, actions, and a progress line for loading states.
+ */
+export function AdminHeaderPanel({
+  title,
+  description,
+  actions,
+  isLoading = false
+}: AdminHeaderPanelProps) {
+  return (
+    <Box position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" justify="between">
+        <Box>
+          <Heading level={1} weight="bold" color="text-white">
+            {title}
+          </Heading>
+          {description && (
+            <Text size="sm" color="text-gray-400" block mt={1}>
+              {description}
+            </Text>
+          )}
+        </Box>
+        {actions && (
+          <Stack direction="row" align="center" gap={3}>
+            {actions}
+          </Stack>
+        )}
+      </Stack>
+      <Box position="absolute" bottom="0" left="0" w="full">
+        <ProgressLine isLoading={isLoading} />
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/admin/AdminSectionHeader.tsx b/apps/website/components/admin/AdminSectionHeader.tsx
new file mode 100644
index 000000000..6158dad9c
--- /dev/null
+++ b/apps/website/components/admin/AdminSectionHeader.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface AdminSectionHeaderProps {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+}
+
+/**
+ * AdminSectionHeader
+ * 
+ * Semantic header for sections within admin pages.
+ * Follows "Precision Racing Minimal" theme: dense, clear hierarchy.
+ */
+export function AdminSectionHeader({
+  title,
+  description,
+  actions
+}: AdminSectionHeaderProps) {
+  return (
+    <Stack direction="row" align="center" justify="between" mb={4}>
+      <Box>
+        <Heading level={3} weight="bold" color="text-white">
+          {title}
+        </Heading>
+        {description && (
+          <Text size="xs" color="text-gray-500" block mt={0.5}>
+            {description}
+          </Text>
+        )}
+      </Box>
+      {actions && (
+        <Stack direction="row" align="center" gap={2}>
+          {actions}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/admin/AdminStatsPanel.tsx b/apps/website/components/admin/AdminStatsPanel.tsx
new file mode 100644
index 000000000..f1d72b7ad
--- /dev/null
+++ b/apps/website/components/admin/AdminStatsPanel.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Grid } from '@/ui/Grid';
+import { StatCard } from '@/ui/StatCard';
+import { LucideIcon } from 'lucide-react';
+
+interface AdminStat {
+  label: string;
+  value: string | number;
+  icon: LucideIcon;
+  variant?: 'blue' | 'purple' | 'green' | 'orange';
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+interface AdminStatsPanelProps {
+  stats: AdminStat[];
+}
+
+/**
+ * AdminStatsPanel
+ * 
+ * Semantic container for admin statistics.
+ * Renders a grid of StatCards.
+ */
+export function AdminStatsPanel({ stats }: AdminStatsPanelProps) {
+  return (
+    <Grid cols={1} mdCols={2} lgCols={4} gap={4}>
+      {stats.map((stat, index) => (
+        <StatCard
+          key={stat.label}
+          label={stat.label}
+          value={stat.value}
+          icon={stat.icon}
+          variant={stat.variant}
+          trend={stat.trend}
+          delay={index * 0.05}
+        />
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/website/components/admin/AdminToolbar.tsx b/apps/website/components/admin/AdminToolbar.tsx
new file mode 100644
index 000000000..f01457f49
--- /dev/null
+++ b/apps/website/components/admin/AdminToolbar.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+
+interface AdminToolbarProps {
+  children: React.ReactNode;
+  leftContent?: React.ReactNode;
+}
+
+/**
+ * AdminToolbar
+ * 
+ * Semantic toolbar for admin pages.
+ * Used for filters, search, and secondary actions.
+ */
+export function AdminToolbar({
+  children,
+  leftContent
+}: AdminToolbarProps) {
+  return (
+    <Card p={3} bg="bg-charcoal/50" borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" justify="between" gap={4} wrap>
+        {leftContent && (
+          <Box flexGrow={1}>
+            {leftContent}
+          </Box>
+        )}
+        <Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
+          {children}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/apps/website/components/admin/AdminUsersTable.tsx b/apps/website/components/admin/AdminUsersTable.tsx
new file mode 100644
index 000000000..071728a01
--- /dev/null
+++ b/apps/website/components/admin/AdminUsersTable.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import React from 'react';
+import { 
+  Table, 
+  TableHead, 
+  TableBody, 
+  TableRow, 
+  TableHeader, 
+  TableCell 
+} from '@/ui/Table';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
+import { UserStatusTag } from './UserStatusTag';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { Shield, Trash2, MoreVertical } from 'lucide-react';
+import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
+
+interface AdminUsersTableProps {
+  users: AdminUsersViewData['users'];
+  selectedUserIds: string[];
+  onSelectUser: (userId: string) => void;
+  onSelectAll: () => void;
+  onUpdateStatus: (userId: string, status: string) => void;
+  onDeleteUser: (userId: string) => void;
+  deletingUserId?: string | null;
+}
+
+/**
+ * AdminUsersTable
+ * 
+ * Semantic table for managing users.
+ * High-density, instrument-grade UI.
+ */
+export function AdminUsersTable({
+  users,
+  selectedUserIds,
+  onSelectUser,
+  onSelectAll,
+  onUpdateStatus,
+  onDeleteUser,
+  deletingUserId
+}: AdminUsersTableProps) {
+  const allSelected = users.length > 0 && selectedUserIds.length === users.length;
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader width="10">
+            <SimpleCheckbox 
+              checked={allSelected}
+              onChange={onSelectAll}
+              aria-label="Select all users"
+            />
+          </TableHeader>
+          <TableHeader>User</TableHeader>
+          <TableHeader>Roles</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Last Login</TableHeader>
+          <TableHeader textAlign="right">Actions</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id} variant={selectedUserIds.includes(user.id) ? 'highlight' : 'default'}>
+            <TableCell>
+              <SimpleCheckbox 
+                checked={selectedUserIds.includes(user.id)}
+                onChange={() => onSelectUser(user.id)}
+                aria-label={`Select user ${user.displayName}`}
+              />
+            </TableCell>
+            <TableCell>
+              <Stack direction="row" align="center" gap={3}>
+                <Box 
+                  bg="bg-primary-blue/10" 
+                  rounded="full" 
+                  p={2} 
+                  border 
+                  borderColor="border-primary-blue/20"
+                >
+                  <Icon icon={Shield} size={4} color="#198CFF" />
+                </Box>
+                <Box>
+                  <Text weight="semibold" color="text-white" block>
+                    {user.displayName}
+                  </Text>
+                  <Text size="xs" color="text-gray-500" block>
+                    {user.email}
+                  </Text>
+                </Box>
+              </Stack>
+            </TableCell>
+            <TableCell>
+              <Stack direction="row" gap={1.5} wrap>
+                {user.roles.map((role) => (
+                  <Box 
+                    key={role}
+                    px={2} 
+                    py={0.5} 
+                    rounded="full" 
+                    bg="bg-charcoal-outline/30" 
+                    border 
+                    borderColor="border-charcoal-outline"
+                  >
+                    <Text size="xs" weight="medium" color="text-gray-300">
+                      {role}
+                    </Text>
+                  </Box>
+                ))}
+              </Stack>
+            </TableCell>
+            <TableCell>
+              <UserStatusTag status={user.status} />
+            </TableCell>
+            <TableCell>
+              <Text size="sm" color="text-gray-400">
+                {user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Stack direction="row" align="center" justify="end" gap={2}>
+                {user.status === 'active' ? (
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => onUpdateStatus(user.id, 'suspended')}
+                  >
+                    Suspend
+                  </Button>
+                ) : user.status === 'suspended' ? (
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => onUpdateStatus(user.id, 'active')}
+                  >
+                    Activate
+                  </Button>
+                ) : null}
+                
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => onDeleteUser(user.id)}
+                  disabled={deletingUserId === user.id}
+                  icon={<Icon icon={Trash2} size={3} />}
+                >
+                  {deletingUserId === user.id ? '...' : ''}
+                </Button>
+                
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  icon={<Icon icon={MoreVertical} size={4} />}
+                >
+                  {''}
+                </Button>
+              </Stack>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/admin/BulkActionBar.tsx b/apps/website/components/admin/BulkActionBar.tsx
new file mode 100644
index 000000000..034a63ada
--- /dev/null
+++ b/apps/website/components/admin/BulkActionBar.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface BulkActionBarProps {
+  selectedCount: number;
+  actions: {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+    icon?: React.ReactNode;
+  }[];
+  onClearSelection: () => void;
+}
+
+/**
+ * BulkActionBar
+ * 
+ * Floating action bar that appears when items are selected in a table.
+ */
+export function BulkActionBar({
+  selectedCount,
+  actions,
+  onClearSelection
+}: BulkActionBarProps) {
+  return (
+    <AnimatePresence>
+      {selectedCount > 0 && (
+        <Box
+          as={motion.div}
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          position="fixed"
+          bottom="8"
+          left="1/2"
+          translateX="-1/2"
+          zIndex={50}
+          bg="bg-surface-charcoal"
+          border
+          borderColor="border-primary-blue/50"
+          rounded="xl"
+          shadow="xl"
+          px={6}
+          py={4}
+          bgOpacity={0.9}
+          blur="md"
+        >
+          <Stack direction="row" align="center" gap={8}>
+            <Stack direction="row" align="center" gap={3}>
+              <Box bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
+                <Text size="xs" weight="bold" color="text-white">
+                  {selectedCount}
+                </Text>
+              </Box>
+              <Text size="sm" weight="medium" color="text-white">
+                Items Selected
+              </Text>
+            </Stack>
+
+            <Box w="px" h="6" bg="bg-charcoal-outline" />
+
+            <Stack direction="row" align="center" gap={3}>
+              {actions.map((action) => (
+                <Button
+                  key={action.label}
+                  size="sm"
+                  variant={action.variant === 'danger' ? 'secondary' : (action.variant || 'primary')}
+                  onClick={action.onClick}
+                  icon={action.icon}
+                >
+                  {action.label}
+                </Button>
+              ))}
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={onClearSelection}
+              >
+                Cancel
+              </Button>
+            </Stack>
+          </Stack>
+        </Box>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/website/components/admin/UserFilters.tsx b/apps/website/components/admin/UserFilters.tsx
index ae7b83ce8..de355865e 100644
--- a/apps/website/components/admin/UserFilters.tsx
+++ b/apps/website/components/admin/UserFilters.tsx
@@ -2,14 +2,13 @@
 
 import React from 'react';
 import { Filter, Search } from 'lucide-react';
-import { Card } from '@/ui/Card';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Select } from '@/ui/Select';
+import { AdminToolbar } from './AdminToolbar';
 
 interface UserFiltersProps {
   search: string;
@@ -31,13 +30,11 @@ export function UserFilters({
   onClearFilters,
 }: UserFiltersProps) {
   return (
-    <Card>
-      <Stack gap={4}>
-        <Stack direction="row" align="center" justify="between">
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={Filter} size={4} color="#9ca3af" />
-            <Text weight="medium" color="text-white">Filters</Text>
-          </Stack>
+    <AdminToolbar
+      leftContent={
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={Filter} size={4} color="#9ca3af" />
+          <Text weight="medium" color="text-white">Filters</Text>
           {(search || roleFilter || statusFilter) && (
             <Button
               onClick={onClearFilters}
@@ -48,39 +45,38 @@ export function UserFilters({
             </Button>
           )}
         </Stack>
-        
-        <Grid cols={3} gap={4}>
-          <Input
-            type="text"
-            placeholder="Search by email or name..."
-            value={search}
-            onChange={(e) => onSearch(e.target.value)}
-            icon={<Icon icon={Search} size={4} color="#9ca3af" />}
-          />
+      }
+    >
+      <Input
+        type="text"
+        placeholder="Search by email or name..."
+        value={search}
+        onChange={(e) => onSearch(e.target.value)}
+        icon={<Icon icon={Search} size={4} color="#9ca3af" />}
+        width="300px"
+      />
 
-          <Select
-            value={roleFilter}
-            onChange={(e) => onFilterRole(e.target.value)}
-            options={[
-              { value: '', label: 'All Roles' },
-              { value: 'owner', label: 'Owner' },
-              { value: 'admin', label: 'Admin' },
-              { value: 'user', label: 'User' },
-            ]}
-          />
+      <Select
+        value={roleFilter}
+        onChange={(e) => onFilterRole(e.target.value)}
+        options={[
+          { value: '', label: 'All Roles' },
+          { value: 'owner', label: 'Owner' },
+          { value: 'admin', label: 'Admin' },
+          { value: 'user', label: 'User' },
+        ]}
+      />
 
-          <Select
-            value={statusFilter}
-            onChange={(e) => onFilterStatus(e.target.value)}
-            options={[
-              { value: '', label: 'All Status' },
-              { value: 'active', label: 'Active' },
-              { value: 'suspended', label: 'Suspended' },
-              { value: 'deleted', label: 'Deleted' },
-            ]}
-          />
-        </Grid>
-      </Stack>
-    </Card>
+      <Select
+        value={statusFilter}
+        onChange={(e) => onFilterStatus(e.target.value)}
+        options={[
+          { value: '', label: 'All Status' },
+          { value: 'active', label: 'Active' },
+          { value: 'suspended', label: 'Suspended' },
+          { value: 'deleted', label: 'Deleted' },
+        ]}
+      />
+    </AdminToolbar>
   );
 }
diff --git a/apps/website/components/admin/UserStatusTag.tsx b/apps/website/components/admin/UserStatusTag.tsx
new file mode 100644
index 000000000..8e08b0d03
--- /dev/null
+++ b/apps/website/components/admin/UserStatusTag.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { StatusBadge } from '@/ui/StatusBadge';
+import { 
+  CheckCircle2, 
+  AlertTriangle, 
+  XCircle, 
+  Clock,
+  LucideIcon
+} from 'lucide-react';
+
+export type UserStatus = 'active' | 'suspended' | 'deleted' | 'pending';
+
+interface UserStatusTagProps {
+  status: UserStatus | string;
+}
+
+interface StatusConfig {
+  variant: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
+  icon: LucideIcon;
+  label: string;
+}
+
+/**
+ * UserStatusTag
+ * 
+ * Semantic status indicator for users.
+ * Maps status strings to appropriate visual variants and icons.
+ */
+export function UserStatusTag({ status }: UserStatusTagProps) {
+  const normalizedStatus = status.toLowerCase() as UserStatus;
+
+  const config: Record<UserStatus, StatusConfig> = {
+    active: {
+      variant: 'success',
+      icon: CheckCircle2,
+      label: 'Active'
+    },
+    suspended: {
+      variant: 'warning',
+      icon: AlertTriangle,
+      label: 'Suspended'
+    },
+    deleted: {
+      variant: 'error',
+      icon: XCircle,
+      label: 'Deleted'
+    },
+    pending: {
+      variant: 'pending',
+      icon: Clock,
+      label: 'Pending'
+    }
+  };
+
+  const { variant, icon, label } = config[normalizedStatus] || {
+    variant: 'neutral',
+    icon: Clock,
+    label: status
+  };
+
+  return (
+    <StatusBadge variant={variant} icon={icon}>
+      {label}
+    </StatusBadge>
+  );
+}
diff --git a/apps/website/components/auth/AuthCard.tsx b/apps/website/components/auth/AuthCard.tsx
new file mode 100644
index 000000000..30249eddb
--- /dev/null
+++ b/apps/website/components/auth/AuthCard.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface AuthCardProps {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+}
+
+/**
+ * AuthCard
+ * 
+ * A matte surface container for auth forms with a subtle accent glow.
+ */
+export function AuthCard({ children, title, description }: AuthCardProps) {
+  return (
+    <Box bg="surface-charcoal" border borderColor="outline-steel" rounded="lg" shadow="card" position="relative" overflow="hidden">
+      {/* Subtle top accent line */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        left="0" 
+        w="full" 
+        h="1px" 
+        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
+      />
+      
+      <Box p={{ base: 6, md: 8 }}>
+        <Box as="header" mb={8} textAlign="center">
+          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block>
+            {title}
+          </Text>
+          {description && (
+            <Text size="sm" color="text-med" block>
+              {description}
+            </Text>
+          )}
+        </Box>
+        
+        {children}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/auth/AuthFooterLinks.tsx b/apps/website/components/auth/AuthFooterLinks.tsx
new file mode 100644
index 000000000..35522b90c
--- /dev/null
+++ b/apps/website/components/auth/AuthFooterLinks.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface AuthFooterLinksProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthFooterLinks
+ * 
+ * Semantic container for links at the bottom of auth cards.
+ */
+export function AuthFooterLinks({ children }: AuthFooterLinksProps) {
+  return (
+    <Box as="footer" mt={8} pt={6} borderTop borderStyle="solid" borderColor="outline-steel">
+      <Stack gap={3} align="center" textAlign="center">
+        {children}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/auth/AuthForm.tsx b/apps/website/components/auth/AuthForm.tsx
new file mode 100644
index 000000000..cdd879f91
--- /dev/null
+++ b/apps/website/components/auth/AuthForm.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface AuthFormProps {
+  children: React.ReactNode;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+/**
+ * AuthForm
+ * 
+ * Semantic form wrapper for auth flows.
+ */
+export function AuthForm({ children, onSubmit }: AuthFormProps) {
+  return (
+    <Box as="form" onSubmit={onSubmit} noValidate>
+      <Stack gap={6}>
+        {children}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/auth/AuthProviderButtons.tsx b/apps/website/components/auth/AuthProviderButtons.tsx
new file mode 100644
index 000000000..df4fe9f30
--- /dev/null
+++ b/apps/website/components/auth/AuthProviderButtons.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface AuthProviderButtonsProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthProviderButtons
+ * 
+ * Container for social login buttons (Google, Discord, etc.)
+ */
+export function AuthProviderButtons({ children }: AuthProviderButtonsProps) {
+  return (
+    <Box display="grid" gridCols={1} gap={3} mb={6}>
+      {children}
+    </Box>
+  );
+}
diff --git a/apps/website/components/auth/AuthShell.tsx b/apps/website/components/auth/AuthShell.tsx
new file mode 100644
index 000000000..2c123e7fd
--- /dev/null
+++ b/apps/website/components/auth/AuthShell.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface AuthShellProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthShell
+ * 
+ * The outermost container for all authentication pages.
+ * Provides the "calm intensity" background and centered layout.
+ */
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" p={4} bg="base-black" position="relative" overflow="hidden">
+      {/* Subtle background glow - top right */}
+      <Box 
+        position="absolute" 
+        top="-10%" 
+        right="-10%" 
+        w="40%" 
+        h="40%" 
+        rounded="full" 
+        bg="rgba(25, 140, 255, 0.05)" 
+        blur="xl" 
+        pointerEvents="none"
+        aria-hidden="true"
+      />
+      {/* Subtle background glow - bottom left */}
+      <Box 
+        position="absolute" 
+        bottom="-10%" 
+        left="-10%" 
+        w="40%" 
+        h="40%" 
+        rounded="full" 
+        bg="rgba(78, 212, 224, 0.05)" 
+        blur="xl" 
+        pointerEvents="none"
+        aria-hidden="true"
+      />
+      
+      <Box w="full" maxWidth="400px" position="relative" zIndex={10} animate="fade-in">
+        {children}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/dashboard/ActivityFeedPanel.tsx b/apps/website/components/dashboard/ActivityFeedPanel.tsx
new file mode 100644
index 000000000..42f3682bf
--- /dev/null
+++ b/apps/website/components/dashboard/ActivityFeedPanel.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Panel } from '@/ui/Panel';
+import { Box } from '@/ui/Box';
+import { ActivityFeed } from '../feed/ActivityFeed';
+
+interface FeedItem {
+  id: string;
+  type: string;
+  headline: string;
+  body?: string;
+  timestamp: string;
+  formattedTime: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+}
+
+interface ActivityFeedPanelProps {
+  items: FeedItem[];
+  hasItems: boolean;
+}
+
+/**
+ * ActivityFeedPanel
+ * 
+ * A semantic wrapper for the activity feed.
+ */
+export function ActivityFeedPanel({ items, hasItems }: ActivityFeedPanelProps) {
+  return (
+    <Panel title="Activity Feed" padding={0}>
+      <Box px={6} pb={6}>
+        <ActivityFeed items={items} hasItems={hasItems} />
+      </Box>
+    </Panel>
+  );
+}
diff --git a/apps/website/components/dashboard/DashboardControlBar.tsx b/apps/website/components/dashboard/DashboardControlBar.tsx
new file mode 100644
index 000000000..a74dddb27
--- /dev/null
+++ b/apps/website/components/dashboard/DashboardControlBar.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+
+interface DashboardControlBarProps {
+  title: string;
+  actions?: React.ReactNode;
+}
+
+/**
+ * DashboardControlBar
+ * 
+ * The top header bar for page-level controls and context.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardControlBar({ title, actions }: DashboardControlBarProps) {
+  return (
+    <Box display="flex" h="full" alignItems="center" justifyContent="between" px={6}>
+      <Heading level={6} weight="bold">
+        {title}
+      </Heading>
+      <Stack direction="row" align="center" gap={4}>
+        {actions}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/dashboard/DashboardHeroWrapper.tsx b/apps/website/components/dashboard/DashboardHeroWrapper.tsx
index f47aaba31..dbdd557df 100644
--- a/apps/website/components/dashboard/DashboardHeroWrapper.tsx
+++ b/apps/website/components/dashboard/DashboardHeroWrapper.tsx
@@ -1,5 +1,3 @@
-
-
 import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { DashboardHero as UiDashboardHero } from '@/ui/DashboardHero';
@@ -48,10 +46,10 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
       }
       stats={
         <>
-          <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="var(--performance-green)" />
-          <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="var(--warning-amber)" />
-          <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="var(--primary-blue)" />
-          <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="var(--neon-purple)" />
+          <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="#10b981" />
+          <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="#FFBE4D" />
+          <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="#198CFF" />
+          <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="#a855f7" />
         </>
       }
     />
diff --git a/apps/website/components/dashboard/DashboardKpiRow.tsx b/apps/website/components/dashboard/DashboardKpiRow.tsx
new file mode 100644
index 000000000..c3256da93
--- /dev/null
+++ b/apps/website/components/dashboard/DashboardKpiRow.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/Grid';
+
+interface KpiItem {
+  label: string;
+  value: string | number;
+  color?: string;
+}
+
+interface DashboardKpiRowProps {
+  items: KpiItem[];
+}
+
+/**
+ * DashboardKpiRow
+ * 
+ * A horizontal row of key performance indicators with telemetry styling.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
+  return (
+    <Grid responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={4}>
+      {items.map((item, index) => (
+        <Box key={index} borderLeft pl={4} borderColor="var(--color-outline)">
+          <Text 
+            size="xs" 
+            weight="bold" 
+            uppercase 
+            letterSpacing="tighter" 
+            color="var(--color-text-low)"
+            block
+          >
+            {item.label}
+          </Text>
+          <Text 
+            size="xl" 
+            font="mono" 
+            weight="bold"
+            color={item.color || 'var(--color-text-high)'}
+          >
+            {item.value}
+          </Text>
+        </Box>
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/website/components/dashboard/DashboardRail.tsx b/apps/website/components/dashboard/DashboardRail.tsx
new file mode 100644
index 000000000..9ef1faa61
--- /dev/null
+++ b/apps/website/components/dashboard/DashboardRail.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface DashboardRailProps {
+  children: React.ReactNode;
+}
+
+/**
+ * DashboardRail
+ * 
+ * A thin sidebar rail for high-level navigation and status indicators.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardRail({ children }: DashboardRailProps) {
+  return (
+    <Box as="nav" display="flex" h="full" flexDirection="col" alignItems="center" py={4} gap={4}>
+      {children}
+    </Box>
+  );
+}
diff --git a/apps/website/components/dashboard/DashboardShell.tsx b/apps/website/components/dashboard/DashboardShell.tsx
new file mode 100644
index 000000000..f9958192f
--- /dev/null
+++ b/apps/website/components/dashboard/DashboardShell.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface DashboardShellProps {
+  children: React.ReactNode;
+  rail?: React.ReactNode;
+  controlBar?: React.ReactNode;
+}
+
+/**
+ * DashboardShell
+ * 
+ * The primary layout container for the Telemetry Workspace.
+ * Orchestrates the sidebar rail, top control bar, and main content area.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
+  return (
+    <Box display="flex" h="screen" overflow="hidden" bg="base-black" color="white">
+      {rail && (
+        <Box as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
+          {rail}
+        </Box>
+      )}
+      <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
+        {controlBar && (
+          <Box as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
+            {controlBar}
+          </Box>
+        )}
+        <Box as="main" flexGrow={1} overflow="auto" p={6}>
+          <Box maxWidth="7xl" mx="auto" display="flex" flexDirection="col" gap={6}>
+            {children}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/dashboard/QuickActions.tsx b/apps/website/components/dashboard/QuickActions.tsx
deleted file mode 100644
index 54a198cbc..000000000
--- a/apps/website/components/dashboard/QuickActions.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-import { routes } from '@/lib/routing/RouteConfig';
-import { Trophy, Users } from 'lucide-react';
-import { Box } from '@/ui/Box';
-import { Heading } from '@/ui/Heading';
-import { QuickActionItem } from '@/ui/QuickActionItem';
-
-export function QuickActions() {
-  return (
-    <Box>
-      <Heading level={3} mb={4}>Quick Actions</Heading>
-      <Box display="flex" flexDirection="col" gap={2}>
-        <QuickActionItem
-          href={routes.public.leagues}
-          label="Browse Leagues"
-          icon={Users}
-          iconVariant="blue"
-        />
-        <QuickActionItem
-          href={routes.public.leaderboards}
-          label="View Leaderboards"
-          icon={Trophy}
-          iconVariant="amber"
-        />
-      </Box>
-    </Box>
-  );
-}
diff --git a/apps/website/components/dashboard/RecentActivityTable.tsx b/apps/website/components/dashboard/RecentActivityTable.tsx
new file mode 100644
index 000000000..c5b4ba801
--- /dev/null
+++ b/apps/website/components/dashboard/RecentActivityTable.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { StatusDot } from '@/ui/StatusDot';
+
+export interface ActivityItem {
+  id: string;
+  type: string;
+  description: string;
+  timestamp: string;
+  status?: 'success' | 'warning' | 'critical' | 'info';
+}
+
+interface RecentActivityTableProps {
+  items: ActivityItem[];
+}
+
+/**
+ * RecentActivityTable
+ * 
+ * A high-density table for displaying recent events and telemetry logs.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function RecentActivityTable({ items }: RecentActivityTableProps) {
+  const getStatusColor = (status?: string) => {
+    switch (status) {
+      case 'success': return 'var(--color-success)';
+      case 'warning': return 'var(--color-warning)';
+      case 'critical': return 'var(--color-critical)';
+      default: return 'var(--color-primary)';
+    }
+  };
+
+  return (
+    <Box overflow="auto">
+      <Box as="table" w="full" textAlign="left">
+        <Box as="thead">
+          <Box as="tr" borderBottom borderColor="var(--color-outline)">
+            <Box as="th" pb={2}>
+              <Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
+            </Box>
+            <Box as="th" pb={2}>
+              <Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
+            </Box>
+            <Box as="th" pb={2}>
+              <Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
+            </Box>
+            <Box as="th" pb={2}>
+              <Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
+            </Box>
+          </Box>
+        </Box>
+        <Box as="tbody">
+          {items.map((item) => (
+            <Box key={item.id} as="tr" borderBottom borderColor="rgba(35, 39, 43, 0.5)" hoverBg="rgba(255, 255, 255, 0.05)" transition>
+              <Box as="td" py={3}>
+                <Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
+              </Box>
+              <Box as="td" py={3}>
+                <Text color="var(--color-text-med)" size="xs">{item.description}</Text>
+              </Box>
+              <Box as="td" py={3}>
+                <Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
+              </Box>
+              <Box as="td" py={3}>
+                <StatusDot color={getStatusColor(item.status)} size={1.5} />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/dashboard/TelemetryPanel.tsx b/apps/website/components/dashboard/TelemetryPanel.tsx
new file mode 100644
index 000000000..fc436ea5d
--- /dev/null
+++ b/apps/website/components/dashboard/TelemetryPanel.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Surface } from '@/ui/Surface';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+
+interface TelemetryPanelProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+/**
+ * TelemetryPanel
+ * 
+ * A dense, instrument-grade panel for displaying data and controls.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function TelemetryPanel({ title, children }: TelemetryPanelProps) {
+  return (
+    <Surface variant="dark" border rounded="sm" padding={4} shadow="sm">
+      <Heading level={6} mb={4} color="var(--color-text-low)">
+        {title}
+      </Heading>
+      <Box fontSize="sm">
+        {children}
+      </Box>
+    </Surface>
+  );
+}
diff --git a/apps/website/components/drivers/DriverPerformanceOverview.tsx b/apps/website/components/drivers/DriverPerformanceOverview.tsx
new file mode 100644
index 000000000..464ba6bcd
--- /dev/null
+++ b/apps/website/components/drivers/DriverPerformanceOverview.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface DriverPerformanceOverviewProps {
+  stats: {
+    wins: number;
+    podiums: number;
+    totalRaces: number;
+    consistency: number;
+    dnfs: number;
+    bestFinish: number;
+    avgFinish: number;
+  };
+}
+
+export function DriverPerformanceOverview({ stats }: DriverPerformanceOverviewProps) {
+  const winRate = stats.totalRaces > 0 ? (stats.wins / stats.totalRaces) * 100 : 0;
+  const podiumRate = stats.totalRaces > 0 ? (stats.podiums / stats.totalRaces) * 100 : 0;
+
+  const metrics = [
+    { label: 'Win Rate', value: `${winRate.toFixed(1)}%`, color: 'text-performance-green' },
+    { label: 'Podium Rate', value: `${podiumRate.toFixed(1)}%`, color: 'text-warning-amber' },
+    { label: 'Best Finish', value: `P${stats.bestFinish}`, color: 'text-white' },
+    { label: 'Avg Finish', value: `P${stats.avgFinish.toFixed(1)}`, color: 'text-gray-400' },
+    { label: 'Consistency', value: `${stats.consistency}%`, color: 'text-neon-aqua' },
+    { label: 'DNFs', value: stats.dnfs, color: 'text-red-500' },
+  ];
+
+  return (
+    <Box display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
+      <Heading level={3}>Performance Overview</Heading>
+      
+      <Box display="grid" gridCols={{ base: 2, md: 3, lg: 6 }} gap={6}>
+        {metrics.map((metric, index) => (
+          <Box key={index} display="flex" flexDirection="col" gap={1}>
+            <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+              {metric.label}
+            </Text>
+            <Text size="xl" weight="bold" font="mono" color={metric.color}>
+              {metric.value}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Visual Progress Bars */}
+      <Box display="flex" flexDirection="col" gap={4} mt={2}>
+        <Box display="flex" flexDirection="col" gap={2}>
+          <Box display="flex" justifyContent="between" alignItems="center">
+            <Text size="xs" weight="bold" color="text-gray-400">Win Rate</Text>
+            <Text size="xs" weight="bold" font="mono" color="text-performance-green">{winRate.toFixed(1)}%</Text>
+          </Box>
+          <Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
+            <Box 
+              h="full" 
+              bg="bg-performance-green" 
+              shadow="shadow-[0_0_8px_rgba(34,197,94,0.4)]" 
+              transition
+              width={`${winRate}%`}
+            />
+          </Box>
+        </Box>
+
+        <Box display="flex" flexDirection="col" gap={2}>
+          <Box display="flex" justifyContent="between" alignItems="center">
+            <Text size="xs" weight="bold" color="text-gray-400">Podium Rate</Text>
+            <Text size="xs" weight="bold" font="mono" color="text-warning-amber">{podiumRate.toFixed(1)}%</Text>
+          </Box>
+          <Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
+            <Box 
+              h="full" 
+              bg="bg-warning-amber" 
+              shadow="shadow-[0_0_8px_rgba(255,190,77,0.4)]" 
+              transition
+              width={`${podiumRate}%`}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverProfileHeader.tsx b/apps/website/components/drivers/DriverProfileHeader.tsx
new file mode 100644
index 000000000..b3b2e2ef1
--- /dev/null
+++ b/apps/website/components/drivers/DriverProfileHeader.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import React from 'react';
+import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { RatingBadge } from '@/ui/RatingBadge';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+import { SafetyRatingBadge } from './SafetyRatingBadge';
+
+interface DriverProfileHeaderProps {
+  name: string;
+  avatarUrl?: string | null;
+  nationality: string;
+  rating: number;
+  safetyRating?: number;
+  globalRank?: number;
+  bio?: string | null;
+  friendRequestSent: boolean;
+  onAddFriend: () => void;
+}
+
+export function DriverProfileHeader({
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  safetyRating = 92,
+  globalRank,
+  bio,
+  friendRequestSent,
+  onAddFriend,
+}: DriverProfileHeaderProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box position="relative" overflow="hidden" rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" p={{ base: 6, lg: 8 }}>
+      {/* Background Accents */}
+      <Box position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
+
+      <Box position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
+        {/* Avatar */}
+        <Box position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
+          <Image
+            src={avatarUrl || defaultAvatar}
+            alt={name}
+            fill
+            objectFit="cover"
+          />
+        </Box>
+
+        {/* Info */}
+        <Box display="flex" flexGrow={1} flexDirection="col" gap={4}>
+          <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
+            <Box>
+              <Stack direction="row" align="center" gap={3} mb={1}>
+                <Heading level={1}>{name}</Heading>
+                {globalRank && (
+                  <Box display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
+                    <Trophy size={12} color="#FFBE4D" />
+                    <Text size="xs" weight="bold" font="mono" color="text-warning-amber">
+                      #{globalRank}
+                    </Text>
+                  </Box>
+                )}
+              </Stack>
+              <Stack direction="row" align="center" gap={4}>
+                <Stack direction="row" align="center" gap={1.5}>
+                  <Globe size={14} color="#6B7280" />
+                  <Text size="sm" color="text-gray-400">{nationality}</Text>
+                </Stack>
+                <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+                <Stack direction="row" align="center" gap={2}>
+                  <RatingBadge rating={rating} size="sm" />
+                  <SafetyRatingBadge rating={safetyRating} size="sm" />
+                </Stack>
+              </Stack>
+            </Box>
+
+            <Box mt={{ base: 4, lg: 0 }}>
+              <Button
+                variant={friendRequestSent ? 'secondary' : 'primary'}
+                onClick={onAddFriend}
+                disabled={friendRequestSent}
+                icon={friendRequestSent ? <Check size={18} /> : <UserPlus size={18} />}
+              >
+                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
+              </Button>
+            </Box>
+          </Box>
+
+          {bio && (
+            <Box maxWidth="3xl">
+              <Text size="sm" color="text-gray-400" leading="relaxed">
+                {bio}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverProfileTabs.tsx b/apps/website/components/drivers/DriverProfileTabs.tsx
new file mode 100644
index 000000000..74d55a81f
--- /dev/null
+++ b/apps/website/components/drivers/DriverProfileTabs.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { LayoutDashboard, BarChart3, ShieldCheck } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+export type ProfileTab = 'overview' | 'stats' | 'ratings';
+
+interface DriverProfileTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+}
+
+export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsProps) {
+  const tabs = [
+    { id: 'overview', label: 'Overview', icon: LayoutDashboard },
+    { id: 'stats', label: 'Career Stats', icon: BarChart3 },
+    { id: 'ratings', label: 'Ratings', icon: ShieldCheck },
+  ] as const;
+
+  return (
+    <Box display="flex" alignItems="center" gap={1} borderBottom borderColor="border-charcoal-outline">
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        const Icon = tab.icon;
+        
+        return (
+          <Box
+            as="button"
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            position="relative"
+            display="flex"
+            alignItems="center"
+            gap={2}
+            px={6}
+            py={4}
+            transition
+            hoverBg="bg-white/5"
+            color={isActive ? 'text-primary-blue' : 'text-gray-500'}
+            hoverTextColor={isActive ? 'text-primary-blue' : 'text-gray-300'}
+          >
+            <Icon size={18} />
+            <Text size="sm" weight={isActive ? 'bold' : 'medium'} color="inherit">
+              {tab.label}
+            </Text>
+            
+            {isActive && (
+              <Box position="absolute" bottom="0" left="0" h="0.5" w="full" bg="bg-primary-blue" shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]" />
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverRacingProfile.tsx b/apps/website/components/drivers/DriverRacingProfile.tsx
new file mode 100644
index 000000000..49f756e8a
--- /dev/null
+++ b/apps/website/components/drivers/DriverRacingProfile.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { MapPin, Car, Clock, Users2, MailCheck } from 'lucide-react';
+
+interface DriverRacingProfileProps {
+  racingStyle?: string | null;
+  favoriteTrack?: string | null;
+  favoriteCar?: string | null;
+  availableHours?: string | null;
+  lookingForTeam?: boolean;
+  openToRequests?: boolean;
+}
+
+export function DriverRacingProfile({
+  racingStyle,
+  favoriteTrack,
+  favoriteCar,
+  availableHours,
+  lookingForTeam,
+  openToRequests,
+}: DriverRacingProfileProps) {
+  const details = [
+    { label: 'Racing Style', value: racingStyle || 'Not specified', icon: Users2 },
+    { label: 'Favorite Track', value: favoriteTrack || 'Not specified', icon: MapPin },
+    { label: 'Favorite Car', value: favoriteCar || 'Not specified', icon: Car },
+    { label: 'Availability', value: availableHours || 'Not specified', icon: Clock },
+  ];
+
+  return (
+    <Box display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Heading level={3}>Racing Profile</Heading>
+        <Stack direction="row" gap={2}>
+          {lookingForTeam && (
+            <Box display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={1}>
+              <Users2 size={12} color="#198CFF" />
+              <Text size="xs" weight="bold" color="text-primary-blue" uppercase letterSpacing="tight">Looking for Team</Text>
+            </Box>
+          )}
+          {openToRequests && (
+            <Box display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-performance-green/10" border borderColor="border-performance-green/20" px={3} py={1}>
+              <MailCheck size={12} color="#22C55E" />
+              <Text size="xs" weight="bold" color="text-performance-green" uppercase letterSpacing="tight">Open to Requests</Text>
+            </Box>
+          )}
+        </Stack>
+      </Box>
+
+      <Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
+        {details.map((detail, index) => {
+          const Icon = detail.icon;
+          return (
+            <Box key={index} display="flex" alignItems="center" gap={4} rounded="xl" border borderColor="border-charcoal-outline/50" bg="bg-deep-graphite/50" p={4}>
+              <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline/50" color="text-gray-400">
+                <Icon size={20} />
+              </Box>
+              <Box display="flex" flexDirection="col">
+                <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+                  {detail.label}
+                </Text>
+                <Text size="sm" weight="semibold" color="text-white">
+                  {detail.value}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverSearchBar.tsx b/apps/website/components/drivers/DriverSearchBar.tsx
new file mode 100644
index 000000000..e69fe85ef
--- /dev/null
+++ b/apps/website/components/drivers/DriverSearchBar.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { Search } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Input } from '@/ui/Input';
+
+interface DriverSearchBarProps {
+  query: string;
+  onChange: (query: string) => void;
+}
+
+export function DriverSearchBar({ query, onChange }: DriverSearchBarProps) {
+  return (
+    <Box position="relative" group>
+      <Input
+        value={query}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Search drivers by name or nationality..."
+        icon={<Search size={20} />}
+      />
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverStatsPanel.tsx b/apps/website/components/drivers/DriverStatsPanel.tsx
new file mode 100644
index 000000000..64c4be1f1
--- /dev/null
+++ b/apps/website/components/drivers/DriverStatsPanel.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface StatItem {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  color?: string;
+}
+
+interface DriverStatsPanelProps {
+  stats: StatItem[];
+}
+
+export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
+  return (
+    <Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
+      {stats.map((stat, index) => (
+        <Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+            {stat.label}
+          </Text>
+          <Box display="flex" alignItems="baseline" gap={1.5}>
+            <Text 
+              size="2xl" 
+              weight="bold" 
+              font="mono" 
+              color={stat.color || 'text-white'}
+            >
+              {stat.value}
+            </Text>
+            {stat.subValue && (
+              <Text size="xs" weight="bold" color="text-gray-600" font="mono">
+                {stat.subValue}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriverTable.tsx b/apps/website/components/drivers/DriverTable.tsx
new file mode 100644
index 000000000..73357791c
--- /dev/null
+++ b/apps/website/components/drivers/DriverTable.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { TrendingUp } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface DriverTableProps {
+  children: React.ReactNode;
+}
+
+export function DriverTable({ children }: DriverTableProps) {
+  return (
+    <Stack gap={4}>
+      <Stack direction="row" align="center" gap={3}>
+        <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
+          <TrendingUp size={20} color="#198CFF" />
+        </Box>
+        <Box>
+          <Heading level={2}>Driver Rankings</Heading>
+          <Text size="xs" color="text-gray-500">Top performers by skill rating</Text>
+        </Box>
+      </Stack>
+
+      <Box overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50">
+        <Box as="table" w="full" textAlign="left">
+          <Box as="thead">
+            <Box as="tr" borderBottom borderColor="border-charcoal-outline" bg="bg-deep-charcoal/80">
+              <Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="center" width="60px">#</Box>
+              <Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500">Driver</Box>
+              <Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" width="150px">Nationality</Box>
+              <Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="100px">Rating</Box>
+              <Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="80px">Wins</Box>
+            </Box>
+          </Box>
+          <Box as="tbody">
+            {children}
+          </Box>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/drivers/DriverTableRow.tsx b/apps/website/components/drivers/DriverTableRow.tsx
new file mode 100644
index 000000000..9fd2c5a72
--- /dev/null
+++ b/apps/website/components/drivers/DriverTableRow.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { RatingBadge } from '@/ui/RatingBadge';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+
+interface DriverTableRowProps {
+  rank: number;
+  name: string;
+  avatarUrl?: string | null;
+  nationality: string;
+  rating: number;
+  wins: number;
+  onClick: () => void;
+}
+
+export function DriverTableRow({
+  rank,
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  wins,
+  onClick,
+}: DriverTableRowProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box 
+      as="tr" 
+      onClick={onClick}
+      cursor="pointer"
+      transition
+      hoverBg="bg-primary-blue/5"
+      group
+      borderBottom
+      borderColor="border-charcoal-outline/50"
+    >
+      <Box as="td" px={6} py={4} textAlign="center">
+        <Text 
+          size="sm" 
+          weight="bold" 
+          font="mono" 
+          color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
+        >
+          {rank}
+        </Text>
+      </Box>
+      <Box as="td" px={6} py={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
+            <Image 
+              src={avatarUrl || defaultAvatar} 
+              alt={name} 
+              fill 
+              objectFit="cover"
+            />
+          </Box>
+          <Text 
+            size="sm" 
+            weight="semibold" 
+            color="text-white" 
+            groupHoverTextColor="text-primary-blue" 
+            transition
+          >
+            {name}
+          </Text>
+        </Stack>
+      </Box>
+      <Box as="td" px={6} py={4}>
+        <Text size="xs" color="text-gray-400">{nationality}</Text>
+      </Box>
+      <Box as="td" px={6} py={4} textAlign="right">
+        <RatingBadge rating={rating} size="sm" />
+      </Box>
+      <Box as="td" px={6} py={4} textAlign="right">
+        <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
+          {wins}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/DriversDirectoryHeader.tsx b/apps/website/components/drivers/DriversDirectoryHeader.tsx
new file mode 100644
index 000000000..b47a5b993
--- /dev/null
+++ b/apps/website/components/drivers/DriversDirectoryHeader.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React from 'react';
+import { Users, Trophy } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface DriverStat {
+  label: string;
+  value: string | number;
+  color?: string;
+  animate?: boolean;
+}
+
+interface DriversDirectoryHeaderProps {
+  totalDrivers: number;
+  activeDrivers: number;
+  totalWins: number;
+  totalRaces: number;
+  onViewLeaderboard: () => void;
+}
+
+export function DriversDirectoryHeader({
+  totalDrivers,
+  activeDrivers,
+  totalWins,
+  totalRaces,
+  onViewLeaderboard,
+}: DriversDirectoryHeaderProps) {
+  const stats: DriverStat[] = [
+    { label: 'drivers', value: totalDrivers, color: 'text-primary-blue' },
+    { label: 'active', value: activeDrivers, color: 'text-performance-green', animate: true },
+    { label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
+    { label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
+  ];
+
+  return (
+    <Box 
+      as="header" 
+      position="relative" 
+      overflow="hidden" 
+      rounded="2xl" 
+      border 
+      borderColor="border-charcoal-outline/50" 
+      bg="bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60" 
+      p={{ base: 8, lg: 10 }}
+    >
+      {/* Background Accents */}
+      <Box position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
+      <Box position="absolute" bottom="-16" left="-16" w="64" h="64" rounded="full" bg="bg-neon-aqua/5" blur="3xl" />
+
+      <Box position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={8}>
+        <Box maxWidth="2xl">
+          <Stack direction="row" align="center" gap={3} mb={4}>
+            <Box display="flex" h="12" w="12" alignItems="center" justifyContent="center" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" shadow="lg">
+              <Users size={24} color="#198CFF" />
+            </Box>
+            <Heading level={1}>Drivers</Heading>
+          </Stack>
+          
+          <Text size="lg" color="text-gray-400" block leading="relaxed">
+            Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
+          </Text>
+
+          <Box display="flex" flexWrap="wrap" gap={6} mt={6}>
+            {stats.map((stat, index) => (
+              <Stack key={index} direction="row" align="center" gap={2}>
+                <Box 
+                  w="2" 
+                  h="2" 
+                  rounded="full" 
+                  bg={stat.color?.replace('text-', 'bg-') || 'bg-primary-blue'} 
+                  animate={stat.animate ? 'pulse' : 'none'} 
+                />
+                <Text size="sm" color="text-gray-400">
+                  <Text as="span" weight="semibold" color="text-white">{stat.value}</Text> {stat.label}
+                </Text>
+              </Stack>
+            ))}
+          </Box>
+        </Box>
+
+        <Stack gap={2}>
+          <Button
+            variant="primary"
+            onClick={onViewLeaderboard}
+            icon={<Trophy size={20} />}
+          >
+            View Leaderboard
+          </Button>
+          <Text size="xs" color="text-gray-500" align="center" block>
+            See full driver rankings
+          </Text>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/drivers/SafetyRatingBadge.tsx b/apps/website/components/drivers/SafetyRatingBadge.tsx
new file mode 100644
index 000000000..784dc418a
--- /dev/null
+++ b/apps/website/components/drivers/SafetyRatingBadge.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { Shield } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface SafetyRatingBadgeProps {
+  rating: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SafetyRatingBadge({ rating, size = 'md' }: SafetyRatingBadgeProps) {
+  const getColor = (r: number) => {
+    if (r >= 90) return 'text-performance-green';
+    if (r >= 70) return 'text-warning-amber';
+    return 'text-red-500';
+  };
+
+  const getBgColor = (r: number) => {
+    if (r >= 90) return 'bg-performance-green/10';
+    if (r >= 70) return 'bg-warning-amber/10';
+    return 'bg-red-500/10';
+  };
+
+  const getBorderColor = (r: number) => {
+    if (r >= 90) return 'border-performance-green/20';
+    if (r >= 70) return 'border-warning-amber/20';
+    return 'border-red-500/20';
+  };
+
+  const sizeProps = {
+    sm: { px: 2, py: 0.5, gap: 1 },
+    md: { px: 3, py: 1, gap: 1.5 },
+    lg: { px: 4, py: 2, gap: 2 },
+  };
+
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+  };
+
+  const iconColors = {
+    'text-performance-green': '#22C55E',
+    'text-warning-amber': '#FFBE4D',
+    'text-red-500': '#EF4444',
+  };
+
+  const colorClass = getColor(rating);
+
+  return (
+    <Box 
+      display="inline-flex" 
+      alignItems="center" 
+      rounded="full" 
+      border 
+      bg={getBgColor(rating)}
+      borderColor={getBorderColor(rating)}
+      {...sizeProps[size]}
+    >
+      <Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
+      <Text 
+        size={size === 'lg' ? 'sm' : 'xs'} 
+        weight="bold" 
+        font="mono" 
+        color={colorClass}
+      >
+        SR {rating.toFixed(0)}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/AppErrorBoundaryView.tsx b/apps/website/components/errors/AppErrorBoundaryView.tsx
new file mode 100644
index 000000000..a530f2d55
--- /dev/null
+++ b/apps/website/components/errors/AppErrorBoundaryView.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface AppErrorBoundaryViewProps {
+  title: string;
+  description: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * AppErrorBoundaryView
+ * 
+ * Semantic container for error boundary content.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
+  return (
+    <Stack gap={6} align="center" fullWidth>
+      {/* Header Icon */}
+      <Box 
+        p={4} 
+        rounded="full" 
+        bg="bg-warning-amber" 
+        bgOpacity={0.1} 
+        border 
+        borderColor="border-warning-amber"
+      >
+        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
+      </Box>
+
+      {/* Typography */}
+      <Stack gap={2} align="center">
+        <Heading level={1} weight="bold">
+          <Text uppercase letterSpacing="tighter">
+            {title}
+          </Text>
+        </Heading>
+        <Text color="text-gray-400" align="center" maxWidth="md" leading="relaxed">
+          {description}
+        </Text>
+      </Stack>
+
+      {children}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/ErrorDetails.tsx b/apps/website/components/errors/ErrorDetails.tsx
new file mode 100644
index 000000000..7cfd3eb20
--- /dev/null
+++ b/apps/website/components/errors/ErrorDetails.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ChevronDown, ChevronUp, Copy, Terminal } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface ErrorDetailsProps {
+  error: Error & { digest?: string };
+}
+
+/**
+ * ErrorDetails
+ * 
+ * Handles the display of technical error information with a toggle.
+ * Part of the 500 route redesign.
+ */
+export function ErrorDetails({ error }: ErrorDetailsProps) {
+  const [showDetails, setShowDetails] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copyError = async () => {
+    const details = {
+      message: error.message,
+      digest: error.digest,
+      stack: error.stack,
+      url: typeof window !== 'undefined' ? window.location.href : 'unknown',
+      timestamp: new Date().toISOString(),
+    };
+    
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(details, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Silent fail
+    }
+  };
+
+  return (
+    <Stack gap={4} fullWidth pt={4} borderTop borderColor="border-white">
+      <Box 
+        as="button"
+        onClick={() => setShowDetails(!showDetails)}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        color="text-gray-500"
+        hoverTextColor="text-gray-300"
+        transition
+      >
+        <Icon icon={Terminal} size={3} />
+        <Text 
+          size="xs" 
+          weight="medium" 
+          uppercase 
+          letterSpacing="widest"
+          color="inherit"
+        >
+          {showDetails ? 'Hide Technical Logs' : 'Show Technical Logs'}
+        </Text>
+        {showDetails ? <Icon icon={ChevronUp} size={3} /> : <Icon icon={ChevronDown} size={3} />}
+      </Box>
+
+      {showDetails && (
+        <Stack gap={3}>
+          <Surface 
+            variant="dark" 
+            rounded="md" 
+            padding={4} 
+            fullWidth
+            maxHeight="48"
+            overflow="auto"
+            border
+            borderColor="border-white"
+            bgOpacity={0.4}
+            hideScrollbar={false}
+          >
+            <Text font="mono" size="xs" color="text-gray-500" block leading="relaxed">
+              {error.stack || 'No stack trace available'}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </Text>
+          </Surface>
+          
+          <Box display="flex" justifyContent="end">
+            <Button 
+              variant="secondary" 
+              size="sm"
+              onClick={copyError}
+              icon={<Icon icon={Copy} size={3} />}
+              height="8"
+              fontSize="10px"
+            >
+              {copied ? 'Copied to Clipboard' : 'Copy Error Details'}
+            </Button>
+          </Box>
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/ErrorDetailsBlock.tsx b/apps/website/components/errors/ErrorDetailsBlock.tsx
new file mode 100644
index 000000000..d9c7dc93e
--- /dev/null
+++ b/apps/website/components/errors/ErrorDetailsBlock.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+
+interface ErrorDetailsBlockProps {
+  error: Error & { digest?: string };
+}
+
+/**
+ * ErrorDetailsBlock
+ * 
+ * Semantic component for technical error details.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
+  const [showDetails, setShowDetails] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copyError = async () => {
+    const details = {
+      message: error.message,
+      digest: error.digest,
+      stack: error.stack,
+      url: typeof window !== 'undefined' ? window.location.href : 'unknown',
+      timestamp: new Date().toISOString(),
+    };
+    
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(details, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Silent fail
+    }
+  };
+
+  return (
+    <Stack gap={4} fullWidth pt={4} borderTop borderColor="border-white" bgOpacity={0.1}>
+      <Box 
+        as="button"
+        onClick={() => setShowDetails(!showDetails)}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        transition
+      >
+        <Text 
+          size="xs" 
+          color="text-gray-500" 
+          hoverTextColor="text-gray-300" 
+          uppercase 
+          letterSpacing="widest" 
+          weight="medium"
+          display="flex"
+          alignItems="center"
+          gap={2}
+        >
+          {showDetails ? <Icon icon={ChevronUp} size={3} /> : <Icon icon={ChevronDown} size={3} />}
+          {showDetails ? 'Hide Technical Logs' : 'Show Technical Logs'}
+        </Text>
+      </Box>
+
+      {showDetails && (
+        <Stack gap={3}>
+          <Surface 
+            variant="dark" 
+            rounded="md" 
+            padding={4} 
+            fullWidth
+            maxHeight="48"
+            overflow="auto"
+            border
+            borderColor="border-white"
+            bgOpacity={0.4}
+            hideScrollbar={false}
+          >
+            <Text font="mono" size="xs" color="text-gray-500" block leading="relaxed">
+              {error.stack || 'No stack trace available'}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </Text>
+          </Surface>
+          
+          <Box display="flex" justifyContent="end">
+            <Button 
+              variant="secondary" 
+              size="sm"
+              onClick={copyError}
+              icon={<Icon icon={Copy} size={3} />}
+              height="8"
+              fontSize="10px"
+            >
+              {copied ? 'Copied to Clipboard' : 'Copy Error Details'}
+            </Button>
+          </Box>
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/ErrorRecoveryActions.tsx b/apps/website/components/errors/ErrorRecoveryActions.tsx
new file mode 100644
index 000000000..d8b04e673
--- /dev/null
+++ b/apps/website/components/errors/ErrorRecoveryActions.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { RefreshCw, Home } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+
+interface ErrorRecoveryActionsProps {
+  onRetry: () => void;
+  onHome: () => void;
+}
+
+/**
+ * ErrorRecoveryActions
+ * 
+ * Semantic component for error recovery buttons.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function ErrorRecoveryActions({ onRetry, onHome }: ErrorRecoveryActionsProps) {
+  return (
+    <Box 
+      display="flex" 
+      flexWrap="wrap" 
+      alignItems="center" 
+      justifyContent="center" 
+      gap={3} 
+      fullWidth
+    >
+      <Button 
+        variant="primary" 
+        onClick={onRetry}
+        icon={<Icon icon={RefreshCw} size={4} />}
+        width="160px"
+      >
+        Retry Session
+      </Button>
+      <Button 
+        variant="secondary" 
+        onClick={onHome}
+        icon={<Icon icon={Home} size={4} />}
+        width="160px"
+      >
+        Return to Pits
+      </Button>
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/ErrorScreen.test.tsx b/apps/website/components/errors/ErrorScreen.test.tsx
new file mode 100644
index 000000000..773f827e5
--- /dev/null
+++ b/apps/website/components/errors/ErrorScreen.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ErrorScreen } from './ErrorScreen';
+
+describe('ErrorScreen', () => {
+  const mockError = new Error('Test error message');
+  (mockError as any).digest = 'test-digest';
+  (mockError as any).stack = 'test-stack-trace';
+
+  const mockReset = vi.fn();
+  const mockOnHome = vi.fn();
+
+  it('renders error message and system malfunction title', () => {
+    render(<ErrorScreen error={mockError} reset={mockReset} onHome={mockOnHome} />);
+    
+    expect(screen.getByText('System Malfunction')).toBeDefined();
+    expect(screen.getByText('Test error message')).toBeDefined();
+  });
+
+  it('calls reset when Retry Session is clicked', () => {
+    render(<ErrorScreen error={mockError} reset={mockReset} onHome={mockOnHome} />);
+    
+    const button = screen.getByText('Retry Session');
+    fireEvent.click(button);
+    
+    expect(mockReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onHome when Return to Pits is clicked', () => {
+    render(<ErrorScreen error={mockError} reset={mockReset} onHome={mockOnHome} />);
+    
+    const button = screen.getByText('Return to Pits');
+    fireEvent.click(button);
+    
+    expect(mockOnHome).toHaveBeenCalledTimes(1);
+  });
+
+  it('toggles technical logs visibility', () => {
+    render(<ErrorScreen error={mockError} reset={mockReset} onHome={mockOnHome} />);
+    
+    expect(screen.queryByText('test-stack-trace')).toBeNull();
+    
+    const toggle = screen.getByText('Show Technical Logs');
+    fireEvent.click(toggle);
+    
+    expect(screen.getByText(/test-stack-trace/)).toBeDefined();
+    expect(screen.getByText(/Digest: test-digest/)).toBeDefined();
+    
+    fireEvent.click(screen.getByText('Hide Technical Logs'));
+    expect(screen.queryByText(/test-stack-trace/)).toBeNull();
+  });
+});
diff --git a/apps/website/components/errors/ErrorScreen.tsx b/apps/website/components/errors/ErrorScreen.tsx
new file mode 100644
index 000000000..84dae6547
--- /dev/null
+++ b/apps/website/components/errors/ErrorScreen.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { Text } from '@/ui/Text';
+import { AppErrorBoundaryView } from './AppErrorBoundaryView';
+import { ErrorRecoveryActions } from './ErrorRecoveryActions';
+import { ErrorDetailsBlock } from './ErrorDetailsBlock';
+
+interface ErrorScreenProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+  onHome: () => void;
+}
+
+/**
+ * ErrorScreen
+ * 
+ * Semantic component for the root-level error boundary.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
+  return (
+    <Box 
+      as="main" 
+      minHeight="screen"
+      fullWidth
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="bg-deep-graphite"
+      position="relative"
+      overflow="hidden"
+      px={6}
+    >
+      {/* Background Accents */}
+      <Glow color="primary" size="xl" position="center" opacity={0.05} />
+      
+      <Surface 
+        variant="glass" 
+        border 
+        rounded="lg" 
+        padding={8} 
+        maxWidth="2xl"
+        fullWidth
+        position="relative"
+        zIndex={10}
+        shadow="xl"
+        borderColor="border-white"
+        bgOpacity={0.05}
+      >
+        <AppErrorBoundaryView 
+          title="System Malfunction"
+          description="The application encountered an unexpected state. Our telemetry has logged the incident."
+        >
+          {/* Error Message Summary */}
+          <Surface 
+            variant="dark" 
+            rounded="md" 
+            padding={4} 
+            fullWidth 
+            border 
+            borderColor="border-white" 
+            bgOpacity={0.2}
+          >
+            <Text font="mono" size="sm" color="text-warning-amber" block>
+              {error.message || 'Unknown execution error'}
+            </Text>
+          </Surface>
+
+          <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
+          
+          <ErrorDetailsBlock error={error} />
+        </AppErrorBoundaryView>
+      </Surface>
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/GlobalErrorScreen.tsx b/apps/website/components/errors/GlobalErrorScreen.tsx
new file mode 100644
index 000000000..6e12cae1a
--- /dev/null
+++ b/apps/website/components/errors/GlobalErrorScreen.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
+import { Button } from '@/ui/Button';
+
+interface GlobalErrorScreenProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+  onHome: () => void;
+}
+
+/**
+ * GlobalErrorScreen
+ * 
+ * A strong, minimal "system fault" view for the root global error boundary.
+ * Instrument-grade UI following the "Precision Racing Minimal" theme.
+ */
+export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenProps) {
+  return (
+    <Box 
+      as="main" 
+      minHeight="screen"
+      fullWidth
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="bg-base-black"
+      position="relative"
+      overflow="hidden"
+      px={6}
+    >
+      {/* Background Accents - Subtle telemetry vibe */}
+      <Glow color="primary" size="xl" position="center" opacity={0.03} />
+      
+      <Surface 
+        variant="dark" 
+        border 
+        rounded="none" 
+        padding={0} 
+        maxWidth="2xl"
+        fullWidth
+        position="relative"
+        zIndex={10}
+        borderColor="border-white"
+        bgOpacity={0.1}
+      >
+        {/* System Status Header */}
+        <Box 
+          borderBottom 
+          borderColor="border-white" 
+          bgOpacity={0.05} 
+          px={6} 
+          py={4}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Stack direction="row" gap={3} align="center">
+            <Icon icon={AlertTriangle} size={5} color="var(--warning-amber)" />
+            <Heading level={2} weight="bold">
+              <Text uppercase letterSpacing="widest" size="sm">
+                System Fault Detected
+              </Text>
+            </Heading>
+          </Stack>
+          <Text font="mono" size="xs" color="text-gray-500" uppercase>
+            Status: Critical
+          </Text>
+        </Box>
+
+        <Box p={8}>
+          <Stack gap={8}>
+            {/* Fault Description */}
+            <Stack gap={4}>
+              <Text color="text-gray-400" size="base" leading="relaxed">
+                The application kernel encountered an unrecoverable execution error. 
+                Telemetry has been captured for diagnostic review.
+              </Text>
+
+              <SystemStatusPanel error={error} />
+            </Stack>
+
+            {/* Recovery Actions */}
+            <RecoveryActions onRetry={reset} onHome={onHome} />
+          </Stack>
+        </Box>
+
+        {/* Footer / Metadata */}
+        <Box 
+          borderTop 
+          borderColor="border-white" 
+          bgOpacity={0.05} 
+          px={6} 
+          py={3}
+          display="flex"
+          justifyContent="end"
+        >
+          <Text font="mono" size="xs" color="text-gray-600">
+            GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
+          </Text>
+        </Box>
+      </Surface>
+    </Box>
+  );
+}
+
+/**
+ * SystemStatusPanel
+ * 
+ * Displays technical fault details in an instrument-grade panel.
+ */
+function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
+  return (
+    <Surface 
+      variant="dark" 
+      rounded="none" 
+      padding={4} 
+      fullWidth 
+      border 
+      borderColor="border-white" 
+      bgOpacity={0.2}
+    >
+      <Stack gap={3}>
+        <Box display="flex" alignItems="center" gap={2}>
+          <Icon icon={Terminal} size={3} color="var(--gray-500)" />
+          <Text font="mono" size="xs" color="text-gray-500" uppercase letterSpacing="wider">
+            Fault Log
+          </Text>
+        </Box>
+        <Text font="mono" size="sm" color="text-warning-amber" block>
+          {error.message || 'Unknown execution fault'}
+        </Text>
+        {error.digest && (
+          <Text font="mono" size="xs" color="text-gray-600" block>
+            Digest: {error.digest}
+          </Text>
+        )}
+      </Stack>
+    </Surface>
+  );
+}
+
+/**
+ * RecoveryActions
+ * 
+ * Clear, instrument-grade recovery options.
+ */
+function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
+  return (
+    <Box 
+      display="flex" 
+      flexWrap="wrap" 
+      alignItems="center" 
+      gap={4} 
+      fullWidth
+    >
+      <Button 
+        variant="primary" 
+        onClick={onRetry}
+        icon={<Icon icon={RefreshCw} size={4} />}
+        rounded="none"
+        px={8}
+      >
+        Reboot Session
+      </Button>
+      <Button 
+        variant="secondary" 
+        onClick={onHome}
+        icon={<Icon icon={Home} size={4} />}
+        rounded="none"
+        px={8}
+      >
+        Return to Pits
+      </Button>
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/NotFoundActions.tsx b/apps/website/components/errors/NotFoundActions.tsx
new file mode 100644
index 000000000..c7fa47626
--- /dev/null
+++ b/apps/website/components/errors/NotFoundActions.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface NotFoundActionsProps {
+  primaryLabel: string;
+  onPrimaryClick: () => void;
+}
+
+/**
+ * NotFoundActions
+ * 
+ * Semantic component for the primary actions on the 404 page.
+ * Follows "Precision Racing Minimal" theme with crisp styling.
+ */
+export function NotFoundActions({ primaryLabel, onPrimaryClick }: NotFoundActionsProps) {
+  return (
+    <Stack direction="row" gap={4} align="center" justify="center">
+      <Button 
+        variant="primary" 
+        size="lg" 
+        onClick={onPrimaryClick}
+        minWidth="200px"
+      >
+        {primaryLabel}
+      </Button>
+      
+      <Button
+        variant="secondary"
+        size="lg"
+        onClick={() => window.history.back()}
+      >
+        <Stack direction="row" gap={2} align="center">
+          <Box 
+            width={2} 
+            height={2} 
+            rounded="full" 
+            bg="soft-steel" 
+          />
+          <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-gray-400">
+            Previous Sector
+          </Text>
+        </Stack>
+      </Button>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/NotFoundCallToAction.tsx b/apps/website/components/errors/NotFoundCallToAction.tsx
new file mode 100644
index 000000000..d1792fbd2
--- /dev/null
+++ b/apps/website/components/errors/NotFoundCallToAction.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+
+interface NotFoundCallToActionProps {
+  label: string;
+  onClick: () => void;
+}
+
+/**
+ * NotFoundCallToAction
+ * 
+ * Semantic component for the primary action on the 404 page.
+ * Follows "Precision Racing Minimal" theme with crisp styling.
+ */
+export function NotFoundCallToAction({ label, onClick }: NotFoundCallToActionProps) {
+  return (
+    <Stack gap={4} align="center">
+      <Button 
+        variant="primary" 
+        size="lg" 
+        onClick={onClick}
+      >
+        {label}
+      </Button>
+      <Text size="xs" color="text-gray-500" uppercase letterSpacing="widest">
+        Telemetry connection lost
+      </Text>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/NotFoundDiagnostics.tsx b/apps/website/components/errors/NotFoundDiagnostics.tsx
new file mode 100644
index 000000000..7e3ca4aa0
--- /dev/null
+++ b/apps/website/components/errors/NotFoundDiagnostics.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface NotFoundDiagnosticsProps {
+  errorCode: string;
+}
+
+/**
+ * NotFoundDiagnostics
+ * 
+ * Semantic component for displaying technical error details.
+ * Styled as a telemetry status indicator.
+ */
+export function NotFoundDiagnostics({ errorCode }: NotFoundDiagnosticsProps) {
+  return (
+    <Stack gap={3} align="center">
+      <Box 
+        px={3} 
+        py={1} 
+        border 
+        borderColor="primary-accent" 
+        bg="primary-accent" 
+        bgOpacity={0.1}
+        rounded="sm"
+      >
+        <Text 
+          size="xs" 
+          weight="bold" 
+          color="text-primary-accent"
+          uppercase
+          letterSpacing="widest"
+        >
+          {errorCode}
+        </Text>
+      </Box>
+      <Text 
+        size="xs" 
+        color="text-gray-500" 
+        uppercase 
+        letterSpacing="widest"
+        weight="medium"
+      >
+        Telemetry connection lost // Sector data unavailable
+      </Text>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/NotFoundHelpLinks.tsx b/apps/website/components/errors/NotFoundHelpLinks.tsx
new file mode 100644
index 000000000..f5a70fcb8
--- /dev/null
+++ b/apps/website/components/errors/NotFoundHelpLinks.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface NotFoundHelpLinksProps {
+  links: Array<{ label: string; href: string }>;
+}
+
+/**
+ * NotFoundHelpLinks
+ * 
+ * Semantic component for secondary navigation on the 404 page.
+ * Styled as technical metadata links.
+ */
+export function NotFoundHelpLinks({ links }: NotFoundHelpLinksProps) {
+  return (
+    <Stack direction="row" gap={6} align="center" wrap center>
+      {links.map((link, index) => (
+        <React.Fragment key={link.href}>
+          <Box 
+            as="a" 
+            href={link.href}
+            transition
+            display="inline-block"
+          >
+            <Text
+              color="text-gray-400"
+              hoverTextColor="primary-accent"
+              weight="medium"
+              size="xs"
+              letterSpacing="widest"
+              uppercase
+            >
+              {link.label}
+            </Text>
+          </Box>
+          {index < links.length - 1 && (
+            <Box width="1px" height="12px" bg="border-gray" opacity={0.5} />
+          )}
+        </React.Fragment>
+      ))}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/errors/NotFoundScreen.tsx b/apps/website/components/errors/NotFoundScreen.tsx
new file mode 100644
index 000000000..33163980d
--- /dev/null
+++ b/apps/website/components/errors/NotFoundScreen.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { NotFoundActions } from './NotFoundActions';
+import { NotFoundHelpLinks } from './NotFoundHelpLinks';
+import { NotFoundDiagnostics } from './NotFoundDiagnostics';
+
+interface NotFoundScreenProps {
+  errorCode: string;
+  title: string;
+  message: string;
+  actionLabel: string;
+  onActionClick: () => void;
+}
+
+/**
+ * NotFoundScreen
+ * 
+ * App-specific semantic component for 404 states.
+ * Encapsulates the visual representation of the "Off Track" state.
+ * Redesigned for "Precision Racing Minimal" theme.
+ */
+export function NotFoundScreen({ 
+  errorCode, 
+  title, 
+  message, 
+  actionLabel, 
+  onActionClick 
+}: NotFoundScreenProps) {
+  const helpLinks = [
+    { label: 'Support', href: '/support' },
+    { label: 'Status', href: '/status' },
+    { label: 'Documentation', href: '/docs' },
+  ];
+
+  return (
+    <Box 
+      as="main" 
+      minHeight="100vh" 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="graphite-black" 
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background Glow Accent */}
+      <Glow color="primary" size="xl" opacity={0.1} position="center" />
+      
+      <Surface 
+        variant="glass" 
+        border 
+        padding={12} 
+        rounded="none" 
+        maxWidth="2xl"
+        fullWidth
+        mx={6}
+        position="relative"
+        zIndex={10}
+      >
+        <Stack gap={12} align="center" textAlign="center">
+          {/* Header Section */}
+          <Stack gap={4} align="center">
+            <NotFoundDiagnostics errorCode={errorCode} />
+            
+            <Text 
+              as="h1"
+              size="4xl" 
+              weight="bold"
+              color="text-white"
+              letterSpacing="tighter"
+              uppercase
+              block
+              leading="none"
+            >
+              {title}
+            </Text>
+          </Stack>
+
+          {/* Visual Separator */}
+          <Box width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" display="flex" alignItems="center" justifyContent="center">
+            <Box 
+              width={3} 
+              height={3} 
+              bg="primary-accent" 
+            />
+          </Box>
+
+          {/* Message Section */}
+          <Text 
+            size="xl" 
+            color="text-gray-400" 
+            maxWidth="lg"
+            leading="relaxed"
+            block
+            weight="medium"
+          >
+            {message}
+          </Text>
+
+          {/* Actions Section */}
+          <NotFoundActions 
+            primaryLabel={actionLabel} 
+            onPrimaryClick={onActionClick} 
+          />
+
+          {/* Footer Section */}
+          <Box pt={8} width="full">
+            <Box height="1px" width="full" bg="border-gray" opacity={0.1} mb={8} />
+            <NotFoundHelpLinks links={helpLinks} />
+          </Box>
+        </Stack>
+      </Surface>
+
+      {/* Subtle Edge Details */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="2px" 
+        bg="primary-accent"
+        opacity={0.1}
+      />
+      <Box 
+        position="absolute" 
+        bottom={0} 
+        left={0} 
+        right={0} 
+        height="2px" 
+        bg="primary-accent"
+        opacity={0.1}
+      />
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/RecoveryActions.tsx b/apps/website/components/errors/RecoveryActions.tsx
new file mode 100644
index 000000000..f950ad5bc
--- /dev/null
+++ b/apps/website/components/errors/RecoveryActions.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { RefreshCw, Home, LifeBuoy } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+
+interface RecoveryActionsProps {
+  onRetry: () => void;
+  onHome: () => void;
+}
+
+/**
+ * RecoveryActions
+ * 
+ * Provides primary and secondary recovery paths for the user.
+ * Part of the 500 route redesign.
+ */
+export function RecoveryActions({ onRetry, onHome }: RecoveryActionsProps) {
+  return (
+    <Box 
+      display="flex" 
+      flexWrap="wrap" 
+      alignItems="center" 
+      justifyContent="center" 
+      gap={3} 
+      fullWidth
+    >
+      <Button 
+        variant="primary" 
+        onClick={onRetry}
+        icon={<Icon icon={RefreshCw} size={4} />}
+        width="160px"
+      >
+        Retry Session
+      </Button>
+      <Button 
+        variant="secondary" 
+        onClick={onHome}
+        icon={<Icon icon={Home} size={4} />}
+        width="160px"
+      >
+        Return to Pits
+      </Button>
+      <Button 
+        variant="secondary" 
+        as="a"
+        href="https://support.gridpilot.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<Icon icon={LifeBuoy} size={4} />}
+        width="160px"
+      >
+        Contact Support
+      </Button>
+    </Box>
+  );
+}
diff --git a/apps/website/components/errors/ServerErrorPanel.tsx b/apps/website/components/errors/ServerErrorPanel.tsx
new file mode 100644
index 000000000..9c80b7a2a
--- /dev/null
+++ b/apps/website/components/errors/ServerErrorPanel.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface ServerErrorPanelProps {
+  message?: string;
+  incidentId?: string;
+}
+
+/**
+ * ServerErrorPanel
+ * 
+ * Displays the primary error information in an "instrument-grade" style.
+ * Part of the 500 route redesign.
+ */
+export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
+  return (
+    <Stack gap={6} align="center" fullWidth>
+      {/* Status Indicator */}
+      <Box 
+        p={4} 
+        rounded="full" 
+        bg="bg-warning-amber" 
+        bgOpacity={0.1} 
+        border 
+        borderColor="border-warning-amber"
+      >
+        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
+      </Box>
+
+      {/* Primary Message */}
+      <Stack gap={2} align="center">
+        <Heading level={1} weight="bold">
+          CRITICAL_SYSTEM_FAILURE
+        </Heading>
+        <Text color="text-gray-400" align="center" maxWidth="md">
+          The application engine encountered an unrecoverable state. 
+          Telemetry has been dispatched to engineering.
+        </Text>
+      </Stack>
+
+      {/* Technical Summary */}
+      <Surface 
+        variant="dark" 
+        rounded="md" 
+        padding={4} 
+        fullWidth 
+        border 
+        borderColor="border-white" 
+        bgOpacity={0.2}
+      >
+        <Stack gap={2}>
+          <Text font="mono" size="sm" color="text-warning-amber" block>
+            STATUS: 500_INTERNAL_SERVER_ERROR
+          </Text>
+          {message && (
+            <Text font="mono" size="xs" color="text-gray-400" block>
+              EXCEPTION: {message}
+            </Text>
+          )}
+          {incidentId && (
+            <Text font="mono" size="xs" color="text-gray-500" block>
+              INCIDENT_ID: {incidentId}
+            </Text>
+          )}
+        </Stack>
+      </Surface>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/home/HomeFeatureDescription.tsx b/apps/website/components/home/HomeFeatureDescription.tsx
new file mode 100644
index 000000000..2db165d6e
--- /dev/null
+++ b/apps/website/components/home/HomeFeatureDescription.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface HomeFeatureDescriptionProps {
+  lead: string;
+  items: string[];
+  quote?: string;
+  accentColor?: 'primary' | 'aqua' | 'amber' | 'gray';
+}
+
+/**
+ * HomeFeatureDescription - A semantic component for feature descriptions on the home page.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeFeatureDescription({
+  lead,
+  items,
+  quote,
+  accentColor = 'primary',
+}: HomeFeatureDescriptionProps) {
+  const borderColor = {
+    primary: 'primary-accent',
+    aqua: 'telemetry-aqua',
+    amber: 'warning-amber',
+    gray: 'border-gray',
+  }[accentColor];
+
+  const bgColor = {
+    primary: 'primary-accent/5',
+    aqua: 'telemetry-aqua/5',
+    amber: 'warning-amber/5',
+    gray: 'white/5',
+  }[accentColor];
+
+  return (
+    <Stack gap={6}>
+      <Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
+        {lead}
+      </Text>
+      <Box as="ul" display="flex" flexDirection="col" gap={2}>
+        {items.map((item, index) => (
+          <Box as="li" key={index} display="flex" alignItems="start" gap={2}>
+            <Text color="text-primary-accent">•</Text>
+            <Text size="sm" color="text-gray-500">{item}</Text>
+          </Box>
+        ))}
+      </Box>
+      {quote && (
+        <Box borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
+          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
+            {quote}
+          </Text>
+        </Box>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/home/HomeFeatureSection.tsx b/apps/website/components/home/HomeFeatureSection.tsx
new file mode 100644
index 000000000..e10031506
--- /dev/null
+++ b/apps/website/components/home/HomeFeatureSection.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { Panel } from '@/ui/Panel';
+import { Glow } from '@/ui/Glow';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Section } from '@/ui/Section';
+
+interface HomeFeatureSectionProps {
+  heading: string;
+  description: React.ReactNode;
+  mockup: React.ReactNode;
+  layout: 'text-left' | 'text-right';
+  accentColor?: 'primary' | 'aqua' | 'amber';
+}
+
+/**
+ * HomeFeatureSection - A semantic section highlighting a feature.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeFeatureSection({
+  heading,
+  description,
+  mockup,
+  layout,
+  accentColor = 'primary',
+}: HomeFeatureSectionProps) {
+  const accentBorderColor = {
+    primary: 'primary-accent/40',
+    aqua: 'telemetry-aqua/40',
+    amber: 'warning-amber/40',
+  }[accentColor];
+
+  const accentBgColor = {
+    primary: 'primary-accent',
+    aqua: 'telemetry-aqua',
+    amber: 'warning-amber',
+  }[accentColor];
+
+  const glowColor = ({
+    primary: 'primary',
+    aqua: 'aqua',
+    amber: 'amber',
+  }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
+
+  return (
+    <Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
+      <Glow 
+        color={glowColor} 
+        size="lg" 
+        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
+        opacity={0.02} 
+      />
+      
+      <Container>
+        <Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} alignItems="center">
+          {/* Text Content */}
+          <Box display="flex" flexDirection="col" gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
+            <Box display="flex" flexDirection="col" gap={4}>
+              <Box w="12" h="1" bg={accentBgColor} />
+              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
+                {heading}
+              </Heading>
+            </Box>
+            <Box color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
+              {description}
+            </Box>
+          </Box>
+
+          {/* Mockup Panel */}
+          <Box order={{ lg: layout === 'text-right' ? 1 : 2 }}>
+            <Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
+              <Box bg="graphite-black" minHeight="300px" display="flex" alignItems="center" justifyContent="center">
+                {mockup}
+              </Box>
+              {/* Decorative corner accents */}
+              <Box position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4} />
+              <Box position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4} />
+            </Panel>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/website/ui/DiscordCTA.tsx b/apps/website/components/home/HomeFooterCTA.tsx
similarity index 64%
rename from apps/website/ui/DiscordCTA.tsx
rename to apps/website/components/home/HomeFooterCTA.tsx
index 65571cab9..16c78ce8c 100644
--- a/apps/website/ui/DiscordCTA.tsx
+++ b/apps/website/components/home/HomeFooterCTA.tsx
@@ -1,80 +1,45 @@
+'use client';
 
-
-import { Box } from '@/ui/Box';
+import React from 'react';
 import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
 import { Glow } from '@/ui/Glow';
 import { Icon } from '@/ui/Icon';
 import { DiscordIcon } from '@/ui/icons/DiscordIcon';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
-import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/Grid';
 import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Section } from '@/ui/Section';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 
-export function DiscordCTA() {
+export function HomeFooterCTA() {
   const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
 
   return (
-    <Box 
-      as="section" 
-      bg="graphite-black" 
-      position="relative"
-      py={{ base: 20, md: 32 }}
-      borderBottom
-      borderColor="border-gray/50"
-      overflow="hidden"
-    >
+    <Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
       <Glow color="primary" size="xl" position="center" opacity={0.05} />
       
-      <Container size="lg" position="relative" zIndex={10}>
-        <Surface
-          variant="default"
-          padding={12}
-          border
-          rounded="none"
-          position="relative"
-          className="overflow-hidden bg-panel-gray/40"
-        >
+      <Container>
+        <Box position="relative" overflow="hidden" bg="panel-gray/40" border borderColor="border-gray" p={{ base: 8, md: 12 }}>
           {/* Discord brand accent */}
-          <Box 
-            position="absolute" 
-            top={0} 
-            left={0} 
-            right={0} 
-            height="1" 
-            bg="primary-accent"
-          />
+          <Box position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent" />
           
           <Stack align="center" gap={12} center>
             {/* Header */}
             <Stack align="center" gap={6}>
-              <Box
-                display="flex"
-                center
-                rounded="none"
-                w={{ base: "16", md: "20" }}
-                h={{ base: "16", md: "20" }}
-                bg="primary-accent/10"
-                border
-                borderColor="primary-accent/30"
-                className="relative"
-              >
+              <Box position="relative" display="flex" alignItems="center" justifyContent="center" w={{ base: 16, md: 20 }} h={{ base: 16, md: 20 }} bg="primary-accent/10" border borderColor="primary-accent/30">
                 <DiscordIcon color="text-primary-accent" size={40} />
                 <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
                 <Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
               </Box>
               
               <Stack gap={4} align="center">
-                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} className="tracking-tight">
+                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
                   Join the Grid on Discord
                 </Heading>
-                <Box 
-                  w="16" 
-                  h="1"
-                  bg="primary-accent"
-                />
+                <Box w="16" h="1" bg="primary-accent" />
               </Stack>
             </Stack>
 
@@ -82,7 +47,7 @@ export function DiscordCTA() {
             <Box maxWidth="2xl" mx="auto" textAlign="center">
               <Stack gap={6}>
                 <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
-                  GridPilot is a <span className="text-white font-bold">solo developer project</span> built for the community.
+                  GridPilot is a <Text as="span" color="text-white" weight="bold">solo developer project</Text> built for the community.
                 </Text>
                 <Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
                   We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
@@ -91,11 +56,7 @@ export function DiscordCTA() {
             </Box>
 
             {/* Benefits grid */}
-            <Box 
-              maxWidth="4xl" 
-              mx="auto" 
-              fullWidth
-            >
+            <Box maxWidth="4xl" mx="auto" fullWidth>
               <Grid cols={1} mdCols={2} gap={6}>
                 <BenefitItem 
                   icon={MessageSquare} 
@@ -129,7 +90,9 @@ export function DiscordCTA() {
                 rel="noopener noreferrer"
                 variant="primary"
                 size="lg"
-                className="px-16 py-4"
+                px={16}
+                py={4}
+                h="auto"
                 icon={<DiscordIcon size={24} />}
               >
                 Join Discord
@@ -142,41 +105,22 @@ export function DiscordCTA() {
               </Box>
             </Stack>
           </Stack>
-        </Surface>
+        </Box>
       </Container>
-    </Box>
+    </Section>
   );
 }
 
 function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
   return (
-    <Surface 
-      variant="muted" 
-      border 
-      padding={6} 
-      rounded="none" 
-      display="flex"
-      gap={5}
-      className="items-start hover:border-primary-accent/30 transition-all bg-panel-gray/20 group"
-    >
-      <Box
-        display="flex"
-        center
-        rounded="none"
-        flexShrink={0}
-        w="10"
-        h="10"
-        bg="primary-accent/5"
-        border
-        borderColor="border-gray/50"
-        className="group-hover:border-primary-accent/30 transition-colors"
-      >
+    <Box display="flex" alignItems="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" hoverBorderColor="primary-accent/30" transition group>
+      <Box display="flex" alignItems="center" justifyContent="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" groupHoverBorderColor="primary-accent/30" transition>
         <Icon icon={icon} size={5} color="text-primary-accent" />
       </Box>
       <Stack gap={2}>
-        <Text size="base" weight="bold" color="text-white" className="tracking-wide">{title}</Text>
+        <Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
         <Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
       </Stack>
-    </Surface>
+    </Box>
   );
 }
diff --git a/apps/website/components/home/HomeHeader.tsx b/apps/website/components/home/HomeHeader.tsx
new file mode 100644
index 000000000..ee8aa0c59
--- /dev/null
+++ b/apps/website/components/home/HomeHeader.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Glow } from '@/ui/Glow';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+
+interface HomeHeaderProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  primaryAction: {
+    label: string;
+    href: string;
+  };
+  secondaryAction: {
+    label: string;
+    href: string;
+  };
+}
+
+/**
+ * HomeHeader - Semantic hero section for the landing page.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function HomeHeader({
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+}: HomeHeaderProps) {
+  return (
+    <Box as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
+      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
+      
+      <Container>
+        <Box maxWidth="4xl">
+          <Box display="flex" alignItems="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
+            <Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
+              {subtitle}
+            </Text>
+          </Box>
+          
+          <Heading 
+            level={1} 
+            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
+            weight="bold" 
+            color="text-white" 
+            letterSpacing="tighter" 
+            lineHeight="0.9" 
+            mb={8}
+          >
+            {title}
+          </Heading>
+          
+          <Box borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
+            <Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
+              {description}
+            </Text>
+          </Box>
+
+          <Box display="flex" flexDirection={{ base: 'col', sm: 'row' }} gap={4}>
+            <Button
+              as="a"
+              href={primaryAction.href}
+              variant="primary"
+              h="14"
+              px={12}
+              fontSize="xs"
+            >
+              {primaryAction.label}
+            </Button>
+            <Button
+              as="a"
+              href={secondaryAction.href}
+              variant="secondary"
+              h="14"
+              px={12}
+              fontSize="xs"
+              bg="transparent"
+              borderColor="border-gray"
+              hoverBorderColor="primary-accent/50"
+            >
+              {secondaryAction.label}
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
diff --git a/apps/website/components/home/HomeStatsStrip.tsx b/apps/website/components/home/HomeStatsStrip.tsx
new file mode 100644
index 000000000..a18ee3fdb
--- /dev/null
+++ b/apps/website/components/home/HomeStatsStrip.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { MetricCard } from '@/ui/MetricCard';
+import { Activity, Users, Trophy, Calendar } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+
+/**
+ * HomeStatsStrip - A thin strip showing some status or quick info.
+ * Part of the "Telemetry-workspace" feel.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeStatsStrip() {
+  return (
+    <Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
+      <Container>
+        <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={0} borderLeft borderRight borderColor="border-gray/30">
+          <MetricCard 
+            label="Active Drivers" 
+            value="1,284" 
+            icon={Users} 
+            trend={{ value: 12, isPositive: true }}
+            border={false}
+            bg="transparent"
+          />
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Live Sessions" 
+              value="42" 
+              icon={Activity} 
+              color="text-telemetry-aqua"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Total Races" 
+              value="15,402" 
+              icon={Trophy} 
+              color="text-warning-amber"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Next Event" 
+              value="14:00" 
+              icon={Calendar} 
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
diff --git a/apps/website/components/home/LeagueSummaryPanel.tsx b/apps/website/components/home/LeagueSummaryPanel.tsx
new file mode 100644
index 000000000..8f62d6371
--- /dev/null
+++ b/apps/website/components/home/LeagueSummaryPanel.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { LeagueCard } from '@/ui/LeagueCard';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+
+interface League {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface LeagueSummaryPanelProps {
+  leagues: League[];
+}
+
+/**
+ * LeagueSummaryPanel - Semantic section for featured leagues.
+ */
+export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          FEATURED LEAGUES
+        </Heading>
+        <Link 
+          href={routes.public.leagues}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          VIEW ALL →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={4}>
+        {leagues.slice(0, 2).map((league) => (
+          <LeagueCard
+            key={league.id}
+            name={league.name}
+            description={league.description}
+            coverUrl="/images/ff1600.jpeg"
+            slotLabel="Drivers"
+            usedSlots={18}
+            maxSlots={24}
+            fillPercentage={75}
+            hasOpenSlots={true}
+            openSlotsCount={6}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/home/QuickLinksPanel.tsx b/apps/website/components/home/QuickLinksPanel.tsx
new file mode 100644
index 000000000..46f2a6b9f
--- /dev/null
+++ b/apps/website/components/home/QuickLinksPanel.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Plus, Search, Shield, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Text } from '@/ui/Text';
+
+/**
+ * QuickLinksPanel - Semantic quick actions bar.
+ * Replaces HomeQuickActions with a more semantic implementation.
+ */
+export function QuickLinksPanel() {
+  const links = [
+    { label: 'Find League', icon: Search, href: routes.public.leagues },
+    { label: 'Join Team', icon: Users, href: routes.public.teams },
+    { label: 'Create Race', icon: Plus, href: routes.protected.dashboard },
+    { label: 'Rulebooks', icon: Shield, href: '#' },
+  ];
+
+  return (
+    <Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
+      <Container>
+        <Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
+          {links.map((link) => (
+            <Button
+              key={link.label}
+              as="a"
+              href={link.href}
+              variant="secondary"
+              display="flex"
+              alignItems="center"
+              gap={3}
+              px={6}
+              bg="graphite-black"
+              borderColor="border-gray/50"
+              hoverBorderColor="primary-accent/50"
+              transition
+              group
+            >
+              <Icon 
+                icon={link.icon} 
+                size={4} 
+                color="text-gray-500"
+                groupHoverTextColor="primary-accent"
+                transition
+              />
+              <Text size="xs" weight="bold" uppercase letterSpacing="widest">
+                {link.label}
+              </Text>
+            </Button>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+}
diff --git a/apps/website/components/home/RecentRacesPanel.tsx b/apps/website/components/home/RecentRacesPanel.tsx
new file mode 100644
index 000000000..19635d086
--- /dev/null
+++ b/apps/website/components/home/RecentRacesPanel.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  formattedDate: string;
+}
+
+interface RecentRacesPanelProps {
+  races: Race[];
+}
+
+/**
+ * RecentRacesPanel - Semantic section for upcoming/recent races.
+ */
+export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          UPCOMING RACES
+        </Heading>
+        <Link 
+          href={routes.public.races}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          FULL SCHEDULE →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={3}>
+        {races.length === 0 ? (
+          <Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
+            <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
+              No races scheduled
+            </Text>
+          </Box>
+        ) : (
+          races.slice(0, 3).map((race) => (
+            <UpcomingRaceItem
+              key={race.id}
+              track={race.track}
+              car={race.car}
+              formattedDate={race.formattedDate}
+              formattedTime="20:00 GMT"
+              isMyLeague={false}
+            />
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/home/TeamSummaryPanel.tsx b/apps/website/components/home/TeamSummaryPanel.tsx
new file mode 100644
index 000000000..0513366f5
--- /dev/null
+++ b/apps/website/components/home/TeamSummaryPanel.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import { TeamCard } from '@/ui/TeamCard';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+
+interface Team {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+}
+
+interface TeamSummaryPanelProps {
+  teams: Team[];
+}
+
+/**
+ * TeamSummaryPanel - Semantic section for teams.
+ */
+export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          TEAMS ON THE GRID
+        </Heading>
+        <Link 
+          href={routes.public.teams}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          BROWSE TEAMS →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={4}>
+        {teams.slice(0, 2).map((team) => (
+          <TeamCard
+            key={team.id}
+            name={team.name}
+            description={team.description}
+            logo={team.logoUrl}
+            memberCount={12}
+            isRecruiting={true}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/landing/AlternatingSection.tsx b/apps/website/components/landing/AlternatingSection.tsx
index 645c8b1ec..fbaee1ac1 100644
--- a/apps/website/components/landing/AlternatingSection.tsx
+++ b/apps/website/components/landing/AlternatingSection.tsx
@@ -93,12 +93,12 @@ export function AlternatingSection({
             order={{ lg: layout === 'text-right' ? 2 : 1 }}
           >
             <Stack gap={4}>
-              <Box w="12" h="1" bg="primary-accent" />
-              <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" className="tracking-tight">
+              <Box w="8" h="1" bg="primary-accent" />
+              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" className="tracking-tighter uppercase leading-none">
                 {heading}
               </Heading>
             </Stack>
-            <Box className="text-gray-400">
+            <Box className="text-gray-500 border-l border-border-gray/20 pl-6">
               {typeof description === 'string' ? (
                 <Text size="lg" leading="relaxed" weight="normal">{description}</Text>
               ) : (
@@ -111,18 +111,18 @@ export function AlternatingSection({
           <Box
             position="relative"
             order={{ lg: layout === 'text-right' ? 1 : 2 }}
-            className="bg-panel-gray/30 border border-border-gray/50 rounded-none p-2 shadow-2xl group"
+            className="bg-panel-gray/20 border border-border-gray/30 rounded-none p-1 shadow-2xl group"
           >
             <Box 
               fullWidth 
               minHeight={{ base: '240px', md: '380px' }} 
-              className="overflow-hidden rounded-none border border-border-gray/30 bg-graphite-black"
+              className="overflow-hidden rounded-none border border-border-gray/20 bg-graphite-black"
             >
               {mockup}
             </Box>
             {/* Decorative corner accents */}
-            <Box position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-accent/50" />
-            <Box position="absolute" bottom="-1px" right="-1px" w="4" h="4" borderBottom borderRight borderColor="primary-accent/50" />
+            <Box position="absolute" top="-1px" left="-1px" w="3" h="3" borderTop borderLeft borderColor="primary-accent/40" />
+            <Box position="absolute" bottom="-1px" right="-1px" w="3" h="3" borderBottom borderRight borderColor="primary-accent/40" />
           </Box>
         </Box>
       </Container>
diff --git a/apps/website/components/landing/FeatureGrid.tsx b/apps/website/components/landing/FeatureGrid.tsx
index 596ef8630..f6324a17c 100644
--- a/apps/website/components/landing/FeatureGrid.tsx
+++ b/apps/website/components/landing/FeatureGrid.tsx
@@ -53,21 +53,21 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
       display="flex"
       flexDirection="column"
       gap={6}
-      className="p-8 bg-panel-gray/40 border border-border-gray/50 rounded-none hover:border-primary-accent/30 transition-all duration-300 ease-smooth group relative overflow-hidden"
+      className="p-8 bg-panel-gray/20 border border-border-gray/20 rounded-none hover:border-primary-accent/20 transition-all duration-300 ease-smooth group relative overflow-hidden"
     >
-      <Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/30">
+      <Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
         <MockupStack index={index}>
           <feature.MockupComponent />
         </MockupStack>
       </Box>
       <Stack gap={4}>
         <Box display="flex" alignItems="center" gap={3}>
-          <Box w="1" h="4" bg="primary-accent" />
-          <Heading level={3} weight="bold" fontSize="xl" className="tracking-tight">
+          <Box w="1" h="3" bg="primary-accent" />
+          <Heading level={3} weight="bold" fontSize="lg" className="tracking-tighter uppercase">
             {feature.title}
           </Heading>
         </Box>
-        <Text size="sm" color="text-gray-400" leading="relaxed" weight="normal">
+        <Text size="sm" color="text-gray-500" leading="relaxed" weight="normal" className="group-hover:text-gray-400 transition-colors">
           {feature.description}
         </Text>
       </Stack>
@@ -77,7 +77,7 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
         bottom="0" 
         left="0" 
         w="full" 
-        h="1" 
+        h="0.5" 
         bg="primary-accent" 
         className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" 
       />
@@ -87,24 +87,24 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
 
 export function FeatureGrid() {
   return (
-    <Section className="bg-graphite-black border-b border-border-gray/50 py-24">
+    <Section className="bg-graphite-black border-b border-border-gray/20 py-32">
       <Container position="relative" zIndex={10}>
         <Stack gap={16}>
           <Box maxWidth="2xl">
-            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
-              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
+            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
+              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.3em]">
                 Engineered for Competition
               </Text>
             </Box>
-            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
+            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} className="tracking-tighter uppercase leading-none">
               Building for League Racing
             </Heading>
-            <Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
+            <Text size="lg" color="text-gray-500" block mt={6} leading="relaxed" className="border-l border-border-gray/20 pl-6">
               Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
             </Text>
           </Box>
           
-          <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={8}>
+          <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
             {features.map((feature, index) => (
               <FeatureCard key={feature.title} feature={feature} index={index} />
             ))}
diff --git a/apps/website/components/landing/LandingHero.tsx b/apps/website/components/landing/LandingHero.tsx
index dd169cead..39c273d12 100644
--- a/apps/website/components/landing/LandingHero.tsx
+++ b/apps/website/components/landing/LandingHero.tsx
@@ -29,11 +29,11 @@ export function LandingHero() {
       <Box
         position="absolute"
         inset="0"
-        bg="url(/images/header.jpeg)"
+        backgroundImage="url(/images/header.jpeg)"
         backgroundSize="cover"
         backgroundPosition="center"
         opacity={0.2}
-        style={{ transform: `translateY(${bgParallax * 0.5}px)` }}
+        transform={`translateY(${bgParallax * 0.5}px)`}
       />
       
       {/* Robust gradient overlay */}
@@ -47,29 +47,30 @@ export function LandingHero() {
         position="absolute" 
         inset="0" 
         bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
-        opacity={0.6}
+        opacity={0.8}
       />
       
-      <Glow color="primary" size="xl" position="center" opacity={0.1} />
+      <Glow color="primary" size="xl" position="center" opacity={0.15} />
       
       <Container size="lg" position="relative" zIndex={10}>
         <Stack gap={{ base: 8, md: 12 }}>
           <Stack gap={6} maxWidth="3xl">
-            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2}>
-              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
+            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2} bg="primary-accent/5" py={1}>
+              <Text size="xs" weight="bold" color="text-primary-accent" uppercase letterSpacing="0.3em">
                 Precision Racing Infrastructure
               </Text>
             </Box>
             <Heading
               level={1}
-              fontSize={{ base: '3xl', sm: '4xl', md: '5xl', lg: '7xl' }}
+              fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
               weight="bold"
-              className="text-white leading-[1.1] tracking-tight"
+              color="text-white"
+              lineHeight="0.95"
+              letterSpacing="tighter"
             >
-              Modern Motorsport <br />
-              <span className="text-primary-accent">Infrastructure.</span>
+              MODERN MOTORSPORT INFRASTRUCTURE.
             </Heading>
-            <Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" className="max-w-2xl">
+            <Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="border-gray" pl={6} opacity={0.3}>
               GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control.
             </Text>
           </Stack>
@@ -80,14 +81,23 @@ export function LandingHero() {
               href={discordUrl}
               variant="primary"
               size="lg"
-              className="px-10 rounded-none uppercase tracking-widest text-xs font-bold"
+              px={12}
+              letterSpacing="0.2em"
+              fontSize="xs"
+              h="14"
             >
               Join the Grid
             </Button>
             <Button
               variant="secondary"
               size="lg"
-              className="px-10 rounded-none border-border-gray hover:border-primary-accent/50 uppercase tracking-widest text-xs font-bold"
+              px={12}
+              borderColor="border-gray"
+              hoverBorderColor="primary-accent/50"
+              letterSpacing="0.2em"
+              fontSize="xs"
+              h="14"
+              bg="transparent"
             >
               Explore Leagues
             </Button>
@@ -99,7 +109,11 @@ export function LandingHero() {
             gridCols={{ base: 1, sm: 2, lg: 4 }} 
             gap={8} 
             mt={12}
-            className="border-t border-border-gray/30 pt-12"
+            borderTop
+            borderStyle="solid"
+            borderColor="border-gray"
+            opacity={0.2}
+            pt={12}
           >
             {[
               { label: 'IDENTITY', text: 'Your racing career in one place', color: 'primary' },
@@ -107,14 +121,14 @@ export function LandingHero() {
               { label: 'PRECISION', text: 'Real-time results and standings', color: 'amber' },
               { label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'green' }
             ].map((item) => (
-              <Stack key={item.label} gap={3} className="group">
-                <Box display="flex" alignItems="center" gap={2}>
-                  <Box w="2" h="2" rounded="full" className={`bg-${item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'}`} />
-                  <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-[0.2em] group-hover:text-white transition-colors">
+              <Stack key={item.label} gap={3} group cursor="default">
+                <Box display="flex" alignItems="center" gap={3}>
+                  <Box w="1" h="3" bg={item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'} />
+                  <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="0.2em" groupHoverTextColor="white" transition>
                     {item.label}
                   </Text>
                 </Box>
-                <Text size="sm" color="text-gray-400" className="group-hover:text-gray-200 transition-colors">
+                <Text size="sm" color="text-gray-500" groupHoverTextColor="gray-300" transition leading="relaxed">
                   {item.text}
                 </Text>
               </Stack>
diff --git a/apps/website/components/layout/HeaderContent.tsx b/apps/website/components/layout/HeaderContent.tsx
deleted file mode 100644
index 43e49aabb..000000000
--- a/apps/website/components/layout/HeaderContent.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Text } from '@/ui/Text';
-
-export function HeaderContent() {
-  return (
-    <div className="flex items-center justify-between h-16 md:h-20">
-      <div className="flex items-center space-x-6">
-        <Link href="/" className="inline-flex items-center group">
-          <div className="relative">
-            <Image
-              src="/images/logos/wordmark-rectangle-dark.svg"
-              alt="GridPilot"
-              width={160}
-              height={30}
-              className="h-6 w-auto md:h-7 transition-opacity group-hover:opacity-80"
-              priority
-            />
-            <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-accent transition-all group-hover:w-full" />
-          </div>
-        </Link>
-        <div className="hidden sm:flex items-center space-x-2 border-l border-border-gray/50 pl-6">
-          <div className="w-1.5 h-1.5 rounded-full bg-primary-accent animate-pulse" />
-          <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-[0.2em] font-mono">
-            Motorsport Infrastructure
-          </Text>
-        </div>
-      </div>
-      
-      <div className="flex items-center space-x-4">
-        <div className="hidden md:flex items-center space-x-1 px-3 py-1 border border-border-gray/30 bg-panel-gray/20">
-          <Text size="xs" color="text-gray-600" weight="bold" font="mono" className="uppercase">Status:</Text>
-          <Text size="xs" color="text-success-green" weight="bold" font="mono" className="uppercase">Operational</Text>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/website/components/leaderboards/DeltaChip.tsx b/apps/website/components/leaderboards/DeltaChip.tsx
new file mode 100644
index 000000000..3988a209a
--- /dev/null
+++ b/apps/website/components/leaderboards/DeltaChip.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { ChevronUp, ChevronDown, Minus } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+
+interface DeltaChipProps {
+  value: number;
+  type?: 'rank' | 'rating';
+}
+
+export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
+  if (value === 0) {
+    return (
+      <Box display="flex" alignItems="center" gap={1} color="text-gray-600">
+        <Icon icon={Minus} size={3} />
+        <Text size="xs" font="mono">0</Text>
+      </Box>
+    );
+  }
+
+  const isPositive = value > 0;
+  const color = isPositive 
+    ? (type === 'rank' ? 'text-performance-green' : 'text-performance-green') 
+    : (type === 'rank' ? 'text-error-red' : 'text-error-red');
+  
+  // For rank, positive delta usually means dropping positions (e.g. +1 rank means 1st -> 2nd)
+  // But usually "Delta" in leaderboards means "positions gained/lost"
+  // Let's assume value is "positions gained" (positive = up, negative = down)
+  
+  const IconComponent = isPositive ? ChevronUp : ChevronDown;
+  const absoluteValue = Math.abs(value);
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      gap={0.5} 
+      color={color}
+      bg={`${color.replace('text-', 'bg-')}/10`}
+      px={1.5}
+      py={0.5}
+      rounded="full"
+    >
+      <Icon icon={IconComponent} size={3} />
+      <Text size="xs" font="mono" weight="bold">
+        {absoluteValue}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
index dac0283ff..3765f6f5b 100644
--- a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
+import { Trophy, ChevronRight } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
@@ -8,8 +8,9 @@ import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
-import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { RankMedal } from './RankMedal';
+import { LeaderboardTableShell } from './LeaderboardTableShell';
 
 interface DriverLeaderboardPreviewProps {
   drivers: {
@@ -31,35 +32,54 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
   const top10 = drivers; // Already sliced in builder
 
   return (
-    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
-      <Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+    <LeaderboardTableShell>
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        justifyContent="between" 
+        px={5} 
+        py={4} 
+        borderBottom 
+        borderColor="border-charcoal-outline/50" 
+        bg="bg-deep-charcoal/40"
+      >
         <Box display="flex" alignItems="center" gap={3}>
-          <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-primary-blue/20 to-primary-blue/5" border borderColor="border-primary-blue/20">
+          <Box 
+            display="flex" 
+            h="10" 
+            w="10" 
+            alignItems="center" 
+            justifyContent="center" 
+            rounded="lg" 
+            bg="bg-gradient-to-br from-primary-blue/15 to-primary-blue/5" 
+            border 
+            borderColor="border-primary-blue/20"
+          >
             <Icon icon={Trophy} size={5} color="text-primary-blue" />
           </Box>
           <Box>
-            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Driver Rankings</Heading>
-            <Text size="xs" color="text-gray-500" block>Top performers across all leagues</Text>
+            <Heading level={3} fontSize="lg" weight="bold" color="text-white" letterSpacing="tight">Driver Rankings</Heading>
+            <Text size="xs" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Top Performers</Text>
           </Box>
         </Box>
         <Button
           variant="secondary"
           onClick={onNavigateToDrivers}
           size="sm"
+          hoverBg="bg-primary-blue/10"
+          transition
         >
           <Stack direction="row" align="center" gap={2}>
-            <Text size="sm">View All</Text>
+            <Text size="sm" weight="medium">View All</Text>
             <Icon icon={ChevronRight} size={4} />
           </Stack>
         </Button>
       </Box>
 
-      <Stack gap={0} 
-        // eslint-disable-next-line gridpilot-rules/component-classification
-        className="divide-y divide-charcoal-outline/50"
-      >
+      <Stack gap={0}>
         {top10.map((driver, index) => {
           const position = index + 1;
+          const isLast = index === top10.length - 1;
 
           return (
             <Box
@@ -75,71 +95,64 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
               w="full"
               textAlign="left"
               transition
-              hoverBg="bg-iron-gray/30"
+              hoverBg="bg-white/[0.02]"
               group
+              borderBottom={!isLast}
+              borderColor="border-charcoal-outline/30"
             >
-              <Box 
-                display="flex" 
-                h="8" 
-                w="8" 
-                alignItems="center" 
-                justifyContent="center" 
-                rounded="full" 
-                border 
-                // eslint-disable-next-line gridpilot-rules/component-classification
-                className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
-              >
-                {position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
+              <Box w="8" display="flex" justifyContent="center">
+                <RankMedal rank={position} size="sm" />
               </Box>
 
-              <Box position="relative" w="9" h="9" rounded="full" overflow="hidden" border borderWidth="2px" borderColor="border-charcoal-outline">
+              <Box 
+                position="relative" 
+                w="9" 
+                h="9" 
+                rounded="full" 
+                overflow="hidden" 
+                border 
+                borderWidth="1px" 
+                borderColor="border-charcoal-outline" 
+                groupHoverBorderColor="primary-blue/50" 
+                transition
+              >
                 <Image src={driver.avatarUrl} alt={driver.name} fullWidth fullHeight objectFit="cover" />
               </Box>
 
               <Box flexGrow={1} minWidth="0">
-                <Text weight="medium" color="text-white" truncate groupHoverTextColor="text-primary-blue" transition block>
+                <Text 
+                  weight="semibold" 
+                  color="text-white" 
+                  truncate 
+                  groupHoverTextColor="text-primary-blue" 
+                  transition 
+                  block
+                >
                   {driver.name}
                 </Text>
                 <Box display="flex" alignItems="center" gap={2}>
-                  <Icon icon={Flag} size={3} color="text-gray-500" />
                   <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
-                  <Box as="span" 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    className={SkillLevelDisplay.getColor(driver.skillLevel)}
-                  >
-                    <Text size="xs">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
+                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+                  <Box as="span" color={SkillLevelDisplay.getColor(driver.skillLevel)}>
+                    <Text size="xs" weight="medium">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
                   </Box>
                 </Box>
               </Box>
 
-              <Box display="flex" alignItems="center" gap={4}>
-                <Box textAlign="center">
-                  <Text color="text-primary-blue" font="mono" weight="semibold" block>{RatingDisplay.format(driver.rating)}</Text>
-                  <Text 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    style={{ fontSize: '10px' }} 
-                    color="text-gray-500" 
-                    block
-                  >
-                    Rating
-                  </Text>
+              <Box display="flex" alignItems="center" gap={6}>
+                <Box textAlign="right">
+                  <Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{RatingDisplay.format(driver.rating)}</Text>
+                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
                 </Box>
-                <Box textAlign="center">
-                  <Text color="text-performance-green" font="mono" weight="semibold" block>{driver.wins}</Text>
-                  <Text 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    style={{ fontSize: '10px' }} 
-                    color="text-gray-500" 
-                    block
-                  >
-                    Wins
-                  </Text>
+                <Box textAlign="right" minWidth="12">
+                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{driver.wins}</Text>
+                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
                 </Box>
               </Box>
             </Box>
           );
         })}
       </Stack>
-    </Box>
+    </LeaderboardTableShell>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx b/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
new file mode 100644
index 000000000..faa7ad9e2
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Search, Filter } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
+
+interface LeaderboardFiltersBarProps {
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
+  placeholder?: string;
+  children?: React.ReactNode;
+}
+
+export function LeaderboardFiltersBar({
+  searchQuery,
+  onSearchChange,
+  placeholder = 'Search drivers...',
+  children,
+}: LeaderboardFiltersBarProps) {
+  return (
+    <Box 
+      mb={6} 
+      p={3} 
+      bg="bg-deep-charcoal/40" 
+      border 
+      borderColor="border-charcoal-outline/50" 
+      rounded="lg"
+      blur="sm"
+    >
+      <Stack direction="row" align="center" justify="between" gap={4}>
+        <Box position="relative" flexGrow={1} maxWidth="md">
+          <Box 
+            position="absolute" 
+            left="3" 
+            top="1/2" 
+            transform="translateY(-50%)"
+            pointerEvents="none"
+            zIndex={10}
+          >
+            <Icon icon={Search} size={4} color="text-gray-500" />
+          </Box>
+          <Box
+            as="input"
+            type="text"
+            value={searchQuery}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
+            placeholder={placeholder}
+            w="full"
+            bg="bg-graphite-black/50"
+            border
+            borderColor="border-charcoal-outline"
+            rounded="md"
+            py={2}
+            pl={10}
+            pr={4}
+            fontSize="0.875rem"
+            color="text-white"
+            transition
+            hoverBorderColor="border-primary-blue/50"
+          />
+        </Box>
+        
+        <Stack direction="row" align="center" gap={4}>
+          {children}
+          <Box 
+            display="flex" 
+            alignItems="center" 
+            gap={2} 
+            px={3} 
+            py={2} 
+            bg="bg-graphite-black/30" 
+            border 
+            borderColor="border-charcoal-outline" 
+            rounded="md"
+            cursor="pointer"
+            transition
+            hoverBg="bg-graphite-black/50"
+            hoverBorderColor="border-gray-600"
+          >
+            <Icon icon={Filter} size={3.5} color="text-gray-400" />
+            <Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="wider">Filters</Text>
+          </Box>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardHeader.tsx b/apps/website/components/leaderboards/LeaderboardHeader.tsx
new file mode 100644
index 000000000..f1469ce72
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardHeader.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { ArrowLeft, LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+
+interface LeaderboardHeaderProps {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  onBack?: () => void;
+  backLabel?: string;
+  children?: React.ReactNode;
+}
+
+export function LeaderboardHeader({
+  title,
+  description,
+  icon,
+  onBack,
+  backLabel = 'Back',
+  children,
+}: LeaderboardHeaderProps) {
+  return (
+    <Box mb={8}>
+      {onBack && (
+        <Box mb={6}>
+          <Button
+            variant="secondary"
+            onClick={onBack}
+            icon={<Icon icon={ArrowLeft} size={4} />}
+          >
+            {backLabel}
+          </Button>
+        </Box>
+      )}
+
+      <Stack direction="row" align="center" justify="between" gap={4}>
+        <Stack direction="row" align="center" gap={4}>
+          {icon && (
+            <Box 
+              p={3} 
+              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.15), rgba(25, 140, 255, 0.05))" 
+              border 
+              borderColor="border-primary-blue/20"
+              rounded="xl"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Icon icon={icon} size={6} color="text-primary-blue" />
+            </Box>
+          )}
+          <Box>
+            <Heading level={1} weight="bold" letterSpacing="tight">{title}</Heading>
+            {description && (
+              <Text color="text-gray-400" block mt={1} size="sm">
+                {description}
+              </Text>
+            )}
+          </Box>
+        </Stack>
+        <Box>
+          {children}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
new file mode 100644
index 000000000..fbf6597c0
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { ArrowLeft, LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface LeaderboardHeaderPanelProps {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  onBack?: () => void;
+  backLabel?: string;
+  children?: React.ReactNode;
+}
+
+export function LeaderboardHeaderPanel({
+  title,
+  description,
+  icon,
+  onBack,
+  backLabel = 'Back',
+  children,
+}: LeaderboardHeaderPanelProps) {
+  return (
+    <Box mb={8}>
+      {onBack && (
+        <Box mb={6}>
+          <Button
+            variant="secondary"
+            onClick={onBack}
+            icon={<Icon icon={ArrowLeft} size={4} />}
+          >
+            {backLabel}
+          </Button>
+        </Box>
+      )}
+
+      <Stack direction="row" align="center" justify="between" gap={4}>
+        <Stack direction="row" align="center" gap={4}>
+          {icon && (
+            <Surface 
+              variant="muted" 
+              rounded="xl" 
+              padding={3} 
+              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
+              border 
+              borderColor="border-primary-blue/20"
+            >
+              <Icon icon={icon} size={7} color="text-primary-blue" />
+            </Surface>
+          )}
+          <Box>
+            <Heading level={1}>{title}</Heading>
+            {description && (
+              <Text color="text-gray-400" block mt={1}>
+                {description}
+              </Text>
+            )}
+          </Box>
+        </Stack>
+        {children}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardItem.tsx b/apps/website/components/leaderboards/LeaderboardItem.tsx
deleted file mode 100644
index 3d238f8e0..000000000
--- a/apps/website/components/leaderboards/LeaderboardItem.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import { Crown, Flag } from 'lucide-react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Image } from '@/ui/Image';
-import { mediaConfig } from '@/lib/config/mediaConfig';
-
-interface LeaderboardItemProps {
-  position: number;
-  name: string;
-  avatarUrl?: string;
-  nationality: string;
-  rating: number;
-  wins: number;
-  skillLevelLabel?: string;
-  skillLevelColor?: string;
-  categoryLabel?: string;
-  categoryColor?: string;
-  onClick: () => void;
-}
-
-export function LeaderboardItem({
-  position,
-  name,
-  avatarUrl,
-  nationality,
-  rating,
-  wins,
-  skillLevelLabel,
-  skillLevelColor,
-  categoryLabel,
-  categoryColor,
-  onClick,
-}: LeaderboardItemProps) {
-  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';
-    }
-  };
-
-  const getMedalBg = (pos: number) => {
-    switch (pos) {
-      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 (
-    <Box
-      as="button"
-      type="button"
-      onClick={onClick}
-      display="flex"
-      alignItems="center"
-      gap={4}
-      px={4}
-      py={3}
-      fullWidth
-      textAlign="left"
-      className="hover:bg-iron-gray/30 transition-colors group"
-    >
-      {/* Position */}
-      <Box 
-        width="8" 
-        height="8" 
-        display="flex" 
-        center 
-        rounded="full" 
-        border 
-        className={`${getMedalBg(position)} ${getMedalColor(position)} text-xs font-bold`}
-      >
-        {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
-      </Box>
-
-      {/* Avatar */}
-      <Box position="relative" width="9" height="9" rounded="full" overflow="hidden" border={true} borderColor="border-charcoal-outline">
-        <Image src={avatarUrl || mediaConfig.avatars.defaultFallback} alt={name} fill objectFit="cover" />
-      </Box>
-
-      {/* Info */}
-      <Box flexGrow={1} minWidth="0">
-        <Text weight="medium" color="text-white" truncate block className="group-hover:text-primary-blue transition-colors">
-          {name}
-        </Text>
-        <Stack direction="row" align="center" gap={2}>
-          <Flag className="w-3 h-3 text-gray-500" />
-          <Text size="xs" color="text-gray-500">{nationality}</Text>
-          {categoryLabel && (
-            <Text size="xs" className={categoryColor}>{categoryLabel}</Text>
-          )}
-          {skillLevelLabel && (
-            <Text size="xs" className={skillLevelColor}>{skillLevelLabel}</Text>
-          )}
-        </Stack>
-      </Box>
-
-      {/* Stats */}
-      <Stack direction="row" align="center" gap={4}>
-        <Box textAlign="center">
-          <Text color="text-primary-blue" weight="semibold" font="mono" block>{rating.toLocaleString()}</Text>
-          <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Rating</Text>
-        </Box>
-        <Box textAlign="center">
-          <Text color="text-performance-green" weight="semibold" font="mono" block>{wins}</Text>
-          <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Wins</Text>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
diff --git a/apps/website/components/leaderboards/LeaderboardPodium.tsx b/apps/website/components/leaderboards/LeaderboardPodium.tsx
new file mode 100644
index 000000000..10ab13c0e
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardPodium.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+
+interface PodiumDriver {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  rating: number;
+  wins: number;
+  podiums: number;
+}
+
+interface LeaderboardPodiumProps {
+  podium: PodiumDriver[];
+  onDriverClick?: (id: string) => void;
+}
+
+export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumProps) {
+  // Order: 2nd, 1st, 3rd
+  const displayOrder = [1, 0, 2];
+  
+  return (
+    <Box mb={12}>
+      <Box display="flex" alignItems="end" justifyContent="center" gap={4} maxWidth="4xl" mx="auto">
+        {displayOrder.map((index) => {
+          const driver = podium[index];
+          if (!driver) return <Box key={index} flexGrow={1} />;
+          
+          const position = index + 1;
+          const isFirst = position === 1;
+          
+          const config = {
+            1: { height: '48', scale: '1.1', zIndex: 10, shadow: 'shadow-warning-amber/20' },
+            2: { height: '36', scale: '1', zIndex: 0, shadow: 'shadow-white/5' },
+            3: { height: '28', scale: '0.9', zIndex: 0, shadow: 'shadow-white/5' },
+          }[position as 1 | 2 | 3];
+
+          return (
+            <Box
+              key={driver.id}
+              as="button"
+              type="button"
+              onClick={() => onDriverClick?.(driver.id)}
+              display="flex"
+              flexDirection="col"
+              alignItems="center"
+              flexGrow={1}
+              transition
+              hoverScale
+              group
+              shadow={config.shadow}
+              zIndex={config.zIndex}
+            >
+              <Box position="relative" mb={4} transform={`scale(${config.scale})`}>
+                <Box 
+                  position="relative" 
+                  w={isFirst ? '32' : '24'} 
+                  h={isFirst ? '32' : '24'} 
+                  rounded="full" 
+                  overflow="hidden" 
+                  border 
+                  borderColor={isFirst ? 'border-warning-amber' : 'border-charcoal-outline'}
+                  borderWidth="3px"
+                  transition
+                  groupHoverBorderColor="primary-blue"
+                  shadow="xl"
+                >
+                  <Image
+                    src={driver.avatarUrl}
+                    alt={driver.name}
+                    width={128}
+                    height={128}
+                    fullWidth
+                    fullHeight
+                    objectFit="cover"
+                  />
+                </Box>
+                <Box 
+                  position="absolute" 
+                  bottom="-2" 
+                  left="50%" 
+                  w="10" 
+                  h="10" 
+                  rounded="full" 
+                  display="flex" 
+                  alignItems="center" 
+                  justifyContent="center" 
+                  border 
+                  transform="translateX(-50%)"
+                  borderWidth="2px"
+                  bg={MedalDisplay.getBg(position)}
+                  color={MedalDisplay.getColor(position)}
+                  shadow="lg"
+                >
+                  <Text size="sm" weight="bold">{position}</Text>
+                </Box>
+              </Box>
+
+              <Text 
+                weight="bold" 
+                color="text-white" 
+                size={isFirst ? 'lg' : 'base'} 
+                mb={1} 
+                block 
+                truncate
+                align="center"
+                px={2}
+                maxWidth="full"
+                groupHoverTextColor="text-primary-blue"
+                transition
+              >
+                {driver.name}
+              </Text>
+
+              <Text 
+                font="mono" 
+                weight="bold" 
+                size={isFirst ? 'xl' : 'lg'} 
+                block 
+                color={isFirst ? 'text-warning-amber' : 'text-primary-blue'}
+              >
+                {RatingDisplay.format(driver.rating)}
+              </Text>
+
+              <Stack direction="row" align="center" gap={3} mt={1}>
+                <Stack direction="row" align="center" gap={1}>
+                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Wins</Text>
+                  <Text size="xs" weight="bold" color="text-performance-green">{driver.wins}</Text>
+                </Stack>
+                <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+                <Stack direction="row" align="center" gap={1}>
+                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Podiums</Text>
+                  <Text size="xs" weight="bold" color="text-white">{driver.podiums}</Text>
+                </Stack>
+              </Stack>
+
+              <Box 
+                mt={6} 
+                w="full" 
+                h={config.height}
+                rounded="lg"
+                border
+                borderColor="border-charcoal-outline/50"
+                bg="bg-deep-charcoal/40"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                blur="sm"
+                groupHoverBorderColor="primary-blue/30"
+                transition
+              >
+                <Text 
+                  weight="bold" 
+                  size="4xl" 
+                  color={MedalDisplay.getColor(position)}
+                  opacity={0.1}
+                  fontSize={isFirst ? '5rem' : '3.5rem'}
+                >
+                  {position}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardPreview.tsx b/apps/website/components/leaderboards/LeaderboardPreview.tsx
deleted file mode 100644
index 23cb4dd20..000000000
--- a/apps/website/components/leaderboards/LeaderboardPreview.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-
-
-import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { LeaderboardItem } from '@/components/leaderboards/LeaderboardItem';
-import { LeaderboardList } from '@/ui/LeaderboardList';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Award, ChevronRight } from 'lucide-react';
-
-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: {
-    id: string;
-    name: string;
-    avatarUrl?: string;
-    nationality: string;
-    rating: number;
-    wins: number;
-    skillLevel?: string;
-    category?: string;
-  }[];
-  onDriverClick: (id: string) => void;
-  onNavigate: (href: string) => void;
-}
-
-export function LeaderboardPreview({ drivers, onDriverClick, onNavigate }: LeaderboardPreviewProps) {
-  const top5 = drivers.slice(0, 5);
-
-  return (
-    <Stack gap={4} mb={10}>
-      <Stack direction="row" align="center" justify="between">
-        <Stack direction="row" align="center" gap={3}>
-          <Box 
-            display="flex" 
-            center 
-            w="10" 
-            h="10" 
-            rounded="xl" 
-            bg="bg-gradient-to-br from-yellow-400/20 to-amber-600/10" 
-            border 
-            borderColor="border-yellow-400/30"
-          >
-            <Icon icon={Award} size={5} color="rgb(250, 204, 21)" />
-          </Box>
-          <Box>
-            <Heading level={2}>Top Drivers</Heading>
-            <Text size="xs" color="text-gray-500">Highest rated competitors</Text>
-          </Box>
-        </Stack>
-
-        <Button
-          variant="secondary"
-          onClick={() => onNavigate(routes.leaderboards.drivers)}
-          icon={<Icon icon={ChevronRight} size={4} />}
-        >
-          Full Rankings
-        </Button>
-      </Stack>
-
-      <LeaderboardList>
-        {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 (
-            <LeaderboardItem
-              key={driver.id}
-              position={position}
-              name={driver.name}
-              avatarUrl={driver.avatarUrl}
-              nationality={driver.nationality}
-              rating={driver.rating}
-              wins={driver.wins}
-              skillLevelLabel={levelConfig?.label}
-              skillLevelColor={levelConfig?.color}
-              categoryLabel={categoryConfig?.label}
-              categoryColor={categoryConfig?.color}
-              onClick={() => onDriverClick(driver.id)}
-            />
-          );
-        })}
-      </LeaderboardList>
-    </Stack>
-  );
-}
diff --git a/apps/website/components/leaderboards/LeaderboardTable.tsx b/apps/website/components/leaderboards/LeaderboardTable.tsx
new file mode 100644
index 000000000..2d41c437b
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardTable.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
+import { RankingRow } from './RankingRow';
+import { LeaderboardTableShell } from './LeaderboardTableShell';
+
+interface LeaderboardDriver {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  rank: number;
+  rankDelta?: number;
+  nationality: string;
+  skillLevel: string;
+  racesCompleted: number;
+  rating: number;
+  wins: number;
+}
+
+interface LeaderboardTableProps {
+  drivers: LeaderboardDriver[];
+  onDriverClick?: (id: string) => void;
+}
+
+export function LeaderboardTable({ drivers, onDriverClick }: LeaderboardTableProps) {
+  return (
+    <LeaderboardTableShell isEmpty={drivers.length === 0} emptyMessage="No drivers found">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader w="32">Rank</TableHeader>
+            <TableHeader>Driver</TableHeader>
+            <TableHeader textAlign="center">Races</TableHeader>
+            <TableHeader textAlign="center">Rating</TableHeader>
+            <TableHeader textAlign="center">Wins</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {drivers.map((driver) => (
+            <RankingRow
+              key={driver.id}
+              {...driver}
+              onClick={() => onDriverClick?.(driver.id)}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </LeaderboardTableShell>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardTableShell.tsx b/apps/website/components/leaderboards/LeaderboardTableShell.tsx
new file mode 100644
index 000000000..82f42f448
--- /dev/null
+++ b/apps/website/components/leaderboards/LeaderboardTableShell.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface LeaderboardTableShellProps {
+  children: React.ReactNode;
+  isEmpty?: boolean;
+  emptyMessage?: string;
+  emptyDescription?: string;
+}
+
+export function LeaderboardTableShell({
+  children,
+  isEmpty,
+  emptyMessage = 'No data found',
+  emptyDescription = 'Try adjusting your filters or search query',
+}: LeaderboardTableShellProps) {
+  if (isEmpty) {
+    return (
+      <Box 
+        py={16} 
+        textAlign="center" 
+        bg="bg-iron-gray/20" 
+        border 
+        borderColor="border-charcoal-outline" 
+        rounded="xl"
+      >
+        <Text size="4xl" block mb={4}>🔍</Text>
+        <Text color="text-gray-400" block mb={2} weight="semibold">{emptyMessage}</Text>
+        <Text size="sm" color="text-gray-500">{emptyDescription}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box 
+      rounded="xl" 
+      bg="bg-iron-gray/20" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/LeaderboardsHero.tsx b/apps/website/components/leaderboards/LeaderboardsHero.tsx
index 1bb161315..1240d424a 100644
--- a/apps/website/components/leaderboards/LeaderboardsHero.tsx
+++ b/apps/website/components/leaderboards/LeaderboardsHero.tsx
@@ -25,27 +25,29 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
       padding={8} 
       position="relative" 
       overflow="hidden" 
-      bg="bg-gradient-to-br from-yellow-600/20 via-iron-gray to-deep-graphite" 
-      borderColor="border-yellow-500/20"
+      bg="bg-gradient-to-br from-primary-blue/10 via-deep-charcoal to-graphite-black" 
+      borderColor="border-primary-blue/20"
     >
-      <DecorativeBlur color="yellow" size="lg" position="top-right" opacity={10} />
-      <DecorativeBlur color="blue" size="md" position="bottom-left" opacity={5} />
+      <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
+      <DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />
 
       <Box position="relative" zIndex={10}>
         <Stack direction="row" align="center" gap={4} mb={4}>
-          <Surface 
-            variant="muted" 
-            rounded="xl" 
-            padding={3} 
-            bg="bg-gradient-to-br from-yellow-400/20 to-yellow-600/10" 
+          <Box 
+            p={3} 
+            bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
             border 
-            borderColor="border-yellow-400/30"
+            borderColor="border-primary-blue/30"
+            rounded="xl"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
           >
-            <Icon icon={Award} size={7} color="#facc15" />
-          </Surface>
+            <Icon icon={Award} size={7} color="text-primary-blue" />
+          </Box>
           <Box>
-            <Heading level={1}>Leaderboards</Heading>
-            <Text color="text-gray-400" block mt={1}>Where champions rise and legends are made</Text>
+            <Heading level={1} weight="bold" letterSpacing="tight">Leaderboards</Heading>
+            <Text color="text-gray-400" block mt={1} size="sm" uppercase letterSpacing="widest" weight="bold">Precision Performance Tracking</Text>
           </Box>
         </Stack>
 
@@ -53,25 +55,27 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
           size="lg" 
           color="text-gray-400" 
           block 
-          mb={6} 
+          mb={8} 
           leading="relaxed" 
           maxWidth="42rem"
         >
-          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
+          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics.
         </Text>
 
-        <Stack direction="row" gap={3} wrap>
+        <Stack direction="row" gap={4} wrap>
           <Button
-            variant="secondary"
+            variant="primary"
             onClick={onNavigateToDrivers}
-            icon={<Icon icon={Trophy} size={4} color="#3b82f6" />}
+            icon={<Icon icon={Trophy} size={4} />}
+            shadow="shadow-lg shadow-primary-blue/20"
           >
             Driver Rankings
           </Button>
           <Button
             variant="secondary"
             onClick={onNavigateToTeams}
-            icon={<Icon icon={Users} size={4} color="#a855f7" />}
+            icon={<Icon icon={Users} size={4} />}
+            hoverBg="bg-white/5"
           >
             Team Rankings
           </Button>
diff --git a/apps/website/components/leaderboards/RankMedal.tsx b/apps/website/components/leaderboards/RankMedal.tsx
new file mode 100644
index 000000000..0264a0ea7
--- /dev/null
+++ b/apps/website/components/leaderboards/RankMedal.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Crown, Medal } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+
+interface RankMedalProps {
+  rank: number;
+  size?: 'sm' | 'md' | 'lg';
+  showIcon?: boolean;
+}
+
+export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
+  const isTop3 = rank <= 3;
+  
+  const sizeMap = {
+    sm: '7',
+    md: '8',
+    lg: '10',
+  };
+
+  const textSizeMap = {
+    sm: 'xs',
+    md: 'xs',
+    lg: 'sm',
+  } as const;
+
+  const iconSize = {
+    sm: 3,
+    md: 3.5,
+    lg: 4.5,
+  };
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      rounded="full" 
+      border 
+      h={sizeMap[size]}
+      w={sizeMap[size]}
+      bg={MedalDisplay.getBg(rank)}
+      color={MedalDisplay.getColor(rank)}
+    >
+      {isTop3 && showIcon ? (
+        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} />
+      ) : (
+        <Text weight="bold" size={textSizeMap[size]}>{rank}</Text>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/RankingRow.tsx b/apps/website/components/leaderboards/RankingRow.tsx
new file mode 100644
index 000000000..2cf8e7337
--- /dev/null
+++ b/apps/website/components/leaderboards/RankingRow.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { TableCell, TableRow } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { RankMedal } from './RankMedal';
+import { DeltaChip } from './DeltaChip';
+import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+
+interface RankingRowProps {
+  id: string;
+  rank: number;
+  rankDelta?: number;
+  name: string;
+  avatarUrl: string;
+  nationality: string;
+  skillLevel: string;
+  racesCompleted: number;
+  rating: number;
+  wins: number;
+  onClick?: () => void;
+}
+
+export function RankingRow({
+  rank,
+  rankDelta,
+  name,
+  avatarUrl,
+  nationality,
+  skillLevel,
+  racesCompleted,
+  rating,
+  wins,
+  onClick,
+}: RankingRowProps) {
+  return (
+    <TableRow
+      clickable={!!onClick}
+      onClick={onClick}
+      group
+    >
+      <TableCell>
+        <Stack direction="row" align="center" gap={4}>
+          <Box w="8" display="flex" justifyContent="center">
+            <RankMedal rank={rank} size="md" />
+          </Box>
+          {rankDelta !== undefined && (
+            <Box w="10">
+              <DeltaChip value={rankDelta} type="rank" />
+            </Box>
+          )}
+        </Stack>
+      </TableCell>
+
+      <TableCell>
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box 
+            position="relative" 
+            w="10" 
+            h="10" 
+            rounded="full" 
+            overflow="hidden" 
+            border 
+            borderColor="border-charcoal-outline"
+            groupHoverBorderColor="primary-blue/50"
+            transition
+          >
+            <Image 
+              src={avatarUrl} 
+              alt={name} 
+              width={40} 
+              height={40} 
+              fullWidth
+              fullHeight
+              objectFit="cover" 
+            />
+          </Box>
+          <Box minWidth="0">
+            <Text 
+              weight="semibold" 
+              color="text-white" 
+              block 
+              truncate
+              groupHoverTextColor="text-primary-blue"
+              transition
+            >
+              {name}
+            </Text>
+            <Stack direction="row" align="center" gap={2} mt={0.5}>
+              <Text size="xs" color="text-gray-500">{nationality}</Text>
+              <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+              <Text size="xs" color="text-gray-500">{skillLevel}</Text>
+            </Stack>
+          </Box>
+        </Box>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text color="text-gray-400" font="mono">{racesCompleted}</Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-primary-blue">
+          {RatingDisplay.format(rating)}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-performance-green">
+          {wins}
+        </Text>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/apps/website/components/leaderboards/SeasonSelector.tsx b/apps/website/components/leaderboards/SeasonSelector.tsx
new file mode 100644
index 000000000..e9920be58
--- /dev/null
+++ b/apps/website/components/leaderboards/SeasonSelector.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Select } from '@/ui/Select';
+
+interface Season {
+  id: string;
+  name: string;
+  isActive?: boolean;
+}
+
+interface SeasonSelectorProps {
+  seasons: Season[];
+  selectedSeasonId: string;
+  onSeasonChange: (id: string) => void;
+}
+
+export function SeasonSelector({ seasons, selectedSeasonId, onSeasonChange }: SeasonSelectorProps) {
+  const options = seasons.map(season => ({
+    value: season.id,
+    label: `${season.name}${season.isActive ? ' (Active)' : ''}`
+  }));
+
+  return (
+    <Box display="flex" alignItems="center" gap={3}>
+      <Box display="flex" alignItems="center" gap={2} color="text-gray-500">
+        <Icon icon={Calendar} size={4} />
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider">Season</Text>
+      </Box>
+      <Box width="48">
+        <Select
+          options={options}
+          value={selectedSeasonId}
+          onChange={(e) => onSeasonChange(e.target.value)}
+          fullWidth={true}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
index 94a0f8e63..b7a757d87 100644
--- a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Users, Crown, ChevronRight } from 'lucide-react';
+import { Users, ChevronRight } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
@@ -8,8 +8,8 @@ import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 import { getMediaUrl } from '@/lib/utilities/media';
-import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
-import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+import { RankMedal } from './RankMedal';
+import { LeaderboardTableShell } from './LeaderboardTableShell';
 
 interface TeamLeaderboardPreviewProps {
   teams: {
@@ -27,38 +27,57 @@ interface TeamLeaderboardPreviewProps {
 }
 
 export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
-  const top5 = teams; // Already sliced in builder when implemented
+  const top5 = teams;
 
   return (
-    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
-      <Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+    <LeaderboardTableShell>
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        justifyContent="between" 
+        px={5} 
+        py={4} 
+        borderBottom 
+        borderColor="border-charcoal-outline/50" 
+        bg="bg-deep-charcoal/40"
+      >
         <Box display="flex" alignItems="center" gap={3}>
-          <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-purple-500/20 to-purple-500/5" border borderColor="border-purple-500/20">
+          <Box 
+            display="flex" 
+            h="10" 
+            w="10" 
+            alignItems="center" 
+            justifyContent="center" 
+            rounded="lg" 
+            bg="bg-gradient-to-br from-purple-500/15 to-purple-500/5" 
+            border 
+            borderColor="border-purple-500/20"
+          >
             <Icon icon={Users} size={5} color="text-purple-400" />
           </Box>
           <Box>
-            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Team Rankings</Heading>
-            <Text size="xs" color="text-gray-500" block>Top performing racing teams</Text>
+            <Heading level={3} fontSize="lg" weight="bold" color="text-white" letterSpacing="tight">Team Rankings</Heading>
+            <Text size="xs" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Top Performing Teams</Text>
           </Box>
         </Box>
         <Button
           variant="secondary"
           onClick={onNavigateToTeams}
           size="sm"
+          hoverBg="bg-purple-500/10"
+          transition
         >
           <Stack direction="row" align="center" gap={2}>
-            <Text size="sm">View All</Text>
+            <Text size="sm" weight="medium">View All</Text>
             <Icon icon={ChevronRight} size={4} />
           </Stack>
         </Button>
       </Box>
 
-      <Stack gap={0} 
-        // eslint-disable-next-line gridpilot-rules/component-classification
-        className="divide-y divide-charcoal-outline/50"
-      >
-        {top5.map((team) => {
+      <Stack gap={0}>
+        {top5.map((team, index) => {
           const position = team.position;
+          const isLast = index === top5.length - 1;
 
           return (
             <Box
@@ -74,24 +93,29 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
               w="full"
               textAlign="left"
               transition
-              hoverBg="bg-iron-gray/30"
+              hoverBg="bg-white/[0.02]"
               group
+              borderBottom={!isLast}
+              borderColor="border-charcoal-outline/30"
             >
-              <Box 
-                display="flex" 
-                h="8" 
-                w="8" 
-                alignItems="center" 
-                justifyContent="center" 
-                rounded="full" 
-                border 
-                // eslint-disable-next-line gridpilot-rules/component-classification
-                className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
-              >
-                {position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
+              <Box w="8" display="flex" justifyContent="center">
+                <RankMedal rank={position} size="sm" />
               </Box>
 
-              <Box display="flex" h="9" w="9" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline" border borderColor="border-charcoal-outline" overflow="hidden">
+              <Box 
+                display="flex" 
+                h="9" 
+                w="9" 
+                alignItems="center" 
+                justifyContent="center" 
+                rounded="lg" 
+                bg="bg-graphite-black/50" 
+                border 
+                borderColor="border-charcoal-outline" 
+                overflow="hidden" 
+                groupHoverBorderColor="purple-400/50" 
+                transition
+              >
                 <Image
                   src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                   alt={team.name}
@@ -104,57 +128,45 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
               </Box>
 
               <Box flexGrow={1} minWidth="0">
-                <Text weight="medium" color="text-white" truncate groupHoverTextColor="text-purple-400" transition block>
+                <Text 
+                  weight="semibold" 
+                  color="text-white" 
+                  truncate 
+                  groupHoverTextColor="text-purple-400" 
+                  transition 
+                  block
+                >
                   {team.name}
                 </Text>
                 <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
                   {team.category && (
                     <Box display="flex" alignItems="center" gap={1} color="text-purple-400">
                       <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
-                      <Text size="xs">{team.category}</Text>
+                      <Text size="xs" weight="medium">{team.category}</Text>
                     </Box>
                   )}
+                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
                   <Box display="flex" alignItems="center" gap={1}>
                     <Icon icon={Users} size={3} color="text-gray-500" />
                     <Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
                   </Box>
-                  <Box as="span" 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    className={SkillLevelDisplay.getColor(team.category || '')}
-                  >
-                    <Text size="xs">{SkillLevelDisplay.getLabel(team.category || '')}</Text>
-                  </Box>
                 </Box>
               </Box>
 
-              <Box display="flex" alignItems="center" gap={4}>
-                <Box textAlign="center">
-                  <Text color="text-purple-400" font="mono" weight="semibold" block>{team.memberCount}</Text>
-                  <Text 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    style={{ fontSize: '10px' }} 
-                    color="text-gray-500" 
-                    block
-                  >
-                    Members
-                  </Text>
+              <Box display="flex" alignItems="center" gap={6}>
+                <Box textAlign="right">
+                  <Text color="text-purple-400" font="mono" weight="bold" block size="sm">{team.memberCount}</Text>
+                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Members</Text>
                 </Box>
-                <Box textAlign="center">
-                  <Text color="text-performance-green" font="mono" weight="semibold" block>{team.totalWins}</Text>
-                  <Text 
-                    // eslint-disable-next-line gridpilot-rules/component-classification
-                    style={{ fontSize: '10px' }} 
-                    color="text-gray-500" 
-                    block
-                  >
-                    Wins
-                  </Text>
+                <Box textAlign="right" minWidth="12">
+                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>
+                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
                 </Box>
               </Box>
             </Box>
           );
         })}
       </Stack>
-    </Box>
+    </LeaderboardTableShell>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/components/leaderboards/TeamRankingRow.tsx b/apps/website/components/leaderboards/TeamRankingRow.tsx
new file mode 100644
index 000000000..ace8dc850
--- /dev/null
+++ b/apps/website/components/leaderboards/TeamRankingRow.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { TableCell, TableRow } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { RankMedal } from './RankMedal';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+interface TeamRankingRowProps {
+  id: string;
+  rank: number;
+  name: string;
+  logoUrl?: string;
+  rating: number;
+  wins: number;
+  races: number;
+  memberCount: number;
+  onClick?: () => void;
+}
+
+export function TeamRankingRow({
+  id,
+  rank,
+  name,
+  logoUrl,
+  rating,
+  wins,
+  races,
+  memberCount,
+  onClick,
+}: TeamRankingRowProps) {
+  return (
+    <TableRow
+      clickable={!!onClick}
+      onClick={onClick}
+      group
+    >
+      <TableCell>
+        <Box w="8" display="flex" justifyContent="center">
+          <RankMedal rank={rank} size="md" />
+        </Box>
+      </TableCell>
+
+      <TableCell>
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box 
+            position="relative" 
+            w="10" 
+            h="10" 
+            rounded="lg" 
+            overflow="hidden" 
+            border 
+            borderColor="border-charcoal-outline"
+            bg="bg-graphite-black/50"
+            groupHoverBorderColor="purple-400/50"
+            transition
+          >
+            <Image 
+              src={logoUrl || getMediaUrl('team-logo', id)} 
+              alt={name} 
+              width={40} 
+              height={40} 
+              fullWidth
+              fullHeight
+              objectFit="cover" 
+            />
+          </Box>
+          <Box minWidth="0">
+            <Text 
+              weight="semibold" 
+              color="text-white" 
+              block 
+              truncate
+              groupHoverTextColor="text-purple-400"
+              transition
+            >
+              {name}
+            </Text>
+            <Text size="xs" color="text-gray-500" block mt={0.5}>
+              {memberCount} Members
+            </Text>
+          </Box>
+        </Box>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-purple-400">
+          {rating}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-performance-green">
+          {wins}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text color="text-gray-400" font="mono">{races}</Text>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueCard.tsx b/apps/website/components/leagues/LeagueCard.tsx
new file mode 100644
index 000000000..6a3681226
--- /dev/null
+++ b/apps/website/components/leagues/LeagueCard.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { Trophy, Users, Calendar, ChevronRight } from 'lucide-react';
+
+interface LeagueCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  coverUrl: string;
+  logoUrl?: string;
+  gameName?: string;
+  memberCount: number;
+  maxMembers?: number;
+  nextRaceDate?: string;
+  championshipType: 'driver' | 'team' | 'nations' | 'trophy';
+  onClick?: () => void;
+}
+
+export function LeagueCard({
+  name,
+  description,
+  coverUrl,
+  logoUrl,
+  gameName,
+  memberCount,
+  maxMembers,
+  nextRaceDate,
+  championshipType,
+  onClick,
+}: LeagueCardProps) {
+  const fillPercentage = maxMembers ? (memberCount / maxMembers) * 100 : 0;
+
+  return (
+    <Box 
+      as="article"
+      onClick={onClick}
+      position="relative"
+      display="flex"
+      flexDirection="col"
+      overflow="hidden"
+      border
+      borderColor="zinc-800"
+      bg="zinc-900/50"
+      hoverBorderColor="blue-500/30"
+      hoverBg="zinc-900"
+      transition
+      cursor="pointer"
+      group
+    >
+      {/* Cover Image */}
+      <Box position="relative" h="32" overflow="hidden">
+        <Box fullWidth fullHeight opacity={0.6}>
+          <Image
+            src={coverUrl}
+            alt={`${name} cover`}
+            fullWidth
+            fullHeight
+            objectFit="cover"
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="transition-transform duration-500 group-hover:scale-105"
+          />
+        </Box>
+        <Box position="absolute" inset="0" bg="linear-gradient(to top, #09090b, transparent)" />
+        
+        {/* Game Badge */}
+        {gameName && (
+          <Box 
+            position="absolute" 
+            top="3" 
+            left="3" 
+            px={2} 
+            py={1} 
+            bg="zinc-900/80" 
+            border 
+            borderColor="white/10" 
+            blur="sm"
+          >
+            <Text weight="bold" color="text-zinc-300" uppercase letterSpacing="0.05em" fontSize="10px">
+              {gameName}
+            </Text>
+          </Box>
+        )}
+
+        {/* Championship Icon */}
+        <Box 
+          position="absolute" 
+          top="3" 
+          right="3" 
+          p={1.5} 
+          bg="zinc-900/80" 
+          color="text-zinc-400" 
+          border 
+          borderColor="white/10" 
+          blur="sm"
+        >
+          {championshipType === 'driver' && <Trophy size={14} />}
+          {championshipType === 'team' && <Users size={14} />}
+        </Box>
+      </Box>
+
+      {/* Content */}
+      <Box position="relative" display="flex" flexDirection="col" flexGrow={1} p={4} pt={6}>
+        {/* Logo */}
+        <Box 
+          position="absolute" 
+          top="-6" 
+          left="4" 
+          w="12" 
+          h="12" 
+          border 
+          borderColor="zinc-800" 
+          bg="zinc-950" 
+          shadow="xl" 
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={`${name} logo`} fullWidth fullHeight objectFit="cover" />
+          ) : (
+            <Box fullWidth fullHeight display="flex" alignItems="center" justifyContent="center" bg="zinc-900" color="text-zinc-700">
+              <Trophy size={20} />
+            </Box>
+          )}
+        </Box>
+
+        <Box display="flex" flexDirection="col" gap={1} mb={4}>
+          <Heading level={3} fontSize="lg" weight="bold" color="text-white" 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="group-hover:text-blue-400 transition-colors truncate"
+          >
+            {name}
+          </Heading>
+          <Text size="xs" color="text-zinc-500" lineClamp={2} leading="relaxed" h="8">
+            {description || 'No description available'}
+          </Text>
+        </Box>
+
+        {/* Stats */}
+        <Box display="flex" flexDirection="col" gap={3} mt="auto">
+          <Box display="flex" flexDirection="col" gap={1.5}>
+            <Box display="flex" justifyContent="between">
+              <Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Drivers</Text>
+              <Text color="text-zinc-400" font="mono" fontSize="10px">{memberCount}/{maxMembers || '∞'}</Text>
+            </Box>
+            <Box h="1" bg="zinc-800" overflow="hidden">
+              <Box 
+                h="full" 
+                transition 
+                bg={fillPercentage > 90 ? 'bg-amber-500' : 'bg-blue-500'}
+                w={`${Math.min(fillPercentage, 100)}%`}
+              />
+            </Box>
+          </Box>
+
+          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="zinc-800/50">
+            <Box display="flex" alignItems="center" gap={2} color="text-zinc-500">
+              <Calendar size={12} />
+              <Text weight="bold" uppercase font="mono" fontSize="10px">
+                {nextRaceDate || 'TBD'}
+              </Text>
+            </Box>
+            <Box display="flex" alignItems="center" gap={1} color="text-zinc-500" 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              className="group-hover:text-blue-400 transition-colors"
+            >
+              <Text weight="bold" uppercase letterSpacing="widest" fontSize="10px">View</Text>
+              <Box 
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                className="transition-transform group-hover:translate-x-0.5"
+              >
+                <ChevronRight size={12} />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueHeader.tsx b/apps/website/components/leagues/LeagueHeader.tsx
index bddf50788..565b3be0b 100644
--- a/apps/website/components/leagues/LeagueHeader.tsx
+++ b/apps/website/components/leagues/LeagueHeader.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
-import { MembershipStatus } from './MembershipStatus';
-import { getMediaUrl } from '@/lib/utilities/media';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
-import { LeagueHeader as UiLeagueHeader } from '@/ui/LeagueHeader';
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { MembershipStatus } from './MembershipStatus';
 
-// Main sponsor info for "by XYZ" display
 interface MainSponsorInfo {
   name: string;
   logoUrl?: string;
@@ -27,33 +29,61 @@ export function LeagueHeader({
   description,
   mainSponsor,
 }: LeagueHeaderProps) {
-  const logoUrl = getMediaUrl('league-logo', leagueId);
-
   return (
-    <UiLeagueHeader
-      name={leagueName}
-      description={description}
-      logoUrl={logoUrl}
-      statusContent={<MembershipStatus leagueId={leagueId} />}
-      sponsorContent={
-        mainSponsor ? (
-          mainSponsor.websiteUrl ? (
-            <Box
-              as="a"
-              href={mainSponsor.websiteUrl}
-              target="_blank"
-              rel="noreferrer"
-              color="text-primary-blue"
-              hoverTextColor="text-primary-blue/80"
-              transition
-            >
-              {mainSponsor.name}
-            </Box>
-          ) : (
-            <Text color="text-primary-blue">{mainSponsor.name}</Text>
-          )
-        ) : undefined
-      }
-    />
+    <Box as="header" mb={8}>
+      <Stack direction="row" align="center" gap={6}>
+        <Box 
+          position="relative" 
+          w="20" 
+          h="20" 
+          overflow="hidden" 
+          border 
+          borderColor="white/10" 
+          bg="zinc-900" 
+          shadow="2xl"
+        >
+          <Image
+            src={`/api/media/league-logo/${leagueId}`}
+            alt={`${leagueName} logo`}
+            fullWidth
+            fullHeight
+            objectFit="cover"
+          />
+        </Box>
+        <Stack gap={1}>
+          <Stack direction="row" align="center" gap={4}>
+            <Heading level={1} fontSize="3xl" weight="bold" color="text-white">
+              {leagueName}
+              {mainSponsor && (
+                <Text ml={3} size="lg" weight="normal" color="text-zinc-500">
+                  by{' '}
+                  {mainSponsor.websiteUrl ? (
+                    <Box
+                      as="a"
+                      href={mainSponsor.websiteUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      color="text-blue-500"
+                      hoverTextColor="text-blue-400"
+                      transition
+                    >
+                      {mainSponsor.name}
+                    </Box>
+                  ) : (
+                    <Text color="text-blue-500">{mainSponsor.name}</Text>
+                  )}
+                </Text>
+              )}
+            </Heading>
+            <MembershipStatus leagueId={leagueId} />
+          </Stack>
+          {description && (
+            <Text color="text-zinc-400" size="sm" maxWidth="2xl" block leading="relaxed">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </Stack>
+    </Box>
   );
 }
diff --git a/apps/website/components/leagues/LeagueHeaderPanel.tsx b/apps/website/components/leagues/LeagueHeaderPanel.tsx
new file mode 100644
index 000000000..c00159dbb
--- /dev/null
+++ b/apps/website/components/leagues/LeagueHeaderPanel.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Trophy, Users, Timer, Activity, type LucideIcon } from 'lucide-react';
+import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+
+interface LeagueHeaderPanelProps {
+  viewData: LeagueDetailViewData;
+}
+
+export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
+  return (
+    <Surface variant="dark" border rounded="lg" padding={6} position="relative" overflow="hidden">
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        right={0} 
+        w="300px" 
+        h="100%" 
+        bg="bg-gradient-to-l from-primary-blue/5 to-transparent" 
+        pointerEvents="none"
+      />
+      
+      <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={6}>
+        <Stack gap={2}>
+          <Stack direction="row" align="center" gap={3}>
+            <Box p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
+              <Icon icon={Trophy} size={6} color="text-primary-blue" />
+            </Box>
+            <Heading level={1} letterSpacing="tight">
+              {viewData.name}
+            </Heading>
+          </Stack>
+          <Text color="text-gray-400" size="sm" maxWidth="42rem">
+            {viewData.description}
+          </Text>
+        </Stack>
+
+        <Stack direction="row" gap={8} wrap>
+          <StatItem 
+            icon={Users} 
+            label="Members" 
+            value={viewData.info.membersCount.toString()} 
+            color="text-primary-blue"
+          />
+          <StatItem 
+            icon={Timer} 
+            label="Races" 
+            value={viewData.info.racesCount.toString()} 
+            color="text-neon-aqua"
+          />
+          <StatItem 
+            icon={Activity} 
+            label="Avg SOF" 
+            value={(viewData.info.avgSOF ?? 0).toString()} 
+            color="text-performance-green"
+          />
+        </Stack>
+      </Stack>
+    </Surface>
+  );
+}
+
+function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
+  return (
+    <Stack gap={1}>
+      <Stack direction="row" align="center" gap={1.5}>
+        <Icon icon={icon} size={3.5} color="text-gray-500" />
+        <Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" display="block">
+          {label.toUpperCase()}
+        </Text>
+      </Stack>
+      <Text size="xl" weight="bold" color={color} lineHeight="none">
+        {value}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueNavTabs.tsx b/apps/website/components/leagues/LeagueNavTabs.tsx
new file mode 100644
index 000000000..c6086af69
--- /dev/null
+++ b/apps/website/components/leagues/LeagueNavTabs.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Link } from '@/ui/Link';
+
+interface Tab {
+  label: string;
+  href: string;
+  exact?: boolean;
+}
+
+interface LeagueNavTabsProps {
+  tabs: Tab[];
+  currentPathname: string;
+}
+
+export function LeagueNavTabs({ tabs, currentPathname }: LeagueNavTabsProps) {
+  return (
+    <Box as="nav" borderBottom borderColor="zinc-800" mb={6}>
+      <Stack as="ul" direction="row" gap={8} overflow="auto" hideScrollbar>
+        {tabs.map((tab) => {
+          const isActive = tab.exact 
+            ? currentPathname === tab.href 
+            : currentPathname.startsWith(tab.href);
+
+          return (
+            <Box as="li" key={tab.href} position="relative">
+              <Link
+                href={tab.href}
+                variant="ghost"
+                pb={4}
+                display="block"
+                size="sm"
+                weight="medium"
+                color={isActive ? 'text-blue-500' : 'text-zinc-400'}
+                hoverTextColor={isActive ? 'text-blue-500' : 'text-zinc-200'}
+                transition
+              >
+                {tab.label}
+              </Link>
+              {isActive && (
+                <Box 
+                  position="absolute" 
+                  bottom="0" 
+                  left="0" 
+                  right="0" 
+                  h="0.5" 
+                  bg="bg-blue-500" 
+                />
+              )}
+            </Box>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueRulesPanel.tsx b/apps/website/components/leagues/LeagueRulesPanel.tsx
new file mode 100644
index 000000000..6e78171cb
--- /dev/null
+++ b/apps/website/components/leagues/LeagueRulesPanel.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Shield, Info } from 'lucide-react';
+
+interface Rule {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface LeagueRulesPanelProps {
+  rules: Rule[];
+}
+
+export function LeagueRulesPanel({ rules }: LeagueRulesPanelProps) {
+  return (
+    <Box as="section">
+      <Stack gap={8}>
+        <Box display="flex" alignItems="start" gap={4} p={4} bg="blue-500/5" border borderColor="blue-500/20">
+          <Box color="text-blue-500" mt={0.5}><Info size={20} /></Box>
+          <Stack gap={1}>
+            <Text size="sm" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">Code of Conduct</Text>
+            <Text size="sm" color="text-zinc-400" leading="relaxed">
+              All drivers are expected to maintain a high standard of sportsmanship. 
+              Intentional wrecking or abusive behavior will result in immediate disqualification.
+            </Text>
+          </Stack>
+        </Box>
+
+        <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+          {rules.map((rule) => (
+            <Box as="article" key={rule.id} display="flex" flexDirection="col" gap={3} p={6} border borderColor="zinc-800" bg="zinc-900/30">
+              <Box display="flex" alignItems="center" gap={3}>
+                <Box p={2} bg="zinc-800" color="text-zinc-400">
+                  <Shield size={18} />
+                </Box>
+                <Heading level={3} fontSize="md" weight="bold" color="text-white">{rule.title}</Heading>
+              </Box>
+              <Text size="sm" color="text-zinc-400" leading="relaxed">
+                {rule.content}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueSchedulePanel.tsx b/apps/website/components/leagues/LeagueSchedulePanel.tsx
new file mode 100644
index 000000000..e704d9b90
--- /dev/null
+++ b/apps/website/components/leagues/LeagueSchedulePanel.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { MapPin, Clock } from 'lucide-react';
+
+interface RaceEvent {
+  id: string;
+  title: string;
+  trackName: string;
+  date: string;
+  time: string;
+  status: 'upcoming' | 'live' | 'completed';
+}
+
+interface LeagueSchedulePanelProps {
+  events: RaceEvent[];
+}
+
+export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
+  return (
+    <Box as="section">
+      <Stack gap={4}>
+        {events.map((event) => (
+          <Box 
+            as="article"
+            key={event.id}
+            display="flex"
+            alignItems="center"
+            gap={6}
+            p={4}
+            border
+            borderColor="zinc-800"
+            bg="zinc-900/50"
+            hoverBorderColor="zinc-700"
+            transition
+          >
+            <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase>
+                {new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
+              </Text>
+              <Text size="2xl" weight="bold" color="text-white">
+                {new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
+              </Text>
+            </Box>
+
+            <Box flexGrow={1}>
+              <Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
+              <Stack direction="row" gap={4} mt={1}>
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box color="text-zinc-600"><MapPin size={14} /></Box>
+                  <Text size="sm" color="text-zinc-400">{event.trackName}</Text>
+                </Box>
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box color="text-zinc-600"><Clock size={14} /></Box>
+                  <Text size="sm" color="text-zinc-400">{event.time}</Text>
+                </Box>
+              </Stack>
+            </Box>
+
+            <Box display="flex" alignItems="center" gap={3}>
+              {event.status === 'live' && (
+                <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
+                  <Box w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
+                  <Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
+                    Live
+                  </Text>
+                </Box>
+              )}
+              {event.status === 'upcoming' && (
+                <Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
+                  <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
+                    Upcoming
+                  </Text>
+                </Box>
+              )}
+              {event.status === 'completed' && (
+                <Box px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
+                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
+                    Results
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueSlider.tsx b/apps/website/components/leagues/LeagueSlider.tsx
new file mode 100644
index 000000000..4161a24e9
--- /dev/null
+++ b/apps/website/components/leagues/LeagueSlider.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useCallback, useRef, useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
+import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
+import { LeagueSummaryViewModelBuilder } from '@/lib/builders/view-models/LeagueSummaryViewModelBuilder';
+import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface LeagueSliderProps {
+  title: string;
+  icon: LucideIcon;
+  description: string;
+  leagues: LeaguesViewData['leagues'];
+  autoScroll?: boolean;
+  iconColor?: string;
+  scrollSpeedMultiplier?: number;
+  scrollDirection?: 'left' | 'right';
+}
+
+export function LeagueSlider({
+  title,
+  icon: IconComp,
+  description,
+  leagues,
+  iconColor = 'text-primary-blue',
+}: LeagueSliderProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+
+  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;
+      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+  }, []);
+
+  if (leagues.length === 0) return null;
+
+  return (
+    <Box mb={10}>
+      {/* Section header */}
+      <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box display="flex" h={10} w={10} alignItems="center" justifyContent="center" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline">
+            <Icon icon={IconComp} size={5} color={iconColor} />
+          </Box>
+          <Box>
+            <Heading level={2}>{title}</Heading>
+            <Text size="xs" color="text-gray-500">{description}</Text>
+          </Box>
+          <Box as="span" ml={2} px={2} py={0.5} rounded="full" fontSize="0.75rem" bg="bg-charcoal-outline/50" color="text-gray-400">
+            {leagues.length}
+          </Box>
+        </Stack>
+
+        {/* Navigation arrows */}
+        <Stack direction="row" align="center" gap={2}>
+          <Button
+            variant="secondary"
+            onClick={() => scroll('left')}
+            disabled={!canScrollLeft}
+            size="sm"
+            w="2rem"
+            h="2rem"
+          >
+            <Icon icon={ChevronLeft} size={4} />
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => scroll('right')}
+            disabled={!canScrollRight}
+            size="sm"
+            w="2rem"
+            h="2rem"
+          >
+            <Icon icon={ChevronRight} size={4} />
+          </Button>
+        </Stack>
+      </Box>
+
+      {/* Scrollable container with fade edges */}
+      <Box position="relative">
+        <Box 
+          position="absolute" 
+          top={0} 
+          bottom={4} 
+          left={0} 
+          w="3rem" 
+          bg="bg-gradient-to-r from-deep-graphite to-transparent" 
+          zIndex={10} 
+          pointerEvents="none" 
+        />
+        <Box 
+          position="absolute" 
+          top={0} 
+          bottom={4} 
+          right={0} 
+          w="3rem" 
+          bg="bg-gradient-to-l from-deep-graphite to-transparent" 
+          zIndex={10} 
+          pointerEvents="none" 
+        />
+        
+        <Box
+          ref={scrollRef}
+          onScroll={checkScrollButtons}
+          display="flex"
+          gap={4}
+          overflow="auto"
+          pb={4}
+          px={4}
+          hideScrollbar
+        >
+          {leagues.map((league) => {
+            const viewModel = LeagueSummaryViewModelBuilder.build(league);
+            
+            return (
+              <Box key={league.id} flexShrink={0} w="320px">
+                <Link href={routes.league.detail(league.id)} block>
+                  <LeagueCard league={viewModel} />
+                </Link>
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/LeagueStandingsTable.tsx b/apps/website/components/leagues/LeagueStandingsTable.tsx
new file mode 100644
index 000000000..f3c442e64
--- /dev/null
+++ b/apps/website/components/leagues/LeagueStandingsTable.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface StandingEntry {
+  position: number;
+  driverName: string;
+  teamName?: string;
+  points: number;
+  wins: number;
+  podiums: number;
+  gap: string;
+}
+
+interface LeagueStandingsTableProps {
+  standings: StandingEntry[];
+}
+
+export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
+  return (
+    <Box as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
+      <Box as="table" w="full" textAlign="left">
+        <Box as="thead">
+          <Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
+            <Box as="th" px={4} py={3} w="12">
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
+            </Box>
+            <Box as="th" px={4} py={3}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
+            </Box>
+            <Box as="th" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
+            </Box>
+            <Box as="th" px={4} py={3} textAlign="center">
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
+            </Box>
+            <Box as="th" px={4} py={3} textAlign="center">
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
+            </Box>
+            <Box as="th" px={4} py={3} textAlign="right">
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
+            </Box>
+            <Box as="th" px={4} py={3} textAlign="right">
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
+            </Box>
+          </Box>
+        </Box>
+        <Box as="tbody">
+          {standings.map((entry) => (
+            <Box as="tr" key={entry.driverName} borderBottom borderColor="zinc-800" hoverBg="zinc-800/50" transition>
+              <Box as="td" px={4} py={3}>
+                <Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
+              </Box>
+              <Box as="td" px={4} py={3}>
+                <Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
+              </Box>
+              <Box as="td" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
+                <Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
+              </Box>
+              <Box as="td" px={4} py={3} textAlign="center">
+                <Text size="sm" color="text-zinc-400">{entry.wins}</Text>
+              </Box>
+              <Box as="td" px={4} py={3} textAlign="center">
+                <Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
+              </Box>
+              <Box as="td" px={4} py={3} textAlign="right">
+                <Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
+              </Box>
+              <Box as="td" px={4} py={3} textAlign="right">
+                <Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/ScheduleTable.tsx b/apps/website/components/leagues/ScheduleTable.tsx
new file mode 100644
index 000000000..69709b61b
--- /dev/null
+++ b/apps/website/components/leagues/ScheduleTable.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Calendar, MapPin, ChevronRight } from 'lucide-react';
+import { Surface } from '@/ui/Surface';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface RaceEntry {
+  id: string;
+  name: string;
+  track: string;
+  scheduledAt: string;
+  status: 'upcoming' | 'live' | 'completed';
+}
+
+interface ScheduleTableProps {
+  races: RaceEntry[];
+}
+
+export function ScheduleTable({ races }: ScheduleTableProps) {
+  return (
+    <Surface variant="dark" border rounded="lg" overflow="hidden">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Race</TableHeader>
+            <TableHeader>Track</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader textAlign="right">Actions</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {races.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} textAlign="center" py={12}>
+                <Text color="text-gray-500">No races scheduled yet.</Text>
+              </TableCell>
+            </TableRow>
+          ) : (
+            races.map((race) => (
+              <TableRow key={race.id}>
+                <TableCell>
+                  <Text weight="medium" color="text-white">{race.name}</Text>
+                </TableCell>
+                <TableCell>
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={MapPin} size={3.5} color="text-gray-500" />
+                    <Text size="sm" color="text-gray-400">{race.track}</Text>
+                  </Stack>
+                </TableCell>
+                <TableCell>
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={Calendar} size={3.5} color="text-gray-500" />
+                    <Text size="sm" color="text-gray-400">
+                      {new Date(race.scheduledAt).toLocaleDateString()}
+                    </Text>
+                  </Stack>
+                </TableCell>
+                <TableCell>
+                  <StatusBadge status={race.status} />
+                </TableCell>
+                <TableCell textAlign="right">
+                  <Link 
+                    href={routes.race.detail(race.id)} 
+                    variant="primary" 
+                    size="xs" 
+                    weight="bold"
+                    letterSpacing="wider"
+                  >
+                    <Stack direction="row" align="center" gap={1}>
+                      <Text>DETAILS</Text>
+                      <Icon icon={ChevronRight} size={3} />
+                    </Stack>
+                  </Link>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </Surface>
+  );
+}
+
+function StatusBadge({ status }: { status: RaceEntry['status'] }) {
+  const styles = {
+    upcoming: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+    live: 'bg-performance-green/10 text-performance-green border-performance-green/20 animate-pulse',
+    completed: 'bg-primary-blue/10 text-primary-blue border-primary-blue/20',
+  };
+
+  return (
+    <Box 
+      as="span" 
+      px={2} 
+      py={0.5} 
+      rounded="full" 
+      fontSize="10px" 
+      border
+      bg={styles[status].split(' ')[0]}
+      color={styles[status].split(' ')[1]}
+      borderColor={styles[status].split(' ')[2]}
+      animate={status === 'live' ? 'pulse' : 'none'}
+      letterSpacing="widest"
+      weight="bold"
+      display="inline-block"
+    >
+      {status.toUpperCase()}
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/StandingsTableShell.tsx b/apps/website/components/leagues/StandingsTableShell.tsx
new file mode 100644
index 000000000..61c88cb00
--- /dev/null
+++ b/apps/website/components/leagues/StandingsTableShell.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Trophy, TrendingUp } from 'lucide-react';
+
+interface StandingsEntry {
+  position: number;
+  driverName: string;
+  points: number;
+  wins: number;
+  podiums: number;
+  change?: number;
+}
+
+interface StandingsTableShellProps {
+  standings: StandingsEntry[];
+  title?: string;
+}
+
+export function StandingsTableShell({ standings, title = 'Championship Standings' }: StandingsTableShellProps) {
+  return (
+    <Surface variant="dark" border rounded="lg" overflow="hidden">
+      <Box px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+        <Stack direction="row" align="center" justify="between">
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Trophy} size={4} color="text-warning-amber" />
+            <Text weight="bold" letterSpacing="wider" size="sm" display="block">
+              {title.toUpperCase()}
+            </Text>
+          </Stack>
+          <Box px={2} py={0.5} rounded="md" bg="bg-charcoal-outline/50">
+            <Text size="xs" color="text-gray-400" weight="medium">{standings.length} Drivers</Text>
+          </Box>
+        </Stack>
+      </Box>
+      
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader w="4rem">Pos</TableHeader>
+            <TableHeader>Driver</TableHeader>
+            <TableHeader textAlign="center">Wins</TableHeader>
+            <TableHeader textAlign="center">Podiums</TableHeader>
+            <TableHeader textAlign="right">Points</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {standings.map((entry) => (
+            <TableRow key={entry.driverName}>
+              <TableCell>
+                <PositionBadge position={entry.position} />
+              </TableCell>
+              <TableCell>
+                <Stack direction="row" align="center" gap={3}>
+                  <Text weight="bold" color="text-white">{entry.driverName}</Text>
+                  {entry.change !== undefined && entry.change !== 0 && (
+                    <Stack direction="row" align="center" gap={0.5}>
+                      <Icon 
+                        icon={TrendingUp} 
+                        size={3} 
+                        color={entry.change > 0 ? 'text-performance-green' : 'text-error-red'} 
+                        transform={entry.change < 0 ? 'rotate(180deg)' : undefined}
+                      />
+                      <Text size="xs" color={entry.change > 0 ? 'text-performance-green' : 'text-error-red'}>
+                        {Math.abs(entry.change)}
+                      </Text>
+                    </Stack>
+                  )}
+                </Stack>
+              </TableCell>
+              <TableCell textAlign="center">
+                <Text size="sm" color={entry.wins > 0 ? 'text-white' : 'text-gray-500'}>{entry.wins}</Text>
+              </TableCell>
+              <TableCell textAlign="center">
+                <Text size="sm" color={entry.podiums > 0 ? 'text-white' : 'text-gray-500'}>{entry.podiums}</Text>
+              </TableCell>
+              <TableCell textAlign="right">
+                <Text weight="bold" color="text-primary-blue">{entry.points}</Text>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Surface>
+  );
+}
+
+function PositionBadge({ position }: { position: number }) {
+  const isPodium = position <= 3;
+  const colors = {
+    1: 'text-warning-amber bg-warning-amber/10 border-warning-amber/20',
+    2: 'text-gray-300 bg-gray-300/10 border-gray-300/20',
+    3: 'text-orange-400 bg-orange-400/10 border-orange-400/20',
+  };
+
+  return (
+    <Box 
+      center 
+      w={8} 
+      h={8} 
+      rounded="md" 
+      border={isPodium}
+      bg={isPodium ? colors[position as keyof typeof colors].split(' ')[1] : undefined}
+      color={isPodium ? colors[position as keyof typeof colors].split(' ')[0] : 'text-gray-500'}
+      borderColor={isPodium ? colors[position as keyof typeof colors].split(' ')[2] : undefined}
+    >
+      <Text size="sm" weight="bold">
+        {position}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/website/components/leagues/StewardingQueuePanel.tsx b/apps/website/components/leagues/StewardingQueuePanel.tsx
new file mode 100644
index 000000000..f14d5de98
--- /dev/null
+++ b/apps/website/components/leagues/StewardingQueuePanel.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Clock, ShieldAlert, MessageSquare } from 'lucide-react';
+import { Button } from '@/ui/Button';
+
+interface Protest {
+  id: string;
+  raceName: string;
+  protestingDriver: string;
+  accusedDriver: string;
+  description: string;
+  submittedAt: string;
+  status: 'pending' | 'under_review' | 'resolved' | 'rejected';
+}
+
+interface StewardingQueuePanelProps {
+  protests: Protest[];
+  onReview: (id: string) => void;
+}
+
+export function StewardingQueuePanel({ protests, onReview }: StewardingQueuePanelProps) {
+  return (
+    <Surface variant="dark" border rounded="lg" overflow="hidden">
+      <Box px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+        <Stack direction="row" align="center" justify="between">
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={ShieldAlert} size={4} color="text-error-red" />
+            <Text weight="bold" letterSpacing="wider" size="sm" display="block">
+              STEWARDING QUEUE
+            </Text>
+          </Stack>
+          <Box px={2} py={0.5} rounded="md" bg="bg-error-red/10" border borderColor="border-error-red/20">
+            <Text size="xs" color="text-error-red" weight="bold">
+              {protests.filter(p => p.status === 'pending').length} Pending
+            </Text>
+          </Box>
+        </Stack>
+      </Box>
+
+      <Stack gap={0}>
+        {protests.length === 0 ? (
+          <Box py={12} center>
+            <Stack align="center" gap={3}>
+              <Icon icon={ShieldAlert} size={8} color="text-gray-700" />
+              <Text color="text-gray-500">No active protests in the queue.</Text>
+            </Stack>
+          </Box>
+        ) : (
+          protests.map((protest) => (
+            <Box key={protest.id} p={6} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
+              <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="start" gap={4}>
+                <Stack gap={3} flexGrow={1}>
+                  <Stack direction="row" align="center" gap={2}>
+                    <StatusIndicator status={protest.status} />
+                    <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest">
+                      {protest.raceName.toUpperCase()}
+                    </Text>
+                    <Box w={1} h={1} rounded="full" bg="bg-gray-700" />
+                    <Stack direction="row" align="center" gap={1.5}>
+                      <Icon icon={Clock} size={3} color="text-gray-600" />
+                      <Text size="xs" color="text-gray-500">
+                        {new Date(protest.submittedAt).toLocaleString()}
+                      </Text>
+                    </Stack>
+                  </Stack>
+
+                  <Box>
+                    <Stack direction="row" align="center" gap={2} wrap>
+                      <Text weight="bold" color="text-white">{protest.protestingDriver}</Text>
+                      <Text size="xs" color="text-gray-600" weight="bold">VS</Text>
+                      <Text weight="bold" color="text-white">{protest.accusedDriver}</Text>
+                    </Stack>
+                    <Text size="sm" color="text-gray-400" mt={2} lineClamp={2}>
+                      &ldquo;{protest.description}&rdquo;
+                    </Text>
+                  </Box>
+                </Stack>
+
+                <Stack direction="row" align="center" gap={3} w={{ base: 'full', md: 'auto' }}>
+                  <Button 
+                    variant="secondary" 
+                    size="sm" 
+                    onClick={() => onReview(protest.id)}
+                  >
+                    <Stack direction="row" align="center" gap={2}>
+                      <Icon icon={MessageSquare} size={3.5} />
+                      <Text>Review</Text>
+                    </Stack>
+                  </Button>
+                </Stack>
+              </Stack>
+            </Box>
+          ))
+        )}
+      </Stack>
+    </Surface>
+  );
+}
+
+function StatusIndicator({ status }: { status: Protest['status'] }) {
+  const colors = {
+    pending: 'bg-warning-amber',
+    under_review: 'bg-primary-blue',
+    resolved: 'bg-performance-green',
+    rejected: 'bg-gray-500',
+  };
+
+  return (
+    <Box w={2} h={2} rounded="full" bg={colors[status]} animate={status === 'under_review' ? 'pulse' : 'none'} />
+  );
+}
diff --git a/apps/website/components/leagues/WalletSummaryPanel.tsx b/apps/website/components/leagues/WalletSummaryPanel.tsx
new file mode 100644
index 000000000..e645ac552
--- /dev/null
+++ b/apps/website/components/leagues/WalletSummaryPanel.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import { Wallet, ArrowUpRight, ArrowDownLeft, History } from 'lucide-react';
+
+interface Transaction {
+  id: string;
+  type: 'credit' | 'debit';
+  amount: number;
+  description: string;
+  date: string;
+}
+
+interface WalletSummaryPanelProps {
+  balance: number;
+  currency: string;
+  transactions: Transaction[];
+  onDeposit: () => void;
+  onWithdraw: () => void;
+}
+
+export function WalletSummaryPanel({ balance, currency, transactions, onDeposit, onWithdraw }: WalletSummaryPanelProps) {
+  return (
+    <Stack gap={6}>
+      <Surface variant="dark" border rounded="lg" padding={8} position="relative" overflow="hidden">
+        {/* Background Pattern */}
+        <Box 
+          position="absolute" 
+          top="-5rem" 
+          right="-5rem" 
+          w="12rem" 
+          h="12rem" 
+          bg="bg-primary-blue/5" 
+          rounded="full" 
+          blur="xl"
+          pointerEvents="none"
+        />
+
+        <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={8}>
+          <Stack gap={2}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Wallet} size={4} color="text-gray-500" />
+              <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest">AVAILABLE BALANCE</Text>
+            </Stack>
+            <Stack direction="row" align="baseline" gap={2}>
+              <Text size="4xl" weight="bold" color="text-white">
+                {balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              </Text>
+              <Text size="xl" weight="medium" color="text-gray-500">{currency}</Text>
+            </Stack>
+          </Stack>
+
+          <Stack direction="row" gap={3}>
+            <Button variant="primary" onClick={onDeposit}>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={ArrowDownLeft} size={4} />
+                <Text>Deposit</Text>
+              </Stack>
+            </Button>
+            <Button variant="secondary" onClick={onWithdraw}>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={ArrowUpRight} size={4} />
+                <Text>Withdraw</Text>
+              </Stack>
+            </Button>
+          </Stack>
+        </Stack>
+      </Surface>
+
+      <Surface variant="dark" border rounded="lg" overflow="hidden">
+        <Box px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={History} size={4} color="text-primary-blue" />
+            <Text weight="bold" letterSpacing="wider" size="sm" display="block">
+              RECENT TRANSACTIONS
+            </Text>
+          </Stack>
+        </Box>
+
+        <Stack gap={0}>
+          {transactions.length === 0 ? (
+            <Box py={12} center>
+              <Text color="text-gray-500">No recent transactions.</Text>
+            </Box>
+          ) : (
+            transactions.map((tx) => (
+              <Box key={tx.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
+                <Stack direction="row" justify="between" align="center">
+                  <Stack direction="row" align="center" gap={4}>
+                    <Box 
+                      center 
+                      w={10} 
+                      h={10} 
+                      rounded="full" 
+                      bg={tx.type === 'credit' ? 'bg-performance-green/10' : 'bg-error-red/10'}
+                    >
+                      <Icon 
+                        icon={tx.type === 'credit' ? ArrowDownLeft : ArrowUpRight} 
+                        size={4} 
+                        color={tx.type === 'credit' ? 'text-performance-green' : 'text-error-red'} 
+                      />
+                    </Box>
+                    <Stack gap={0.5}>
+                      <Text weight="medium" color="text-white">{tx.description}</Text>
+                      <Text size="xs" color="text-gray-500">{new Date(tx.date).toLocaleDateString()}</Text>
+                    </Stack>
+                  </Stack>
+                  <Text 
+                    weight="bold" 
+                    color={tx.type === 'credit' ? 'text-performance-green' : 'text-white'}
+                  >
+                    {tx.type === 'credit' ? '+' : '-'}{tx.amount.toFixed(2)}
+                  </Text>
+                </Stack>
+              </Box>
+            ))
+          )}
+        </Stack>
+      </Surface>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/media/MediaCard.tsx b/apps/website/components/media/MediaCard.tsx
new file mode 100644
index 000000000..6d594a1f3
--- /dev/null
+++ b/apps/website/components/media/MediaCard.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+
+export interface MediaCardProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+  subtitle?: string;
+  aspectRatio?: string;
+  isLoading?: boolean;
+  error?: string;
+  onClick?: () => void;
+  actions?: React.ReactNode;
+}
+
+export function MediaCard({
+  src,
+  alt = 'Media asset',
+  title,
+  subtitle,
+  aspectRatio = '16/9',
+  isLoading,
+  error,
+  onClick,
+  actions,
+}: MediaCardProps) {
+  return (
+    <Box
+      as={motion.div}
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }} // Fast ease-out
+      h="full"
+    >
+      <Box
+        display="flex"
+        flexDirection="col"
+        bg="bg-charcoal/40"
+        border
+        borderColor="border-charcoal-outline/30"
+        rounded="lg"
+        overflow="hidden"
+        cursor={onClick ? 'pointer' : 'default'}
+        onClick={onClick}
+        group
+        h="full"
+      >
+        <Box position="relative" width="full" aspectRatio={aspectRatio}>
+          {isLoading ? (
+            <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
+          ) : error ? (
+            <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
+          ) : src ? (
+            <Box w="full" h="full" overflow="hidden">
+              <Image
+                src={src}
+                alt={alt}
+                objectFit="cover"
+                fullWidth
+                fullHeight
+              />
+            </Box>
+          ) : (
+            <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+          )}
+          
+          {actions && (
+            <Box
+              position="absolute"
+              top="2"
+              right="2"
+              display="flex"
+              gap={2}
+              opacity={0}
+              groupHoverOpacity={1}
+              transition
+            >
+              {actions}
+            </Box>
+          )}
+        </Box>
+
+        {(title || subtitle) && (
+          <Box p={3} borderTop borderColor="border-charcoal-outline/20">
+            {title && (
+              <Text block size="sm" weight="semibold" truncate color="text-white">
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text block size="xs" color="text-gray-400" truncate mt={0.5}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/media/MediaFiltersBar.tsx b/apps/website/components/media/MediaFiltersBar.tsx
new file mode 100644
index 000000000..37ff71921
--- /dev/null
+++ b/apps/website/components/media/MediaFiltersBar.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Search, Grid, List } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Input } from '@/ui/Input';
+import { IconButton } from '@/ui/IconButton';
+import { Select } from '@/ui/Select';
+
+export interface MediaFiltersBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  category: string;
+  onCategoryChange: (category: string) => void;
+  categories: { label: string; value: string }[];
+  viewMode?: 'grid' | 'list';
+  onViewModeChange?: (mode: 'grid' | 'list') => void;
+}
+
+export function MediaFiltersBar({
+  searchQuery,
+  onSearchChange,
+  category,
+  onCategoryChange,
+  categories,
+  viewMode = 'grid',
+  onViewModeChange,
+}: MediaFiltersBarProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ base: 'col', md: 'row' }}
+      alignItems={{ base: 'stretch', md: 'center' }}
+      justifyContent="between"
+      gap={4}
+      p={4}
+      bg="bg-charcoal/20"
+      border
+      borderColor="border-charcoal-outline/20"
+      rounded="xl"
+    >
+      <Box display="flex" flexGrow={1} maxWidth={{ md: 'md' }}>
+        <Input
+          placeholder="Search media assets..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          icon={<Search size={18} />}
+        />
+      </Box>
+
+      <Box display="flex" alignItems="center" gap={3}>
+        <Box w="40">
+          <Select
+            value={category}
+            onChange={(e) => onCategoryChange(e.target.value)}
+            options={categories}
+          />
+        </Box>
+
+        {onViewModeChange && (
+          <Box display="flex" bg="bg-charcoal/40" p={1} rounded="lg" border borderColor="border-charcoal-outline/20">
+            <IconButton
+              icon={Grid}
+              variant={viewMode === 'grid' ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => onViewModeChange('grid')}
+              color={viewMode === 'grid' ? 'text-white' : 'text-gray-400'}
+              backgroundColor={viewMode === 'grid' ? 'bg-blue-600' : undefined}
+            />
+            <IconButton
+              icon={List}
+              variant={viewMode === 'list' ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => onViewModeChange('list')}
+              color={viewMode === 'list' ? 'text-white' : 'text-gray-400'}
+              backgroundColor={viewMode === 'list' ? 'bg-blue-600' : undefined}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/media/MediaGallery.tsx b/apps/website/components/media/MediaGallery.tsx
new file mode 100644
index 000000000..a8dd6ad72
--- /dev/null
+++ b/apps/website/components/media/MediaGallery.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Box } from '@/ui/Box';
+import { MediaGrid } from './MediaGrid';
+import { MediaCard } from './MediaCard';
+import { MediaFiltersBar } from './MediaFiltersBar';
+import { MediaViewerModal } from './MediaViewerModal';
+import { Text } from '@/ui/Text';
+
+export interface MediaAsset {
+  id: string;
+  src: string;
+  title: string;
+  category: string;
+  date?: string;
+  dimensions?: string;
+}
+
+export interface MediaGalleryProps {
+  assets: MediaAsset[];
+  categories: { label: string; value: string }[];
+  title?: string;
+  description?: string;
+}
+
+export function MediaGallery({
+  assets,
+  categories,
+  title = 'Media Gallery',
+  description,
+}: MediaGalleryProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [viewerAsset, setViewerAsset] = useState<MediaAsset | null>(null);
+
+  const filteredAssets = assets.filter((asset) => {
+    const matchesSearch = asset.title.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategory === 'all' || asset.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleNext = () => {
+    if (!viewerAsset) return;
+    const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
+    if (currentIndex < filteredAssets.length - 1) {
+      const nextAsset = filteredAssets[currentIndex + 1];
+      if (nextAsset) setViewerAsset(nextAsset);
+    }
+  };
+
+  const handlePrev = () => {
+    if (!viewerAsset) return;
+    const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
+    if (currentIndex > 0) {
+      const prevAsset = filteredAssets[currentIndex - 1];
+      if (prevAsset) setViewerAsset(prevAsset);
+    }
+  };
+
+  return (
+    <Box display="flex" flexDirection="col" gap={6}>
+      <Box>
+        <Text as="h1" size="3xl" weight="bold" color="text-white">
+          {title}
+        </Text>
+        {description && (
+          <Text block size="sm" color="text-gray-400" mt={1}>
+            {description}
+          </Text>
+        )}
+      </Box>
+
+      <MediaFiltersBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        category={selectedCategory}
+        onCategoryChange={setSelectedCategory}
+        categories={categories}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+      />
+
+      {filteredAssets.length > 0 ? (
+        <MediaGrid columns={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : { base: 1 }}>
+          {filteredAssets.map((asset) => (
+            <MediaCard
+              key={asset.id}
+              src={asset.src}
+              title={asset.title}
+              subtitle={`${asset.category}${asset.dimensions ? ` • ${asset.dimensions}` : ''}`}
+              onClick={() => setViewerAsset(asset)}
+            />
+          ))}
+        </MediaGrid>
+      ) : (
+        <Box py={20} center bg="bg-charcoal/10" rounded="xl" border borderStyle="dashed" borderColor="border-charcoal-outline/20">
+          <Text color="text-gray-500">No media assets found matching your criteria.</Text>
+        </Box>
+      )}
+
+      <MediaViewerModal
+        isOpen={!!viewerAsset}
+        onClose={() => setViewerAsset(null)}
+        src={viewerAsset?.src}
+        alt={viewerAsset?.title}
+        title={viewerAsset?.title}
+        onNext={handleNext}
+        onPrev={handlePrev}
+      />
+    </Box>
+  );
+}
diff --git a/apps/website/components/media/MediaGrid.tsx b/apps/website/components/media/MediaGrid.tsx
new file mode 100644
index 000000000..19bb4cbdd
--- /dev/null
+++ b/apps/website/components/media/MediaGrid.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+export interface MediaGridProps {
+  children: React.ReactNode;
+  columns?: {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  gap?: 2 | 3 | 4 | 6 | 8;
+}
+
+export function MediaGrid({
+  children,
+  columns = { base: 1, sm: 2, md: 3, lg: 4 },
+  gap = 4,
+}: MediaGridProps) {
+  return (
+    <Box
+      display="grid"
+      responsiveGridCols={{
+        base: columns.base,
+        md: columns.md,
+        lg: columns.lg,
+      }}
+      gap={gap}
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/apps/website/components/media/MediaViewerModal.tsx b/apps/website/components/media/MediaViewerModal.tsx
new file mode 100644
index 000000000..7d7e7683a
--- /dev/null
+++ b/apps/website/components/media/MediaViewerModal.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { IconButton } from '@/ui/IconButton';
+import { Image } from '@/ui/Image';
+import { Text } from '@/ui/Text';
+
+export interface MediaViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  src?: string;
+  alt?: string;
+  title?: string;
+  onNext?: () => void;
+  onPrev?: () => void;
+}
+
+export function MediaViewerModal({
+  isOpen,
+  onClose,
+  src,
+  alt = 'Media viewer',
+  title,
+  onNext,
+  onPrev,
+}: MediaViewerModalProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <Box
+          position="fixed"
+          inset="0"
+          zIndex={100}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          p={{ base: 4, md: 8 }}
+        >
+          {/* Backdrop with frosted blur */}
+          <Box
+            as={motion.div}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            position="absolute"
+            inset="0"
+            bg="bg-black/80"
+            blur="md"
+            onClick={onClose}
+          />
+
+          {/* Content Container */}
+          <Box
+            as={motion.div}
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+            position="relative"
+            zIndex={10}
+            w="full"
+            maxWidth="6xl"
+            maxHeight="full"
+            display="flex"
+            flexDirection="col"
+          >
+            {/* Header */}
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="between"
+              mb={4}
+              color="text-white"
+            >
+              <Box>
+                {title && (
+                  <Text size="lg" weight="semibold" color="text-white">
+                    {title}
+                  </Text>
+                )}
+              </Box>
+              <Box display="flex" gap={2}>
+                <IconButton
+                  icon={Download}
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => src && window.open(src, '_blank')}
+                  color="text-white"
+                  backgroundColor="bg-white/10"
+                />
+                <IconButton
+                  icon={X}
+                  variant="secondary"
+                  size="sm"
+                  onClick={onClose}
+                  color="text-white"
+                  backgroundColor="bg-white/10"
+                />
+              </Box>
+            </Box>
+
+            {/* Image Area */}
+            <Box
+              position="relative"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              bg="bg-black/40"
+              rounded="xl"
+              overflow="hidden"
+              border
+              borderColor="border-white/10"
+              flexGrow={1}
+              minHeight="0"
+            >
+              {src ? (
+                <Image
+                  src={src}
+                  alt={alt}
+                  objectFit="contain"
+                  fullWidth
+                  fullHeight
+                />
+              ) : (
+                <Box p={20}>
+                  <Text color="text-gray-500">No image selected</Text>
+                </Box>
+              )}
+
+              {/* Navigation Controls */}
+              {onPrev && (
+                <Box position="absolute" left="4" top="1/2" translateY="-1/2">
+                  <IconButton
+                    icon={ChevronLeft}
+                    variant="secondary"
+                    onClick={onPrev}
+                    color="text-white"
+                    backgroundColor="bg-black/50"
+                  />
+                </Box>
+              )}
+              {onNext && (
+                <Box position="absolute" right="4" top="1/2" translateY="-1/2">
+                  <IconButton
+                    icon={ChevronRight}
+                    variant="secondary"
+                    onClick={onNext}
+                    color="text-white"
+                    backgroundColor="bg-black/50"
+                  />
+                </Box>
+              )}
+            </Box>
+
+            {/* Footer / Info */}
+            <Box mt={4} display="flex" justifyContent="center">
+              <Text size="xs" color="text-gray-400" uppercase letterSpacing="widest">
+                Precision Racing Media Viewer
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/website/components/media/UploadDropzone.tsx b/apps/website/components/media/UploadDropzone.tsx
new file mode 100644
index 000000000..11f833b72
--- /dev/null
+++ b/apps/website/components/media/UploadDropzone.tsx
@@ -0,0 +1,187 @@
+import React, { useState, useRef } from 'react';
+import { Upload, File, X, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+
+export interface UploadDropzoneProps {
+  onFilesSelected: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // in bytes
+  isLoading?: boolean;
+  error?: string;
+}
+
+export function UploadDropzone({
+  onFilesSelected,
+  accept,
+  multiple = false,
+  maxSize,
+  isLoading,
+  error,
+}: UploadDropzoneProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    validateAndSelectFiles(files);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const files = Array.from(e.target.files);
+      validateAndSelectFiles(files);
+    }
+  };
+
+  const validateAndSelectFiles = (files: File[]) => {
+    let filteredFiles = files;
+    
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(t => t.trim());
+      filteredFiles = filteredFiles.filter(file => {
+        return acceptedTypes.some(type => {
+          if (type.startsWith('.')) {
+            return file.name.endsWith(type);
+          }
+          if (type.endsWith('/*')) {
+            return file.type.startsWith(type.replace('/*', ''));
+          }
+          return file.type === type;
+        });
+      });
+    }
+
+    if (maxSize) {
+      filteredFiles = filteredFiles.filter(file => file.size <= maxSize);
+    }
+
+    if (!multiple) {
+      filteredFiles = filteredFiles.slice(0, 1);
+    }
+
+    setSelectedFiles(filteredFiles);
+    onFilesSelected(filteredFiles);
+  };
+
+  const removeFile = (index: number) => {
+    const newFiles = [...selectedFiles];
+    newFiles.splice(index, 1);
+    setSelectedFiles(newFiles);
+    onFilesSelected(newFiles);
+  };
+
+  return (
+    <Box w="full">
+      <Box
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
+        display="flex"
+        flexDirection="col"
+        alignItems="center"
+        justifyContent="center"
+        p={8}
+        border
+        borderStyle="dashed"
+        borderColor={isDragging ? 'border-blue-500' : error ? 'border-amber-500' : 'border-charcoal-outline'}
+        bg={isDragging ? 'bg-blue-500/5' : 'bg-charcoal-outline/10'}
+        rounded="xl"
+        cursor="pointer"
+        transition
+        hoverBg="bg-charcoal-outline/20"
+      >
+        <Box as="input"
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept={accept}
+          multiple={multiple}
+          display="none"
+        />
+        
+        <Icon 
+          icon={isLoading ? Upload : (selectedFiles.length > 0 ? CheckCircle2 : Upload)} 
+          size={10} 
+          color={isDragging ? 'text-blue-500' : error ? 'text-amber-500' : 'text-gray-500'}
+          animate={isLoading ? 'pulse' : 'none'}
+          mb={4}
+        />
+        
+        <Text weight="semibold" size="lg" mb={1}>
+          {isDragging ? 'Drop files here' : 'Click or drag to upload'}
+        </Text>
+        
+        <Text size="sm" color="text-gray-500" align="center">
+          {accept ? `Accepted formats: ${accept}` : 'All file types accepted'}
+          {maxSize && ` (Max ${Math.round(maxSize / 1024 / 1024)}MB)`}
+        </Text>
+
+        {error && (
+          <Box display="flex" alignItems="center" gap={2} mt={4} color="text-amber-500">
+            <Icon icon={AlertCircle} size={4} />
+            <Text size="sm" weight="medium">{error}</Text>
+          </Box>
+        )}
+      </Box>
+
+      {selectedFiles.length > 0 && (
+        <Box mt={4} display="flex" flexDirection="col" gap={2}>
+          {selectedFiles.map((file, index) => (
+            <Box 
+              key={`${file.name}-${index}`}
+              display="flex" 
+              alignItems="center" 
+              justifyContent="between"
+              p={3}
+              bg="bg-charcoal-outline/20"
+              rounded="lg"
+              border
+              borderColor="border-charcoal-outline/30"
+            >
+              <Box display="flex" alignItems="center" gap={3}>
+                <Icon icon={File} size={5} color="text-gray-400" />
+                <Box>
+                  <Text block size="sm" weight="medium" truncate maxWidth="200px">
+                    {file.name}
+                  </Text>
+                  <Text block size="xs" color="text-gray-500">
+                    {Math.round(file.size / 1024)} KB
+                  </Text>
+                </Box>
+              </Box>
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeFile(index);
+                }}
+                p={1}
+                h="auto"
+              >
+                <Icon icon={X} size={4} />
+              </Button>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/components/onboarding/AvatarStep.tsx b/apps/website/components/onboarding/AvatarStep.tsx
index 369303cbe..a5b7209f7 100644
--- a/apps/website/components/onboarding/AvatarStep.tsx
+++ b/apps/website/components/onboarding/AvatarStep.tsx
@@ -1,7 +1,6 @@
 import { useRef, ChangeEvent } from 'react';
-import { Camera, Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
+import { Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -93,16 +92,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
   };
 
   return (
-    <Stack gap={6}>
-      <Box>
-        <Heading level={2} icon={<Icon icon={Camera} size={5} color="text-primary-blue" />}>
-          Create Your Racing Avatar
-        </Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Upload a photo and we will generate a unique racing avatar for you
-        </Text>
-      </Box>
-
+    <Stack gap={8}>
       {/* Photo Upload */}
       <Box>
         <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
@@ -180,7 +170,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
 
           {/* Preview area */}
           <Stack w="32" alignItems="center" center>
-            <Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden">
+            <Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden" borderColor="border-charcoal-outline">
               {(() => {
                   const selectedAvatarUrl =
                     avatarInfo.selectedAvatarIndex !== null
diff --git a/apps/website/components/onboarding/OnboardingHelpPanel.tsx b/apps/website/components/onboarding/OnboardingHelpPanel.tsx
new file mode 100644
index 000000000..5c6eaf3ed
--- /dev/null
+++ b/apps/website/components/onboarding/OnboardingHelpPanel.tsx
@@ -0,0 +1,42 @@
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { HelpCircle } from 'lucide-react';
+
+interface OnboardingHelpPanelProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * OnboardingHelpPanel
+ * 
+ * A semantic panel for providing contextual help or information during onboarding.
+ * Usually placed in the sidebar.
+ */
+export function OnboardingHelpPanel({ title = 'Need Help?', children }: OnboardingHelpPanelProps) {
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border
+      padding={6}
+      borderColor="border-charcoal-outline"
+      bg="bg-deep-charcoal/30"
+    >
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={HelpCircle} size={4} color="text-primary-blue" />
+          <Text size="sm" weight="bold" color="text-white" uppercase letterSpacing="wider">
+            {title}
+          </Text>
+        </Stack>
+        
+        <Text size="sm" color="text-gray-400">
+          {children}
+        </Text>
+      </Stack>
+    </Surface>
+  );
+}
diff --git a/apps/website/components/onboarding/OnboardingPrimaryActions.tsx b/apps/website/components/onboarding/OnboardingPrimaryActions.tsx
new file mode 100644
index 000000000..455eaafe6
--- /dev/null
+++ b/apps/website/components/onboarding/OnboardingPrimaryActions.tsx
@@ -0,0 +1,61 @@
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
+import { Box } from '@/ui/Box';
+
+interface OnboardingPrimaryActionsProps {
+  onBack?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  isLastStep?: boolean;
+  canNext?: boolean;
+  isLoading?: boolean;
+  type?: 'button' | 'submit';
+}
+
+/**
+ * OnboardingPrimaryActions
+ * 
+ * Semantic component for the main navigation actions in the onboarding flow.
+ */
+export function OnboardingPrimaryActions({
+  onBack,
+  onNext,
+  nextLabel = 'Continue',
+  isLastStep = false,
+  canNext = true,
+  isLoading = false,
+  type = 'button',
+}: OnboardingPrimaryActionsProps) {
+  return (
+    <Stack direction="row" justify="between" mt={8} gap={4}>
+      {onBack ? (
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onBack}
+          disabled={isLoading}
+          icon={<Icon icon={ChevronLeft} size={4} />}
+        >
+          Back
+        </Button>
+      ) : (
+        <Box />
+      )}
+
+      <Button
+        type={type}
+        variant="primary"
+        onClick={onNext}
+        disabled={isLoading || !canNext}
+        w="40"
+      >
+        <Stack direction="row" align="center" gap={2}>
+          {isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}
+          {!isLoading && (isLastStep ? <Icon icon={Check} size={4} /> : <Icon icon={ChevronRight} size={4} />)}
+        </Stack>
+      </Button>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/onboarding/OnboardingShell.tsx b/apps/website/components/onboarding/OnboardingShell.tsx
new file mode 100644
index 000000000..9d980ed05
--- /dev/null
+++ b/apps/website/components/onboarding/OnboardingShell.tsx
@@ -0,0 +1,56 @@
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+
+interface OnboardingShellProps {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  sidebar?: React.ReactNode;
+}
+
+/**
+ * OnboardingShell
+ * 
+ * Semantic layout wrapper for the onboarding flow.
+ * Follows "Precision Racing Minimal" theme with dark surfaces and clean structure.
+ */
+export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
+  return (
+    <Box minH="screen" bg="bg-near-black" color="text-white" display="flex" flexDirection="column">
+      {header && (
+        <Box borderB borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
+          <Container size="md">
+            {header}
+          </Container>
+        </Box>
+      )}
+      
+      <Box flex={1} display="flex" py={12}>
+        <Container size="md">
+          <Box display="flex" gap={12}>
+            <Box flex={1}>
+              <Stack gap={8}>
+                {children}
+              </Stack>
+            </Box>
+            
+            {sidebar && (
+              <Box w="80" display={{ base: 'none', lg: 'block' }}>
+                {sidebar}
+              </Box>
+            )}
+          </Box>
+        </Container>
+      </Box>
+
+      {footer && (
+        <Box borderT borderColor="border-charcoal-outline" py={6} bg="bg-deep-charcoal">
+          <Container size="md">
+            {footer}
+          </Container>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/components/onboarding/OnboardingStepPanel.tsx b/apps/website/components/onboarding/OnboardingStepPanel.tsx
new file mode 100644
index 000000000..be83257f2
--- /dev/null
+++ b/apps/website/components/onboarding/OnboardingStepPanel.tsx
@@ -0,0 +1,43 @@
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface OnboardingStepPanelProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * OnboardingStepPanel
+ * 
+ * A semantic container for a single onboarding step.
+ * Provides a consistent header and surface.
+ */
+export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
+  return (
+    <Stack gap={6}>
+      <Stack gap={1}>
+        <Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" color="text-gray-400">
+            {description}
+          </Text>
+        )}
+      </Stack>
+
+      <Surface
+        variant="dark"
+        rounded="xl"
+        border
+        padding={8}
+        borderColor="border-charcoal-outline"
+        bg="bg-deep-charcoal/50"
+      >
+        {children}
+      </Surface>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/onboarding/OnboardingStepper.tsx b/apps/website/components/onboarding/OnboardingStepper.tsx
new file mode 100644
index 000000000..7f3ec6652
--- /dev/null
+++ b/apps/website/components/onboarding/OnboardingStepper.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { motion } from 'framer-motion';
+
+interface OnboardingStepperProps {
+  currentStep: number;
+  totalSteps: number;
+  steps: string[];
+}
+
+/**
+ * OnboardingStepper
+ * 
+ * A progress indicator with a "pit limiter" vibe.
+ * Uses a progress line and step labels.
+ */
+export function OnboardingStepper({ currentStep, totalSteps, steps }: OnboardingStepperProps) {
+  const progress = (currentStep / totalSteps) * 100;
+
+  return (
+    <Stack gap={4} w="full">
+      <Box w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
+        <Box
+          as={motion.div}
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+          h="full"
+          bg="bg-primary-blue"
+        />
+      </Box>
+      
+      <Box display="flex" justify="between">
+        {steps.map((label, index) => {
+          const stepNumber = index + 1;
+          const isActive = stepNumber === currentStep;
+          const isCompleted = stepNumber < currentStep;
+          
+          return (
+            <Stack key={label} direction="row" align="center" gap={2}>
+              <Box 
+                w="6" 
+                h="6" 
+                rounded="full" 
+                display="flex" 
+                center 
+                border 
+                borderColor={isActive || isCompleted ? 'border-primary-blue' : 'border-charcoal-outline'}
+                bg={isCompleted ? 'bg-primary-blue' : isActive ? 'bg-primary-blue/20' : 'transparent'}
+                transition
+              >
+                <Text 
+                  size="xs" 
+                  weight="bold" 
+                  color={isCompleted ? 'text-white' : isActive ? 'text-primary-blue' : 'text-gray-500'}
+                >
+                  {stepNumber}
+                </Text>
+              </Box>
+              <Text 
+                size="sm" 
+                weight={isActive ? 'bold' : 'medium'} 
+                color={isActive ? 'text-white' : 'text-gray-500'}
+                uppercase
+                letterSpacing="wider"
+              >
+                {label}
+              </Text>
+            </Stack>
+          );
+        })}
+      </Box>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/onboarding/OnboardingWizard.tsx b/apps/website/components/onboarding/OnboardingWizard.tsx
deleted file mode 100644
index 4631a8d96..000000000
--- a/apps/website/components/onboarding/OnboardingWizard.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-'use client';
-
-import { OnboardingCardAccent } from '@/ui/OnboardingCardAccent';
-import { OnboardingContainer } from '@/ui/OnboardingContainer';
-import { OnboardingError } from '@/ui/OnboardingError';
-import { OnboardingForm } from '@/ui/OnboardingForm';
-import { OnboardingHeader } from '@/ui/OnboardingHeader';
-import { OnboardingHelpText } from '@/ui/OnboardingHelpText';
-import { OnboardingNavigation } from '@/ui/OnboardingNavigation';
-import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
-import { Card } from '@/ui/Card';
-import { StepIndicator } from '@/ui/StepIndicator';
-import { FormEvent, useState } from 'react';
-import { AvatarInfo, AvatarStep } from './AvatarStep';
-
-type OnboardingStep = 1 | 2;
-
-interface FormErrors {
-  [key: string]: string | undefined;
-  firstName?: string;
-  lastName?: string;
-  displayName?: string;
-  country?: string;
-  facePhoto?: string;
-  avatar?: string;
-  submit?: string;
-}
-
-interface OnboardingWizardProps {
-  onCompleted: () => void;
-  onCompleteOnboarding: (data: {
-    firstName: string;
-    lastName: string;
-    displayName: string;
-    country: string;
-    timezone?: string;
-  }) => Promise<{ success: boolean; error?: string }>;
-  onGenerateAvatars: (params: {
-    facePhotoData: string;
-    suitColor: string;
-  }) => Promise<{ success: boolean; data?: { success: boolean; avatarUrls?: string[]; errorMessage?: string }; error?: string }>;
-}
-
-export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerateAvatars }: OnboardingWizardProps) {
-  const [step, setStep] = useState<OnboardingStep>(1);
-  const [errors, setErrors] = useState<FormErrors>({});
-
-  // Form state
-  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
-    firstName: '',
-    lastName: '',
-    displayName: '',
-    country: '',
-    timezone: '',
-  });
-
-  const [avatarInfo, setAvatarInfo] = useState<AvatarInfo>({
-    facePhoto: null,
-    suitColor: 'blue',
-    generatedAvatars: [],
-    selectedAvatarIndex: null,
-    isGenerating: false,
-    isValidating: false,
-  });
-
-  // Validation
-  const validateStep = (currentStep: OnboardingStep): boolean => {
-    const newErrors: FormErrors = {};
-
-    if (currentStep === 1) {
-      if (!personalInfo.firstName.trim()) {
-        newErrors.firstName = 'First name is required';
-      }
-      if (!personalInfo.lastName.trim()) {
-        newErrors.lastName = 'Last name is required';
-      }
-      if (!personalInfo.displayName.trim()) {
-        newErrors.displayName = 'Display name is required';
-      } else if (personalInfo.displayName.length < 3) {
-        newErrors.displayName = 'Display name must be at least 3 characters';
-      }
-      if (!personalInfo.country) {
-        newErrors.country = 'Please select your country';
-      }
-    }
-
-    if (currentStep === 2) {
-      if (!avatarInfo.facePhoto) {
-        newErrors.facePhoto = 'Please upload a photo of your face';
-      }
-      if (avatarInfo.generatedAvatars.length > 0 && avatarInfo.selectedAvatarIndex === null) {
-        newErrors.avatar = 'Please select one of the generated avatars';
-      }
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleNext = () => {
-    const isValid = validateStep(step);
-    if (isValid && step < 2) {
-      setStep((step + 1) as OnboardingStep);
-    }
-  };
-
-  const handleBack = () => {
-    if (step > 1) {
-      setStep((step - 1) as OnboardingStep);
-    }
-  };
-
-  const generateAvatars = async () => {
-    if (!avatarInfo.facePhoto) {
-      setErrors({ ...errors, facePhoto: 'Please upload a photo first' });
-      return;
-    }
-
-    setAvatarInfo(prev => ({ ...prev, isGenerating: true, generatedAvatars: [], selectedAvatarIndex: null }));
-    const newErrors = { ...errors };
-    delete newErrors.avatar;
-    setErrors(newErrors);
-
-    try {
-      const result = await onGenerateAvatars({
-        facePhotoData: avatarInfo.facePhoto,
-        suitColor: avatarInfo.suitColor,
-      });
-
-      if (result.success && result.data?.success && result.data.avatarUrls) {
-        setAvatarInfo(prev => ({
-          ...prev,
-          generatedAvatars: result.data!.avatarUrls!,
-          isGenerating: false,
-        }));
-      } else {
-        setErrors(prev => ({ ...prev, avatar: result.data?.errorMessage || result.error || 'Failed to generate avatars' }));
-        setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
-      }
-    } catch (error) {
-      setErrors(prev => ({ ...prev, avatar: 'Failed to generate avatars. Please try again.' }));
-      setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
-    }
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-
-    // Validate step 2 - must have selected an avatar
-    if (!validateStep(2)) {
-      return;
-    }
-
-    if (avatarInfo.selectedAvatarIndex === null) {
-      setErrors({ ...errors, avatar: 'Please select an avatar' });
-      return;
-    }
-
-    setErrors({});
-
-    try {
-      const result = await onCompleteOnboarding({
-        firstName: personalInfo.firstName.trim(),
-        lastName: personalInfo.lastName.trim(),
-        displayName: personalInfo.displayName.trim(),
-        country: personalInfo.country,
-        timezone: personalInfo.timezone || undefined,
-      });
-
-      if (result.success) {
-        onCompleted();
-      } else {
-        setErrors({ submit: result.error || 'Failed to create profile' });
-      }
-    } catch (error) {
-      setErrors({ submit: 'Failed to create profile' });
-    }
-  };
-
-  // Loading state comes from the mutations
-  const loading = false; // This would be managed by the parent component
-
-  return (
-    <OnboardingContainer>
-      <OnboardingHeader
-        title="Welcome to GridPilot"
-        subtitle="Let us set up your racing profile"
-        emoji="🏁"
-      />
-
-      <StepIndicator currentStep={step} />
-
-      <Card position="relative" overflow="hidden">
-        <OnboardingCardAccent />
-
-        <OnboardingForm onSubmit={handleSubmit}>
-          {step === 1 && (
-            <PersonalInfoStep
-              personalInfo={personalInfo}
-              setPersonalInfo={setPersonalInfo}
-              errors={errors}
-              loading={loading}
-            />
-          )}
-
-          {step === 2 && (
-            <AvatarStep
-              avatarInfo={avatarInfo}
-              setAvatarInfo={setAvatarInfo}
-              errors={errors}
-              setErrors={setErrors}
-              onGenerateAvatars={generateAvatars}
-            />
-          )}
-
-          {errors.submit && <OnboardingError message={errors.submit} />}
-
-          <OnboardingNavigation
-            onBack={handleBack}
-            onNext={step < 2 ? handleNext : undefined}
-            isLastStep={step === 2}
-            canSubmit={avatarInfo.selectedAvatarIndex !== null}
-            loading={loading}
-          />
-        </OnboardingForm>
-      </Card>
-
-      <OnboardingHelpText />
-    </OnboardingContainer>
-  );
-}
\ No newline at end of file
diff --git a/apps/website/components/onboarding/PersonalInfoStep.tsx b/apps/website/components/onboarding/PersonalInfoStep.tsx
index 80b9ebb2d..036028fb5 100644
--- a/apps/website/components/onboarding/PersonalInfoStep.tsx
+++ b/apps/website/components/onboarding/PersonalInfoStep.tsx
@@ -1,6 +1,5 @@
-import { User, Clock, ChevronRight } from 'lucide-react';
+import { Clock, ChevronRight } from 'lucide-react';
 import { Input } from '@/ui/Input';
-import { Heading } from '@/ui/Heading';
 import { CountrySelect } from '@/components/shared/CountrySelect';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
@@ -44,15 +43,6 @@ const TIMEZONES = [
 export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
   return (
     <Stack gap={6}>
-      <Box>
-        <Heading level={2} icon={<Icon icon={User} size={5} color="text-primary-blue" />}>
-          Personal Information
-        </Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Tell us a bit about yourself
-        </Text>
-      </Box>
-
       <Grid cols={2} gap={4}>
         <Box>
           <Text as="label" htmlFor="firstName" size="sm" weight="medium" color="text-gray-300" block mb={2}>
diff --git a/apps/website/components/profile/ConnectedAccountsPanel.tsx b/apps/website/components/profile/ConnectedAccountsPanel.tsx
new file mode 100644
index 000000000..f62e9e245
--- /dev/null
+++ b/apps/website/components/profile/ConnectedAccountsPanel.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Globe, Link as LinkIcon } from 'lucide-react';
+
+interface ConnectedAccountsPanelProps {
+  iracingId?: string | number;
+  onConnectIRacing?: () => void;
+}
+
+export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: ConnectedAccountsPanelProps) {
+  return (
+    <section aria-labelledby="connected-accounts-heading">
+      <Card>
+        <Stack gap={6}>
+          <Heading level={3} id="connected-accounts-heading" fontSize="1.125rem">Connected Accounts</Heading>
+          
+          <Stack gap={4} className="divide-y divide-border-gray/30">
+            <Stack direction="row" justify="between" align="center" pt={0}>
+              <Stack direction="row" align="center" gap={3}>
+                <Box backgroundColor="#1e293b" p={2} rounded="md">
+                  <Globe size={20} color="#4ED4E0" />
+                </Box>
+                <Stack gap={0.5}>
+                  <Text weight="bold" size="sm">iRacing</Text>
+                  <Text size="xs" color="#9ca3af">
+                    {iracingId ? `Connected ID: ${iracingId}` : 'Not connected'}
+                  </Text>
+                </Stack>
+              </Stack>
+              
+              {!iracingId && (
+                <Button size="sm" variant="secondary" onClick={onConnectIRacing}>
+                  Connect
+                </Button>
+              )}
+              {iracingId && (
+                <Box backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
+                  <Text size="xs" color="#10b981" weight="bold">Verified</Text>
+                </Box>
+              )}
+            </Stack>
+
+            <Stack direction="row" justify="between" align="center" pt={4}>
+              <Stack direction="row" align="center" gap={3}>
+                <Box backgroundColor="#1e293b" p={2} rounded="md">
+                  <LinkIcon size={20} color="#198CFF" />
+                </Box>
+                <Stack gap={0.5}>
+                  <Text weight="bold" size="sm">Discord</Text>
+                  <Text size="xs" color="#9ca3af">Connect for notifications</Text>
+                </Stack>
+              </Stack>
+              
+              <Button size="sm" variant="secondary">
+                Connect
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Card>
+    </section>
+  );
+}
+
+import { Box } from '@/ui/Box';
diff --git a/apps/website/components/profile/LiveryGallery.tsx b/apps/website/components/profile/LiveryGallery.tsx
new file mode 100644
index 000000000..d6cdfccfb
--- /dev/null
+++ b/apps/website/components/profile/LiveryGallery.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { Grid } from '@/ui/Grid';
+import { LiveryCard } from '@/ui/LiveryCard';
+import { ProfileSection } from './ProfileSection';
+import { ProfileLiveryViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+
+interface LiveryGalleryProps {
+  liveries: ProfileLiveryViewData[];
+  action?: React.ReactNode;
+}
+
+export function LiveryGallery({ liveries, action }: LiveryGalleryProps) {
+  return (
+    <ProfileSection 
+      title="My Liveries" 
+      description="Manage your custom car liveries and designs."
+      action={action}
+    >
+      <Grid cols={3} gap={6}>
+        {liveries.map((livery) => (
+          <LiveryCard key={livery.id} livery={livery} />
+        ))}
+      </Grid>
+    </ProfileSection>
+  );
+}
diff --git a/apps/website/components/profile/MembershipPanel.tsx b/apps/website/components/profile/MembershipPanel.tsx
new file mode 100644
index 000000000..07ab6a307
--- /dev/null
+++ b/apps/website/components/profile/MembershipPanel.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
+import { Text } from '@/ui/Text';
+import { LeagueListItem } from '@/ui/LeagueListItem';
+import { ProfileSection } from './ProfileSection';
+
+interface League {
+  leagueId: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+  memberCount: number;
+  roleLabel: string;
+}
+
+interface MembershipPanelProps {
+  ownedLeagues: League[];
+  memberLeagues: League[];
+}
+
+export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
+  return (
+    <Stack gap={8}>
+      <ProfileSection 
+        title="Leagues You Own" 
+        description="Manage the leagues you have created and lead."
+      >
+        {ownedLeagues.length === 0 ? (
+          <Card>
+            <Text size="sm" color="text-gray-400">
+              You don&apos;t own any leagues yet.
+            </Text>
+          </Card>
+        ) : (
+          <Stack gap={3}>
+            {ownedLeagues.map((league) => (
+              <LeagueListItem key={league.leagueId} league={league} isAdmin />
+            ))}
+          </Stack>
+        )}
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Leagues You're In" 
+        description="Leagues where you are a participating member."
+      >
+        {memberLeagues.length === 0 ? (
+          <Card>
+            <Text size="sm" color="text-gray-400">
+              You&apos;re not a member of any other leagues yet.
+            </Text>
+          </Card>
+        ) : (
+          <Stack gap={3}>
+            {memberLeagues.map((league) => (
+              <LeagueListItem key={league.leagueId} league={league} />
+            ))}
+          </Stack>
+        )}
+      </ProfileSection>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/profile/PreferencesPanel.tsx b/apps/website/components/profile/PreferencesPanel.tsx
new file mode 100644
index 000000000..ff29401b2
--- /dev/null
+++ b/apps/website/components/profile/PreferencesPanel.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Select } from '@/ui/Select';
+import { Toggle } from '@/ui/Toggle';
+
+interface PreferencesPanelProps {
+  preferences: {
+    favoriteCarClass: string;
+    favoriteSeries: string;
+    competitiveLevel: string;
+    showProfile: boolean;
+    showHistory: boolean;
+  };
+  isEditing?: boolean;
+  onUpdate?: (updates: Partial<PreferencesPanelProps['preferences']>) => void;
+}
+
+export function PreferencesPanel({ preferences, isEditing, onUpdate }: PreferencesPanelProps) {
+  if (isEditing) {
+    return (
+      <section aria-labelledby="preferences-heading">
+        <Card>
+          <Stack gap={6}>
+            <Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
+            
+            <Stack gap={4}>
+              <Select
+                label="Favorite Car Class"
+                value={preferences.favoriteCarClass}
+                onChange={(e) => onUpdate?.({ favoriteCarClass: e.target.value })}
+                options={[
+                  { value: 'GT3', label: 'GT3' },
+                  { value: 'GT4', label: 'GT4' },
+                  { value: 'Formula', label: 'Formula' },
+                  { value: 'LMP2', label: 'LMP2' },
+                ]}
+              />
+              <Select
+                label="Competitive Level"
+                value={preferences.competitiveLevel}
+                onChange={(e) => onUpdate?.({ competitiveLevel: e.target.value })}
+                options={[
+                  { value: 'casual', label: 'Casual' },
+                  { value: 'competitive', label: 'Competitive' },
+                  { value: 'professional', label: 'Professional' },
+                ]}
+              />
+              
+              <Stack gap={3} pt={2}>
+                <Toggle
+                  label="Public Profile"
+                  checked={preferences.showProfile}
+                  onChange={(checked) => onUpdate?.({ showProfile: checked })}
+                />
+                <Toggle
+                  label="Show Race History"
+                  checked={preferences.showHistory}
+                  onChange={(checked) => onUpdate?.({ showHistory: checked })}
+                />
+              </Stack>
+            </Stack>
+          </Stack>
+        </Card>
+      </section>
+    );
+  }
+
+  return (
+    <section aria-labelledby="preferences-heading">
+      <Card>
+        <Stack gap={6}>
+          <Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
+          
+          <Stack direction="row" gap={8} wrap>
+            <Stack gap={1}>
+              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Car Class</Text>
+              <Text color="#d1d5db">{preferences.favoriteCarClass}</Text>
+            </Stack>
+            <Stack gap={1}>
+              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Level</Text>
+              <Text color="#d1d5db" capitalize>{preferences.competitiveLevel}</Text>
+            </Stack>
+            <Stack gap={1}>
+              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Visibility</Text>
+              <Text color="#d1d5db">{preferences.showProfile ? 'Public' : 'Private'}</Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Card>
+    </section>
+  );
+}
diff --git a/apps/website/components/profile/ProfileDetailsPanel.tsx b/apps/website/components/profile/ProfileDetailsPanel.tsx
new file mode 100644
index 000000000..ad5eaa9ba
--- /dev/null
+++ b/apps/website/components/profile/ProfileDetailsPanel.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Input } from '@/ui/Input';
+import { TextArea } from '@/ui/TextArea';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+
+interface ProfileDetailsPanelProps {
+  driver: {
+    name: string;
+    country: string;
+    bio?: string | null;
+  };
+  isEditing?: boolean;
+  onUpdate?: (updates: { bio?: string; country?: string }) => void;
+}
+
+export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDetailsPanelProps) {
+  if (isEditing) {
+    return (
+      <section aria-labelledby="profile-details-heading">
+        <Card>
+          <Stack gap={6}>
+            <Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
+            <Stack gap={4}>
+              <Input
+                label="Nationality (ISO Code)"
+                value={driver.country}
+                onChange={(e) => onUpdate?.({ country: e.target.value })}
+                placeholder="e.g. US, GB, DE"
+                maxLength={2}
+              />
+              <TextArea
+                label="Bio"
+                value={driver.bio || ''}
+                onChange={(e) => onUpdate?.({ bio: e.target.value })}
+                placeholder="Tell the community about your racing career..."
+                rows={4}
+              />
+            </Stack>
+          </Stack>
+        </Card>
+      </section>
+    );
+  }
+
+  return (
+    <section aria-labelledby="profile-details-heading">
+      <Card>
+        <Stack gap={6}>
+          <Stack direction="row" justify="between" align="center">
+            <Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
+          </Stack>
+          
+          <Stack gap={4}>
+            <Stack gap={1}>
+              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Nationality</Text>
+              <Stack direction="row" align="center" gap={2}>
+                <Text size="xl">
+                  {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
+                </Text>
+                <Text color="#d1d5db">{driver.country}</Text>
+              </Stack>
+            </Stack>
+
+            <Stack gap={1}>
+              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Bio</Text>
+              <Text color="#d1d5db" lineHeight="relaxed">
+                {driver.bio || 'No bio provided.'}
+              </Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Card>
+    </section>
+  );
+}
diff --git a/apps/website/components/profile/ProfileHeader.tsx b/apps/website/components/profile/ProfileHeader.tsx
new file mode 100644
index 000000000..e7329ecc3
--- /dev/null
+++ b/apps/website/components/profile/ProfileHeader.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
+
+interface ProfileHeaderProps {
+  driver: {
+    name: string;
+    avatarUrl?: string;
+    country: string;
+    iracingId: number;
+    joinedAt: string | Date;
+  };
+  stats: {
+    rating: number;
+  } | null;
+  globalRank: number;
+  onAddFriend?: () => void;
+  friendRequestSent?: boolean;
+  isOwnProfile?: boolean;
+}
+
+export function ProfileHeader({
+  driver,
+  stats,
+  globalRank,
+  onAddFriend,
+  friendRequestSent,
+  isOwnProfile,
+}: ProfileHeaderProps) {
+  return (
+    <header>
+      <Surface variant="muted" rounded="xl" border padding={6} backgroundColor="#141619" borderColor="#23272B">
+        <Stack direction="row" align="center" gap={8} wrap>
+          {/* Avatar with telemetry-style border */}
+          <Box position="relative">
+            <Box 
+              width="6rem" 
+              height="6rem" 
+              rounded="md" 
+              border 
+              borderColor="#23272B"
+              p={0.5}
+              backgroundColor="#0C0D0F"
+            >
+              <Box width="100%" height="100%" rounded="sm" overflow="hidden">
+                <Image
+                  src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
+                  alt={driver.name}
+                  width={96}
+                  height={96}
+                  objectFit="cover"
+                  fullWidth
+                  fullHeight
+                />
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Driver Info */}
+          <Box flexGrow={1} minWidth="0">
+            <Stack direction="row" align="center" gap={3} mb={1}>
+              <Heading level={1} fontSize="1.5rem">
+                {driver.name}
+              </Heading>
+              <Text size="2xl" aria-label={`Country: ${driver.country}`}>
+                {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
+              </Text>
+            </Stack>
+
+            <Stack direction="row" align="center" gap={4} color="#9ca3af">
+              <Stack direction="row" align="center" gap={1.5}>
+                <Globe size={14} />
+                <Text size="xs" font="mono">ID: {driver.iracingId}</Text>
+              </Stack>
+              <Box width="1px" height="12px" backgroundColor="#23272B" />
+              <Stack direction="row" align="center" gap={1.5}>
+                <Calendar size={14} />
+                <Text size="xs">
+                  Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                </Text>
+              </Stack>
+            </Stack>
+          </Box>
+
+          {/* Stats Grid */}
+          <Stack direction="row" align="center" gap={6}>
+            {stats && (
+              <>
+                <Box>
+                  <Stack gap={0.5}>
+                    <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">RATING</Text>
+                    <Stack direction="row" align="center" gap={1.5}>
+                      <Star size={14} color="#198CFF" />
+                      <Text font="mono" size="lg" weight="bold" color="#198CFF">{stats.rating}</Text>
+                    </Stack>
+                  </Stack>
+                </Box>
+                <Box width="1px" height="32px" backgroundColor="#23272B" />
+                <Box>
+                  <Stack gap={0.5}>
+                    <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">GLOBAL RANK</Text>
+                    <Stack direction="row" align="center" gap={1.5}>
+                      <Trophy size={14} color="#FFBE4D" />
+                      <Text font="mono" size="lg" weight="bold" color="#FFBE4D">#{globalRank}</Text>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </>
+            )}
+          </Stack>
+
+          {/* Actions */}
+          {!isOwnProfile && onAddFriend && (
+            <Box ml="auto">
+              <Button
+                variant={friendRequestSent ? 'secondary' : 'primary'}
+                onClick={onAddFriend}
+                disabled={friendRequestSent}
+                size="sm"
+                icon={<UserPlus size={16} />}
+              >
+                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
+              </Button>
+            </Box>
+          )}
+        </Stack>
+      </Surface>
+    </header>
+  );
+}
diff --git a/apps/website/components/profile/ProfileNavTabs.tsx b/apps/website/components/profile/ProfileNavTabs.tsx
new file mode 100644
index 000000000..1e6094a78
--- /dev/null
+++ b/apps/website/components/profile/ProfileNavTabs.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+export type ProfileTab = 'overview' | 'history' | 'stats' | 'leagues' | 'liveries' | 'settings';
+
+interface ProfileNavTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+  tabs?: { id: ProfileTab; label: string }[];
+}
+
+const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'history', label: 'History' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'leagues', label: 'Leagues' },
+  { id: 'liveries', label: 'Liveries' },
+  { id: 'settings', label: 'Settings' },
+];
+
+export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
+  return (
+    <nav aria-label="Profile navigation">
+      <Box borderBottom borderColor="#23272B">
+        <Stack direction="row" gap={8}>
+          {tabs.map((tab) => (
+            <Box
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              pb={4}
+              cursor="pointer"
+              borderBottom
+              borderColor={activeTab === tab.id ? '#198CFF' : 'transparent'}
+              color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
+              transition
+              fontSize="0.875rem"
+              fontWeight={activeTab === tab.id ? '600' : '400'}
+              mb="-1px"
+              position="relative"
+              className="group"
+            >
+              <Text capitalize>{tab.label}</Text>
+              {activeTab === tab.id && (
+                <Box
+                  position="absolute"
+                  bottom={0}
+                  left={0}
+                  right={0}
+                  height="2px"
+                  backgroundColor="#198CFF"
+                  boxShadow="0 0 8px rgba(25, 140, 255, 0.5)"
+                />
+              )}
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </nav>
+  );
+}
diff --git a/apps/website/components/profile/ProfileSection.tsx b/apps/website/components/profile/ProfileSection.tsx
new file mode 100644
index 000000000..92c54a3a4
--- /dev/null
+++ b/apps/website/components/profile/ProfileSection.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface ProfileSectionProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function ProfileSection({ title, description, action, children }: ProfileSectionProps) {
+  return (
+    <Box mb={8}>
+      <Stack direction="row" align="center" justify="between" mb={4}>
+        <Box>
+          <Heading level={2}>{title}</Heading>
+          {description && (
+            <Text color="text-gray-400" size="sm" mt={1} block>
+              {description}
+            </Text>
+          )}
+        </Box>
+        {action && <Box>{action}</Box>}
+      </Stack>
+      <Box>{children}</Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/profile/ProfileSettingsPanel.tsx b/apps/website/components/profile/ProfileSettingsPanel.tsx
new file mode 100644
index 000000000..f8601f0c9
--- /dev/null
+++ b/apps/website/components/profile/ProfileSettingsPanel.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Select } from '@/ui/Select';
+import { Toggle } from '@/ui/Toggle';
+import { TextArea } from '@/ui/TextArea';
+import { Checkbox } from '@/ui/Checkbox';
+import { ProfileSection } from './ProfileSection';
+
+interface ProfileSettingsPanelProps {
+  driver: {
+    id: string;
+    name: string;
+    country: string;
+    bio?: string | null;
+  };
+  onSave?: (updates: { bio?: string; country?: string }) => void;
+}
+
+export function ProfileSettingsPanel({ driver, onSave }: ProfileSettingsPanelProps) {
+  const [bio, setBio] = useState(driver.bio || '');
+  const [nationality, setNationality] = useState(driver.country);
+  const [favoriteCarClass, setFavoriteCarClass] = useState('GT3');
+  const [favoriteSeries, setFavoriteSeries] = useState('Endurance');
+  const [competitiveLevel, setCompetitiveLevel] = useState('competitive');
+  const [preferredRegions, setPreferredRegions] = useState<string[]>(['EU']);
+
+  const handleSave = () => {
+    onSave?.({
+      bio,
+      country: nationality
+    });
+  };
+
+  return (
+    <Stack gap={8}>
+      <ProfileSection 
+        title="Profile Information" 
+        description="Update your personal details and driver bio."
+      >
+        <Card>
+          <Stack gap={4}>
+            <TextArea
+              label="Bio"
+              value={bio}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setBio(e.target.value)}
+              rows={4}
+              placeholder="Tell us about yourself..."
+            />
+
+            <Input
+              label="Nationality"
+              type="text"
+              value={nationality}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNationality(e.target.value)}
+              placeholder="e.g., US, GB, DE"
+              maxLength={2}
+            />
+          </Stack>
+        </Card>
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Racing Preferences" 
+        description="Help us tailor your experience by sharing your racing style."
+      >
+        <Card>
+          <Stack gap={4}>
+            <Select
+              label="Favorite Car Class"
+              value={favoriteCarClass}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteCarClass(e.target.value)}
+              options={[
+                { value: 'GT3', label: 'GT3' },
+                { value: 'GT4', label: 'GT4' },
+                { value: 'Formula', label: 'Formula' },
+                { value: 'LMP2', label: 'LMP2' },
+                { value: 'Touring', label: 'Touring Cars' },
+                { value: 'NASCAR', label: 'NASCAR' },
+              ]}
+            />
+
+            <Select
+              label="Favorite Series Type"
+              value={favoriteSeries}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteSeries(e.target.value)}
+              options={[
+                { value: 'Sprint', label: 'Sprint' },
+                { value: 'Endurance', label: 'Endurance' },
+                { value: 'Mixed', label: 'Mixed' },
+              ]}
+            />
+
+            <Select
+              label="Competitive Level"
+              value={competitiveLevel}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setCompetitiveLevel(e.target.value)}
+              options={[
+                { value: 'casual', label: 'Casual - Just for fun' },
+                { value: 'competitive', label: 'Competitive - Aiming to win' },
+                { value: 'professional', label: 'Professional - Esports focused' },
+              ]}
+            />
+
+            <Stack gap={2}>
+              <Heading level={4}>Preferred Regions</Heading>
+              <Stack direction="row" gap={4}>
+                {['NA', 'EU', 'ASIA', 'OCE'].map(region => (
+                  <Checkbox
+                    key={region}
+                    label={region}
+                    checked={preferredRegions.includes(region)}
+                    onChange={(checked) => {
+                      if (checked) {
+                        setPreferredRegions([...preferredRegions, region]);
+                      } else {
+                        setPreferredRegions(preferredRegions.filter(r => r !== region));
+                      }
+                    }}
+                  />
+                ))}
+              </Stack>
+            </Stack>
+          </Stack>
+        </Card>
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Privacy Settings" 
+        description="Control who can see your profile and activity."
+      >
+        <Card>
+          <Stack gap={2}>
+            <Toggle
+              checked={true}
+              onChange={() => {}}
+              label="Show profile to other drivers"
+            />
+            <Toggle
+              checked={true}
+              onChange={() => {}}
+              label="Show race history"
+            />
+            <Toggle
+              checked={true}
+              onChange={() => {}}
+              label="Allow friend requests"
+            />
+          </Stack>
+        </Card>
+      </ProfileSection>
+
+      <Stack direction="row" gap={3} justify="end">
+        <Button variant="secondary">
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={handleSave}>
+          Save Changes
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/profile/SessionHistoryTable.tsx b/apps/website/components/profile/SessionHistoryTable.tsx
new file mode 100644
index 000000000..4b59ccfc5
--- /dev/null
+++ b/apps/website/components/profile/SessionHistoryTable.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/Stack';
+import { Trophy, Calendar } from 'lucide-react';
+
+interface SessionResult {
+  id: string;
+  date: string;
+  event: string;
+  car: string;
+  position: number;
+  fieldSize: number;
+  ratingChange: number;
+}
+
+interface SessionHistoryTableProps {
+  results: SessionResult[];
+}
+
+export function SessionHistoryTable({ results }: SessionHistoryTableProps) {
+  if (results.length === 0) {
+    return (
+      <Stack align="center" justify="center" py={12} gap={4}>
+        <Trophy size={48} color="#23272B" />
+        <Text color="#6b7280">No race history found.</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Date</TableHeader>
+          <TableHeader>Event</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader>Pos</TableHeader>
+          <TableHeader className="text-right">Rating</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {results.map((result) => (
+          <TableRow key={result.id}>
+            <TableCell>
+              <Stack direction="row" align="center" gap={2}>
+                <Calendar size={12} className="text-gray-500" />
+                <Text size="xs" font="mono">
+                  {new Date(result.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                </Text>
+              </Stack>
+            </TableCell>
+            <TableCell>
+              <Text weight="bold" size="sm">{result.event}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="#9ca3af">{result.car}</Text>
+            </TableCell>
+            <TableCell>
+              <Stack direction="row" align="center" gap={2}>
+                <Badge 
+                  variant={result.position === 1 ? 'success' : result.position <= 3 ? 'warning' : 'default'}
+                >
+                  P{result.position}
+                </Badge>
+                <Text size="xs" color="#6b7280">/ {result.fieldSize}</Text>
+              </Stack>
+            </TableCell>
+            <TableCell className="text-right">
+              <Text 
+                size="xs" 
+                font="mono" 
+                weight="bold"
+                color={result.ratingChange >= 0 ? '#10b981' : '#ef4444'}
+              >
+                {result.ratingChange >= 0 ? '+' : ''}{result.ratingChange}
+              </Text>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/profile/SponsorshipRequestsPanel.tsx b/apps/website/components/profile/SponsorshipRequestsPanel.tsx
new file mode 100644
index 000000000..40e854e51
--- /dev/null
+++ b/apps/website/components/profile/SponsorshipRequestsPanel.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { ProfileSection } from './ProfileSection';
+
+interface Request {
+  id: string;
+  sponsorName: string;
+  message?: string | null;
+  createdAtIso: string;
+}
+
+interface Section {
+  entityId: string;
+  entityName: string;
+  entityType: string;
+  requests: Request[];
+}
+
+interface SponsorshipRequestsPanelProps {
+  sections: Section[];
+  onAccept: (requestId: string) => Promise<void>;
+  onReject: (requestId: string, reason?: string) => Promise<void>;
+  processingId?: string | null;
+}
+
+export function SponsorshipRequestsPanel({
+  sections,
+  onAccept,
+  onReject,
+  processingId,
+}: SponsorshipRequestsPanelProps) {
+  return (
+    <Stack gap={8}>
+      {sections.map((section) => (
+        <ProfileSection 
+          key={`${section.entityType}-${section.entityId}`}
+          title={section.entityName}
+          description={`Manage pending sponsorship requests for ${section.entityName}.`}
+        >
+          <Card>
+            {section.requests.length === 0 ? (
+              <Text size="sm" color="text-gray-400">No pending requests.</Text>
+            ) : (
+              <Stack gap={3}>
+                {section.requests.map((request) => (
+                  <Surface
+                    key={request.id}
+                    variant="muted"
+                    rounded="lg"
+                    border
+                    padding={4}
+                    backgroundColor="#0C0D0F"
+                    borderColor="#23272B"
+                  >
+                    <Stack direction="row" align="center" justify="between" wrap gap={4}>
+                      <Box flexGrow={1} minWidth="0">
+                        <Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
+                        {request.message && (
+                          <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
+                        )}
+                        <Text size="xs" color="text-gray-500" block mt={2}>
+                          {DateDisplay.formatShort(request.createdAtIso)}
+                        </Text>
+                      </Box>
+                      <Stack direction="row" gap={2}>
+                        <Button
+                          variant="primary"
+                          onClick={() => onAccept(request.id)}
+                          size="sm"
+                          disabled={!!processingId}
+                        >
+                          {processingId === request.id ? 'Accepting...' : 'Accept'}
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          onClick={() => onReject(request.id)}
+                          size="sm"
+                          disabled={!!processingId}
+                        >
+                          {processingId === request.id ? 'Rejecting...' : 'Reject'}
+                        </Button>
+                      </Stack>
+                    </Stack>
+                  </Surface>
+                ))}
+              </Stack>
+            )}
+          </Card>
+        </ProfileSection>
+      ))}
+    </Stack>
+  );
+}
diff --git a/apps/website/components/races/EntrantsTable.tsx b/apps/website/components/races/EntrantsTable.tsx
new file mode 100644
index 000000000..89539cb55
--- /dev/null
+++ b/apps/website/components/races/EntrantsTable.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Badge } from '@/ui/Badge';
+
+interface Entrant {
+  id: string;
+  name: string;
+  teamName?: string;
+  carName: string;
+  rating: number;
+  status: 'confirmed' | 'withdrawn' | 'pending';
+}
+
+interface EntrantsTableProps {
+  entrants: Entrant[];
+}
+
+export function EntrantsTable({ entrants }: EntrantsTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Driver</TableHeader>
+          <TableHeader>Team</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader textAlign="right">Rating</TableHeader>
+          <TableHeader textAlign="right">Status</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {entrants.map((entrant) => (
+          <TableRow key={entrant.id}>
+            <TableCell>
+              <Text size="sm" weight="bold">{entrant.name}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{entrant.teamName || '-'}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{entrant.carName}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <Text size="xs" font="mono" color="text-telemetry-aqua">{entrant.rating}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <Badge 
+                variant={
+                  entrant.status === 'confirmed' 
+                    ? 'success'
+                    : entrant.status === 'withdrawn'
+                    ? 'danger'
+                    : 'warning'
+                } 
+                size="sm"
+              >
+                {entrant.status.toUpperCase()}
+              </Badge>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/races/RaceCard.tsx b/apps/website/components/races/RaceCard.tsx
new file mode 100644
index 000000000..87a6847b6
--- /dev/null
+++ b/apps/website/components/races/RaceCard.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import React from 'react';
+import { Clock, MapPin, Users } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceCardProps {
+  id: string;
+  title: string;
+  leagueName: string;
+  trackName: string;
+  scheduledAt: string;
+  entrantCount: number;
+  status: SessionStatus;
+  onClick: (id: string) => void;
+}
+
+export function RaceCard({
+  id,
+  title,
+  leagueName,
+  trackName,
+  scheduledAt,
+  entrantCount,
+  status,
+  onClick,
+}: RaceCardProps) {
+  return (
+    <Box 
+      as="article"
+      onClick={() => onClick(id)}
+      bg="bg-surface-charcoal"
+      border
+      borderColor="border-outline-steel"
+      p={4}
+      hoverBorderColor="border-primary-accent"
+      transition
+      cursor="pointer"
+      position="relative"
+      overflow="hidden"
+      group
+    >
+      {/* Hover Glow */}
+      <Box 
+        position="absolute" 
+        inset="0" 
+        bg="bg-primary-accent" 
+        bgOpacity={0.05} 
+        opacity={0} 
+        groupHoverOpacity={1} 
+        transition 
+      />
+      
+      <Stack gap={4}>
+        <Stack direction="row" justifyContent="between" alignItems="start">
+          <Stack gap={1}>
+            <Text size="xs" color="text-gray-500" weight="bold" uppercase>
+              {leagueName}
+            </Text>
+            <Text size="lg" weight="bold" groupHoverTextColor="text-primary-accent">
+              {title}
+            </Text>
+          </Stack>
+          <SessionStatusBadge status={status} />
+        </Stack>
+
+        <Box display="grid" gridCols={2} gap={4}>
+          <Stack direction="row" alignItems="center" gap={2}>
+            <Icon icon={MapPin} size={3} color="#6b7280" />
+            <Text size="xs" color="text-gray-400">{trackName}</Text>
+          </Stack>
+          <Stack direction="row" alignItems="center" gap={2}>
+            <Icon icon={Clock} size={3} color="#6b7280" />
+            <Text size="xs" color="text-gray-400">{scheduledAt}</Text>
+          </Stack>
+        </Box>
+
+        <Stack direction="row" alignItems="center" gap={2} pt={2} borderTop borderColor="border-outline-steel" bgOpacity={0.5}>
+          <Icon icon={Users} size={3} color="#4ED4E0" />
+          <Text size="xs" color="text-gray-400">
+            <Text as="span" color="text-telemetry-aqua" weight="bold">{entrantCount}</Text> ENTRANTS
+          </Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/races/RaceDetailsHeader.tsx b/apps/website/components/races/RaceDetailsHeader.tsx
new file mode 100644
index 000000000..beec5fce7
--- /dev/null
+++ b/apps/website/components/races/RaceDetailsHeader.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, Calendar, MapPin } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceDetailsHeaderProps {
+  title: string;
+  leagueName: string;
+  trackName: string;
+  scheduledAt: string;
+  status: SessionStatus;
+  onBack: () => void;
+}
+
+export function RaceDetailsHeader({
+  title,
+  leagueName,
+  trackName,
+  scheduledAt,
+  status,
+  onBack,
+}: RaceDetailsHeaderProps) {
+  return (
+    <Box as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
+      <Stack gap={6}>
+        <Box 
+          as="button" 
+          onClick={onBack}
+          display="flex"
+          alignItems="center"
+          gap={2}
+          color="text-gray-500"
+          hoverTextColor="text-primary-accent"
+          transition
+          group
+        >
+          <Icon icon={ChevronLeft} size={4} groupHoverScale />
+          <Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
+        </Box>
+
+        <Stack direction="row" justifyContent="between" alignItems="end">
+          <Stack gap={2}>
+            <Text size="xs" color="text-primary-accent" weight="bold" uppercase>
+              {leagueName}
+            </Text>
+            <Heading level={1}>{title}</Heading>
+            
+            <Box display="flex" flexWrap="wrap" gap={6} mt={2}>
+              <Stack direction="row" alignItems="center" gap={2}>
+                <Icon icon={MapPin} size={4} color="#6b7280" />
+                <Text size="sm" color="text-gray-300">{trackName}</Text>
+              </Stack>
+              <Stack direction="row" alignItems="center" gap={2}>
+                <Icon icon={Calendar} size={4} color="#6b7280" />
+                <Text size="sm" color="text-gray-300">{scheduledAt}</Text>
+              </Stack>
+            </Box>
+          </Stack>
+
+          <Box pb={2}>
+            <SessionStatusBadge status={status} />
+          </Box>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/races/RaceScheduleTable.tsx b/apps/website/components/races/RaceScheduleTable.tsx
new file mode 100644
index 000000000..74c57f978
--- /dev/null
+++ b/apps/website/components/races/RaceScheduleTable.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceRow {
+  id: string;
+  track: string;
+  car: string;
+  leagueName: string | null;
+  time: string;
+  status: SessionStatus;
+}
+
+interface RaceScheduleTableProps {
+  races: RaceRow[];
+  onRaceClick: (id: string) => void;
+}
+
+export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Time</TableHeader>
+          <TableHeader>Track</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader>League</TableHeader>
+          <TableHeader textAlign="right">Status</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {races.map((race) => (
+          <TableRow 
+            key={race.id}
+            onClick={() => onRaceClick(race.id)}
+            clickable
+          >
+            <TableCell>
+              <Text size="xs" color="text-telemetry-aqua" weight="bold">{race.time}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="sm" weight="bold" groupHoverTextColor="text-primary-accent">
+                {race.track}
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{race.car}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{race.leagueName || 'Official'}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <SessionStatusBadge status={race.status} />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/races/RacesHeader.tsx b/apps/website/components/races/RacesHeader.tsx
new file mode 100644
index 000000000..f555d84cb
--- /dev/null
+++ b/apps/website/components/races/RacesHeader.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+import { Flag, CalendarDays, Clock, Zap, Trophy, type LucideIcon } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/Grid';
+
+interface RacesHeaderProps {
+  totalCount: number;
+  scheduledCount: number;
+  runningCount: number;
+  completedCount: number;
+}
+
+export function RacesHeader({
+  totalCount,
+  scheduledCount,
+  runningCount,
+  completedCount,
+}: RacesHeaderProps) {
+  return (
+    <Box as="header" bg="bg-surface-charcoal" rounded="xl" border borderColor="border-outline-steel" p={6} position="relative" overflow="hidden">
+      {/* Background Accent */}
+      <Box position="absolute" top={0} left={0} right={0} h="1" bg="bg-primary-accent" />
+
+      <Stack gap={6}>
+        <Stack gap={2}>
+          <Stack direction="row" align="center" gap={3}>
+            <Icon icon={Flag} size={6} color="var(--color-primary)" />
+            <Heading level={1}>RACE DASHBOARD</Heading>
+          </Stack>
+          <Text color="text-gray-400" size="sm">
+            Precision tracking for upcoming sessions and live events.
+          </Text>
+        </Stack>
+
+        <Grid cols={2} mdCols={4} gap={4}>
+          <StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
+          <StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-accent" />
+          <StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-success-green" />
+          <StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}
+
+function StatItem({ 
+  icon, 
+  label, 
+  value, 
+  color = 'text-white' 
+}: { 
+  icon: LucideIcon, 
+  label: string, 
+  value: number, 
+  color?: string 
+}) {
+  return (
+    <Box p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
+      <Stack gap={1}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon 
+            icon={icon} 
+            size={3} 
+            color={color === 'text-white' ? '#9ca3af' : undefined}
+          />
+          <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+        </Stack>
+        <Text size="2xl" weight="bold" color={color}>{value}</Text>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/races/SessionStatusBadge.tsx b/apps/website/components/races/SessionStatusBadge.tsx
new file mode 100644
index 000000000..2b956d022
--- /dev/null
+++ b/apps/website/components/races/SessionStatusBadge.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import { Badge } from '@/ui/Badge';
+
+export type SessionStatus = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'delayed';
+
+interface SessionStatusBadgeProps {
+  status: SessionStatus;
+}
+
+export function SessionStatusBadge({ status }: SessionStatusBadgeProps) {
+  const config: Record<SessionStatus, { label: string; variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' }> = {
+    scheduled: {
+      label: 'SCHEDULED',
+      variant: 'primary',
+    },
+    running: {
+      label: 'LIVE',
+      variant: 'success',
+    },
+    completed: {
+      label: 'COMPLETED',
+      variant: 'default',
+    },
+    cancelled: {
+      label: 'CANCELLED',
+      variant: 'danger',
+    },
+    delayed: {
+      label: 'DELAYED',
+      variant: 'warning',
+    },
+  };
+
+  const { label, variant } = config[status] || config.scheduled;
+
+  return (
+    <Badge variant={variant} size="sm">
+      {label}
+    </Badge>
+  );
+}
diff --git a/apps/website/components/races/TrackConditionsPanel.tsx b/apps/website/components/races/TrackConditionsPanel.tsx
new file mode 100644
index 000000000..6841771a0
--- /dev/null
+++ b/apps/website/components/races/TrackConditionsPanel.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Thermometer, Wind, Droplets, Sun, type LucideIcon } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+
+interface TrackConditionsPanelProps {
+  airTemp: string;
+  trackTemp: string;
+  humidity: string;
+  windSpeed: string;
+  weatherType: string;
+}
+
+export function TrackConditionsPanel({
+  airTemp,
+  trackTemp,
+  humidity,
+  windSpeed,
+  weatherType,
+}: TrackConditionsPanelProps) {
+  return (
+    <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+      <Text size="xs" weight="bold" color="text-gray-500" uppercase block mb={4}>
+        Track Conditions
+      </Text>
+      
+      <Box display="grid" gridCols={2} mdCols={4} gap={4}>
+        <ConditionItem 
+          icon={Thermometer} 
+          label="Air Temp" 
+          value={airTemp} 
+          color="text-warning-amber" 
+        />
+        <ConditionItem 
+          icon={Thermometer} 
+          label="Track Temp" 
+          value={trackTemp} 
+          color="text-critical-red" 
+        />
+        <ConditionItem 
+          icon={Droplets} 
+          label="Humidity" 
+          value={humidity} 
+          color="text-telemetry-aqua" 
+        />
+        <ConditionItem 
+          icon={Wind} 
+          label="Wind" 
+          value={windSpeed} 
+          color="text-gray-400" 
+        />
+      </Box>
+
+      <Box mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
+        <Icon icon={Sun} size={4} color="#FFBE4D" />
+        <Text size="sm" color="text-gray-300">{weatherType}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function ConditionItem({ 
+  icon, 
+  label, 
+  value, 
+  color 
+}: { 
+  icon: LucideIcon, 
+  label: string, 
+  value: string, 
+  color: string 
+}) {
+  return (
+    <Stack gap={1}>
+      <Stack direction="row" alignItems="center" gap={2}>
+        <Icon icon={icon} size={3} color="#6b7280" />
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+      </Stack>
+      <Text size="lg" weight="bold" color={color}>{value}</Text>
+    </Stack>
+  );
+}
diff --git a/apps/website/components/shared/ux/ConfirmDialog.tsx b/apps/website/components/shared/ux/ConfirmDialog.tsx
new file mode 100644
index 000000000..7d11c4455
--- /dev/null
+++ b/apps/website/components/shared/ux/ConfirmDialog.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { Modal } from '@/ui/Modal';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { AlertCircle } from 'lucide-react';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'danger' | 'primary';
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'primary',
+  isLoading = false,
+}: ConfirmDialogProps) {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} title={title}>
+      <Box p={6}>
+        <Stack direction="row" gap={4} align="start">
+          {variant === 'danger' && (
+            <Box p={2} rounded="full" bg="bg-racing-red/10">
+              <AlertCircle className="w-6 h-6 text-racing-red" />
+            </Box>
+          )}
+          <Box flexGrow={1}>
+            <Heading level={3} fontSize="lg" weight="semibold" mb={2}>
+              {title}
+            </Heading>
+            <Text color="text-gray-400" size="sm" block mb={6}>
+              {description}
+            </Text>
+          </Box>
+        </Stack>
+
+        <Box display="flex" justifyContent="end" gap={3}>
+          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={variant === 'danger' ? 'primary' : 'primary'}
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={variant === 'danger' ? 'bg-racing-red hover:bg-racing-red/90 border-racing-red' : ''}
+          >
+            {isLoading ? 'Processing...' : confirmLabel}
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}
diff --git a/apps/website/components/shared/ux/InlineNotice.tsx b/apps/website/components/shared/ux/InlineNotice.tsx
new file mode 100644
index 000000000..efe89cb78
--- /dev/null
+++ b/apps/website/components/shared/ux/InlineNotice.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
+
+interface InlineNoticeProps {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  message: string;
+  mb?: number;
+}
+
+export function InlineNotice({
+  variant = 'info',
+  title,
+  message,
+  mb,
+}: InlineNoticeProps) {
+  const variants = {
+    info: {
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30',
+      text: 'text-primary-blue',
+      icon: Info,
+    },
+    success: {
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30',
+      text: 'text-performance-green',
+      icon: CheckCircle,
+    },
+    warning: {
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30',
+      text: 'text-warning-amber',
+      icon: AlertTriangle,
+    },
+    error: {
+      bg: 'bg-racing-red/10',
+      border: 'border-racing-red/30',
+      text: 'text-racing-red',
+      icon: AlertCircle,
+    },
+  };
+
+  const config = variants[variant];
+  const Icon = config.icon;
+
+  return (
+    <Box
+      p={4}
+      rounded="lg"
+      bg={config.bg}
+      border
+      borderColor={config.border}
+      mb={mb}
+    >
+      <Stack direction="row" gap={3} align="start">
+        <Icon className={`w-5 h-5 ${config.text} mt-0.5`} />
+        <Box>
+          {title && (
+            <Text weight="semibold" color="text-white" block mb={1}>
+              {title}
+            </Text>
+          )}
+          <Text size="sm" color="text-gray-300" block>
+            {message}
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/shared/ux/ProgressLine.tsx b/apps/website/components/shared/ux/ProgressLine.tsx
new file mode 100644
index 000000000..93fcbaceb
--- /dev/null
+++ b/apps/website/components/shared/ux/ProgressLine.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Box } from '@/ui/Box';
+
+interface ProgressLineProps {
+  isLoading: boolean;
+  className?: string;
+}
+
+export function ProgressLine({ isLoading, className = '' }: ProgressLineProps) {
+  if (!isLoading) return null;
+
+  return (
+    <Box
+      w="full"
+      h="0.5"
+      bg="bg-iron-gray"
+      overflow="hidden"
+      className={`relative ${className}`}
+    >
+      <motion.div
+        className="absolute top-0 left-0 h-full bg-primary-blue"
+        initial={{ width: '0%', left: '0%' }}
+        animate={{
+          width: ['20%', '50%', '20%'],
+          left: ['-20%', '100%', '-20%'],
+        }}
+        transition={{
+          duration: 1.5,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/apps/website/components/shared/ux/Toast.tsx b/apps/website/components/shared/ux/Toast.tsx
new file mode 100644
index 000000000..6c9ae299a
--- /dev/null
+++ b/apps/website/components/shared/ux/Toast.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useState, useEffect, createContext, useContext } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
+
+interface Toast {
+  id: string;
+  message: string;
+  variant: 'success' | 'error' | 'info';
+}
+
+interface ToastContextType {
+  showToast: (message: string, variant: 'success' | 'error' | 'info') => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = (message: string, variant: 'success' | 'error' | 'info') => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <Box
+        position="fixed"
+        bottom={6}
+        right={6}
+        zIndex={50}
+        className="pointer-events-none space-y-3"
+      >
+        <AnimatePresence>
+          {toasts.map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
+            />
+          ))}
+        </AnimatePresence>
+      </Box>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
+  const variants = {
+    success: {
+      bg: 'bg-deep-graphite',
+      border: 'border-performance-green/30',
+      icon: CheckCircle,
+      iconColor: 'text-performance-green',
+    },
+    error: {
+      bg: 'bg-deep-graphite',
+      border: 'border-racing-red/30',
+      icon: AlertCircle,
+      iconColor: 'text-racing-red',
+    },
+    info: {
+      bg: 'bg-deep-graphite',
+      border: 'border-primary-blue/30',
+      icon: Info,
+      iconColor: 'text-primary-blue',
+    },
+  };
+
+  const config = variants[toast.variant];
+  const Icon = config.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      className="pointer-events-auto"
+    >
+      <Box
+        px={4}
+        py={3}
+        rounded="lg"
+        bg={config.bg}
+        border
+        borderColor={config.border}
+        shadow="xl"
+        display="flex"
+        alignItems="center"
+        gap={3}
+        minW="300px"
+      >
+        <Icon className={`w-5 h-5 ${config.iconColor}`} />
+        <Text size="sm" color="text-white" flexGrow={1}>
+          {toast.message}
+        </Text>
+        <button
+          onClick={onClose}
+          className="text-gray-500 hover:text-white transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </Box>
+    </motion.div>
+  );
+}
diff --git a/apps/website/components/social/FriendsPreview.tsx b/apps/website/components/social/FriendsPreview.tsx
index 93355c637..df62a861c 100644
--- a/apps/website/components/social/FriendsPreview.tsx
+++ b/apps/website/components/social/FriendsPreview.tsx
@@ -1,5 +1,6 @@
+'use client';
 
-
+import React from 'react';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Box } from '@/ui/Box';
@@ -12,6 +13,7 @@ import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
 
 interface Friend {
   id: string;
@@ -39,17 +41,33 @@ export function FriendsPreview({ friends }: FriendsPreviewProps) {
         {friends.slice(0, 8).map((friend) => (
           <Box key={friend.id}>
             <Link
-              href={`/drivers/${friend.id}`}
+              href={routes.driver.detail(friend.id)}
               variant="ghost"
             >
-              <Surface variant="muted" rounded="xl" border padding={2} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626' }}>
-                <Box style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
+              <Surface 
+                variant="muted" 
+                rounded="xl" 
+                border 
+                p={2} 
+                display="flex" 
+                alignItems="center" 
+                gap={2} 
+                bg="bg-neutral-800/50" 
+                borderColor="border-neutral-800"
+              >
+                <Box 
+                  w="8" 
+                  h="8" 
+                  rounded="full" 
+                  overflow="hidden" 
+                  bg="bg-gradient-to-br from-blue-500 to-purple-600"
+                >
                  <Image
                    src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
                    alt={friend.name}
                    width={32}
                    height={32}
-                   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                   objectFit="cover"
                  />
                 </Box>
                 <Text size="sm" color="text-white">{friend.name}</Text>
diff --git a/apps/website/components/sponsors/BillingSummaryPanel.tsx b/apps/website/components/sponsors/BillingSummaryPanel.tsx
new file mode 100644
index 000000000..9c0fd8216
--- /dev/null
+++ b/apps/website/components/sponsors/BillingSummaryPanel.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box, BoxProps } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface BillingStatProps {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  icon: LucideIcon;
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+function BillingStat({ label, value, subValue, icon, variant = 'default' }: BillingStatProps) {
+  const colorMap = {
+    default: 'text-white',
+    success: 'text-performance-green',
+    warning: 'text-warning-amber',
+    danger: 'text-racing-red',
+    info: 'text-primary-blue',
+  };
+
+  const bgMap = {
+    default: 'bg-iron-gray/50',
+    success: 'bg-performance-green/10',
+    warning: 'bg-warning-amber/10',
+    danger: 'bg-racing-red/10',
+    info: 'bg-primary-blue/10',
+  };
+
+  return (
+    <Box p={4} bg="bg-iron-gray/20" rounded="lg" border borderColor="border-charcoal-outline/50">
+      <Stack direction="row" align="center" gap={3} mb={2}>
+        <Box p={2} rounded="md" bg={bgMap[variant] as BoxProps<'div'>['bg']}>
+          <Icon icon={icon} size={4} color={colorMap[variant] as any} />
+        </Box>
+        <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
+          {label}
+        </Text>
+      </Stack>
+      <Box>
+        <Text size="xl" weight="bold" color={colorMap[variant] as any}>
+          {value}
+        </Text>
+        {subValue && (
+          <Text size="xs" color="text-gray-500" block mt={0.5}>
+            {subValue}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+interface BillingSummaryPanelProps {
+  stats: BillingStatProps[];
+}
+
+/**
+ * BillingSummaryPanel
+ * 
+ * A semantic panel for displaying billing metrics.
+ * Dense, grid-based layout for financial data.
+ */
+export function BillingSummaryPanel({ stats }: BillingSummaryPanelProps) {
+  return (
+    <Box display="grid" gridCols={{ base: 1, sm: 2, lg: 4 }} gap={4} mb={8}>
+      {stats.map((stat, index) => (
+        <BillingStat key={index} {...stat} />
+      ))}
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/PricingTableShell.tsx b/apps/website/components/sponsors/PricingTableShell.tsx
new file mode 100644
index 000000000..e9924c759
--- /dev/null
+++ b/apps/website/components/sponsors/PricingTableShell.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Check, Info } from 'lucide-react';
+
+export interface PricingTier {
+  id: string;
+  name: string;
+  price: number;
+  period: string;
+  description: string;
+  features: string[];
+  isPopular?: boolean;
+  available?: boolean;
+}
+
+interface PricingTableShellProps {
+  title: string;
+  tiers: PricingTier[];
+  onSelect?: (id: string) => void;
+  selectedId?: string;
+}
+
+/**
+ * PricingTableShell
+ * 
+ * A semantic component for displaying sponsorship pricing tiers.
+ * Clean, comparison-focused layout.
+ */
+export function PricingTableShell({ title, tiers, onSelect, selectedId }: PricingTableShellProps) {
+  return (
+    <Box mb={8}>
+      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
+        {title}
+      </Heading>
+      <Box display="grid" gridCols={{ base: 1, md: 3 }} gap={6}>
+        {tiers.map((tier) => (
+          <Box 
+            key={tier.id}
+            p={6}
+            rounded="xl"
+            border
+            borderColor={selectedId === tier.id ? 'border-primary-blue' : 'border-charcoal-outline/50'}
+            bg={selectedId === tier.id ? 'bg-primary-blue/5' : 'bg-iron-gray/10'}
+            position="relative"
+            cursor="pointer"
+            onClick={() => onSelect?.(tier.id)}
+            transition-all
+            hoverBorderColor={selectedId === tier.id ? 'border-primary-blue' : 'border-charcoal-outline'}
+          >
+            {tier.isPopular && (
+              <Box 
+                position="absolute" 
+                top={0} 
+                right={6} 
+                transform="-translate-y-1/2"
+                bg="bg-primary-blue"
+                px={3}
+                py={1}
+                rounded="full"
+              >
+                <Text size="xs" weight="bold" color="text-white" uppercase letterSpacing="wider">Popular</Text>
+              </Box>
+            )}
+
+            <Box mb={6}>
+              <Text size="sm" weight="bold" color="text-primary-blue" uppercase letterSpacing="wider" block mb={2}>
+                {tier.name}
+              </Text>
+              <Stack direction="row" align="baseline" gap={1}>
+                <Text size="3xl" weight="bold" color="text-white">${tier.price}</Text>
+                <Text size="sm" color="text-gray-500">/{tier.period}</Text>
+              </Stack>
+              <Text size="sm" color="text-gray-400" block mt={2}>
+                {tier.description}
+              </Text>
+            </Box>
+
+            <Stack gap={3} mb={8}>
+              {tier.features.map((feature, i) => (
+                <Stack key={i} direction="row" align="start" gap={3}>
+                  <Box mt={0.5}>
+                    <Icon icon={Check} size={3.5} color="text-performance-green" />
+                  </Box>
+                  <Text size="sm" color="text-gray-300">{feature}</Text>
+                </Stack>
+              ))}
+            </Stack>
+
+            {!tier.available && (
+              <Box display="flex" alignItems="center" gap={2} p={3} rounded="lg" bg="bg-racing-red/10" border borderColor="border-racing-red/20">
+                <Icon icon={Info} size={4} color="text-racing-red" />
+                <Text size="xs" weight="medium" color="text-racing-red">Currently Unavailable</Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorActivityPanel.tsx b/apps/website/components/sponsors/SponsorActivityPanel.tsx
new file mode 100644
index 000000000..eac2cffaf
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorActivityPanel.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Box, BoxProps } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon, Clock } from 'lucide-react';
+
+export interface Activity {
+  id: string;
+  type: 'sponsorship_approved' | 'payment_received' | 'new_opportunity' | 'contract_expiring';
+  title: string;
+  description: string;
+  timestamp: string;
+  icon: LucideIcon;
+  color: string;
+}
+
+interface SponsorActivityPanelProps {
+  activities: Activity[];
+}
+
+/**
+ * SponsorActivityPanel
+ * 
+ * A semantic component for displaying a feed of sponsor activities.
+ * Dense, chronological list.
+ */
+export function SponsorActivityPanel({ activities }: SponsorActivityPanelProps) {
+  return (
+    <Box>
+      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
+        Recent Activity
+      </Heading>
+      <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
+        {activities.length === 0 ? (
+          <Box p={8} textAlign="center">
+            <Icon icon={Clock} size={8} color="text-gray-600" className="mx-auto mb-3" />
+            <Text color="text-gray-500">No recent activity to show.</Text>
+          </Box>
+        ) : (
+          <Box>
+            {activities.map((activity, index) => (
+              <Box 
+                key={activity.id} 
+                p={4} 
+                display="flex" 
+                gap={4}
+                borderBottom={index !== activities.length - 1}
+                borderColor="border-charcoal-outline/30"
+                hoverBg="bg-iron-gray/20"
+                transition-colors
+              >
+                <Box 
+                  w="10" 
+                  h="10" 
+                  rounded="lg" 
+                  display="flex" 
+                  alignItems="center" 
+                  justifyContent="center"
+                  bg={activity.color.replace('text-', 'bg-').concat('/10') as BoxProps<'div'>['bg']}
+                >
+                  <Icon icon={activity.icon} size={5} color={activity.color as any} />
+                </Box>
+                <Box flexGrow={1}>
+                  <Box display="flex" alignItems="center" justifyContent="between" mb={0.5}>
+                    <Text weight="medium" color="text-white">{activity.title}</Text>
+                    <Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
+                  </Box>
+                  <Text size="sm" color="text-gray-400">{activity.description}</Text>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorBrandingPreview.tsx b/apps/website/components/sponsors/SponsorBrandingPreview.tsx
new file mode 100644
index 000000000..afa087e81
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorBrandingPreview.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { SponsorLogo } from '@/ui/SponsorLogo';
+
+interface SponsorBrandingPreviewProps {
+  name: string;
+  logoUrl?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+/**
+ * SponsorBrandingPreview
+ * 
+ * Visualizes how a sponsor's branding (logo and colors) will appear on the platform.
+ */
+export function SponsorBrandingPreview({ 
+  name, 
+  logoUrl, 
+  primaryColor = '#198CFF', 
+  secondaryColor = '#141619' 
+}: SponsorBrandingPreviewProps) {
+  return (
+    <Card p={0} overflow="hidden">
+      <Box p={4} borderBottom borderColor="border-charcoal-outline">
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
+          Branding Preview
+        </Text>
+      </Box>
+      
+      <Box p={6}>
+        <Stack gap={6}>
+          {/* Logo Preview */}
+          <Stack align="center" gap={4}>
+            <Surface 
+              variant="muted" 
+              rounded="xl" 
+              padding={8} 
+              bg="bg-iron-gray/10" 
+              border 
+              borderColor="border-charcoal-outline/50"
+              w="full"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <SponsorLogo src={logoUrl} alt={name} size={64} />
+            </Surface>
+            <Text size="sm" color="text-gray-400">Primary Logo Asset</Text>
+          </Stack>
+
+          {/* Color Palette */}
+          <Box>
+            <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-500" block mb={3}>
+              Color Palette
+            </Text>
+            <Stack direction="row" gap={4}>
+              <Stack gap={2} flexGrow={1}>
+                <Box h={12} rounded="lg" backgroundColor={primaryColor} border borderColor="border-white/10" />
+                <Text size="xs" color="text-gray-400" textAlign="center">{primaryColor}</Text>
+              </Stack>
+              <Stack gap={2} flexGrow={1}>
+                <Box h={12} rounded="lg" backgroundColor={secondaryColor} border borderColor="border-white/10" />
+                <Text size="xs" color="text-gray-400" textAlign="center">{secondaryColor}</Text>
+              </Stack>
+            </Stack>
+          </Box>
+
+          {/* Mockup Hint */}
+          <Surface variant="muted" rounded="lg" padding={3} bg="bg-primary-blue/5" border borderColor="border-primary-blue/20">
+            <Text size="xs" color="text-primary-blue" textAlign="center">
+              These assets will be used for broadcast overlays and car liveries.
+            </Text>
+          </Surface>
+        </Stack>
+      </Box>
+    </Card>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorContractCard.tsx b/apps/website/components/sponsors/SponsorContractCard.tsx
new file mode 100644
index 000000000..c67286cea
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorContractCard.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import { 
+  Trophy, 
+  Users, 
+  Car, 
+  Flag, 
+  Megaphone,
+  ChevronRight,
+  ExternalLink,
+  Calendar,
+  BarChart3
+} from 'lucide-react';
+import { SponsorStatusChip, SponsorStatus } from './SponsorStatusChip';
+
+export type SponsorshipType = 'league' | 'team' | 'driver' | 'race' | 'platform';
+
+interface SponsorContractCardProps {
+  id: string;
+  type: SponsorshipType;
+  status: string; // Accept raw status string
+  title: string;
+  subtitle?: string;
+  tier: string;
+  investment: string;
+  impressions: string;
+  startDate?: string;
+  endDate?: string;
+  onViewDetails?: (id: string) => void;
+}
+
+const TYPE_CONFIG = {
+  league: { icon: Trophy, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'League' },
+  team: { icon: Users, color: 'text-purple-400', bgColor: 'bg-purple-400/10', label: 'Team' },
+  driver: { icon: Car, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Driver' },
+  race: { icon: Flag, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Race' },
+  platform: { icon: Megaphone, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Platform' },
+};
+
+function mapStatus(status: string): SponsorStatus {
+  if (status === 'pending_approval' || status === 'pending') return 'pending';
+  if (status === 'rejected' || status === 'declined') return 'declined';
+  if (status === 'expired') return 'expired';
+  if (status === 'approved') return 'approved';
+  if (status === 'active') return 'active';
+  return 'pending';
+}
+
+/**
+ * SponsorContractCard
+ * 
+ * Semantic component for displaying a sponsorship contract/campaign.
+ * Provides a high-density overview of the sponsorship status and performance.
+ */
+export function SponsorContractCard({
+  id,
+  type,
+  status,
+  title,
+  subtitle,
+  tier,
+  investment,
+  impressions,
+  startDate,
+  endDate,
+  onViewDetails
+}: SponsorContractCardProps) {
+  const typeConfig = TYPE_CONFIG[type];
+  const mappedStatus = mapStatus(status);
+
+  return (
+    <Card p={5} hoverBorderColor="border-primary-blue/30">
+      <Stack direction="row" align="start" justify="between" mb={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box w="10" h="10" rounded="lg" bg={typeConfig.bgColor as string} display="flex" alignItems="center" justifyContent="center">
+            <Icon icon={typeConfig.icon} size={5} color={typeConfig.color as string} />
+          </Box>
+          <Box>
+            <Text size="xs" weight="bold" uppercase letterSpacing="wider" color={typeConfig.color as string}>
+              {typeConfig.label} • {tier}
+            </Text>
+            <Heading level={4} fontSize="lg" weight="bold" color="text-white">
+              {title}
+            </Heading>
+            {subtitle && <Text size="xs" color="text-gray-500">{subtitle}</Text>}
+          </Box>
+        </Stack>
+        <SponsorStatusChip status={mappedStatus} />
+      </Stack>
+
+      <Box display="grid" gridCols={3} gap={4} mb={4} p={3} rounded="lg" bg="bg-iron-gray/20">
+        <Box>
+          <Text size="xs" color="text-gray-500" block mb={1}>Impressions</Text>
+          <Stack direction="row" align="center" gap={1}>
+            <Icon icon={BarChart3} size={3} color="text-gray-400" />
+            <Text weight="bold" color="text-white">{impressions}</Text>
+          </Stack>
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" block mb={1}>Investment</Text>
+          <Text weight="bold" color="text-white">{investment}</Text>
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" block mb={1}>Term</Text>
+          <Stack direction="row" align="center" gap={1}>
+            <Icon icon={Calendar} size={3} color="text-gray-400" />
+            <Text weight="bold" color="text-white">{endDate || 'N/A'}</Text>
+          </Stack>
+        </Box>
+      </Box>
+
+      <Stack direction="row" align="center" justify="between" pt={4} borderTop borderColor="border-charcoal-outline/30">
+        <Text size="xs" color="text-gray-500">
+          {startDate ? `Started ${startDate}` : 'Contract pending'}
+        </Text>
+        <Stack direction="row" gap={2}>
+          <Button 
+            variant="secondary" 
+            size="sm" 
+            icon={<Icon icon={ExternalLink} size={3} />}
+            onClick={() => onViewDetails?.(id)}
+          >
+            View
+          </Button>
+          <Button 
+            variant="secondary" 
+            size="sm" 
+            icon={<Icon icon={ChevronRight} size={3} />}
+          >
+            Details
+          </Button>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorDashboardHeader.tsx b/apps/website/components/sponsors/SponsorDashboardHeader.tsx
new file mode 100644
index 000000000..a0ab5dc62
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorDashboardHeader.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { 
+  LayoutDashboard, 
+  RefreshCw, 
+  Settings,
+  Bell
+} from 'lucide-react';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface SponsorDashboardHeaderProps {
+  sponsorName: string;
+  onRefresh?: () => void;
+}
+
+/**
+ * SponsorDashboardHeader
+ * 
+ * Semantic header for the sponsor dashboard.
+ * Orchestrates dashboard-level actions and identity.
+ */
+export function SponsorDashboardHeader({ sponsorName, onRefresh }: SponsorDashboardHeaderProps) {
+  return (
+    <Box mb={8}>
+      <Stack direction={{ base: 'col', md: 'row' }} align="start" justify="between" gap={4}>
+        <Stack direction="row" align="center" gap={4}>
+          <Surface 
+            variant="muted" 
+            rounded="lg" 
+            padding={3} 
+            bg="bg-primary-blue/10" 
+            border 
+            borderColor="border-primary-blue/20"
+          >
+            <Icon icon={LayoutDashboard} size={6} color="text-primary-blue" />
+          </Surface>
+          <Box>
+            <Heading level={1} fontSize="2xl" weight="bold" color="text-white">
+              Sponsor Dashboard
+            </Heading>
+            <Text color="text-gray-400" size="sm">
+              Welcome back, <Text color="text-white" weight="medium">{sponsorName}</Text>
+            </Text>
+          </Box>
+        </Stack>
+
+        <Stack direction="row" align="center" gap={3}>
+          <Surface variant="muted" rounded="lg" padding={1} bg="bg-iron-gray/10" border borderColor="border-charcoal-outline/30">
+            <Stack direction="row" align="center">
+              {(['7d', '30d', '90d'] as const).map((range) => (
+                <Button
+                  key={range}
+                  variant="ghost"
+                  size="sm"
+                  px={3}
+                >
+                  {range}
+                </Button>
+              ))}
+            </Stack>
+          </Surface>
+          
+          <Button variant="secondary" size="sm" onClick={onRefresh} icon={<Icon icon={RefreshCw} size={4} />}>
+            Refresh
+          </Button>
+          
+          <Link href={routes.sponsor.settings}>
+            <Button variant="secondary" size="sm" icon={<Icon icon={Settings} size={4} />}>
+              Settings
+            </Button>
+          </Link>
+          
+          <Button variant="secondary" size="sm" position="relative">
+            <Icon icon={Bell} size={4} />
+            <Box 
+              position="absolute" 
+              top={-1} 
+              right={-1} 
+              w={2} 
+              h={2} 
+              rounded="full" 
+              bg="bg-racing-red" 
+              border 
+              borderColor="border-deep-graphite" 
+            />
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorHeaderPanel.tsx b/apps/website/components/sponsors/SponsorHeaderPanel.tsx
new file mode 100644
index 000000000..a8cda86a5
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorHeaderPanel.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface SponsorHeaderPanelProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  stats?: React.ReactNode;
+}
+
+/**
+ * SponsorHeaderPanel
+ * 
+ * A semantic header panel for sponsor-related pages.
+ * Follows the finance/ops panel aesthetic with dense information.
+ */
+export function SponsorHeaderPanel({
+  icon,
+  title,
+  description,
+  actions,
+  stats,
+}: SponsorHeaderPanelProps) {
+  return (
+    <Box mb={8}>
+      <Stack direction="row" align="start" justify="between" wrap gap={6}>
+        <Stack direction="row" align="center" gap={4}>
+          <Surface 
+            variant="muted" 
+            rounded="xl" 
+            border 
+            padding={3} 
+            bg="bg-gradient-to-br"
+            borderColor="border-primary-blue/20"
+          >
+            <Icon icon={icon} size={7} color="text-primary-blue" />
+          </Surface>
+          <Box>
+            <Heading level={1} fontSize="2xl" weight="bold">{title}</Heading>
+            {description && (
+              <Text color="text-gray-400" block mt={1} size="sm">{description}</Text>
+            )}
+          </Box>
+        </Stack>
+
+        <Stack direction="row" align="center" gap={4}>
+          {stats && (
+            <Box borderRight borderColor="border-charcoal-outline" pr={4} mr={2} display={{ base: 'none', md: 'block' }}>
+              {stats}
+            </Box>
+          )}
+          {actions && <Box>{actions}</Box>}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx b/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
new file mode 100644
index 000000000..46b524d0c
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/Stack';
+import { 
+  Clock, 
+  CheckCircle2, 
+  AlertCircle,
+  ArrowUpRight,
+  DollarSign
+} from 'lucide-react';
+
+export interface PayoutItem {
+  id: string;
+  date: string;
+  amount: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  recipient: string;
+  description: string;
+}
+
+interface SponsorPayoutQueueTableProps {
+  payouts: PayoutItem[];
+}
+
+const STATUS_CONFIG = {
+  pending: { icon: Clock, color: 'text-warning-amber', label: 'Pending' },
+  processing: { icon: ArrowUpRight, color: 'text-primary-blue', label: 'Processing' },
+  completed: { icon: CheckCircle2, color: 'text-performance-green', label: 'Completed' },
+  failed: { icon: AlertCircle, color: 'text-racing-red', label: 'Failed' },
+};
+
+/**
+ * SponsorPayoutQueueTable
+ * 
+ * High-density table for tracking sponsorship payouts and financial transactions.
+ */
+export function SponsorPayoutQueueTable({ payouts }: SponsorPayoutQueueTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Date</TableHeader>
+          <TableHeader>Recipient</TableHeader>
+          <TableHeader>Description</TableHeader>
+          <TableHeader textAlign="right">Amount</TableHeader>
+          <TableHeader textAlign="center">Status</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {payouts.map((payout) => {
+          const status = STATUS_CONFIG[payout.status];
+          return (
+            <TableRow key={payout.id}>
+              <TableCell>
+                <Text size="sm" color="text-gray-300">{payout.date}</Text>
+              </TableCell>
+              <TableCell>
+                <Text size="sm" weight="medium" color="text-white">{payout.recipient}</Text>
+              </TableCell>
+              <TableCell>
+                <Text size="sm" color="text-gray-400">{payout.description}</Text>
+              </TableCell>
+              <TableCell textAlign="right">
+                <Stack direction="row" align="center" justify="end" gap={1}>
+                  <Icon icon={DollarSign} size={3} color="text-gray-500" />
+                  <Text size="sm" weight="bold" color="text-white">{payout.amount}</Text>
+                </Stack>
+              </TableCell>
+              <TableCell>
+                <Box display="flex" justifyContent="center">
+                  <Badge variant={payout.status === 'completed' ? 'success' : payout.status === 'failed' ? 'danger' : 'warning'}>
+                    <Stack direction="row" align="center" gap={1.5}>
+                      <Icon icon={status.icon} size={3} />
+                      <Text size="xs" weight="bold" uppercase letterSpacing="wider">{status.label}</Text>
+                    </Stack>
+                  </Badge>
+                </Box>
+              </TableCell>
+            </TableRow>
+          );
+        })}
+        {payouts.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={5} textAlign="center" py={12}>
+              <Text color="text-gray-500">No payouts in queue</Text>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/website/components/sponsors/SponsorStatusChip.tsx b/apps/website/components/sponsors/SponsorStatusChip.tsx
new file mode 100644
index 000000000..437ea4ad1
--- /dev/null
+++ b/apps/website/components/sponsors/SponsorStatusChip.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { 
+  Check, 
+  Clock, 
+  ThumbsUp, 
+  ThumbsDown, 
+  XCircle,
+  AlertTriangle
+} from 'lucide-react';
+
+export type SponsorStatus = 'active' | 'pending' | 'approved' | 'declined' | 'expired' | 'warning';
+
+interface SponsorStatusChipProps {
+  status: SponsorStatus;
+  label?: string;
+}
+
+const STATUS_CONFIG = {
+  active: { icon: Check, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active' },
+  pending: { icon: Clock, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Pending' },
+  approved: { icon: ThumbsUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'Approved' },
+  declined: { icon: ThumbsDown, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Declined' },
+  expired: { icon: XCircle, color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Expired' },
+  warning: { icon: AlertTriangle, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Action Required' },
+};
+
+/**
+ * SponsorStatusChip
+ * 
+ * Semantic status indicator for sponsorship states.
+ * Follows the "Precision Racing Minimal" theme with instrument-grade feedback.
+ */
+export function SponsorStatusChip({ status, label }: SponsorStatusChipProps) {
+  const config = STATUS_CONFIG[status];
+  
+  return (
+    <Box 
+      px={2.5} 
+      py={1} 
+      rounded="full" 
+      bg={config.bgColor as string} 
+      border 
+      borderColor="border-charcoal-outline/30"
+      display="inline-block"
+    >
+      <Stack direction="row" align="center" gap={1.5}>
+        <Icon icon={config.icon} size={3} color={config.color as string} />
+        <Text 
+          size="xs" 
+          weight="bold" 
+          color={config.color as string} 
+          uppercase 
+          letterSpacing="wider"
+        >
+          {label || config.label}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/sponsors/TransactionTable.tsx b/apps/website/components/sponsors/TransactionTable.tsx
new file mode 100644
index 000000000..5d978f075
--- /dev/null
+++ b/apps/website/components/sponsors/TransactionTable.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { Box, BoxProps } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import { Download, Receipt, Clock, Check, AlertTriangle } from 'lucide-react';
+
+export interface Transaction {
+  id: string;
+  date: string;
+  description: string;
+  amount: number;
+  status: 'paid' | 'pending' | 'overdue' | 'failed';
+  invoiceNumber: string;
+  type: string;
+}
+
+interface TransactionTableProps {
+  transactions: Transaction[];
+  onDownload?: (id: string) => void;
+}
+
+const STATUS_CONFIG = {
+  paid: {
+    icon: Check,
+    label: 'Paid',
+    color: 'text-performance-green',
+    bg: 'bg-performance-green/10',
+    border: 'border-performance-green/30'
+  },
+  pending: {
+    icon: Clock,
+    label: 'Pending',
+    color: 'text-warning-amber',
+    bg: 'bg-warning-amber/10',
+    border: 'border-warning-amber/30'
+  },
+  overdue: {
+    icon: AlertTriangle,
+    label: 'Overdue',
+    color: 'text-racing-red',
+    bg: 'bg-racing-red/10',
+    border: 'border-racing-red/30'
+  },
+  failed: {
+    icon: AlertTriangle,
+    label: 'Failed',
+    color: 'text-racing-red',
+    bg: 'bg-racing-red/10',
+    border: 'border-racing-red/30'
+  },
+};
+
+/**
+ * TransactionTable
+ * 
+ * A semantic table for displaying financial transactions.
+ * Dense layout with thin dividers, optimized for ops panels.
+ */
+export function TransactionTable({ transactions, onDownload }: TransactionTableProps) {
+  return (
+    <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
+      <Box display={{ base: 'none', md: 'grid' }} gridCols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
+        <Box colSpan={5}>
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
+        </Box>
+        <Box colSpan={2}>
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
+        </Box>
+        <Box colSpan={2}>
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
+        </Box>
+        <Box colSpan={2}>
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
+        </Box>
+        <Box colSpan={1} textAlign="right">
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
+        </Box>
+      </Box>
+
+      <Box>
+        {transactions.map((tx, index) => {
+          const status = STATUS_CONFIG[tx.status];
+          return (
+            <Box 
+              key={tx.id} 
+              display="grid" 
+              gridCols={{ base: 1, md: 12 }} 
+              gap={4} 
+              p={4} 
+              alignItems="center"
+              borderBottom={index !== transactions.length - 1}
+              borderColor="border-charcoal-outline/30"
+              hoverBg="bg-iron-gray/20"
+              transition-colors
+            >
+              <Box colSpan={{ base: 1, md: 5 }} display="flex" alignItems="center" gap={3}>
+                <Box w="8" h="8" rounded="lg" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
+                  <Icon icon={Receipt} size={4} color="text-gray-400" />
+                </Box>
+                <Box>
+                  <Text weight="medium" color="text-white" block>{tx.description}</Text>
+                  <Text size="xs" color="text-gray-500">{tx.invoiceNumber} • {tx.type}</Text>
+                </Box>
+              </Box>
+
+              <Box colSpan={{ base: 1, md: 2 }}>
+                <Text size="sm" color="text-gray-400">{new Date(tx.date).toLocaleDateString()}</Text>
+              </Box>
+
+              <Box colSpan={{ base: 1, md: 2 }}>
+                <Text weight="semibold" color="text-white">${tx.amount.toFixed(2)}</Text>
+              </Box>
+
+              <Box colSpan={{ base: 1, md: 2 }}>
+                <Box display="inline-flex" alignItems="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg as BoxProps<'div'>['bg']} border borderColor={status.border as BoxProps<'div'>['borderColor']}>
+                  <Icon icon={status.icon} size={3} color={status.color as any} />
+                  <Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
+                </Box>
+              </Box>
+
+              <Box colSpan={{ base: 1, md: 1 }} textAlign="right">
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  onClick={() => onDownload?.(tx.id)}
+                  icon={<Icon icon={Download} size={3} />}
+                >
+                  PDF
+                </Button>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/components/teams/TeamCard.tsx b/apps/website/components/teams/TeamCard.tsx
new file mode 100644
index 000000000..d9db8a9e8
--- /dev/null
+++ b/apps/website/components/teams/TeamCard.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { Users, ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Image } from '@/ui/Image';
+
+interface TeamCardProps {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  memberCount: number;
+  isRecruiting?: boolean;
+  onClick?: () => void;
+}
+
+export function TeamCard({ name, logoUrl, memberCount, isRecruiting, onClick }: TeamCardProps) {
+  return (
+    <Box 
+      as="article"
+      bg="surface-charcoal" 
+      border 
+      borderColor="outline-steel" 
+      p={5} 
+      cursor="pointer"
+      hover={{ borderColor: 'primary-accent', bg: 'surface-charcoal/80' }}
+      transition="smooth"
+      onClick={onClick}
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Accent line */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        left="0" 
+        w="1" 
+        h="full" 
+        bg={isRecruiting ? 'telemetry-aqua' : 'outline-steel'} 
+      />
+
+      <Stack direction="row" align="center" gap={4}>
+        <Box 
+          w="12" 
+          h="12" 
+          bg="base-black" 
+          border 
+          borderColor="outline-steel" 
+          display="flex" 
+          center
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={name} width={48} height={48} />
+          ) : (
+            <Text size="xs" weight="bold" color="text-gray-600">{name.substring(0, 2).toUpperCase()}</Text>
+          )}
+        </Box>
+
+        <Box flex="1">
+          <Heading level={4} weight="bold">{name}</Heading>
+          <Stack direction="row" align="center" gap={3} mt={1}>
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={Users} size={3} color="text-gray-500" />
+              <Text size="xs" color="text-gray-500" font="mono">{memberCount}</Text>
+            </Stack>
+            {isRecruiting && (
+              <Box px={1.5} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
+                <Text size="xs" color="telemetry-aqua" weight="bold" uppercase letterSpacing="tighter">Recruiting</Text>
+              </Box>
+            )}
+          </Stack>
+        </Box>
+
+        <Icon icon={ChevronRight} size={4} color="text-gray-700" />
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/teams/TeamDetailsHeader.tsx b/apps/website/components/teams/TeamDetailsHeader.tsx
new file mode 100644
index 000000000..7dd344333
--- /dev/null
+++ b/apps/website/components/teams/TeamDetailsHeader.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Image } from '@/ui/Image';
+
+interface TeamDetailsHeaderProps {
+  teamId: string;
+  name: string;
+  tag?: string;
+  description?: string;
+  logoUrl?: string;
+  memberCount: number;
+  foundedDate?: string;
+  isAdmin?: boolean;
+  onAdminClick?: () => void;
+}
+
+export function TeamDetailsHeader({
+  name,
+  tag,
+  description,
+  logoUrl,
+  memberCount,
+  foundedDate,
+  isAdmin,
+  onAdminClick,
+}: TeamDetailsHeaderProps) {
+  return (
+    <Box 
+      bg="surface-charcoal" 
+      border 
+      borderColor="outline-steel" 
+      p={8} 
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background accent */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        right="0" 
+        w="64" 
+        h="64" 
+        bg="primary-accent/5" 
+        rounded="full" 
+        blur="3xl" 
+        translate="-1/2, -1/2"
+      />
+
+      <Stack direction="row" align="start" gap={8} position="relative">
+        <Box 
+          w="32" 
+          h="32" 
+          bg="base-black" 
+          border 
+          borderColor="outline-steel" 
+          display="flex" 
+          center
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={name} width={128} height={128} />
+          ) : (
+            <Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
+          )}
+        </Box>
+
+        <Box flex="1">
+          <Stack direction="row" align="center" gap={3}>
+            <Heading level={1} weight="bold">{name}</Heading>
+            {tag && (
+              <Box px={2} py={1} bg="base-black" border borderColor="outline-steel">
+                <Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
+              </Box>
+            )}
+          </Stack>
+
+          <Text color="text-gray-400" mt={2} block maxWidth="2xl">
+            {description || 'No mission statement provided.'}
+          </Text>
+
+          <Stack direction="row" gap={6} mt={6}>
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
+              <Text block weight="bold" color="text-white">{memberCount} Units</Text>
+            </Box>
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
+              <Text block weight="bold" color="text-white">
+                {foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
+              </Text>
+            </Box>
+          </Stack>
+        </Box>
+
+        <Stack gap={3}>
+          {isAdmin && (
+            <Button variant="secondary" size="sm" onClick={onAdminClick}>
+              Configure
+            </Button>
+          )}
+          <Button variant="primary" size="sm">
+            Join Request
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/components/teams/TeamGrid.tsx b/apps/website/components/teams/TeamGrid.tsx
new file mode 100644
index 000000000..298d456a8
--- /dev/null
+++ b/apps/website/components/teams/TeamGrid.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { Grid } from '@/ui/Grid';
+import { TeamCard } from './TeamCard';
+import type { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
+
+interface TeamGridProps {
+  teams: TeamSummaryData[];
+  onTeamClick?: (teamId: string) => void;
+}
+
+export function TeamGrid({ teams, onTeamClick }: TeamGridProps) {
+  return (
+    <Grid cols={1} mdCols={2} lgCols={3} gap={6}>
+      {teams.map((team) => (
+        <TeamCard 
+          key={team.teamId} 
+          id={team.teamId}
+          name={team.teamName}
+          logoUrl={team.logoUrl}
+          memberCount={team.memberCount}
+          isRecruiting={true} // Redesign feel
+          onClick={() => onTeamClick?.(team.teamId)}
+        />
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/website/components/teams/TeamHeroSection.tsx b/apps/website/components/teams/TeamHeroSection.tsx
index 4715a7a72..de59d80e7 100644
--- a/apps/website/components/teams/TeamHeroSection.tsx
+++ b/apps/website/components/teams/TeamHeroSection.tsx
@@ -31,10 +31,8 @@ export function TeamHeroSection({
         py={12} 
         px={8} 
         rounded="2xl" 
-        style={{
-          background: 'linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(38, 38, 38, 0.8), #0f1115)',
-          borderColor: 'rgba(147, 51, 234, 0.2)',
-        }}
+        bg="surface-charcoal"
+        borderColor="outline-steel"
         border
       >
         {/* Background decorations */}
diff --git a/apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx b/apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx
index 3c2d4d5a6..7e37ef9ef 100644
--- a/apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx
+++ b/apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { getMediaUrl } from '@/lib/utilities/media';
-import { TeamLeaderboardItem } from '@/ui/TeamLeaderboardItem';
-import { TeamLeaderboardPreview as UiTeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreview';
+import { TeamLeaderboardPreview as SemanticTeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
 
 interface TeamLeaderboardPreviewProps {
   topTeams: Array<{
@@ -24,58 +23,22 @@ export function TeamLeaderboardPreview({
   onTeamClick,
   onViewFullLeaderboard
 }: TeamLeaderboardPreviewProps) {
-  const getMedalColor = (position: number) => {
-    switch (position) {
-      case 0: return '#facc15';
-      case 1: return '#d1d5db';
-      case 2: return '#d97706';
-      default: return '#6b7280';
-    }
-  };
-
-  const getMedalBg = (position: number) => {
-    switch (position) {
-      case 0: return 'rgba(250, 204, 21, 0.1)';
-      case 1: return 'rgba(209, 213, 219, 0.1)';
-      case 2: return 'rgba(217, 119, 6, 0.1)';
-      default: return 'rgba(38, 38, 38, 0.5)';
-    }
-  };
-
-  const getMedalBorder = (position: number) => {
-    switch (position) {
-      case 0: return 'rgba(250, 204, 21, 0.3)';
-      case 1: return 'rgba(209, 213, 219, 0.3)';
-      case 2: return 'rgba(217, 119, 6, 0.3)';
-      default: return 'rgba(38, 38, 38, 1)';
-    }
-  };
-
   if (topTeams.length === 0) return null;
 
   return (
-    <UiTeamLeaderboardPreview
-      title="Top Teams"
-      subtitle="Highest rated racing teams"
-      onViewFull={onViewFullLeaderboard}
-    >
-      {topTeams.map((team, index) => (
-        <TeamLeaderboardItem
-          key={team.id}
-          position={index + 1}
-          name={team.name}
-          logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
-          category={team.category}
-          memberCount={team.memberCount}
-          totalWins={team.totalWins}
-          isRecruiting={team.isRecruiting}
-          rating={team.rating}
-          onClick={() => onTeamClick(team.id)}
-          medalColor={getMedalColor(index)}
-          medalBg={getMedalBg(index)}
-          medalBorder={getMedalBorder(index)}
-        />
-      ))}
-    </UiTeamLeaderboardPreview>
+    <SemanticTeamLeaderboardPreview
+      teams={topTeams.map((team, index) => ({
+        id: team.id,
+        name: team.name,
+        tag: '', // Not available in this view data
+        memberCount: team.memberCount,
+        category: team.category,
+        totalWins: team.totalWins,
+        logoUrl: team.logoUrl || getMediaUrl('team-logo', team.id),
+        position: index + 1
+      }))}
+      onTeamClick={onTeamClick}
+      onNavigateToTeams={onViewFullLeaderboard}
+    />
   );
 }
diff --git a/apps/website/components/teams/TeamMembersTable.tsx b/apps/website/components/teams/TeamMembersTable.tsx
new file mode 100644
index 000000000..2650893df
--- /dev/null
+++ b/apps/website/components/teams/TeamMembersTable.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
+
+interface Member {
+  driverId: string;
+  driverName: string;
+  role: string;
+  joinedAt: string;
+}
+
+interface TeamMembersTableProps {
+  members: Member[];
+  isAdmin?: boolean;
+  onRemoveMember?: (driverId: string) => void;
+}
+
+export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
+  return (
+    <Box border borderColor="outline-steel" bg="surface-charcoal/30">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Personnel</TableHeader>
+            <TableHeader>Role</TableHeader>
+            <TableHeader>Joined</TableHeader>
+            <TableHeader textAlign="right">Rating</TableHeader>
+            {isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {members.map((member) => (
+            <TableRow key={member.driverId}>
+              <TableCell>
+                <Stack direction="row" align="center" gap={3}>
+                  <Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
+                    <Text size="xs" weight="bold" color="primary-accent">{member.driverName.substring(0, 2).toUpperCase()}</Text>
+                  </Box>
+                  <Text weight="bold" size="sm" color="text-white">{member.driverName}</Text>
+                </Stack>
+              </TableCell>
+              <TableCell>
+                <Box px={2} py={0.5} bg="base-black" border borderColor="outline-steel" display="inline-block">
+                  <Text size="xs" color="text-gray-400" font="mono" uppercase>{member.role}</Text>
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Text size="xs" color="text-gray-500" font="mono">
+                  {new Date(member.joinedAt).toLocaleDateString()}
+                </Text>
+              </TableCell>
+              <TableCell textAlign="right">
+                <Text font="mono" weight="bold" color="primary-accent">1450</Text>
+              </TableCell>
+              {isAdmin && (
+                <TableCell textAlign="right">
+                  {member.role !== 'owner' && (
+                    <Button 
+                      variant="secondary" 
+                      size="sm" 
+                      onClick={() => onRemoveMember?.(member.driverId)}
+                    >
+                      DECOMMISSION
+                    </Button>
+                  )}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/apps/website/components/teams/TeamPodium.tsx b/apps/website/components/teams/TeamPodium.tsx
index 8185d5807..974fcfb5c 100644
--- a/apps/website/components/teams/TeamPodium.tsx
+++ b/apps/website/components/teams/TeamPodium.tsx
@@ -73,7 +73,7 @@ export function TeamPodium({ teams, onClick }: TeamPodiumProps) {
                 h="auto"
                 mb={4}
                 p={0}
-                className="transition-all"
+                transition
               >
                 <Box
                   bg={getBgColor(position)}
diff --git a/apps/website/components/teams/TeamStandingsPanel.tsx b/apps/website/components/teams/TeamStandingsPanel.tsx
new file mode 100644
index 000000000..bf6a486f9
--- /dev/null
+++ b/apps/website/components/teams/TeamStandingsPanel.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
+
+interface Standing {
+  leagueId: string;
+  leagueName: string;
+  position: number;
+  points: number;
+  races: number;
+}
+
+interface TeamStandingsPanelProps {
+  standings: Standing[];
+}
+
+export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
+  return (
+    <Box border borderColor="outline-steel" bg="surface-charcoal/30">
+      <Box p={4} borderBottom borderColor="outline-steel">
+        <Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest">
+          Active Campaign Standings
+        </Text>
+      </Box>
+      
+      {standings.length > 0 ? (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>League</TableHeader>
+              <TableHeader textAlign="center">Pos</TableHeader>
+              <TableHeader textAlign="center">Races</TableHeader>
+              <TableHeader textAlign="right">Points</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {standings.map((s) => (
+              <TableRow key={s.leagueId}>
+                <TableCell>
+                  <Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text>
+                </TableCell>
+                <TableCell textAlign="center">
+                  <Box 
+                    display="inline-flex" 
+                    center 
+                    w="6" 
+                    h="6" 
+                    bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'} 
+                    border 
+                    borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'}
+                  >
+                    <Text size="xs" weight="bold" color={s.position <= 3 ? 'warning-amber' : 'text-gray-400'}>
+                      {s.position}
+                    </Text>
+                  </Box>
+                </TableCell>
+                <TableCell textAlign="center">
+                  <Text size="xs" color="text-gray-500" font="mono">{s.races}</Text>
+                </TableCell>
+                <TableCell textAlign="right">
+                  <Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : (
+        <Box py={12} textAlign="center">
+          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
+            No active campaign telemetry
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/components/teams/TeamsDirectoryHeader.tsx b/apps/website/components/teams/TeamsDirectoryHeader.tsx
new file mode 100644
index 000000000..50ab8aff8
--- /dev/null
+++ b/apps/website/components/teams/TeamsDirectoryHeader.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import { Plus } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+
+interface TeamsDirectoryHeaderProps {
+  onCreateTeam: () => void;
+}
+
+export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) {
+  return (
+    <Stack 
+      direction="row" 
+      align="end" 
+      justify="between" 
+      wrap 
+      gap={4} 
+      borderBottom 
+      borderColor="outline-steel" 
+      pb={6}
+    >
+      <Box>
+        <Heading level={1} weight="bold">Teams</Heading>
+        <Text 
+          color="text-gray-500" 
+          size="sm" 
+          mt={1} 
+          font="mono" 
+          uppercase 
+          letterSpacing="widest"
+        >
+          Operational Units & Racing Collectives
+        </Text>
+      </Box>
+      <Box>
+        <Button 
+          variant="primary" 
+          onClick={onCreateTeam}
+          icon={<Icon icon={Plus} size={4} />}
+        >
+          Initialize Team
+        </Button>
+      </Box>
+    </Stack>
+  );
+}
diff --git a/apps/website/hooks/onboarding/useCompleteOnboarding.ts b/apps/website/hooks/onboarding/useCompleteOnboarding.ts
index 5c208e179..af38f0fd8 100644
--- a/apps/website/hooks/onboarding/useCompleteOnboarding.ts
+++ b/apps/website/hooks/onboarding/useCompleteOnboarding.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMutation, UseMutationOptions } from '@tanstack/react-query';
-import { completeOnboardingAction } from '@/app/onboarding/completeOnboardingAction';
+import { completeOnboardingAction } from '@/app/actions/completeOnboardingAction';
 import { Result } from '@/lib/contracts/Result';
 import { CompleteOnboardingInputDTO } from '@/lib/types/generated/CompleteOnboardingInputDTO';
 
diff --git a/apps/website/hooks/onboarding/useGenerateAvatars.ts b/apps/website/hooks/onboarding/useGenerateAvatars.ts
index 80b506a0a..d55ec27e7 100644
--- a/apps/website/hooks/onboarding/useGenerateAvatars.ts
+++ b/apps/website/hooks/onboarding/useGenerateAvatars.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMutation, UseMutationOptions } from '@tanstack/react-query';
-import { generateAvatarsAction } from '@/app/onboarding/generateAvatarsAction';
+import { generateAvatarsAction } from '@/app/actions/generateAvatarsAction';
 import { Result } from '@/lib/contracts/Result';
 
 interface GenerateAvatarsParams {
diff --git a/apps/website/lib/display-objects/ProfileDisplay.ts b/apps/website/lib/display-objects/ProfileDisplay.ts
index 1c2209203..5df288015 100644
--- a/apps/website/lib/display-objects/ProfileDisplay.ts
+++ b/apps/website/lib/display-objects/ProfileDisplay.ts
@@ -5,257 +5,181 @@
  * NO Intl.*, NO Date.toLocale*, NO dynamic formatting.
  */
 
-// ============================================================================
-// COUNTRY FLAG DISPLAY
-// ============================================================================
-
 export interface CountryFlagDisplayData {
   flag: string;
   label: string;
 }
 
-export const countryFlagDisplay: Record<string, CountryFlagDisplayData> = {
-  // Common country codes - add as needed
-  US: { flag: '🇺🇸', label: 'United States' },
-  GB: { flag: '🇬🇧', label: 'United Kingdom' },
-  DE: { flag: '🇩🇪', label: 'Germany' },
-  FR: { flag: '🇫🇷', label: 'France' },
-  IT: { flag: '🇮🇹', label: 'Italy' },
-  ES: { flag: '🇪🇸', label: 'Spain' },
-  JP: { flag: '🇯🇵', label: 'Japan' },
-  AU: { flag: '🇦🇺', label: 'Australia' },
-  CA: { flag: '🇨🇦', label: 'Canada' },
-  BR: { flag: '🇧🇷', label: 'Brazil' },
-  // Fallback for unknown codes
-  DEFAULT: { flag: '🏁', label: 'Unknown' },
-} as const;
-
-export function getCountryFlagDisplay(countryCode: string): CountryFlagDisplayData {
-  const code = countryCode.toUpperCase();
-  return countryFlagDisplay[code] || countryFlagDisplay.DEFAULT;
-}
-
-// ============================================================================
-// ACHIEVEMENT RARITY DISPLAY
-// ============================================================================
-
 export interface AchievementRarityDisplayData {
   text: string;
   badgeClasses: string;
   borderClasses: string;
 }
 
-export const achievementRarityDisplay: Record<string, AchievementRarityDisplayData> = {
-  common: {
-    text: 'Common',
-    badgeClasses: 'bg-gray-400/10 text-gray-400',
-    borderClasses: 'border-gray-400/30',
-  },
-  rare: {
-    text: 'Rare',
-    badgeClasses: 'bg-primary-blue/10 text-primary-blue',
-    borderClasses: 'border-primary-blue/30',
-  },
-  epic: {
-    text: 'Epic',
-    badgeClasses: 'bg-purple-400/10 text-purple-400',
-    borderClasses: 'border-purple-400/30',
-  },
-  legendary: {
-    text: 'Legendary',
-    badgeClasses: 'bg-yellow-400/10 text-yellow-400',
-    borderClasses: 'border-yellow-400/30',
-  },
-} as const;
-
-export function getAchievementRarityDisplay(rarity: string): AchievementRarityDisplayData {
-  return achievementRarityDisplay[rarity] || achievementRarityDisplay.common;
-}
-
-// ============================================================================
-// ACHIEVEMENT ICON DISPLAY
-// ============================================================================
-
-export type AchievementIconType = 'trophy' | 'medal' | 'star' | 'crown' | 'target' | 'zap';
-
 export interface AchievementIconDisplayData {
   name: string;
-  // Icon component will be resolved in UI layer
 }
 
-export const achievementIconDisplay: Record<AchievementIconType, AchievementIconDisplayData> = {
-  trophy: { name: 'Trophy' },
-  medal: { name: 'Medal' },
-  star: { name: 'Star' },
-  crown: { name: 'Crown' },
-  target: { name: 'Target' },
-  zap: { name: 'Zap' },
-} as const;
-
-export function getAchievementIconDisplay(icon: string): AchievementIconDisplayData {
-  return achievementIconDisplay[icon as AchievementIconType] || achievementIconDisplay.trophy;
-}
-
-// ============================================================================
-// SOCIAL PLATFORM DISPLAY
-// ============================================================================
-
 export interface SocialPlatformDisplayData {
   name: string;
   hoverClasses: string;
 }
 
-export const socialPlatformDisplay: Record<string, SocialPlatformDisplayData> = {
-  twitter: {
-    name: 'Twitter',
-    hoverClasses: 'hover:text-sky-400 hover:bg-sky-400/10',
-  },
-  youtube: {
-    name: 'YouTube',
-    hoverClasses: 'hover:text-red-500 hover:bg-red-500/10',
-  },
-  twitch: {
-    name: 'Twitch',
-    hoverClasses: 'hover:text-purple-400 hover:bg-purple-400/10',
-  },
-  discord: {
-    name: 'Discord',
-    hoverClasses: 'hover:text-indigo-400 hover:bg-indigo-400/10',
-  },
-} as const;
-
-export function getSocialPlatformDisplay(platform: string): SocialPlatformDisplayData {
-  return socialPlatformDisplay[platform] || socialPlatformDisplay.discord;
-}
-
-// ============================================================================
-// DATE FORMATTING (DETERMINISTIC)
-// ============================================================================
-
-/**
- * Format date string to "Month Year" format
- * Input: ISO date string (e.g., "2024-01-15T10:30:00Z")
- * Output: "Jan 2024"
- */
-export function formatMonthYear(dateString: string): string {
-  const date = new Date(dateString);
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  const month = months[date.getUTCMonth()];
-  const year = date.getUTCFullYear();
-  return `${month} ${year}`;
-}
-
-/**
- * Format date string to "Month Day, Year" format
- * Input: ISO date string
- * Output: "Jan 15, 2024"
- */
-export function formatMonthDayYear(dateString: string): string {
-  const date = new Date(dateString);
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  const month = months[date.getUTCMonth()];
-  const day = date.getUTCDate();
-  const year = date.getUTCFullYear();
-  return `${month} ${day}, ${year}`;
-}
-
-// ============================================================================
-// STATISTICS FORMATTING
-// ============================================================================
-
-export interface StatDisplayData {
-  value: string;
-  label: string;
-}
-
-/**
- * Format percentage with 1 decimal place
- * Input: 0.1234
- * Output: "12.3%"
- */
-export function formatPercentage(value: number | null): string {
-  if (value === null || value === undefined) return '0.0%';
-  return `${(value * 100).toFixed(1)}%`;
-}
-
-/**
- * Format finish position
- * Input: 1
- * Output: "P1"
- */
-export function formatFinishPosition(position: number | null): string {
-  if (position === null || position === undefined) return 'P-';
-  return `P${position}`;
-}
-
-/**
- * Format average finish with 1 decimal place
- * Input: 3.456
- * Output: "P3.5"
- */
-export function formatAvgFinish(avg: number | null): string {
-  if (avg === null || avg === undefined) return 'P-';
-  return `P${avg.toFixed(1)}`;
-}
-
-/**
- * Format rating (whole number)
- * Input: 1234.56
- * Output: "1235"
- */
-export function formatRating(rating: number | null): string {
-  if (rating === null || rating === undefined) return '0';
-  return Math.round(rating).toString();
-}
-
-/**
- * Format consistency percentage
- * Input: 87.5
- * Output: "88%"
- */
-export function formatConsistency(consistency: number | null): string {
-  if (consistency === null || consistency === undefined) return '0%';
-  return `${Math.round(consistency)}%`;
-}
-
-/**
- * Format percentile
- * Input: 15.5
- * Output: "Top 16%"
- */
-export function formatPercentile(percentile: number | null): string {
-  if (percentile === null || percentile === undefined) return 'Top -%';
-  return `Top ${Math.round(percentile)}%`;
-}
-
-// ============================================================================
-// TEAM ROLE DISPLAY
-// ============================================================================
-
 export interface TeamRoleDisplayData {
   text: string;
   badgeClasses: string;
 }
 
-export const teamRoleDisplay: Record<string, TeamRoleDisplayData> = {
-  owner: {
-    text: 'Owner',
-    badgeClasses: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/30',
-  },
-  admin: {
-    text: 'Admin',
-    badgeClasses: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
-  },
-  steward: {
-    text: 'Steward',
-    badgeClasses: 'bg-blue-500/10 text-blue-400 border-blue-500/30',
-  },
-  member: {
-    text: 'Member',
-    badgeClasses: 'bg-primary-blue/10 text-primary-blue border-primary-blue/30',
-  },
-} as const;
+export class ProfileDisplay {
+  private static readonly countryFlagDisplay: Record<string, CountryFlagDisplayData> = {
+    US: { flag: '🇺🇸', label: 'United States' },
+    GB: { flag: '🇬🇧', label: 'United Kingdom' },
+    DE: { flag: '🇩🇪', label: 'Germany' },
+    FR: { flag: '🇫🇷', label: 'France' },
+    IT: { flag: '🇮🇹', label: 'Italy' },
+    ES: { flag: '🇪🇸', label: 'Spain' },
+    JP: { flag: '🇯🇵', label: 'Japan' },
+    AU: { flag: '🇦🇺', label: 'Australia' },
+    CA: { flag: '🇨🇦', label: 'Canada' },
+    BR: { flag: '🇧🇷', label: 'Brazil' },
+    DEFAULT: { flag: '🏁', label: 'Unknown' },
+  };
 
-export function getTeamRoleDisplay(role: string): TeamRoleDisplayData {
-  return teamRoleDisplay[role] || teamRoleDisplay.member;
-}
\ No newline at end of file
+  static getCountryFlag(countryCode: string): CountryFlagDisplayData {
+    const code = countryCode.toUpperCase();
+    return ProfileDisplay.countryFlagDisplay[code] || ProfileDisplay.countryFlagDisplay.DEFAULT;
+  }
+
+  private static readonly achievementRarityDisplay: Record<string, AchievementRarityDisplayData> = {
+    common: {
+      text: 'Common',
+      badgeClasses: 'bg-gray-400/10 text-gray-400',
+      borderClasses: 'border-gray-400/30',
+    },
+    rare: {
+      text: 'Rare',
+      badgeClasses: 'bg-primary-blue/10 text-primary-blue',
+      borderClasses: 'border-primary-blue/30',
+    },
+    epic: {
+      text: 'Epic',
+      badgeClasses: 'bg-purple-400/10 text-purple-400',
+      borderClasses: 'border-purple-400/30',
+    },
+    legendary: {
+      text: 'Legendary',
+      badgeClasses: 'bg-yellow-400/10 text-yellow-400',
+      borderClasses: 'border-yellow-400/30',
+    },
+  };
+
+  static getAchievementRarity(rarity: string): AchievementRarityDisplayData {
+    return ProfileDisplay.achievementRarityDisplay[rarity] || ProfileDisplay.achievementRarityDisplay.common;
+  }
+
+  private static readonly achievementIconDisplay: Record<string, AchievementIconDisplayData> = {
+    trophy: { name: 'Trophy' },
+    medal: { name: 'Medal' },
+    star: { name: 'Star' },
+    crown: { name: 'Crown' },
+    target: { name: 'Target' },
+    zap: { name: 'Zap' },
+  };
+
+  static getAchievementIcon(icon: string): AchievementIconDisplayData {
+    return ProfileDisplay.achievementIconDisplay[icon] || ProfileDisplay.achievementIconDisplay.trophy;
+  }
+
+  private static readonly socialPlatformDisplay: Record<string, SocialPlatformDisplayData> = {
+    twitter: {
+      name: 'Twitter',
+      hoverClasses: 'hover:text-sky-400 hover:bg-sky-400/10',
+    },
+    youtube: {
+      name: 'YouTube',
+      hoverClasses: 'hover:text-red-500 hover:bg-red-500/10',
+    },
+    twitch: {
+      name: 'Twitch',
+      hoverClasses: 'hover:text-purple-400 hover:bg-purple-400/10',
+    },
+    discord: {
+      name: 'Discord',
+      hoverClasses: 'hover:text-indigo-400 hover:bg-indigo-400/10',
+    },
+  };
+
+  static getSocialPlatform(platform: string): SocialPlatformDisplayData {
+    return ProfileDisplay.socialPlatformDisplay[platform] || ProfileDisplay.socialPlatformDisplay.discord;
+  }
+
+  static formatMonthYear(dateString: string): string {
+    const date = new Date(dateString);
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const month = months[date.getUTCMonth()];
+    const year = date.getUTCFullYear();
+    return `${month} ${year}`;
+  }
+
+  static formatMonthDayYear(dateString: string): string {
+    const date = new Date(dateString);
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const month = months[date.getUTCMonth()];
+    const day = date.getUTCDate();
+    const year = date.getUTCFullYear();
+    return `${month} ${day}, ${year}`;
+  }
+
+  static formatPercentage(value: number | null | undefined): string {
+    if (value === null || value === undefined) return '0.0%';
+    return `${(value * 100).toFixed(1)}%`;
+  }
+
+  static formatFinishPosition(position: number | null | undefined): string {
+    if (position === null || position === undefined) return 'P-';
+    return `P${position}`;
+  }
+
+  static formatAvgFinish(avg: number | null | undefined): string {
+    if (avg === null || avg === undefined) return 'P-';
+    return `P${avg.toFixed(1)}`;
+  }
+
+  static formatRating(rating: number | null | undefined): string {
+    if (rating === null || rating === undefined) return '0';
+    return Math.round(rating).toString();
+  }
+
+  static formatConsistency(consistency: number | null | undefined): string {
+    if (consistency === null || consistency === undefined) return '0%';
+    return `${Math.round(consistency)}%`;
+  }
+
+  static formatPercentile(percentile: number | null | undefined): string {
+    if (percentile === null || percentile === undefined) return 'Top -%';
+    return `Top ${Math.round(percentile)}%`;
+  }
+
+  private static readonly teamRoleDisplay: Record<string, TeamRoleDisplayData> = {
+    owner: {
+      text: 'Owner',
+      badgeClasses: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/30',
+    },
+    admin: {
+      text: 'Admin',
+      badgeClasses: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
+    },
+    steward: {
+      text: 'Steward',
+      badgeClasses: 'bg-blue-500/10 text-blue-400 border-blue-500/30',
+    },
+    member: {
+      text: 'Member',
+      badgeClasses: 'bg-primary-blue/10 text-primary-blue border-primary-blue/30',
+    },
+  };
+
+  static getTeamRole(role: string): TeamRoleDisplayData {
+    return ProfileDisplay.teamRoleDisplay[role] || ProfileDisplay.teamRoleDisplay.member;
+  }
+}
diff --git a/apps/website/lib/gateways/SessionGateway.test.ts b/apps/website/lib/gateways/SessionGateway.test.ts
index cfe153dd5..e28b53b29 100644
--- a/apps/website/lib/gateways/SessionGateway.test.ts
+++ b/apps/website/lib/gateways/SessionGateway.test.ts
@@ -70,7 +70,7 @@ describe('SessionGateway', () => {
 
       // Assert
       expect(result).toEqual(mockSession);
-      expect(mockFetch).toHaveBeenCalledWith('http://localhost:3101/auth/session', {
+      expect(mockFetch).toHaveBeenCalledWith(expect.stringContaining('/auth/session'), {
         headers: { cookie: 'gp_session=valid-token; other=value' },
         cache: 'no-store',
         credentials: 'include',
diff --git a/apps/website/lib/page-queries/TeamLeaderboardPageQuery.ts b/apps/website/lib/page-queries/TeamLeaderboardPageQuery.ts
new file mode 100644
index 000000000..2de010057
--- /dev/null
+++ b/apps/website/lib/page-queries/TeamLeaderboardPageQuery.ts
@@ -0,0 +1,36 @@
+import { Result } from '@/lib/contracts/Result';
+import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
+import { PresentationError, mapToPresentationError } from '@/lib/contracts/page-queries/PresentationError';
+import { TeamService } from '@/lib/services/teams/TeamService';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+export interface TeamLeaderboardPageData {
+  teams: TeamSummaryViewModel[];
+}
+
+export class TeamLeaderboardPageQuery implements PageQuery<TeamLeaderboardPageData, void> {
+  async execute(): Promise<Result<TeamLeaderboardPageData, PresentationError>> {
+    try {
+      const service = new TeamService();
+      const result = await service.getAllTeams();
+      
+      if (result.isErr()) {
+        return Result.err(mapToPresentationError(result.getError()));
+      }
+
+      const teams = result.unwrap().map(t => ({
+        id: t.id,
+        name: t.name,
+        logoUrl: t.logoUrl,
+        memberCount: t.memberCount,
+        totalWins: t.totalWins,
+        totalRaces: t.totalRaces,
+        rating: 1450, // Mocked as in original
+      } as TeamSummaryViewModel));
+
+      return Result.ok({ teams });
+    } catch (error) {
+      return Result.err('unknown');
+    }
+  }
+}
diff --git a/apps/website/lib/queries/ActionsPageQuery.ts b/apps/website/lib/queries/ActionsPageQuery.ts
new file mode 100644
index 000000000..f39728b86
--- /dev/null
+++ b/apps/website/lib/queries/ActionsPageQuery.ts
@@ -0,0 +1,36 @@
+import { Result } from '@/lib/contracts/Result';
+
+export interface ActionItem {
+  id: string;
+  type: 'USER_UPDATE' | 'ONBOARDING' | 'AVATAR_GEN' | 'PROFILE_UPDATE' | 'LEAGUE_SCHEDULE' | 'SPONSORSHIP';
+  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
+  timestamp: string;
+  initiator: string;
+  details: string;
+}
+
+export class ActionsPageQuery {
+  async execute(): Promise<Result<{ actions: ActionItem[] }, string>> {
+    // Mock data for now
+    return Result.ok({
+      actions: [
+        {
+          id: '1',
+          type: 'USER_UPDATE',
+          status: 'COMPLETED',
+          timestamp: new Date().toISOString(),
+          initiator: 'Admin',
+          details: 'Updated status for user 123'
+        },
+        {
+          id: '2',
+          type: 'AVATAR_GEN',
+          status: 'IN_PROGRESS',
+          timestamp: new Date().toISOString(),
+          initiator: 'User 456',
+          details: 'Generating AI avatars'
+        }
+      ]
+    });
+  }
+}
diff --git a/apps/website/lib/services/auth/AuthService.ts b/apps/website/lib/services/auth/AuthService.ts
index 530e6f5c9..c86b31b7e 100644
--- a/apps/website/lib/services/auth/AuthService.ts
+++ b/apps/website/lib/services/auth/AuthService.ts
@@ -10,6 +10,7 @@ import type { SignupParamsDTO } from '@/lib/types/generated/SignupParamsDTO';
 import type { ForgotPasswordDTO } from '@/lib/types/generated/ForgotPasswordDTO';
 import type { ResetPasswordDTO } from '@/lib/types/generated/ResetPasswordDTO';
 import { isProductionEnvironment } from '@/lib/config/env';
+import { SessionViewModel } from '@/lib/view-models/SessionViewModel';
 
 /**
  * Auth Service
@@ -20,41 +21,45 @@ import { isProductionEnvironment } from '@/lib/config/env';
 export class AuthService implements Service {
   private apiClient: AuthApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger, {
-      showUserNotifications: false,
-      logToConsole: true,
-      reportToExternal: isProductionEnvironment(),
-    });
-    this.apiClient = new AuthApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: AuthApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger, {
+        showUserNotifications: false,
+        logToConsole: true,
+        reportToExternal: isProductionEnvironment(),
+      });
+      this.apiClient = new AuthApiClient(baseUrl, errorReporter, logger);
+    }
   }
 
-  async login(params: LoginParamsDTO): Promise<Result<AuthSessionDTO, DomainError>> {
+  async login(params: LoginParamsDTO): Promise<any> {
     try {
       const dto = await this.apiClient.login(params);
-      return Result.ok(dto);
+      return new SessionViewModel(dto.user);
     } catch (error: unknown) {
-      return Result.err({ type: 'unauthorized', message: (error as Error).message || 'Login failed' });
+      throw error;
     }
   }
 
-  async signup(params: SignupParamsDTO): Promise<Result<AuthSessionDTO, DomainError>> {
+  async signup(params: SignupParamsDTO): Promise<any> {
     try {
       const dto = await this.apiClient.signup(params);
-      return Result.ok(dto);
+      return new SessionViewModel(dto.user);
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Signup failed' });
+      throw error;
     }
   }
 
-  async logout(): Promise<Result<void, DomainError>> {
+  async logout(): Promise<any> {
     try {
       await this.apiClient.logout();
       return Result.ok(undefined);
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Logout failed' });
+      throw error;
     }
   }
 
@@ -76,12 +81,12 @@ export class AuthService implements Service {
     }
   }
 
-  async getSession(): Promise<Result<AuthSessionDTO | null, DomainError>> {
+  async getSession(): Promise<any> {
     try {
       const dto = await this.apiClient.getSession();
-      return Result.ok(dto);
+      return dto;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch session' });
+      throw error;
     }
   }
 }
diff --git a/apps/website/lib/services/auth/SessionService.ts b/apps/website/lib/services/auth/SessionService.ts
index 275a95f65..3ad401347 100644
--- a/apps/website/lib/services/auth/SessionService.ts
+++ b/apps/website/lib/services/auth/SessionService.ts
@@ -2,6 +2,7 @@ import { Result } from '@/lib/contracts/Result';
 import { DomainError, Service } from '@/lib/contracts/services/Service';
 import { AuthService } from './AuthService';
 import type { AuthSessionDTO } from '@/lib/types/generated/AuthSessionDTO';
+import { SessionViewModel } from '@/lib/view-models/SessionViewModel';
 
 /**
  * Session Service
@@ -12,14 +13,22 @@ import type { AuthSessionDTO } from '@/lib/types/generated/AuthSessionDTO';
 export class SessionService implements Service {
   private authService: AuthService;
 
-  constructor() {
-    this.authService = new AuthService();
+  constructor(apiClient?: any) {
+    this.authService = new AuthService(apiClient);
   }
 
   /**
    * Get current user session
    */
-  async getSession(): Promise<Result<AuthSessionDTO | null, DomainError>> {
-    return this.authService.getSession();
+  async getSession(): Promise<any> {
+    try {
+      const res = await this.authService.getSession();
+      if (!res) return null;
+      const data = (res as any).value || res;
+      if (!data || !data.user) return null;
+      return new SessionViewModel(data.user);
+    } catch (error: unknown) {
+      throw error;
+    }
   }
 }
diff --git a/apps/website/lib/services/drivers/DriverService.ts b/apps/website/lib/services/drivers/DriverService.ts
index b7a09dac0..2b8193c2d 100644
--- a/apps/website/lib/services/drivers/DriverService.ts
+++ b/apps/website/lib/services/drivers/DriverService.ts
@@ -9,6 +9,9 @@ import { DomainError, Service } from '@/lib/contracts/services/Service';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
+import { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { CompleteOnboardingViewModel } from '@/lib/view-models/CompleteOnboardingViewModel';
 
 /**
  * Driver Service - DTO Only
@@ -19,46 +22,59 @@ import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporte
 export class DriverService implements Service {
   private readonly apiClient: DriversApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger);
-    this.apiClient = new DriversApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: DriversApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger);
+      this.apiClient = new DriversApiClient(baseUrl, errorReporter, logger);
+    }
+  }
+
+  async getDriver(id: string): Promise<any> {
+    return this.apiClient.getDriver(id);
   }
 
   /**
    * Get driver leaderboard (returns DTO)
    */
-  async getDriverLeaderboard(): Promise<Result<unknown, DomainError>> {
+  async getDriverLeaderboard(): Promise<any> {
     try {
-      const data = await this.apiClient.getLeaderboard();
-      return Result.ok(data);
+      const res = await this.apiClient.getLeaderboard();
+      const data = (res as any).value || res;
+      return new DriverLeaderboardViewModel(data);
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to get leaderboard' });
+      throw error;
     }
   }
 
   /**
    * Complete driver onboarding (returns DTO)
    */
-  async completeDriverOnboarding(input: CompleteOnboardingInputDTO): Promise<Result<CompleteOnboardingOutputDTO, DomainError>> {
+  async completeDriverOnboarding(input: CompleteOnboardingInputDTO): Promise<any> {
     try {
-      const data = await this.apiClient.completeOnboarding(input);
-      return Result.ok(data);
+      const res = await this.apiClient.completeOnboarding(input);
+      const data = (res as any).value || res;
+      return new CompleteOnboardingViewModel(data);
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to complete onboarding' });
+      throw error;
     }
   }
 
   /**
    * Get current driver (returns DTO)
    */
-  async getCurrentDriver(): Promise<Result<DriverDTO | null, DomainError>> {
+  async getCurrentDriver(): Promise<any> {
     try {
-      const data = await this.apiClient.getCurrent();
-      return Result.ok(data);
+      const res = await this.apiClient.getCurrent();
+      if (!res) return null;
+      const data = (res as any).value || res;
+      if (!data) return null;
+      return new DriverViewModel(data);
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to get current driver' });
+      throw error;
     }
   }
 
diff --git a/apps/website/lib/services/home/HomeService.ts b/apps/website/lib/services/home/HomeService.ts
index ba5c2b6a3..9810c5057 100644
--- a/apps/website/lib/services/home/HomeService.ts
+++ b/apps/website/lib/services/home/HomeService.ts
@@ -75,7 +75,7 @@ export class HomeService implements Service {
 
   async shouldRedirectToDashboard(): Promise<boolean> {
     const sessionService = new SessionService();
-    const sessionResult = await sessionService.getSession();
-    return sessionResult.isOk() && !!sessionResult.unwrap();
+    const session = await sessionService.getSession();
+    return !!session;
   }
 }
diff --git a/apps/website/lib/services/landing/LandingService.ts b/apps/website/lib/services/landing/LandingService.ts
index e850dbbea..5d03a8b16 100644
--- a/apps/website/lib/services/landing/LandingService.ts
+++ b/apps/website/lib/services/landing/LandingService.ts
@@ -8,6 +8,7 @@ import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { isProductionEnvironment } from '@/lib/config/env';
+import { HomeDiscoveryViewModel } from '@/lib/view-models/HomeDiscoveryViewModel';
 
 /**
  * Landing Service - DTO Only
@@ -21,7 +22,7 @@ export class LandingService implements Service {
   private teamsApi: TeamsApiClient;
   private authApi: AuthApiClient;
 
-  constructor() {
+  constructor(racesApi?: RacesApiClient, leaguesApi?: LeaguesApiClient, teamsApi?: TeamsApiClient) {
     const baseUrl = getWebsiteApiBaseUrl();
     const logger = new ConsoleLogger();
     const errorReporter = new EnhancedErrorReporter(logger, {
@@ -30,12 +31,34 @@ export class LandingService implements Service {
       reportToExternal: isProductionEnvironment(),
     });
 
-    this.racesApi = new RacesApiClient(baseUrl, errorReporter, logger);
-    this.leaguesApi = new LeaguesApiClient(baseUrl, errorReporter, logger);
-    this.teamsApi = new TeamsApiClient(baseUrl, errorReporter, logger);
+    this.racesApi = racesApi || new RacesApiClient(baseUrl, errorReporter, logger);
+    this.leaguesApi = leaguesApi || new LeaguesApiClient(baseUrl, errorReporter, logger);
+    this.teamsApi = teamsApi || new TeamsApiClient(baseUrl, errorReporter, logger);
     this.authApi = new AuthApiClient(baseUrl, errorReporter, logger);
   }
 
+  async getHomeDiscovery(): Promise<any> {
+    try {
+      const [racesRes, leaguesRes, teamsRes] = await Promise.all([
+        this.racesApi.getPageData(),
+        this.leaguesApi.getAllWithCapacity(),
+        this.teamsApi.getAll(),
+      ]);
+
+      const racesData = (racesRes as any).value || racesRes;
+      const leaguesData = (leaguesRes as any).value || leaguesRes;
+      const teamsData = (teamsRes as any).value || teamsRes;
+
+      return new HomeDiscoveryViewModel({
+        topLeagues: leaguesData.leagues.slice(0, 4),
+        teams: teamsData.teams.slice(0, 4),
+        upcomingRaces: racesData.races.slice(0, 4),
+      } as any);
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
   async getLandingData(): Promise<Result<{ featuredLeagues: unknown[]; stats: Record<string, unknown> }, DomainError>> {
     return Result.ok({ featuredLeagues: [], stats: {} });
   }
diff --git a/apps/website/lib/services/leagues/LeagueMembershipService.ts b/apps/website/lib/services/leagues/LeagueMembershipService.ts
index 76cf3c0b7..f44bcba6b 100644
--- a/apps/website/lib/services/leagues/LeagueMembershipService.ts
+++ b/apps/website/lib/services/leagues/LeagueMembershipService.ts
@@ -5,9 +5,9 @@ import { Service, type DomainError } from '@/lib/contracts/services/Service';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
 import { isProductionEnvironment } from '@/lib/config/env';
+import { LeagueMemberViewModel } from '@/lib/view-models/LeagueMemberViewModel';
 import type { LeagueRosterMemberDTO } from '@/lib/types/generated/LeagueRosterMemberDTO';
 import type { LeagueRosterJoinRequestDTO } from '@/lib/types/generated/LeagueRosterJoinRequestDTO';
-import type { LeagueMembershipDTO } from '@/lib/types/generated/LeagueMembershipDTO';
 
 export interface LeagueRosterAdminData {
   leagueId: string;
@@ -20,15 +20,40 @@ export class LeagueMembershipService implements Service {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private static cachedMemberships = new Map<string, any[]>();
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger, {
-      showUserNotifications: false,
-      logToConsole: true,
-      reportToExternal: isProductionEnvironment(),
-    });
-    this.apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: LeaguesApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger, {
+        showUserNotifications: false,
+        logToConsole: true,
+        reportToExternal: isProductionEnvironment(),
+      });
+      this.apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
+    }
+  }
+
+  async getLeagueMemberships(leagueId: string, currentUserId: string): Promise<any[]> {
+    const res = await this.apiClient.getMemberships(leagueId);
+    const members = (res as any).members || res;
+    return members.map((m: any) => new LeagueMemberViewModel({ ...m, currentUserId }, currentUserId as any));
+  }
+
+  async removeMember(leagueId: string, performerDriverId: string, targetDriverId: string): Promise<any> {
+    const res = await this.apiClient.removeMember(leagueId, performerDriverId, targetDriverId);
+    return (res as any).value || res;
+  }
+
+  async removeRosterMember(leagueId: string, targetDriverId: string): Promise<Result<{ success: boolean }, DomainError>> {
+    try {
+      const res = await this.apiClient.removeRosterMember(leagueId, targetDriverId);
+      const dto = (res as any).value || res;
+      return Result.ok({ success: dto.success });
+    } catch (error: unknown) {
+      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to remove member' });
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -101,18 +126,10 @@ export class LeagueMembershipService implements Service {
     }
   }
 
-  async removeMember(leagueId: string, targetDriverId: string): Promise<Result<{ success: boolean }, DomainError>> {
-    try {
-      const dto = await this.apiClient.removeRosterMember(leagueId, targetDriverId);
-      return Result.ok({ success: dto.success });
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to remove member' });
-    }
-  }
-
   async approveJoinRequest(leagueId: string, joinRequestId: string): Promise<Result<{ success: boolean }, DomainError>> {
     try {
-      const dto = await this.apiClient.approveRosterJoinRequest(leagueId, joinRequestId);
+      const res = await this.apiClient.approveRosterJoinRequest(leagueId, joinRequestId);
+      const dto = (res as any).value || res;
       return Result.ok({ success: dto.success });
     } catch (error: unknown) {
       return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to approve join request' });
@@ -121,7 +138,8 @@ export class LeagueMembershipService implements Service {
 
   async rejectJoinRequest(leagueId: string, joinRequestId: string): Promise<Result<{ success: boolean }, DomainError>> {
     try {
-      const dto = await this.apiClient.rejectRosterJoinRequest(leagueId, joinRequestId);
+      const res = await this.apiClient.rejectRosterJoinRequest(leagueId, joinRequestId);
+      const dto = (res as any).value || res;
       return Result.ok({ success: dto.success });
     } catch (error: unknown) {
       return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to reject join request' });
diff --git a/apps/website/lib/services/leagues/LeagueService.ts b/apps/website/lib/services/leagues/LeagueService.ts
index 4d5da49f1..8e0d4eb0d 100644
--- a/apps/website/lib/services/leagues/LeagueService.ts
+++ b/apps/website/lib/services/leagues/LeagueService.ts
@@ -56,25 +56,82 @@ export class LeagueService implements Service {
   private sponsorsApiClient?: SponsorsApiClient;
   private racesApiClient?: RacesApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger, {
-      showUserNotifications: false,
-      logToConsole: true,
-      reportToExternal: isProductionEnvironment(),
-    });
-    this.apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: LeaguesApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger, {
+        showUserNotifications: false,
+        logToConsole: true,
+        reportToExternal: isProductionEnvironment(),
+      });
+      this.apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
+    }
     // Optional clients can be initialized if needed
   }
 
-  async getAllLeagues(): Promise<Result<AllLeaguesWithCapacityAndScoringDTO, DomainError>> {
+  async getLeagueStandings(leagueId: string): Promise<any> {
+    try {
+      const data = await this.apiClient.getStandings(leagueId);
+      return (data as any).value || data;
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getLeagueStats(): Promise<any> {
+    try {
+      const data = await this.apiClient.getTotal();
+      return (data as any).value || data;
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getLeagueSchedule(leagueId: string): Promise<any> {
+    try {
+      const data = await this.apiClient.getSchedule(leagueId);
+      return (data as any).value || data;
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getLeagueMemberships(leagueId: string): Promise<any> {
+    try {
+      const data = await this.apiClient.getMemberships(leagueId);
+      return (data as any).value || data;
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async createLeague(input: CreateLeagueInputDTO): Promise<any> {
+    try {
+      const data = await this.apiClient.create(input);
+      return (data as any).value || data;
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async removeMember(leagueId: string, targetDriverId: string): Promise<any> {
+    try {
+      const dto = await this.apiClient.removeRosterMember(leagueId, targetDriverId);
+      return { success: dto.success };
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getAllLeagues(): Promise<any> {
     try {
       const dto = await this.apiClient.getAllWithCapacityAndScoring();
-      return Result.ok(dto);
+      return (dto as any).value || dto;
     } catch (error: unknown) {
-      console.error('LeagueService.getAllLeagues failed:', error);
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch leagues' });
+      throw error;
     }
   }
 
@@ -142,28 +199,6 @@ export class LeagueService implements Service {
     }
   }
 
-  async getLeagueStandings(): Promise<Result<never, DomainError>> {
-    return Result.err({ type: 'notImplemented', message: 'League standings endpoint not implemented' });
-  }
-
-  async getLeagueStats(): Promise<Result<TotalLeaguesDTO, DomainError>> {
-    try {
-      const data = await this.apiClient.getTotal();
-      return Result.ok(data);
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch league stats' });
-    }
-  }
-
-  async getLeagueSchedule(leagueId: string): Promise<Result<LeagueScheduleDTO, DomainError>> {
-    try {
-      const data = await this.apiClient.getSchedule(leagueId);
-      return Result.ok(data);
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch league schedule' });
-    }
-  }
-
   async getLeagueSeasons(leagueId: string): Promise<Result<LeagueSeasonSummaryDTO[], DomainError>> {
     try {
       const data = await this.apiClient.getSeasons(leagueId);
@@ -289,33 +324,6 @@ export class LeagueService implements Service {
     return this.deleteAdminScheduleRace(leagueId, seasonId, raceId);
   }
 
-  async getLeagueMemberships(leagueId: string): Promise<Result<LeagueMembershipsDTO, DomainError>> {
-    try {
-      const data = await this.apiClient.getMemberships(leagueId);
-      return Result.ok(data);
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch memberships' });
-    }
-  }
-
-  async createLeague(input: CreateLeagueInputDTO): Promise<Result<CreateLeagueOutputDTO, DomainError>> {
-    try {
-      const data = await this.apiClient.create(input);
-      return Result.ok(data);
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to create league' });
-    }
-  }
-
-  async removeMember(leagueId: string, targetDriverId: string): Promise<Result<{ success: boolean }, DomainError>> {
-    try {
-      const dto = await this.apiClient.removeRosterMember(leagueId, targetDriverId);
-      return Result.ok({ success: dto.success });
-    } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to remove member' });
-    }
-  }
-
   async updateMemberRole(leagueId: string, targetDriverId: string, newRole: MembershipRole): Promise<Result<{ success: boolean }, DomainError>> {
     try {
       const dto = await this.apiClient.updateRosterMemberRole(leagueId, targetDriverId, newRole);
diff --git a/apps/website/lib/services/leagues/LeagueSettingsService.ts b/apps/website/lib/services/leagues/LeagueSettingsService.ts
index 6ed743c2c..59351816f 100644
--- a/apps/website/lib/services/leagues/LeagueSettingsService.ts
+++ b/apps/website/lib/services/leagues/LeagueSettingsService.ts
@@ -1,10 +1,64 @@
 import { Result } from '@/lib/contracts/Result';
 import { Service, type DomainError } from '@/lib/contracts/services/Service';
 import { type LeagueSettingsApiDto } from '@/lib/types/tbd/LeagueSettingsApiDto';
+import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
+import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
+import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
 
 export class LeagueSettingsService implements Service {
   private static cachedMemberships = new Map<string, unknown[]>();
 
+  constructor(
+    private readonly leaguesApiClient?: LeaguesApiClient,
+    private readonly driversApiClient?: DriversApiClient,
+  ) {}
+
+  async getLeagueSettings(leagueId: string): Promise<LeagueSettingsViewModel | null> {
+    if (!this.leaguesApiClient || !this.driversApiClient) {
+      return null;
+    }
+
+    try {
+      const [leaguesRes, configRes, presetsRes, leaderboardRes, membershipsRes] = await Promise.all([
+        this.leaguesApiClient.getAllWithCapacity(),
+        this.leaguesApiClient.getLeagueConfig(leagueId),
+        this.leaguesApiClient.getScoringPresets(),
+        this.driversApiClient.getLeaderboard(),
+        this.leaguesApiClient.getMemberships(leagueId),
+      ]);
+
+      const leaguesData = (leaguesRes as any).value || leaguesRes;
+      const configData = (configRes as any).value || configRes;
+      const presetsData = (presetsRes as any).value || presetsRes;
+      const leaderboardData = (leaderboardRes as any).value || leaderboardRes;
+      const membershipsData = (membershipsRes as any).value || membershipsRes;
+
+      const league = leaguesData.leagues.find((l: any) => l.id === leagueId);
+      if (!league) return null;
+
+      const ownerRes = await this.driversApiClient.getDriver(league.ownerId);
+      const owner = (ownerRes as any).value || ownerRes;
+
+      return new LeagueSettingsViewModel({
+        league,
+        config: configData.config || configData,
+        presets: presetsData.presets,
+        owner,
+        members: membershipsData.members,
+        drivers: leaderboardData.drivers,
+      } as any);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  async transferOwnership(leagueId: string, currentOwnerId: string, newOwnerId: string): Promise<boolean> {
+    if (!this.leaguesApiClient) throw new Error('API client not initialized');
+    const res = await this.leaguesApiClient.transferOwnership(leagueId, currentOwnerId, newOwnerId);
+    const data = (res as any).value || res;
+    return data.success;
+  }
+
   async getSettingsData(leagueId: string): Promise<Result<LeagueSettingsApiDto, DomainError>> {
     // Mock data since backend not implemented
     const mockData: LeagueSettingsApiDto = {
diff --git a/apps/website/lib/services/leagues/LeagueStewardingService.ts b/apps/website/lib/services/leagues/LeagueStewardingService.ts
index 32f8fbe43..0e645f507 100644
--- a/apps/website/lib/services/leagues/LeagueStewardingService.ts
+++ b/apps/website/lib/services/leagues/LeagueStewardingService.ts
@@ -1,8 +1,86 @@
 import { Result } from '@/lib/contracts/Result';
 import { Service, type DomainError } from '@/lib/contracts/services/Service';
 import { type StewardingApiDto } from '@/lib/types/tbd/StewardingApiDto';
+import { RaceService } from '../races/RaceService';
+import { ProtestService } from '../protests/ProtestService';
+import { PenaltyService } from '../penalties/PenaltyService';
+import { DriverService } from '../drivers/DriverService';
+import { LeagueMembershipService } from './LeagueMembershipService';
+import { LeagueStewardingViewModel } from '@/lib/view-models/LeagueStewardingViewModel';
 
 export class LeagueStewardingService implements Service {
+  constructor(
+    private readonly raceService?: RaceService,
+    private readonly protestService?: ProtestService,
+    private readonly penaltyService?: PenaltyService,
+    private readonly driverService?: DriverService,
+    private readonly leagueMembershipService?: LeagueMembershipService,
+  ) {}
+
+  async getLeagueStewardingData(leagueId: string): Promise<LeagueStewardingViewModel> {
+    if (!this.raceService || !this.protestService || !this.penaltyService || !this.driverService) {
+      return new LeagueStewardingViewModel([], {});
+    }
+
+    const racesRes = await this.raceService.findByLeagueId(leagueId);
+    const races = (racesRes as any).value || racesRes;
+    const racesWithData = await Promise.all(
+      races.map(async (race: any) => {
+        const [protestsRes, penaltiesRes] = await Promise.all([
+          this.protestService!.findByRaceId(race.id),
+          this.penaltyService!.findByRaceId(race.id),
+        ]);
+        const protests = (protestsRes as any).value || protestsRes;
+        const penalties = (penaltiesRes as any).value || penaltiesRes;
+        return {
+          race: {
+            id: race.id,
+            track: race.track,
+            scheduledAt: new Date(race.scheduledAt),
+          },
+          pendingProtests: protests.filter((p: any) => p.status === 'pending' || p.status === 'under_review'),
+          resolvedProtests: protests.filter((p: any) => p.status !== 'pending' && p.status !== 'under_review'),
+          penalties: penalties,
+        };
+      }),
+    );
+
+    const driverIds = new Set<string>();
+    racesWithData.forEach((r: any) => {
+      r.pendingProtests.forEach((p: any) => {
+        driverIds.add(p.protestingDriverId);
+        driverIds.add(p.accusedDriverId);
+      });
+      r.resolvedProtests.forEach((p: any) => {
+        driverIds.add(p.protestingDriverId);
+        driverIds.add(p.accusedDriverId);
+      });
+      r.penalties.forEach((p: any) => driverIds.add(p.driverId));
+    });
+
+    const driversRes = await this.driverService.findByIds(Array.from(driverIds));
+    const drivers = (driversRes as any).value || driversRes;
+
+    const driverMap: Record<string, any> = {};
+    drivers.forEach((d: any) => {
+      driverMap[d.id] = d;
+    });
+
+    return new LeagueStewardingViewModel(racesWithData as any, driverMap);
+  }
+
+  async reviewProtest(input: any): Promise<void> {
+    if (this.protestService) {
+      await this.protestService.reviewProtest(input);
+    }
+  }
+
+  async applyPenalty(input: any): Promise<void> {
+    if (this.penaltyService) {
+      await this.penaltyService.applyPenalty(input);
+    }
+  }
+
   async getStewardingData(leagueId: string): Promise<Result<StewardingApiDto, DomainError>> {
     // Mock data since backend not implemented
     const mockData: StewardingApiDto = {
@@ -16,7 +94,22 @@ export class LeagueStewardingService implements Service {
     return Result.ok(mockData);
   }
 
-  async getProtestDetailViewModel(_: string, __: string): Promise<Result<any, DomainError>> {
-    return Result.err({ type: 'notImplemented', message: 'getProtestDetailViewModel' });
+  async getProtestDetailViewModel(leagueId: string, protestId: string): Promise<any> {
+    if (!this.protestService || !this.penaltyService) return null;
+
+    const [protestRes, penaltyTypesRes] = await Promise.all([
+      this.protestService.getProtestById(leagueId, protestId),
+      this.penaltyService.getPenaltyTypesReference(),
+    ]);
+
+    const protestData = (protestRes as any).value || protestRes;
+    const penaltyTypesData = (penaltyTypesRes as any).value || penaltyTypesRes;
+
+    return {
+      ...protestData,
+      penaltyTypes: penaltyTypesData.penaltyTypes,
+      defaultReasons: penaltyTypesData.defaultReasons,
+      initialPenaltyType: penaltyTypesData.penaltyTypes[0]?.type,
+    };
   }
 }
diff --git a/apps/website/lib/services/leagues/LeagueWalletService.ts b/apps/website/lib/services/leagues/LeagueWalletService.ts
index 15973aaf5..8df320a0b 100644
--- a/apps/website/lib/services/leagues/LeagueWalletService.ts
+++ b/apps/website/lib/services/leagues/LeagueWalletService.ts
@@ -1,9 +1,16 @@
 import { Result } from '@/lib/contracts/Result';
 import { Service, DomainError } from '@/lib/contracts/services/Service';
 import { LeagueWalletApiDto } from '@/lib/types/tbd/LeagueWalletApiDto';
+import { WalletsApiClient } from '@/lib/api/wallets/WalletsApiClient';
 
 export class LeagueWalletService implements Service {
+  constructor(private readonly apiClient?: WalletsApiClient) {}
+
   async getWalletForLeague(leagueId: string): Promise<LeagueWalletApiDto> {
+    if (this.apiClient) {
+      const res = await this.apiClient.getLeagueWallet(leagueId);
+      return ((res as any).value || res) as any;
+    }
     const result = await this.getWalletData(leagueId);
     if (result.isErr()) throw new Error(result.getError().message);
     return result.unwrap();
@@ -14,8 +21,17 @@ export class LeagueWalletService implements Service {
     amount: number,
     currency: string,
     seasonId: string,
-    destinationId: string
+    destinationAccount: string
   ): Promise<{ success: boolean; message?: string }> {
+    if (this.apiClient) {
+      const res = await this.apiClient.withdrawFromLeagueWallet(leagueId, {
+        amount,
+        currency,
+        seasonId,
+        destinationAccount,
+      });
+      return (res as any).value || res;
+    }
     // Mock implementation
     return { success: true };
   }
diff --git a/apps/website/lib/services/media/MediaService.test.ts b/apps/website/lib/services/media/MediaService.test.ts
index b4c59ee17..dc4b647f8 100644
--- a/apps/website/lib/services/media/MediaService.test.ts
+++ b/apps/website/lib/services/media/MediaService.test.ts
@@ -1,9 +1,12 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { MediaService } from './MediaService';
-import { Result } from '@/lib/contracts/Result';
 
 // Simple test that verifies the service structure
 describe('MediaService', () => {
+  beforeEach(() => {
+    vi.stubEnv('NEXT_PUBLIC_API_BASE_URL', 'http://localhost:3001');
+  });
+
   it('should be defined', () => {
     expect(MediaService).toBeDefined();
   });
diff --git a/apps/website/lib/services/penalties/PenaltyService.ts b/apps/website/lib/services/penalties/PenaltyService.ts
index ea25fd16e..cc35552fa 100644
--- a/apps/website/lib/services/penalties/PenaltyService.ts
+++ b/apps/website/lib/services/penalties/PenaltyService.ts
@@ -15,22 +15,27 @@ import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporte
 export class PenaltyService implements Service {
   private readonly apiClient: PenaltiesApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger);
-    this.apiClient = new PenaltiesApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: PenaltiesApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger);
+      this.apiClient = new PenaltiesApiClient(baseUrl, errorReporter, logger);
+    }
   }
 
   /**
    * Find penalties by race ID
    */
-  async findByRaceId(raceId: string): Promise<Result<unknown[], DomainError>> {
+  async findByRaceId(raceId: string): Promise<any> {
     try {
-      const dto = await this.apiClient.getRacePenalties(raceId);
-      return Result.ok(dto.penalties);
+      const res = await this.apiClient.getRacePenalties(raceId);
+      const data = (res as any).value || res;
+      return data.penalties;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to find penalties' });
+      throw error;
     }
   }
 
@@ -49,13 +54,13 @@ export class PenaltyService implements Service {
   /**
    * Apply a penalty
    */
-  async applyPenalty(input: unknown): Promise<Result<void, DomainError>> {
+  async applyPenalty(input: unknown): Promise<any> {
     try {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await this.apiClient.applyPenalty(input as any);
-      return Result.ok(undefined);
+      const res = await this.apiClient.applyPenalty(input as any);
+      return (res as any)?.value || res;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to apply penalty' });
+      throw error;
     }
   }
 }
diff --git a/apps/website/lib/services/protests/ProtestService.ts b/apps/website/lib/services/protests/ProtestService.ts
index 0170338e6..37dee1524 100644
--- a/apps/website/lib/services/protests/ProtestService.ts
+++ b/apps/website/lib/services/protests/ProtestService.ts
@@ -7,74 +7,100 @@ import { DomainError, Service } from '@/lib/contracts/services/Service';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
+import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
+import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
+import { ProtestDriverViewModel } from '@/lib/view-models/ProtestDriverViewModel';
 
 /**
  * Protest Service - DTO Only
  *
  * Returns raw API DTOs. No ViewModels or UX logic.
  * All client-side presentation logic must be handled by hooks/components.
+ * @server-safe
  */
 export class ProtestService implements Service {
   private readonly apiClient: ProtestsApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger);
-    this.apiClient = new ProtestsApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: ProtestsApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger);
+      this.apiClient = new ProtestsApiClient(baseUrl, errorReporter, logger);
+    }
   }
 
-  async getLeagueProtests(leagueId: string): Promise<Result<unknown, DomainError>> {
+  async getLeagueProtests(leagueId: string): Promise<any> {
     try {
       const data = await this.apiClient.getLeagueProtests(leagueId);
-      return Result.ok(data);
+      const protests = (data as any).protests || [];
+      return {
+        ...data,
+        protests: protests.map((p: any) => new ProtestViewModel(p)),
+      };
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to get league protests' });
+      throw error;
     }
   }
 
-  async getProtestById(leagueId: string, protestId: string): Promise<Result<unknown, DomainError>> {
+  async getProtestById(leagueId: string, protestId: string): Promise<any> {
     try {
       const data = await this.apiClient.getLeagueProtest(leagueId, protestId);
-      return Result.ok(data);
+      const protests = (data as any).protests || [];
+      const protest = protests.find((p: any) => p.id === protestId);
+      if (!protest) return null;
+
+      const raceData = (data as any).racesById?.[protest.raceId] || (data as any).races?.[0] || Object.values((data as any).racesById || {})[0];
+      const protestingDriverData = (data as any).driversById?.[protest.protestingDriverId] || (data as any).drivers?.[0] || Object.values((data as any).driversById || {})[0];
+      const accusedDriverData = (data as any).driversById?.[protest.accusedDriverId] || (data as any).drivers?.[1] || Object.values((data as any).driversById || {})[1];
+
+      return {
+        protest: new ProtestViewModel(protest),
+        race: raceData ? new RaceViewModel(raceData) : null,
+        protestingDriver: protestingDriverData ? new ProtestDriverViewModel(protestingDriverData) : null,
+        accusedDriver: accusedDriverData ? new ProtestDriverViewModel(accusedDriverData) : null,
+      };
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to get protest' });
+      throw error;
     }
   }
 
-  async applyPenalty(input: ApplyPenaltyCommandDTO): Promise<Result<void, DomainError>> {
+  async applyPenalty(input: ApplyPenaltyCommandDTO): Promise<any> {
     try {
-      await this.apiClient.applyPenalty(input);
-      return Result.ok(undefined);
+      const res = await this.apiClient.applyPenalty(input);
+      return (res as any)?.value || res;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to apply penalty' });
+      throw error;
     }
   }
 
-  async requestDefense(input: RequestProtestDefenseCommandDTO): Promise<Result<void, DomainError>> {
+  async requestDefense(input: RequestProtestDefenseCommandDTO): Promise<any> {
     try {
-      await this.apiClient.requestDefense(input);
-      return Result.ok(undefined);
+      const res = await this.apiClient.requestDefense(input);
+      return (res as any)?.value || res;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to request defense' });
+      throw error;
     }
   }
 
-  async reviewProtest(input: ReviewProtestCommandDTO): Promise<Result<void, DomainError>> {
+  async reviewProtest(input: ReviewProtestCommandDTO): Promise<any> {
     try {
-      await this.apiClient.reviewProtest(input);
-      return Result.ok(undefined);
+      const res = await this.apiClient.reviewProtest(input);
+      return (res as any)?.value || res;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to review protest' });
+      throw error;
     }
   }
 
-  async findByRaceId(raceId: string): Promise<Result<unknown, DomainError>> {
+  async findByRaceId(raceId: string): Promise<any> {
     try {
-      const data = await this.apiClient.getRaceProtests(raceId);
-      return Result.ok(data);
+      const res = await this.apiClient.getRaceProtests(raceId);
+      const data = (res as any).value || res;
+      return data.protests;
     } catch (error: unknown) {
-      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to find protests' });
+      throw error;
     }
   }
 }
diff --git a/apps/website/lib/services/races/RaceResultsService.ts b/apps/website/lib/services/races/RaceResultsService.ts
index a464d9aeb..b922fb0be 100644
--- a/apps/website/lib/services/races/RaceResultsService.ts
+++ b/apps/website/lib/services/races/RaceResultsService.ts
@@ -5,6 +5,9 @@ import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ApiError } from '@/lib/api/base/ApiError';
+import { RaceResultsDetailViewModel } from '@/lib/view-models/RaceResultsDetailViewModel';
+import { RaceWithSOFViewModel } from '@/lib/view-models/RaceWithSOFViewModel';
+import { ImportRaceResultsSummaryViewModel } from '@/lib/view-models/ImportRaceResultsSummaryViewModel';
 
 /**
  * Race Results Service
@@ -15,13 +18,29 @@ import { ApiError } from '@/lib/api/base/ApiError';
 export class RaceResultsService implements Service {
   private apiClient: RacesApiClient;
 
-  constructor() {
-    // Service creates its own dependencies
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new ConsoleErrorReporter();
-    
-    this.apiClient = new RacesApiClient(baseUrl, errorReporter, logger);
+  constructor(apiClient?: RacesApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      // Service creates its own dependencies
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new ConsoleErrorReporter();
+      
+      this.apiClient = new RacesApiClient(baseUrl, errorReporter, logger);
+    }
+  }
+
+  async getResultsDetail(raceId: string, currentUserId?: string): Promise<any> {
+    const res = await this.getRaceResultsDetail(raceId);
+    if (res.isErr()) throw new Error((res as any).error.message);
+    const data = (res as any).value;
+    return new RaceResultsDetailViewModel({ ...data, currentUserId: (currentUserId === undefined || currentUserId === null) ? '' : currentUserId }, {} as any);
+  }
+
+  async importResults(raceId: string, input: any): Promise<any> {
+    const res = await this.apiClient.importResults(raceId, input);
+    return new ImportRaceResultsSummaryViewModel(res);
   }
 
   /**
@@ -50,21 +69,12 @@ export class RaceResultsService implements Service {
    * Get race with strength of field
    * Returns race data with SOF calculation
    */
-  async getWithSOF(raceId: string): Promise<Result<unknown, DomainError>> {
+  async getWithSOF(raceId: string): Promise<any> {
     try {
       const data = await this.apiClient.getWithSOF(raceId);
-      return Result.ok(data);
+      return new RaceWithSOFViewModel(data);
     } catch (error: unknown) {
-      if (error instanceof ApiError) {
-        return Result.err({
-          type: this.mapApiErrorType(error.type),
-          message: error.message
-        });
-      }
-      return Result.err({
-        type: 'unknown',
-        message: (error as Error).message || 'Failed to fetch race SOF'
-      });
+      throw error;
     }
   }
 
diff --git a/apps/website/lib/services/races/RaceStewardingService.ts b/apps/website/lib/services/races/RaceStewardingService.ts
index e7373092a..6e53be6a4 100644
--- a/apps/website/lib/services/races/RaceStewardingService.ts
+++ b/apps/website/lib/services/races/RaceStewardingService.ts
@@ -7,6 +7,7 @@ import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ApiError } from '@/lib/api/base/ApiError';
+import { RaceStewardingViewModel } from '@/lib/view-models/RaceStewardingViewModel';
 
 /**
  * Race Stewarding Service
@@ -19,26 +20,52 @@ export class RaceStewardingService implements Service {
   private protestsApiClient: ProtestsApiClient;
   private penaltiesApiClient: PenaltiesApiClient;
 
-  constructor() {
-    // Service creates its own dependencies
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new ConsoleErrorReporter();
-    
-    this.racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
-    this.protestsApiClient = new ProtestsApiClient(baseUrl, errorReporter, logger);
-    this.penaltiesApiClient = new PenaltiesApiClient(baseUrl, errorReporter, logger);
+  constructor(racesApiClient?: RacesApiClient, protestsApiClient?: ProtestsApiClient, penaltiesApiClient?: PenaltiesApiClient) {
+    if (racesApiClient && protestsApiClient && penaltiesApiClient) {
+      this.racesApiClient = racesApiClient;
+      this.protestsApiClient = protestsApiClient;
+      this.penaltiesApiClient = penaltiesApiClient;
+    } else {
+      // Service creates its own dependencies
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new ConsoleErrorReporter();
+      
+      this.racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
+      this.protestsApiClient = new ProtestsApiClient(baseUrl, errorReporter, logger);
+      this.penaltiesApiClient = new PenaltiesApiClient(baseUrl, errorReporter, logger);
+    }
+  }
+
+  async getRaceStewardingData(raceId: string, driverId: string): Promise<any> {
+    const res = await this.getRaceStewarding(raceId, driverId);
+    if (res.isErr()) throw new Error((res as any).error.message);
+    const data = (res as any).value;
+    return new RaceStewardingViewModel({
+      raceDetail: {
+        race: data.race,
+        league: data.league,
+      },
+      protests: {
+        protests: data.protests,
+        driverMap: data.driverMap,
+      },
+      penalties: {
+        penalties: data.penalties,
+        driverMap: data.driverMap,
+      },
+    } as any);
   }
 
   /**
    * Get race stewarding data
    * Returns protests and penalties for a race
    */
-  async getRaceStewarding(raceId: string): Promise<Result<unknown, DomainError>> {
+  async getRaceStewarding(raceId: string, driverId: string = ''): Promise<Result<unknown, DomainError>> {
     try {
       // Fetch data in parallel
       const [raceDetail, protests, penalties] = await Promise.all([
-        this.racesApiClient.getDetail(raceId, ''),
+        this.racesApiClient.getDetail(raceId, driverId),
         this.protestsApiClient.getRaceProtests(raceId),
         this.penaltiesApiClient.getRacePenalties(raceId),
       ]);
diff --git a/apps/website/lib/services/teams/TeamJoinService.ts b/apps/website/lib/services/teams/TeamJoinService.ts
index 57767d781..0888e3f4d 100644
--- a/apps/website/lib/services/teams/TeamJoinService.ts
+++ b/apps/website/lib/services/teams/TeamJoinService.ts
@@ -16,33 +16,38 @@ import { isProductionEnvironment } from '@/lib/config/env';
 export class TeamJoinService implements Service {
   private apiClient: TeamsApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger, {
-      showUserNotifications: true,
-      logToConsole: true,
-      reportToExternal: isProductionEnvironment(),
-    });
-    this.apiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
-  }
-
-  async getJoinRequests(teamId: string, currentDriverId: string, isOwner: boolean): Promise<Result<TeamJoinRequestViewModel[], DomainError>> {
-    try {
-      const result = await this.apiClient.getJoinRequests(teamId);
-      return Result.ok(result.requests.map(request => 
-        new TeamJoinRequestViewModel(request, currentDriverId, isOwner)
-      ));
-    } catch (error: any) {
-      return Result.err({ type: 'serverError', message: error.message || 'Failed to fetch join requests' });
+  constructor(apiClient?: TeamsApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger, {
+        showUserNotifications: true,
+        logToConsole: true,
+        reportToExternal: isProductionEnvironment(),
+      });
+      this.apiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
     }
   }
 
-  async approveJoinRequest(): Promise<Result<void, DomainError>> {
-    return Result.err({ type: 'notImplemented', message: 'Not implemented: API endpoint for approving join requests' });
+  async getJoinRequests(teamId: string, currentDriverId: string, isOwner: boolean): Promise<any[]> {
+    try {
+      const result = await this.apiClient.getJoinRequests(teamId);
+      const requests = (result as any).requests || result;
+      return requests.map((request: any) => 
+        new TeamJoinRequestViewModel(request, currentDriverId, isOwner)
+      );
+    } catch (error: any) {
+      throw error;
+    }
   }
 
-  async rejectJoinRequest(): Promise<Result<void, DomainError>> {
-    return Result.err({ type: 'notImplemented', message: 'Not implemented: API endpoint for rejecting join requests' });
+  async approveJoinRequest(): Promise<void> {
+    throw new Error('Not implemented: API endpoint for approving join requests');
+  }
+
+  async rejectJoinRequest(): Promise<void> {
+    throw new Error('Not implemented: API endpoint for rejecting join requests');
   }
 }
diff --git a/apps/website/lib/services/teams/TeamService.ts b/apps/website/lib/services/teams/TeamService.ts
index b110be229..d4b45888a 100644
--- a/apps/website/lib/services/teams/TeamService.ts
+++ b/apps/website/lib/services/teams/TeamService.ts
@@ -8,6 +8,8 @@ import type { GetDriverTeamOutputDTO } from '@/lib/types/generated/GetDriverTeam
 import type { GetTeamMembershipOutputDTO } from '@/lib/types/generated/GetTeamMembershipOutputDTO';
 import type { GetTeamJoinRequestsOutputDTO } from '@/lib/types/generated/GetTeamJoinRequestsOutputDTO';
 import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
 import { Result } from '@/lib/contracts/Result';
 import { DomainError, Service } from '@/lib/contracts/services/Service';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
@@ -24,80 +26,111 @@ import { isProductionEnvironment } from '@/lib/config/env';
 export class TeamService implements Service {
   private apiClient: TeamsApiClient;
 
-  constructor() {
-    const baseUrl = getWebsiteApiBaseUrl();
-    const logger = new ConsoleLogger();
-    const errorReporter = new EnhancedErrorReporter(logger, {
-      showUserNotifications: true,
-      logToConsole: true,
-      reportToExternal: isProductionEnvironment(),
-    });
-    this.apiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
-  }
-
-  async getAllTeams(): Promise<Result<TeamListItemDTO[], DomainError>> {
-    try {
-      const result = await this.apiClient.getAll();
-      return Result.ok(result.teams);
-    } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to fetch teams' });
+  constructor(apiClient?: TeamsApiClient) {
+    if (apiClient) {
+      this.apiClient = apiClient;
+    } else {
+      const baseUrl = getWebsiteApiBaseUrl();
+      const logger = new ConsoleLogger();
+      const errorReporter = new EnhancedErrorReporter(logger, {
+        showUserNotifications: true,
+        logToConsole: true,
+        reportToExternal: isProductionEnvironment(),
+      });
+      this.apiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
     }
   }
 
-  async getTeamDetails(teamId: string, _: string): Promise<Result<any, DomainError>> {
-    try {
-      const result = await this.apiClient.getDetails(teamId);
-      if (!result) {
-        return Result.err({ type: 'notFound', message: 'Team not found' });
-      }
-      return Result.ok(result);
-    } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to fetch team details' });
-    }
-  }
-
-  async getTeamMembers(teamId: string, currentDriverId: string, ownerId: string): Promise<Result<TeamMemberViewModel[], DomainError>> {
+  async getMembers(teamId: string): Promise<Result<any, DomainError>> {
     try {
       const result = await this.apiClient.getMembers(teamId);
-      return Result.ok(result.members.map(member => new TeamMemberViewModel(member, currentDriverId, ownerId)));
+      return Result.ok(result);
     } catch (error: unknown) {
       return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to fetch team members' });
     }
   }
 
-  async getTeamJoinRequests(teamId: string): Promise<Result<GetTeamJoinRequestsOutputDTO, DomainError>> {
+  async update(teamId: string, input: UpdateTeamInputDTO): Promise<Result<UpdateTeamOutputDTO, DomainError>> {
+    return this.updateTeam(teamId, input);
+  }
+
+  async create(input: CreateTeamInputDTO): Promise<Result<CreateTeamOutputDTO, DomainError>> {
+    return this.createTeam(input);
+  }
+
+  async getTeamDetails(teamId: string, _: string): Promise<any> {
+    try {
+      const result = await this.apiClient.getDetails(teamId);
+      if (!result) {
+        return null;
+      }
+      const data = (result as any).value || result;
+      return new TeamDetailsViewModel(data, {} as any);
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getTeamMembers(teamId: string, currentDriverId: string, ownerId: string): Promise<any> {
+    try {
+      const result = await this.apiClient.getMembers(teamId);
+      const members = (result as any).members || result;
+      return members.map((member: any) => new TeamMemberViewModel(member, currentDriverId, ownerId));
+    } catch (error: unknown) {
+      throw error;
+    }
+  }
+
+  async getTeamJoinRequests(teamId: string): Promise<any> {
     try {
       const result = await this.apiClient.getJoinRequests(teamId);
-      return Result.ok(result);
+      return (result as any).value || result;
     } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to fetch team join requests' });
+      throw error;
     }
   }
 
-  async createTeam(input: CreateTeamInputDTO): Promise<Result<CreateTeamOutputDTO, DomainError>> {
+  async createTeam(input: CreateTeamInputDTO): Promise<any> {
     try {
       const result = await this.apiClient.create(input);
-      return Result.ok(result);
+      return (result as any).value || result;
     } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to create team' });
+      throw error;
     }
   }
 
-  async updateTeam(teamId: string, input: UpdateTeamInputDTO): Promise<Result<UpdateTeamOutputDTO, DomainError>> {
+  async updateTeam(teamId: string, input: UpdateTeamInputDTO): Promise<any> {
     try {
       const result = await this.apiClient.update(teamId, input);
-      return Result.ok(result);
+      return (result as any).value || result;
     } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to update team' });
+      throw error;
     }
   }
 
-  async getDriverTeam(driverId: string): Promise<Result<GetDriverTeamOutputDTO | null, DomainError>> {
+  async getDriverTeam(driverId: string): Promise<any> {
     try {
       const result = await this.apiClient.getDriverTeam(driverId);
-      return Result.ok(result);
+      if (!result) return null;
+      const data = (result as any).value || result;
+      if (!data.team) return null;
+      return {
+        teamId: data.team.id,
+        teamName: data.team.name,
+        role: data.membership?.role,
+      };
     } catch (error: unknown) {
-      return Result.err({ type: 'unknown', message: (error as Error).message || 'Failed to fetch driver team' });
+      throw error;
+    }
+  }
+
+  async getAllTeams(): Promise<any> {
+    try {
+      const result = await this.apiClient.getAll();
+      const teams = (result as any).teams || result;
+      return teams.map((t: any) => new TeamSummaryViewModel(t));
+    } catch (error: unknown) {
+      throw error;
     }
   }
 
diff --git a/apps/website/lib/view-data/ActionsViewData.ts b/apps/website/lib/view-data/ActionsViewData.ts
new file mode 100644
index 000000000..582a26415
--- /dev/null
+++ b/apps/website/lib/view-data/ActionsViewData.ts
@@ -0,0 +1,5 @@
+import { ActionItem } from '@/lib/queries/ActionsPageQuery';
+
+export interface ActionsViewData {
+  actions: ActionItem[];
+}
diff --git a/apps/website/lib/view-data/MediaViewData.ts b/apps/website/lib/view-data/MediaViewData.ts
new file mode 100644
index 000000000..cf22679df
--- /dev/null
+++ b/apps/website/lib/view-data/MediaViewData.ts
@@ -0,0 +1,8 @@
+import { MediaAsset } from '@/components/media/MediaGallery';
+
+export interface MediaViewData {
+  assets: MediaAsset[];
+  categories: { label: string; value: string }[];
+  title: string;
+  description?: string;
+}
diff --git a/apps/website/lib/view-data/ProfileLayoutViewData.ts b/apps/website/lib/view-data/ProfileLayoutViewData.ts
new file mode 100644
index 000000000..6a40bf0b2
--- /dev/null
+++ b/apps/website/lib/view-data/ProfileLayoutViewData.ts
@@ -0,0 +1,3 @@
+export interface ProfileLayoutViewData {
+  // Empty for now
+}
diff --git a/apps/website/lib/view-data/ProfileLiveriesViewData.ts b/apps/website/lib/view-data/ProfileLiveriesViewData.ts
new file mode 100644
index 000000000..3babc39af
--- /dev/null
+++ b/apps/website/lib/view-data/ProfileLiveriesViewData.ts
@@ -0,0 +1,12 @@
+export interface ProfileLiveryViewData {
+  id: string;
+  carId: string;
+  carName: string;
+  thumbnailUrl: string;
+  uploadedAt: Date;
+  isValidated: boolean;
+}
+
+export interface ProfileLiveriesViewData {
+  liveries: ProfileLiveryViewData[];
+}
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
index 867f437bf..4814f6092 100644
--- a/apps/website/tailwind.config.js
+++ b/apps/website/tailwind.config.js
@@ -10,37 +10,38 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'radial-gradient': 'radial-gradient(var(--tw-gradient-stops))',
-      },
       colors: {
-        'graphite-black': '#0C0D0F',
-        'panel-gray': '#141619',
-        'border-gray': '#23272B',
-        'primary-accent': '#198CFF',
-        'telemetry-aqua': '#4ED4E0',
-        'warning-amber': '#FFBE4D',
-        'success-green': '#6FE37A',
-        'critical-red': '#E35C5C',
-        // Legacy mappings for compatibility during transition
-        'deep-graphite': '#0C0D0F',
-        'iron-gray': '#141619',
-        'charcoal-outline': '#23272B',
-        'primary-blue': '#198CFF',
-        'performance-green': '#6FE37A',
-        'racing-red': '#E35C5C',
+        // Theme-aligned colors using CSS variables
+        'base-black': 'var(--color-base)',
+        'surface-charcoal': 'var(--color-surface)',
+        'outline-steel': 'var(--color-outline)',
+        'primary-accent': 'var(--color-primary)',
+        'telemetry-aqua': 'var(--color-telemetry)',
+        'warning-amber': 'var(--color-warning)',
+        'success-green': 'var(--color-success)',
+        'critical-red': 'var(--color-critical)',
+        
+        // Legacy mappings for compatibility
+        'deep-graphite': 'var(--color-base)',
+        'iron-gray': 'var(--color-surface)',
+        'charcoal-outline': 'var(--color-outline)',
+        'primary-blue': 'var(--color-primary)',
+        'performance-green': 'var(--color-success)',
+        'racing-red': 'var(--color-critical)',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
       },
       boxShadow: {
         'card': '0 4px 12px rgba(0, 0, 0, 0.2)',
+        'focus': '0 0 0 4px var(--color-focus-ring)',
       },
       transitionDuration: {
         'smooth': '150ms',
       },
       transitionTimingFunction: {
         'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        'racing': 'cubic-bezier(0.16, 1, 0.3, 1)',
       },
     },
   },
diff --git a/apps/website/templates/AdminDashboardTemplate.tsx b/apps/website/templates/AdminDashboardTemplate.tsx
index e2e4a6f0e..8eb5a3ff5 100644
--- a/apps/website/templates/AdminDashboardTemplate.tsx
+++ b/apps/website/templates/AdminDashboardTemplate.tsx
@@ -6,7 +6,6 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { StatCard } from '@/ui/StatCard';
 import { QuickActionLink } from '@/ui/QuickActionLink';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Box } from '@/ui/Box';
@@ -14,20 +13,24 @@ import { Stack } from '@/ui/Stack';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
-import { Heading } from '@/ui/Heading';
+import { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
+import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
+import { AdminSectionHeader } from '@/components/admin/AdminSectionHeader';
+import { AdminDangerZonePanel } from '@/components/admin/AdminDangerZonePanel';
 import {
   Users,
   Shield,
   Activity,
   Clock,
-  RefreshCw
+  RefreshCw,
+  ArrowRight
 } from 'lucide-react';
 
 /**
  * AdminDashboardTemplate
  * 
  * Pure template for admin dashboard.
- * Accepts ViewData only, no business logic.
+ * Redesigned for "Precision Racing Minimal" theme.
  */
 export function AdminDashboardTemplate({
   viewData,
@@ -38,113 +41,130 @@ export function AdminDashboardTemplate({
   onRefresh: () => void;
   isLoading: boolean;
 }) {
+  const stats = [
+    {
+      label: 'Total Users',
+      value: viewData.stats.totalUsers,
+      icon: Users,
+      variant: 'blue' as const
+    },
+    {
+      label: 'System Admins',
+      value: viewData.stats.systemAdmins,
+      icon: Shield,
+      variant: 'purple' as const
+    },
+    {
+      label: 'Active Users',
+      value: viewData.stats.activeUsers,
+      icon: Activity,
+      variant: 'green' as const
+    },
+    {
+      label: 'Recent Logins',
+      value: viewData.stats.recentLogins,
+      icon: Clock,
+      variant: 'orange' as const
+    }
+  ];
+
   return (
-    <Container size="lg" py={6}>
-      <Stack gap={6}>
-        {/* Header */}
-        <Stack direction="row" align="center" justify="between">
-          <Box>
-            <Heading level={1}>Admin Dashboard</Heading>
-            <Text size="sm" color="text-gray-400" block mt={1}>
-              System overview and statistics
-            </Text>
-          </Box>
-          <Button
-            onClick={onRefresh}
-            disabled={isLoading}
-            variant="secondary"
-            icon={<Icon icon={RefreshCw} size={4} animate={isLoading ? 'spin' : 'none'} />}
-          >
-            Refresh
-          </Button>
-        </Stack>
+    <Container size="lg" py={8}>
+      <Stack gap={8}>
+        <AdminHeaderPanel
+          title="Admin Dashboard"
+          description="System-wide telemetry and operations control"
+          isLoading={isLoading}
+          actions={
+            <Button
+              onClick={onRefresh}
+              disabled={isLoading}
+              variant="secondary"
+              size="sm"
+              icon={<Icon icon={RefreshCw} size={3} animate={isLoading ? 'spin' : 'none'} />}
+            >
+              Refresh Telemetry
+            </Button>
+          }
+        />
 
-        {/* Stats Cards */}
-        <Grid cols={4} gap={4}>
-          <StatCard
-            label="Total Users"
-            value={viewData.stats.totalUsers}
-            icon={Users}
-            variant="blue"
-          />
-          <StatCard
-            label="Admins"
-            value={viewData.stats.systemAdmins}
-            icon={Shield}
-            variant="purple"
-          />
-          <StatCard
-            label="Active Users"
-            value={viewData.stats.activeUsers}
-            icon={Activity}
-            variant="green"
-          />
-          <StatCard
-            label="Recent Logins"
-            value={viewData.stats.recentLogins}
-            icon={Clock}
-            variant="orange"
-          />
-        </Grid>
+        <AdminStatsPanel stats={stats} />
 
-        {/* System Status */}
-        <Card>
-          <Stack gap={4}>
-            <Heading level={3}>System Status</Heading>
-            <Stack gap={4}>
-              <Stack direction="row" align="center" justify="between">
-                <Text size="sm" color="text-gray-400">
-                  System Health
-                </Text>
-                <StatusBadge variant="success">
-                  Healthy
-                </StatusBadge>
-              </Stack>
-              <Stack direction="row" align="center" justify="between">
-                <Text size="sm" color="text-gray-400">
-                  Suspended Users
-                </Text>
-                <Text size="base" weight="medium" color="text-white">
-                  {viewData.stats.suspendedUsers}
-                </Text>
-              </Stack>
-              <Stack direction="row" align="center" justify="between">
-                <Text size="sm" color="text-gray-400">
-                  Deleted Users
-                </Text>
-                <Text size="base" weight="medium" color="text-white">
-                  {viewData.stats.deletedUsers}
-                </Text>
-              </Stack>
-              <Stack direction="row" align="center" justify="between">
-                <Text size="sm" color="text-gray-400">
-                  New Users Today
-                </Text>
-                <Text size="base" weight="medium" color="text-white">
-                  {viewData.stats.newUsersToday}
-                </Text>
+        <Grid cols={1} mdCols={2} gap={6}>
+          {/* System Health & Status */}
+          <Card p={6}>
+            <Stack gap={6}>
+              <AdminSectionHeader 
+                title="System Status" 
+                actions={
+                  <StatusBadge variant="success" icon={Activity}>
+                    Operational
+                  </StatusBadge>
+                }
+              />
+              
+              <Stack gap={4}>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box pt={0}>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">Suspended Users</Text>
+                    <Text weight="bold" color="text-warning-amber">{viewData.stats.suspendedUsers}</Text>
+                  </Stack>
+                </Box>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">Deleted Users</Text>
+                    <Text weight="bold" color="text-error-red">{viewData.stats.deletedUsers}</Text>
+                  </Stack>
+                </Box>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">New Registrations (24h)</Text>
+                    <Text weight="bold" color="text-primary-blue">{viewData.stats.newUsersToday}</Text>
+                  </Stack>
+                </Box>
               </Stack>
             </Stack>
-          </Stack>
-        </Card>
+          </Card>
 
-        {/* Quick Actions */}
-        <Card>
-          <Stack gap={4}>
-            <Heading level={3}>Quick Actions</Heading>
-            <Grid cols={3} gap={3}>
-              <QuickActionLink href={routes.admin.users} variant="blue">
-                View All Users
-              </QuickActionLink>
-              <QuickActionLink href="/admin" variant="purple">
-                Manage Admins
-              </QuickActionLink>
-              <QuickActionLink href="/admin" variant="orange">
-                View Audit Log
-              </QuickActionLink>
-            </Grid>
-          </Stack>
-        </Card>
+          {/* Quick Operations */}
+          <Card p={6}>
+            <Stack gap={6}>
+              <AdminSectionHeader title="Quick Operations" />
+              <Grid cols={1} gap={3}>
+                <QuickActionLink href={routes.admin.users} variant="blue">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">User Management</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+                <QuickActionLink href="/admin" variant="purple">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">Security & Roles</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+                <QuickActionLink href="/admin" variant="orange">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">System Audit Logs</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+              </Grid>
+            </Stack>
+          </Card>
+        </Grid>
+
+        <AdminDangerZonePanel
+          title="System Maintenance"
+          description="Perform destructive system-wide operations. Use with extreme caution."
+        >
+          <Button variant="danger" size="sm">
+            Enter Maintenance Mode
+          </Button>
+        </AdminDangerZonePanel>
       </Stack>
     </Container>
   );
diff --git a/apps/website/templates/AdminUsersTemplate.tsx b/apps/website/templates/AdminUsersTemplate.tsx
index 79b5aae77..2caf4d4f8 100644
--- a/apps/website/templates/AdminUsersTemplate.tsx
+++ b/apps/website/templates/AdminUsersTemplate.tsx
@@ -1,28 +1,20 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
-import { Button } from '@/ui/Button';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { StatusBadge } from '@/ui/StatusBadge';
-import { InfoBox } from '@/ui/InfoBox';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import {
-  RefreshCw,
-  Shield,
-  Trash2,
-  Users
-} from 'lucide-react';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { RefreshCw, Users, ShieldAlert } from 'lucide-react';
+import { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
+import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { UserFilters } from '@/components/admin/UserFilters';
-import { UserStatsSummary } from '@/components/admin/UserStatsSummary';
-import { Surface } from '@/ui/Surface';
+import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
+import { BulkActionBar } from '@/components/admin/BulkActionBar';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { AdminDataTable } from '@/components/admin/AdminDataTable';
+import { AdminEmptyState } from '@/components/admin/AdminEmptyState';
 
 interface AdminUsersTemplateProps {
   viewData: AdminUsersViewData;
@@ -39,8 +31,20 @@ interface AdminUsersTemplateProps {
   loading: boolean;
   error: string | null;
   deletingUser: string | null;
+  // Selection state passed from wrapper
+  selectedUserIds: string[];
+  onSelectUser: (userId: string) => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
 }
 
+/**
+ * AdminUsersTemplate
+ * 
+ * Redesigned user management page.
+ * Uses semantic admin UI blocks and follows "Precision Racing Minimal" theme.
+ * Stateless template.
+ */
 export function AdminUsersTemplate({
   viewData,
   onRefresh,
@@ -55,56 +59,81 @@ export function AdminUsersTemplate({
   statusFilter,
   loading,
   error,
-  deletingUser
+  deletingUser,
+  selectedUserIds,
+  onSelectUser,
+  onSelectAll,
+  onClearSelection
 }: AdminUsersTemplateProps) {
-  const getStatusBadgeVariant = (status: string): 'success' | 'warning' | 'error' | 'info' => {
-    switch (status) {
-      case 'active': return 'success';
-      case 'suspended': return 'warning';
-      case 'deleted': return 'error';
-      default: return 'info';
+  const stats = [
+    {
+      label: 'Total Users',
+      value: viewData.total,
+      icon: Users,
+      variant: 'blue' as const
+    },
+    {
+      label: 'Active Users',
+      value: viewData.activeUserCount,
+      icon: RefreshCw,
+      variant: 'green' as const
+    },
+    {
+      label: 'System Admins',
+      value: viewData.adminCount,
+      icon: ShieldAlert,
+      variant: 'purple' as const
     }
-  };
+  ];
 
-  const getRoleBadgeProps = (role: string): { bg: string; color: string; borderColor: string } => {
-    switch (role) {
-      case 'owner': return { bg: 'bg-purple-500/20', color: '#d8b4fe', borderColor: 'border-purple-500/30' };
-      case 'admin': return { bg: 'bg-blue-500/20', color: '#93c5fd', borderColor: 'border-blue-500/30' };
-      default: return { bg: 'bg-neutral-500/20', color: '#d1d5db', borderColor: 'border-neutral-500/30' };
+  const bulkActions = [
+    {
+      label: 'Suspend Selected',
+      onClick: () => {
+        console.log('Bulk suspend', selectedUserIds);
+      },
+      variant: 'secondary' as const
+    },
+    {
+      label: 'Delete Selected',
+      onClick: () => {
+        console.log('Bulk delete', selectedUserIds);
+      },
+      variant: 'danger' as const
     }
-  };
+  ];
 
   return (
-    <Container size="lg" py={6}>
-      <Stack gap={6}>
-        {/* Header */}
-        <Stack direction="row" align="center" justify="between">
-          <Box>
-            <Heading level={1}>User Management</Heading>
-            <Text size="sm" color="text-gray-400" block mt={1}>Manage and monitor all system users</Text>
-          </Box>
-          <Button
-            onClick={onRefresh}
-            disabled={loading}
-            variant="secondary"
-            icon={<Icon icon={RefreshCw} size={4} animate={loading ? 'spin' : 'none'} />}
-          >
-            Refresh
-          </Button>
-        </Stack>
+    <Container size="lg" py={8}>
+      <Stack gap={8}>
+        <AdminHeaderPanel
+          title="User Management"
+          description="Monitor and control system access"
+          isLoading={loading}
+          actions={
+            <Button
+              onClick={onRefresh}
+              disabled={loading}
+              variant="secondary"
+              size="sm"
+              icon={<Icon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
+            >
+              Refresh Data
+            </Button>
+          }
+        />
 
-        {/* Error Banner */}
         {error && (
-          <InfoBox 
-            icon={Users}
-            title="Error"
-            description={error}
-            variant="warning"
+          <InlineNotice
+            variant="error"
+            title="Operation Failed"
+            message={error}
           />
         )}
 
-        {/* Filters Card */}
-        <UserFilters 
+        <AdminStatsPanel stats={stats} />
+
+        <UserFilters
           search={search}
           roleFilter={roleFilter}
           statusFilter={statusFilter}
@@ -114,137 +143,36 @@ export function AdminUsersTemplate({
           onClearFilters={onClearFilters}
         />
 
-        {/* Users Table */}
-        <Card p={0}>
-          {loading ? (
-            <Stack center py={12} gap={3}>
-              <Box animate="spin" rounded="full" h="2rem" w="2rem" borderBottom borderColor="border-primary-blue" />
-              <Text color="text-gray-400">Loading users...</Text>
-            </Stack>
-          ) : !viewData.users || viewData.users.length === 0 ? (
-            <Stack center py={12} gap={3}>
-              <Icon icon={Users} size={12} color="#525252" />
-              <Text color="text-gray-400">No users found</Text>
-              <Button
-                onClick={onClearFilters}
-                variant="ghost"
-                size="sm"
-              >
-                Clear filters
-              </Button>
-            </Stack>
+        <AdminDataTable>
+          {viewData.users.length === 0 && !loading ? (
+            <AdminEmptyState
+              icon={Users}
+              title="No users found"
+              description="Try adjusting your filters or search query"
+              action={
+                <Button variant="secondary" size="sm" onClick={onClearFilters}>
+                  Clear All Filters
+                </Button>
+              }
+            />
           ) : (
-            <Table>
-              <TableHead>
-                <TableRow>
-                  <TableHeader>User</TableHeader>
-                  <TableHeader>Email</TableHeader>
-                  <TableHeader>Roles</TableHeader>
-                  <TableHeader>Status</TableHeader>
-                  <TableHeader>Last Login</TableHeader>
-                  <TableHeader>Actions</TableHeader>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {viewData.users.map((user) => (
-                  <TableRow key={user.id}>
-                    <TableCell>
-                      <Stack direction="row" align="center" gap={3}>
-                        <Surface variant="muted" rounded="full" padding={2} bg="bg-primary-blue/20">
-                          <Icon icon={Shield} size={4} color="#3b82f6" />
-                        </Surface>
-                        <Box>
-                          <Text weight="medium" color="text-white" block>{user.displayName}</Text>
-                          <Text size="xs" color="text-gray-500" block>ID: {user.id}</Text>
-                          {user.primaryDriverId && (
-                            <Text size="xs" color="text-gray-500" block>Driver: {user.primaryDriverId}</Text>
-                          )}
-                        </Box>
-                      </Stack>
-                    </TableCell>
-                    <TableCell>
-                      <Text size="sm" color="text-gray-300">{user.email}</Text>
-                    </TableCell>
-                    <TableCell>
-                      <Stack direction="row" gap={1} wrap>
-                        {user.roles.map((role, idx) => {
-                          const badgeProps = getRoleBadgeProps(role);
-                          return (
-                            <Surface 
-                              key={idx} 
-                              variant="muted" 
-                              rounded="full" 
-                              padding={1} 
-                              px={2}
-                              bg={badgeProps.bg}
-                              color={badgeProps.color}
-                              borderColor={badgeProps.borderColor}
-                              border
-                            >
-                              <Text size="xs" weight="medium">{role.charAt(0).toUpperCase() + role.slice(1)}</Text>
-                            </Surface>
-                          );
-                        })}
-                      </Stack>
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge variant={getStatusBadgeVariant(user.status)}>
-                        {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
-                      </StatusBadge>
-                    </TableCell>
-                    <TableCell>
-                      <Text size="sm" color="text-gray-400">
-                        {user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
-                      </Text>
-                    </TableCell>
-                    <TableCell>
-                      <Stack direction="row" align="center" gap={2}>
-                        {user.status === 'active' && (
-                          <Button
-                            onClick={() => onUpdateStatus(user.id, 'suspended')}
-                            variant="secondary"
-                            size="sm"
-                          >
-                            Suspend
-                          </Button>
-                        )}
-                        {user.status === 'suspended' && (
-                          <Button
-                            onClick={() => onUpdateStatus(user.id, 'active')}
-                            variant="secondary"
-                            size="sm"
-                          >
-                            Activate
-                          </Button>
-                        )}
-                        {user.status !== 'deleted' && (
-                          <Button
-                            onClick={() => onDeleteUser(user.id)}
-                            disabled={deletingUser === user.id}
-                            variant="secondary"
-                            size="sm"
-                            icon={<Icon icon={Trash2} size={3} />}
-                          >
-                            {deletingUser === user.id ? 'Deleting...' : 'Delete'}
-                          </Button>
-                        )}
-                      </Stack>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+            <AdminUsersTable
+              users={viewData.users}
+              selectedUserIds={selectedUserIds}
+              onSelectUser={onSelectUser}
+              onSelectAll={onSelectAll}
+              onUpdateStatus={onUpdateStatus}
+              onDeleteUser={onDeleteUser}
+              deletingUserId={deletingUser}
+            />
           )}
-        </Card>
+        </AdminDataTable>
 
-        {/* Stats Summary */}
-        {viewData.users.length > 0 && (
-          <UserStatsSummary 
-            total={viewData.total}
-            activeCount={viewData.activeUserCount}
-            adminCount={viewData.adminCount}
-          />
-        )}
+        <BulkActionBar
+          selectedCount={selectedUserIds.length}
+          actions={bulkActions}
+          onClearSelection={onClearSelection}
+        />
       </Stack>
     </Container>
   );
diff --git a/apps/website/templates/DashboardTemplate.tsx b/apps/website/templates/DashboardTemplate.tsx
index ed49d2126..59a63093d 100644
--- a/apps/website/templates/DashboardTemplate.tsx
+++ b/apps/website/templates/DashboardTemplate.tsx
@@ -2,64 +2,211 @@
 
 import React from 'react';
 import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
+import { DashboardShell } from '@/components/dashboard/DashboardShell';
+import { DashboardRail } from '@/components/dashboard/DashboardRail';
+import { DashboardControlBar } from '@/components/dashboard/DashboardControlBar';
+import { TelemetryPanel } from '@/components/dashboard/TelemetryPanel';
+import { DashboardKpiRow } from '@/components/dashboard/DashboardKpiRow';
+import { RecentActivityTable, type ActivityItem } from '@/components/dashboard/RecentActivityTable';
+import { LayoutDashboard, Trophy, Calendar, Users, Settings, Bell, Search } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
-import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { DashboardHero } from '@/components/dashboard/DashboardHeroWrapper';
-import { NextRaceCard } from '@/components/races/NextRaceCardWrapper';
-import { ChampionshipStandings } from '@/components/leagues/ChampionshipStandings';
-import { ActivityFeed } from '@/components/feed/ActivityFeed';
-import { UpcomingRaces } from '@/components/races/UpcomingRaces';
-import { FriendsSidebar } from '@/components/social/FriendsSidebar';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { IconButton } from '@/ui/IconButton';
+import { Avatar } from '@/ui/Avatar';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
 
 interface DashboardTemplateProps {
   viewData: DashboardViewData;
 }
 
+/**
+ * DashboardTemplate
+ * 
+ * Redesigned as a "Telemetry Workspace" following the Precision Racing Minimal theme.
+ * Composes semantic dashboard components into a high-density data environment.
+ * Complies with architectural constraints by using UI primitives.
+ */
 export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
+  const router = useRouter();
   const {
     currentDriver,
     nextRace,
     upcomingRaces,
     leagueStandings,
     feedItems,
-    friends,
     activeLeaguesCount,
-    hasUpcomingRaces,
     hasLeagueStandings,
     hasFeedItems,
-    hasFriends,
   } = viewData;
 
-  return (
-    <Box as="main">
-      <DashboardHero 
-        currentDriver={currentDriver} 
-        activeLeaguesCount={activeLeaguesCount} 
+  const kpiItems = [
+    { label: 'Rating', value: currentDriver.rating, color: 'var(--color-telemetry)' },
+    { label: 'Rank', value: `#${currentDriver.rank}`, color: 'var(--color-warning)' },
+    { label: 'Starts', value: currentDriver.totalRaces },
+    { label: 'Wins', value: currentDriver.wins, color: 'var(--color-success)' },
+    { label: 'Podiums', value: currentDriver.podiums, color: 'var(--color-warning)' },
+    { label: 'Leagues', value: activeLeaguesCount },
+  ];
+
+  const activityItems: ActivityItem[] = feedItems.map(item => ({
+    id: item.id,
+    type: item.type.toUpperCase(),
+    description: item.headline,
+    timestamp: item.formattedTime,
+    status: item.type === 'race_result' ? 'success' : 'info'
+  }));
+
+  const railContent = (
+    <DashboardRail>
+      <Stack direction="col" align="center" gap={6} fullWidth>
+        <Box h="8" w="8" rounded="sm" bg="primary-accent" display="flex" alignItems="center" justifyContent="center">
+          <Text size="xs" weight="bold">GP</Text>
+        </Box>
+        <IconButton 
+          icon={LayoutDashboard} 
+          onClick={() => router.push(routes.protected.dashboard)}
+          variant="ghost"
+          color="primary-accent"
+        />
+        <IconButton 
+          icon={Trophy} 
+          onClick={() => router.push(routes.public.leagues)}
+          variant="ghost"
+          color="var(--color-text-low)"
+        />
+        <IconButton 
+          icon={Calendar} 
+          onClick={() => router.push(routes.public.races)}
+          variant="ghost"
+          color="var(--color-text-low)"
+        />
+        <IconButton 
+          icon={Users} 
+          onClick={() => router.push(routes.public.teams)}
+          variant="ghost"
+          color="var(--color-text-low)"
+        />
+      </Stack>
+      <Box mt="auto" display="flex" flexDirection="col" alignItems="center" gap={6} pb={4}>
+        <IconButton 
+          icon={Settings} 
+          onClick={() => router.push(routes.protected.profile)}
+          variant="ghost"
+          color="var(--color-text-low)"
+        />
+      </Box>
+    </DashboardRail>
+  );
+
+  const controlBarActions = (
+    <Stack direction="row" align="center" gap={4}>
+      <IconButton icon={Search} variant="ghost" color="var(--color-text-low)" />
+      <Box position="relative">
+        <IconButton icon={Bell} variant="ghost" color="var(--color-text-low)" />
+        <Box position="absolute" top="0" right="0" h="1.5" w="1.5" rounded="full" bg="critical-red" />
+      </Box>
+      <Avatar 
+        src={currentDriver.avatarUrl} 
+        alt={currentDriver.name} 
+        size={32}
       />
+    </Stack>
+  );
 
-      <Container size="lg" py={8}>
-        <Grid cols={12} gap={6}>
-          {/* Left Column - Main Content */}
-          <GridItem colSpan={12} lgSpan={8}>
-            <Stack gap={6}>
-              {nextRace && <NextRaceCard nextRace={nextRace} />}
-              {hasLeagueStandings && <ChampionshipStandings standings={leagueStandings} />}
-              <ActivityFeed items={feedItems} hasItems={hasFeedItems} />
-            </Stack>
-          </GridItem>
+  return (
+    <DashboardShell 
+      rail={railContent}
+      controlBar={<DashboardControlBar title="Telemetry Workspace" actions={controlBarActions} />}
+    >
+      {/* KPI Overview */}
+      <DashboardKpiRow items={kpiItems} />
 
-          {/* Right Column - Sidebar */}
-          <GridItem colSpan={12} lgSpan={4}>
-            <Stack gap={6}>
-              <UpcomingRaces races={upcomingRaces} hasRaces={hasUpcomingRaces} />
-              <FriendsSidebar friends={friends} hasFriends={hasFriends} />
-            </Stack>
-          </GridItem>
-        </Grid>
-      </Container>
-    </Box>
+      <Grid responsiveGridCols={{ base: 1, lg: 12 }} gap={6}>
+        {/* Main Content Column */}
+        <Box responsiveColSpan={{ base: 1, lg: 8 }}>
+          <Stack direction="col" gap={6}>
+            {nextRace && (
+              <TelemetryPanel title="Active Session">
+                <Box display="flex" alignItems="center" justifyContent="between">
+                  <Box>
+                    <Text size="xs" color="var(--color-text-low)" mb={1} block>Next Event</Text>
+                    <Text size="lg" weight="bold" block>{nextRace.track}</Text>
+                    <Text size="xs" color="var(--color-telemetry)" font="mono" block>{nextRace.car}</Text>
+                  </Box>
+                  <Box textAlign="right">
+                    <Text size="xs" color="var(--color-text-low)" mb={1} block>Starts In</Text>
+                    <Text size="xl" font="mono" weight="bold" color="var(--color-warning)" block>{nextRace.timeUntil}</Text>
+                    <Text size="xs" color="var(--color-text-low)" block>{nextRace.formattedDate} @ {nextRace.formattedTime}</Text>
+                  </Box>
+                </Box>
+              </TelemetryPanel>
+            )}
+
+            <TelemetryPanel title="Recent Activity">
+              {hasFeedItems ? (
+                <RecentActivityTable items={activityItems} />
+              ) : (
+                <Box py={8} textAlign="center">
+                  <Text italic color="var(--color-text-low)">No recent activity recorded.</Text>
+                </Box>
+              )}
+            </TelemetryPanel>
+          </Stack>
+        </Box>
+
+        {/* Sidebar Column */}
+        <Box responsiveColSpan={{ base: 1, lg: 4 }}>
+          <Stack direction="col" gap={6}>
+            <TelemetryPanel title="Championship Standings">
+              {hasLeagueStandings ? (
+                <Stack direction="col" gap={3}>
+                  {leagueStandings.map((standing) => (
+                    <Box key={standing.leagueId} display="flex" alignItems="center" justifyContent="between" borderBottom borderColor="rgba(35, 39, 43, 0.3)" pb={2}>
+                      <Box>
+                        <Text size="xs" weight="bold" truncate block maxWidth="180px">{standing.leagueName}</Text>
+                        <Text size="xs" color="var(--color-text-low)" block>Pos: {standing.position} / {standing.totalDrivers}</Text>
+                      </Box>
+                      <Text size="sm" font="mono" weight="bold" color="var(--color-telemetry)">{standing.points} PTS</Text>
+                    </Box>
+                  ))}
+                </Stack>
+              ) : (
+                <Box py={4} textAlign="center">
+                  <Text italic color="var(--color-text-low)">No active championships.</Text>
+                </Box>
+              )}
+            </TelemetryPanel>
+
+            <TelemetryPanel title="Upcoming Schedule">
+              <Stack direction="col" gap={4}>
+                {upcomingRaces.slice(0, 3).map((race) => (
+                  <Box key={race.id} group cursor="pointer">
+                    <Box display="flex" justifyContent="between" alignItems="start" mb={1}>
+                      <Text size="xs" weight="bold" groupHoverTextColor="var(--color-primary)" transition>{race.track}</Text>
+                      <Text size="xs" font="mono" color="var(--color-text-low)">{race.timeUntil}</Text>
+                    </Box>
+                    <Box display="flex" justifyContent="between">
+                      <Text size="xs" color="var(--color-text-low)">{race.car}</Text>
+                      <Text size="xs" color="var(--color-text-low)">{race.formattedDate}</Text>
+                    </Box>
+                  </Box>
+                ))}
+                <Button 
+                  variant="secondary" 
+                  fullWidth 
+                  onClick={() => router.push(routes.public.races)}
+                >
+                  <Text size="xs" weight="bold" uppercase letterSpacing="widest">View Full Schedule</Text>
+                </Button>
+              </Stack>
+            </TelemetryPanel>
+          </Stack>
+        </Box>
+      </Grid>
+    </DashboardShell>
   );
 }
diff --git a/apps/website/templates/DriverProfileTemplate.tsx b/apps/website/templates/DriverProfileTemplate.tsx
index 9ec66839c..993b6bd42 100644
--- a/apps/website/templates/DriverProfileTemplate.tsx
+++ b/apps/website/templates/DriverProfileTemplate.tsx
@@ -1,26 +1,26 @@
 'use client';
 
-import { RatingBreakdown } from '@/ui/RatingBreakdown';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { AchievementGrid } from '@/components/achievements/AchievementGrid';
-import { CareerStats } from '@/ui/CareerStats';
-import { FriendsPreview } from '@/components/social/FriendsPreview';
-import { PerformanceOverview } from '@/ui/PerformanceOverview';
-import { ProfileBio } from '@/ui/ProfileBio';
-import { ProfileHero } from '@/components/drivers/ProfileHero';
-import { ProfileTabs, type ProfileTab } from '@/ui/ProfileTabs';
-import { RacingProfile } from '@/ui/RacingProfile';
-import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import {
-  ArrowLeft,
-} from 'lucide-react';
-import React from 'react';
+import { AchievementGrid } from '@/components/achievements/AchievementGrid';
+import { FriendsPreview } from '@/components/social/FriendsPreview';
+import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import { RatingBreakdown } from '@/ui/RatingBreakdown';
+
+import { DriverProfileHeader } from '@/components/drivers/DriverProfileHeader';
+import { DriverStatsPanel } from '@/components/drivers/DriverStatsPanel';
+import { DriverProfileTabs, type ProfileTab } from '@/components/drivers/DriverProfileTabs';
+import { DriverPerformanceOverview } from '@/components/drivers/DriverPerformanceOverview';
+import { DriverRacingProfile } from '@/components/drivers/DriverRacingProfile';
+import { CareerStats } from '@/ui/CareerStats';
+
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
 
 interface DriverProfileTemplateProps {
@@ -74,48 +74,57 @@ export function DriverProfileTemplate({
 
   const { currentDriver, stats, teamMemberships, socialSummary, extendedProfile } = viewData;
 
+  const careerStats = stats ? [
+    { label: 'Rating', value: stats.rating || 0, color: 'text-primary-blue' },
+    { label: 'Wins', value: stats.wins, color: 'text-performance-green' },
+    { label: 'Podiums', value: stats.podiums, color: 'text-warning-amber' },
+    { label: 'Total Races', value: stats.totalRaces },
+    { label: 'Avg Finish', value: stats.avgFinish?.toFixed(1) || '-', subValue: 'POS' },
+    { label: 'Consistency', value: stats.consistency ? `${stats.consistency}%` : '-' },
+  ] : [];
+
   return (
     <Container size="lg" py={8}>
       <Stack gap={6}>
-        {/* Back Navigation */}
-        <Box>
-          <Button
-            variant="secondary"
-            onClick={onBackClick}
-            icon={<ArrowLeft size={4} />}
-          >
-            Back to Drivers
-          </Button>
-        </Box>
-
-        {/* Breadcrumb */}
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Drivers', href: '/drivers' },
-            { label: currentDriver.name },
-          ]}
-        />
+        {/* Back Navigation & Breadcrumbs */}
+        <Stack gap={4}>
+          <Box display="flex" alignItems="center" justifyContent="between">
+            <Button
+              variant="secondary"
+              onClick={onBackClick}
+              icon={<ArrowLeft size={16} />}
+            >
+              Back to Drivers
+            </Button>
+          </Box>
+          <Breadcrumbs
+            items={[
+              { label: 'Home', href: '/' },
+              { label: 'Drivers', href: '/drivers' },
+              { label: currentDriver.name },
+            ]}
+          />
+        </Stack>
 
         {/* Sponsor Insights Card */}
         {isSponsorMode && sponsorInsights}
 
         {/* Hero Header Section */}
-        <ProfileHero 
-          driver={{
-            ...currentDriver,
-            iracingId: currentDriver.iracingId || 0,
-          }}
-          stats={stats ? { rating: stats.rating || 0 } : null}
-          globalRank={currentDriver.globalRank || 0}
-          timezone={extendedProfile?.timezone || 'UTC'}
-          socialHandles={extendedProfile?.socialHandles || []}
-          onAddFriend={onAddFriend}
+        <DriverProfileHeader
+          name={currentDriver.name}
+          avatarUrl={currentDriver.avatarUrl}
+          nationality={currentDriver.country}
+          rating={stats?.rating || 0}
+          globalRank={currentDriver.globalRank ?? undefined}
+          bio={currentDriver.bio}
           friendRequestSent={friendRequestSent}
+          onAddFriend={onAddFriend}
         />
 
-        {/* Bio Section */}
-        {currentDriver.bio && <ProfileBio bio={currentDriver.bio} />}
+        {/* Stats Grid */}
+        {careerStats.length > 0 && (
+          <DriverStatsPanel stats={careerStats} />
+        )}
 
         {/* Team Memberships */}
         {teamMemberships.length > 0 && (
@@ -128,31 +137,28 @@ export function DriverProfileTemplate({
           />
         )}
 
-        {/* Performance Overview */}
-        {stats && (
-          <PerformanceOverview 
-            stats={{
-              wins: stats.wins,
-              podiums: stats.podiums,
-              totalRaces: stats.totalRaces,
-              consistency: stats.consistency,
-              dnfs: stats.dnfs,
-              bestFinish: stats.bestFinish || 0,
-              avgFinish: stats.avgFinish
-            }} 
-          />
-        )}
-
         {/* Tab Navigation */}
-        <ProfileTabs activeTab={activeTab} onTabChange={onTabChange} />
+        <DriverProfileTabs activeTab={activeTab} onTabChange={onTabChange} />
 
         {/* Tab Content */}
         {activeTab === 'overview' && (
           <Stack gap={6}>
-            <CareerStats stats={stats || { totalRaces: 0, wins: 0, podiums: 0, consistency: 0 }} />
+            {stats && (
+              <DriverPerformanceOverview 
+                stats={{
+                  wins: stats.wins,
+                  podiums: stats.podiums,
+                  totalRaces: stats.totalRaces,
+                  consistency: stats.consistency || 0,
+                  dnfs: stats.dnfs,
+                  bestFinish: stats.bestFinish || 0,
+                  avgFinish: stats.avgFinish || 0
+                }} 
+              />
+            )}
             
             {extendedProfile && (
-              <RacingProfile 
+              <DriverRacingProfile 
                 racingStyle={extendedProfile.racingStyle}
                 favoriteTrack={extendedProfile.favoriteTrack}
                 favoriteCar={extendedProfile.favoriteCar}
@@ -177,10 +183,21 @@ export function DriverProfileTemplate({
           </Stack>
         )}
 
-        {activeTab === 'stats' && !stats && (
-          <Stack align="center" py={12} gap={4}>
-            <Text color="text-gray-400">No statistics available yet</Text>
-            <Text size="sm" color="text-gray-500">This driver hasn&apos;t completed any races yet</Text>
+        {activeTab === 'stats' && (
+          <Stack gap={6}>
+            {stats ? (
+              <CareerStats stats={{
+                totalRaces: stats.totalRaces,
+                wins: stats.wins,
+                podiums: stats.podiums,
+                consistency: stats.consistency
+              }} />
+            ) : (
+              <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={12} gap={4} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/30">
+                <Text color="text-gray-400">No statistics available yet</Text>
+                <Text size="sm" color="text-gray-500">This driver hasn&apos;t completed any races yet</Text>
+              </Box>
+            )}
           </Stack>
         )}
 
diff --git a/apps/website/templates/DriverRankingsTemplate.tsx b/apps/website/templates/DriverRankingsTemplate.tsx
index 298185cac..cad95d52a 100644
--- a/apps/website/templates/DriverRankingsTemplate.tsx
+++ b/apps/website/templates/DriverRankingsTemplate.tsx
@@ -1,81 +1,67 @@
 'use client';
 
 import React from 'react';
-import { Trophy, ArrowLeft } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Trophy } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
 import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
-import { RankingsPodium } from '@/ui/RankingsPodium';
-import { RankingsTable } from '@/ui/RankingsTable';
+import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
+import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
+import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
+import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
 
 interface DriverRankingsTemplateProps {
   viewData: DriverRankingsViewData;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
   onDriverClick?: (id: string) => void;
   onBackToLeaderboards?: () => void;
 }
 
 export function DriverRankingsTemplate({
   viewData,
+  searchQuery,
+  onSearchChange,
   onDriverClick,
   onBackToLeaderboards,
 }: DriverRankingsTemplateProps): React.ReactElement {
   return (
     <Container size="lg" py={8}>
-      <Stack gap={8}>
-        {/* Header */}
-        <Box>
-          {onBackToLeaderboards && (
-            <Box mb={6}>
-              <Button
-                variant="secondary"
-                onClick={onBackToLeaderboards}
-                icon={<Icon icon={ArrowLeft} size={4} />}
-              >
-                Back to Leaderboards
-              </Button>
-            </Box>
-          )}
+      <LeaderboardHeader
+        title="Driver Leaderboard"
+        description="Full rankings of all drivers by performance metrics"
+        icon={Trophy}
+        onBack={onBackToLeaderboards}
+        backLabel="Back to Leaderboards"
+      />
 
-          <Stack direction="row" align="center" gap={4}>
-            <Surface variant="muted" rounded="xl" padding={3} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))" border borderColor="border-blue-500/20">
-              <Icon icon={Trophy} size={7} color="#3b82f6" />
-            </Surface>
-            <Box>
-              <Heading level={1}>Driver Leaderboard</Heading>
-              <Text color="text-gray-400" block mt={1}>Full rankings of all drivers by performance metrics</Text>
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Top 3 Podium */}
-        {viewData.podium.length > 0 && (
-          <RankingsPodium 
-            podium={viewData.podium.map(d => ({
-              ...d,
-              rating: Number(d.rating),
-              wins: Number(d.wins),
-              podiums: Number(d.podiums)
-            }))} 
-            onDriverClick={onDriverClick} 
-          />
-        )}
-
-        {/* Leaderboard Table */}
-        <RankingsTable 
-          drivers={viewData.drivers.map(d => ({
+      {/* Top 3 Podium */}
+      {viewData.podium.length > 0 && !searchQuery && (
+        <LeaderboardPodium 
+          podium={viewData.podium.map(d => ({
             ...d,
             rating: Number(d.rating),
-            wins: Number(d.wins)
+            wins: Number(d.wins),
+            podiums: Number(d.podiums)
           }))} 
           onDriverClick={onDriverClick} 
         />
-      </Stack>
+      )}
+
+      <LeaderboardFiltersBar 
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        placeholder="Search drivers..."
+      />
+
+      {/* Leaderboard Table */}
+      <LeaderboardTable 
+        drivers={viewData.drivers.map(d => ({
+          ...d,
+          rating: Number(d.rating),
+          wins: Number(d.wins)
+        }))} 
+        onDriverClick={onDriverClick} 
+      />
     </Container>
   );
 }
diff --git a/apps/website/templates/DriversTemplate.tsx b/apps/website/templates/DriversTemplate.tsx
index ed089c019..bee49146d 100644
--- a/apps/website/templates/DriversTemplate.tsx
+++ b/apps/website/templates/DriversTemplate.tsx
@@ -1,30 +1,14 @@
 'use client';
 
 import React from 'react';
-import {
-  Search,
-  Crown,
-  Users,
-  Trophy,
-} from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Search } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { Surface } from '@/ui/Surface';
-import { Icon } from '@/ui/Icon';
-import { FeaturedDriverCard } from '@/components/drivers/FeaturedDriverCard';
-import { SkillDistribution } from '@/ui/SkillDistribution';
-import { CategoryDistribution } from '@/ui/CategoryDistribution';
-import { LeaderboardPreview } from '@/components/leaderboards/LeaderboardPreview';
-import { RecentActivity } from '@/components/feed/RecentActivity';
-import { PageHero } from '@/ui/PageHero';
-import { DriversSearch } from '@/ui/DriversSearch';
+import { Stack } from '@/ui/Stack';
+import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHeader';
+import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
+import { DriverTable } from '@/components/drivers/DriverTable';
+import { DriverTableRow } from '@/components/drivers/DriverTableRow';
 import { EmptyState } from '@/components/shared/state/EmptyState';
-import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 
 interface DriversTemplateProps {
@@ -49,80 +33,34 @@ export function DriversTemplate({
   const totalWins = viewData?.totalWins || 0;
   const activeCount = viewData?.activeCount || 0;
 
-  // Featured drivers (top 4)
-  const featuredDrivers = filteredDrivers.slice(0, 4);
-
   return (
     <Container size="lg" py={8}>
       <Stack gap={10}>
-        {/* Hero Section */}
-        <PageHero
-          title="Drivers"
-          description="Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid."
-          icon={Users}
-          stats={[
-            { label: 'drivers', value: drivers.length, color: 'text-primary-blue' },
-            { label: 'active', value: activeCount, color: 'text-performance-green', animate: true },
-            { label: 'total wins', value: NumberDisplay.format(totalWins), color: 'text-warning-amber' },
-            { label: 'races', value: NumberDisplay.format(totalRaces), color: 'text-neon-aqua' },
-          ]}
-          actions={[
-            {
-              label: 'View Leaderboard',
-              onClick: onViewLeaderboard,
-              icon: Trophy,
-              description: 'See full driver rankings'
-            }
-          ]}
+        <DriversDirectoryHeader
+          totalDrivers={drivers.length}
+          activeDrivers={activeCount}
+          totalWins={totalWins}
+          totalRaces={totalRaces}
+          onViewLeaderboard={onViewLeaderboard}
         />
 
-        {/* Search */}
-        <DriversSearch query={searchQuery} onChange={onSearchChange} />
+        <DriverSearchBar query={searchQuery} onChange={onSearchChange} />
 
-        {/* Featured Drivers */}
-        {!searchQuery && (
-          <Box>
-            <Stack direction="row" align="center" gap={3} mb={4}>
-              <Surface variant="muted" rounded="xl" padding={2}>
-                <Icon icon={Crown} size={6} color="#f59e0b" />
-              </Surface>
-              <Box>
-                <Heading level={2}>Featured Drivers</Heading>
-                <Text size="xs" color="text-gray-500">Top performers on the grid</Text>
-              </Box>
-            </Stack>
+        <DriverTable>
+          {filteredDrivers.map((driver, index) => (
+            <DriverTableRow
+              key={driver.id}
+              rank={index + 1}
+              name={driver.name}
+              avatarUrl={driver.avatarUrl}
+              nationality={driver.nationality}
+              rating={driver.rating}
+              wins={driver.wins}
+              onClick={() => onDriverClick(driver.id)}
+            />
+          ))}
+        </DriverTable>
 
-            <Grid cols={4} gap={4}>
-              {featuredDrivers.map((driver, index) => (
-                <GridItem key={driver.id} colSpan={12} mdSpan={6} lgSpan={3}>
-                  <FeaturedDriverCard
-                    driver={driver}
-                    position={index + 1}
-                    onClick={() => onDriverClick(driver.id)}
-                  />
-                </GridItem>
-              ))}
-            </Grid>
-          </Box>
-        )}
-
-        {/* Active Drivers */}
-        {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={onDriverClick} />}
-
-        {/* Skill Distribution */}
-        {!searchQuery && <SkillDistribution drivers={drivers} />}
-
-        {/* Category Distribution */}
-        {!searchQuery && <CategoryDistribution drivers={drivers} />}
-
-        {/* Leaderboard Preview */}
-        <LeaderboardPreview 
-          drivers={filteredDrivers} 
-          onDriverClick={onDriverClick} 
-          onNavigate={() => onViewLeaderboard()}
-        />
-
-        {/* Empty State */}
         {filteredDrivers.length === 0 && (
           <EmptyState
             icon={Search}
diff --git a/apps/website/templates/FatalErrorTemplate.test.tsx b/apps/website/templates/FatalErrorTemplate.test.tsx
new file mode 100644
index 000000000..df2e06614
--- /dev/null
+++ b/apps/website/templates/FatalErrorTemplate.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FatalErrorTemplate, type FatalErrorViewData } from './FatalErrorTemplate';
+
+describe('FatalErrorTemplate', () => {
+  const mockError = new Error('Fatal system error');
+  const mockViewData: FatalErrorViewData = {
+    error: mockError
+  };
+
+  const mockReset = vi.fn();
+  const mockOnHome = vi.fn();
+
+  it('renders the error message via ErrorScreen', () => {
+    render(<FatalErrorTemplate viewData={mockViewData} reset={mockReset} onHome={mockOnHome} />);
+    
+    expect(screen.getByText('Fatal system error')).toBeDefined();
+    expect(screen.getByText('System Malfunction')).toBeDefined();
+  });
+
+  it('calls reset when Retry Session is clicked', () => {
+    render(<FatalErrorTemplate viewData={mockViewData} reset={mockReset} onHome={mockOnHome} />);
+    
+    const button = screen.getByText('Retry Session');
+    fireEvent.click(button);
+    
+    expect(mockReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onHome when Return to Pits is clicked', () => {
+    render(<FatalErrorTemplate viewData={mockViewData} reset={mockReset} onHome={mockOnHome} />);
+    
+    const button = screen.getByText('Return to Pits');
+    fireEvent.click(button);
+    
+    expect(mockOnHome).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/website/templates/FatalErrorTemplate.tsx b/apps/website/templates/FatalErrorTemplate.tsx
new file mode 100644
index 000000000..fa9517c11
--- /dev/null
+++ b/apps/website/templates/FatalErrorTemplate.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ErrorScreen } from '@/components/errors/ErrorScreen';
+
+export interface FatalErrorViewData {
+  error: Error & { digest?: string };
+}
+
+interface FatalErrorTemplateProps {
+  viewData: FatalErrorViewData;
+  reset: () => void;
+  onHome: () => void;
+}
+
+/**
+ * FatalErrorTemplate
+ * 
+ * The top-most error template for the global error boundary.
+ * Follows "Precision Racing Minimal" theme via ErrorScreen.
+ */
+export function FatalErrorTemplate({ viewData, reset, onHome }: FatalErrorTemplateProps) {
+  return (
+    <ErrorScreen 
+      error={viewData.error} 
+      reset={reset} 
+      onHome={onHome} 
+    />
+  );
+}
diff --git a/apps/website/templates/HomeTemplate.tsx b/apps/website/templates/HomeTemplate.tsx
index 804db90ee..638a857f5 100644
--- a/apps/website/templates/HomeTemplate.tsx
+++ b/apps/website/templates/HomeTemplate.tsx
@@ -1,23 +1,28 @@
 'use client';
 
-import { AlternatingSection } from '@/components/landing/AlternatingSection';
+import React from 'react';
+import { HomeHeader } from '@/components/home/HomeHeader';
+import { HomeStatsStrip } from '@/components/home/HomeStatsStrip';
+import { QuickLinksPanel } from '@/components/home/QuickLinksPanel';
+import { HomeFeatureSection } from '@/components/home/HomeFeatureSection';
+import { RecentRacesPanel } from '@/components/home/RecentRacesPanel';
+import { LeagueSummaryPanel } from '@/components/home/LeagueSummaryPanel';
+import { TeamSummaryPanel } from '@/components/home/TeamSummaryPanel';
+import { HomeFeatureDescription } from '@/components/home/HomeFeatureDescription';
 import { FAQ } from '@/components/landing/FAQ';
-import { FeatureGrid } from '@/components/landing/FeatureGrid';
-import { LandingHero } from '@/components/landing/LandingHero';
-import { DiscoverySection } from '@/components/landing/DiscoverySection';
-import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
-import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
-import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
-import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
-import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
-import { ModeGuard } from '@/components/shared/ModeGuard';
-import { Box } from '@/ui/Box';
-import { DiscordCTA } from '@/ui/DiscordCTA';
+import { HomeFooterCTA } from '@/components/home/HomeFooterCTA';
 import { Footer } from '@/ui/Footer';
-import { Stack } from '@/ui/Stack';
+import { ModeGuard } from '@/components/shared/ModeGuard';
+import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
+import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
+import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
+import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { TelemetryLine } from '@/ui/TelemetryLine';
-import { Glow } from '@/ui/Glow';
+import { Grid } from '@/ui/Grid';
+import { Section } from '@/ui/Section';
 
 export interface HomeViewData {
   isAlpha: boolean;
@@ -44,138 +49,135 @@ interface HomeTemplateProps {
   viewData: HomeViewData;
 }
 
+/**
+ * HomeTemplate - Redesigned for "Precision Racing Minimal" theme.
+ * Composes semantic components instead of generic layout primitives.
+ */
 export function HomeTemplate({ viewData }: HomeTemplateProps) {
   return (
-    <Box as="main" bg="graphite-black" position="relative" overflow="hidden">
-      <Glow color="primary" size="xl" position="top-right" opacity={0.05} />
-      
-      <LandingHero />
-      
-      <TelemetryLine color="primary" height="1px" opacity={0.3} />
+    <Box as="main" minHeight="screen" bg="graphite-black" color="text-white">
+      {/* Hero Section */}
+      <HomeHeader
+        title="Modern Motorsport Infrastructure."
+        subtitle="Precision Racing Infrastructure"
+        description="GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control."
+        primaryAction={{ label: 'Join the Grid', href: '#' }}
+        secondaryAction={{ label: 'Explore Leagues', href: '#' }}
+      />
 
-      {/* Section 1: A Persistent Identity */}
-      <Box position="relative" bg="graphite-black">
-        <Glow color="aqua" size="lg" position="bottom-left" opacity={0.03} />
-        <AlternatingSection
-          heading="A Persistent Identity"
-          backgroundVideo="/gameplay.mp4"
-          description={
-            <Stack gap={8}>
-              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
-                Your races, your seasons, your progress &mdash; finally in one place.
-              </Text>
-              <Box display="grid" gridCols={1} gap={3}>
-                <FeatureItem text="Lifetime stats and season history across all your leagues" />
-                <FeatureItem text="Track your performance, consistency, and team contributions" />
-                <FeatureItem text="Your own rating that reflects real league competition" />
-              </Box>
-              <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} py={1} bg="primary-accent/5">
-                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
-                  iRacing gives you physics. GridPilot gives you a career.
-                </Text>
-              </Box>
-            </Stack>
-          }
-          mockup={<CareerProgressionMockup />}
-          layout="text-left"
-        />
-      </Box>
+      {/* Telemetry Status Strip */}
+      <HomeStatsStrip />
 
-      <FeatureGrid />
+      {/* Quick Actions Bar */}
+      <QuickLinksPanel />
 
-      {/* Section 2: Results That Actually Stay */}
-      <Box position="relative" bg="graphite-black">
-        <Glow color="primary" size="lg" position="top-right" opacity={0.03} />
-        <AlternatingSection
-          heading="Results That Actually Stay"
-          backgroundImage="/images/ff1600.jpeg"
-          description={
-            <Stack gap={8}>
-              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
-                Every race you run stays with you.
-              </Text>
-              <Box display="grid" gridCols={1} gap={3}>
-                <ResultItem text="Your stats, your team, your story &mdash; all connected" color="#198CFF" />
-                <ResultItem text="One race result updates your profile, team points, rating, and season history" color="#198CFF" />
-                <ResultItem text="No more fragmented data across spreadsheets and forums" color="#198CFF" />
-              </Box>
-              <Box borderLeft borderStyle="solid" borderColor="telemetry-aqua" pl={4} py={1} bg="telemetry-aqua/5">
-                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
-                  Your racing career, finally in one place.
-                </Text>
-              </Box>
-            </Stack>
-          }
-          mockup={<RaceHistoryMockup />}
-          layout="text-right"
-        />
-      </Box>
+      {/* Feature Sections */}
+      <HomeFeatureSection
+        heading="A Persistent Identity"
+        accentColor="primary"
+        layout="text-left"
+        description={
+          <HomeFeatureDescription
+            lead="Your races, your seasons, your progress — finally in one place."
+            items={[
+              'Lifetime stats and season history across all your leagues',
+              'Track your performance, consistency, and team contributions',
+              'Your own rating that reflects real league competition',
+            ]}
+            quote="iRacing gives you physics. GridPilot gives you a career."
+            accentColor="primary"
+          />
+        }
+        mockup={<CareerProgressionMockup />}
+      />
 
-      <TelemetryLine color="aqua" height="1px" opacity={0.2} />
+      <HomeFeatureSection
+        heading="Results That Actually Stay"
+        accentColor="aqua"
+        layout="text-right"
+        description={
+          <HomeFeatureDescription
+            lead="Every race you run stays with you."
+            items={[
+              'Your stats, your team, your story — all connected',
+              'One race result updates your profile, team points, rating, and season history',
+              'No more fragmented data across spreadsheets and forums',
+            ]}
+            quote="Your racing career, finally in one place."
+            accentColor="aqua"
+          />
+        }
+        mockup={<RaceHistoryMockup />}
+      />
 
-      {/* Section 3: Automatic Session Creation */}
-      <Box position="relative" bg="graphite-black">
-        <Glow color="amber" size="lg" position="bottom-right" opacity={0.02} />
-        <AlternatingSection
-          heading="Automatic Session Creation"
-          description={
-            <Stack gap={8}>
-              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
-                Setting up league races used to mean clicking through iRacing&apos;s wizard 20 times.
-              </Text>
-              <Box display="grid" gridCols={1} gap={3}>
-                <StepItem step={1} text="Our companion app syncs with your league schedule" />
-                <StepItem step={2} text="When it's race time, it creates the iRacing session automatically" />
-                <StepItem step={3} text="No clicking through wizards. No manual setup" />
-              </Box>
-              <Box borderLeft borderStyle="solid" borderColor="warning-amber" pl={4} py={1} bg="warning-amber/5">
-                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
-                  Automation instead of repetition.
-                </Text>
-              </Box>
-            </Stack>
-          }
-          mockup={<CompanionAutomationMockup />}
-          layout="text-left"
-        />
-      </Box>
+      <HomeFeatureSection
+        heading="Automatic Session Creation"
+        accentColor="amber"
+        layout="text-left"
+        description={
+          <HomeFeatureDescription
+            lead="Setting up league races used to mean clicking through iRacing's wizard 20 times."
+            items={[
+              'Our companion app syncs with your league schedule',
+              'When it\'s race time, it creates the iRacing session automatically',
+              'No clicking through wizards. No manual setup',
+            ]}
+            quote="Automation instead of repetition."
+            accentColor="amber"
+          />
+        }
+        mockup={<CompanionAutomationMockup />}
+      />
 
-      {/* Section 4: Game-Agnostic Platform */}
-      <Box position="relative" bg="graphite-black">
-        <Glow color="primary" size="xl" position="center" opacity={0.03} />
-        <AlternatingSection
-          heading="Built for iRacing. Ready for the future."
-          backgroundImage="/images/lmp3.jpeg"
-          description={
-            <Stack gap={8}>
-              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
-                Right now, we&apos;re focused on making iRacing league racing better.
-              </Text>
-              <Text color="text-gray-400" leading="relaxed">
-                But sims come and go. Your leagues, your teams, your rating &mdash; those stay.
-              </Text>
-              <Box borderLeft borderStyle="solid" borderColor="border-gray" pl={4} py={1} bg="white/5">
-                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
-                  GridPilot is built to outlast any single platform. When the next sim arrives, your competitive identity moves with you.
-                </Text>
-              </Box>
-            </Stack>
-          }
-          mockup={<SimPlatformMockup />}
-          layout="text-right"
-        />
-      </Box>
+      <HomeFeatureSection
+        heading="Built for iRacing. Ready for the future."
+        accentColor="primary"
+        layout="text-right"
+        description={
+          <HomeFeatureDescription
+            lead="Right now, we're focused on making iRacing league racing better."
+            items={[
+              'But sims come and go. Your leagues, your teams, your rating — those stay.',
+            ]}
+            quote="GridPilot is built to outlast any single platform."
+            accentColor="gray"
+          />
+        }
+        mockup={<SimPlatformMockup />}
+      />
 
-      {/* Alpha-only discovery section */}
+      {/* Discovery Grid */}
       <ModeGuard feature="alpha_discovery">
-        <Box bg="panel-gray/20" py={20} borderTop borderBottom borderColor="border-gray/50" position="relative">
-          <Glow color="aqua" size="xl" position="center" opacity={0.02} />
-          <DiscoverySection viewData={viewData} />
-        </Box>
+        <Section py={24} variant="dark">
+          <Container>
+            <Box maxWidth="2xl" mb={16}>
+              <Box display="flex" alignItems="center" borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" px={4} mb={4}>
+                <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">
+                  Live Ecosystem
+                </Text>
+              </Box>
+              <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" letterSpacing="tight" color="text-white" mb={6}>
+                DISCOVER THE GRID
+              </Heading>
+              <Text size="lg" color="text-gray-400" leading="relaxed">
+                Explore leagues, teams, and races that make up the GridPilot ecosystem.
+              </Text>
+            </Box>
+
+            <Grid cols={1} lgCols={3} gap={8}>
+              <LeagueSummaryPanel leagues={viewData.topLeagues} />
+              <TeamSummaryPanel teams={viewData.teams} />
+              <RecentRacesPanel races={viewData.upcomingRaces} />
+            </Grid>
+          </Container>
+        </Section>
       </ModeGuard>
 
-      <DiscordCTA />
+      {/* CTA & FAQ */}
+      <HomeFooterCTA />
       <FAQ />
+      
+      {/* Footer */}
       <Footer />
     </Box>
   );
diff --git a/apps/website/templates/LeaderboardsTemplate.tsx b/apps/website/templates/LeaderboardsTemplate.tsx
index cddcd0c1f..4fe886f0a 100644
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
@@ -27,14 +26,12 @@ export function LeaderboardsTemplate({
 }: LeaderboardsTemplateProps) {
   return (
     <Container size="lg" py={8}>
-      <Box mb={10}>
-        <LeaderboardsHero 
-          onNavigateToDrivers={onNavigateToDrivers}
-          onNavigateToTeams={onNavigateToTeams}
-        />
-      </Box>
+      <LeaderboardsHero 
+        onNavigateToDrivers={onNavigateToDrivers}
+        onNavigateToTeams={onNavigateToTeams}
+      />
 
-      <Grid cols={12} gap={6}>
+      <Grid cols={12} gap={6} mt={10}>
         <GridItem colSpan={12} lgSpan={6}>
           <DriverLeaderboardPreview 
             drivers={viewData.drivers} 
diff --git a/apps/website/templates/LeagueAdminScheduleTemplate.tsx b/apps/website/templates/LeagueAdminScheduleTemplate.tsx
index 8ba293240..c8c5a6de6 100644
--- a/apps/website/templates/LeagueAdminScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueAdminScheduleTemplate.tsx
@@ -11,6 +11,7 @@ import { Input } from '@/ui/Input';
 import { Select } from '@/ui/Select';
 import { Grid } from '@/ui/Grid';
 import { Surface } from '@/ui/Surface';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
 import type { LeagueAdminScheduleViewData } from '@/lib/view-data/LeagueAdminScheduleViewData';
 
 interface LeagueAdminScheduleTemplateProps {
@@ -32,6 +33,7 @@ interface LeagueAdminScheduleTemplateProps {
   isPublishing: boolean;
   isSaving: boolean;
   isDeleting: string | null;
+  error: string | null;
   
   // Form setters
   setTrack: (value: string) => void;
@@ -54,6 +56,7 @@ export function LeagueAdminScheduleTemplate({
   isPublishing,
   isSaving,
   isDeleting,
+  error,
   setTrack,
   setCar,
   setScheduledAtIso,
@@ -67,6 +70,13 @@ export function LeagueAdminScheduleTemplate({
 
   return (
     <Stack gap={6}>
+      {error && (
+        <InlineNotice
+          variant="error"
+          title="Action Failed"
+          message={error}
+        />
+      )}
       <Card>
         <Stack gap={6}>
           <Box>
diff --git a/apps/website/templates/LeagueDetailTemplate.tsx b/apps/website/templates/LeagueDetailTemplate.tsx
index d8eec7bf2..37ed9bf07 100644
--- a/apps/website/templates/LeagueDetailTemplate.tsx
+++ b/apps/website/templates/LeagueDetailTemplate.tsx
@@ -2,13 +2,13 @@
 
 import React from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { LeagueTabs } from '@/components/leagues/LeagueTabs';
+import { LeagueHeader } from '@/components/leagues/LeagueHeader';
+import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Link } from '@/ui/Link';
+import { ChevronRight } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 interface Tab {
   label: string;
@@ -27,30 +27,38 @@ export function LeagueDetailTemplate({
   tabs,
   children,
 }: LeagueDetailTemplateProps) {
+  const pathname = usePathname();
+
   return (
-    <Container size="lg" py={6}>
-      <Stack gap={6}>
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Leagues', href: '/leagues' },
-            { label: viewData.name },
-          ]}
+    <Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
+      <Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={8}>
+        {/* Breadcrumbs */}
+        <Box as="nav" display="flex" alignItems="center" gap={2} mb={8}>
+          <Link href="/" variant="ghost" size="xs" weight="medium">
+            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Home</Text>
+          </Link>
+          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
+          <Link href="/leagues" variant="ghost" size="xs" weight="medium">
+            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Leagues</Text>
+          </Link>
+          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
+          <Text size="xs" weight="medium" color="text-zinc-300" uppercase letterSpacing="widest">{viewData.name}</Text>
+        </Box>
+
+        <LeagueHeader
+          leagueId={viewData.leagueId}
+          leagueName={viewData.name}
+          description={viewData.description}
+          ownerId={viewData.ownerSummary?.driverId || ''}
+          ownerName={viewData.ownerSummary?.driverName || ''}
         />
 
-        <Box>
-          <Heading level={1}>{viewData.name}</Heading>
-          <Text color="text-gray-400" block mt={2}>
-            {viewData.description}
-          </Text>
-        </Box>
+        <LeagueNavTabs tabs={tabs} currentPathname={pathname} />
 
-        <LeagueTabs tabs={tabs} />
-
-        <Box>
+        <Box as="main">
           {children}
         </Box>
-      </Stack>
-    </Container>
+      </Box>
+    </Box>
   );
 }
diff --git a/apps/website/templates/LeagueOverviewTemplate.tsx b/apps/website/templates/LeagueOverviewTemplate.tsx
new file mode 100644
index 000000000..bd7599de8
--- /dev/null
+++ b/apps/website/templates/LeagueOverviewTemplate.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Trophy, Users, Calendar, Shield, type LucideIcon } from 'lucide-react';
+
+interface LeagueOverviewTemplateProps {
+  viewData: LeagueDetailViewData;
+}
+
+export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps) {
+  return (
+    <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
+      {/* Main Content */}
+      <Box responsiveColSpan={{ lg: 2 }}>
+        <Stack gap={8}>
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">About the League</Text>
+            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+              <Text color="text-zinc-300" leading="relaxed">
+                {viewData.description || 'No description provided for this league.'}
+              </Text>
+            </Box>
+          </Stack>
+
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
+            <Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
+              <StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
+              <StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
+              <StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
+              <StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+
+      {/* Sidebar */}
+      <Box as="aside">
+        <Stack gap={8}>
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Management</Text>
+            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+              <Stack gap={4}>
+                {viewData.ownerSummary && (
+                  <Box display="flex" alignItems="center" gap={3}>
+                    <Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
+                      <Users size={20} />
+                    </Box>
+                    <Stack gap={0}>
+                      <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
+                      <Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
+                    </Stack>
+                  </Box>
+                )}
+                <Stack gap={2}>
+                  <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
+                  <Box display="flex" flexWrap="wrap" gap={2}>
+                    {viewData.adminSummaries.map(admin => (
+                      <Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
+                        <Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
+                      </Box>
+                    ))}
+                    {viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
+                  </Box>
+                </Stack>
+              </Stack>
+            </Box>
+          </Stack>
+
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
+            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+              <Stack gap={4}>
+                {viewData.sponsors.length > 0 ? (
+                  viewData.sponsors.map(sponsor => (
+                    <Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
+                      <Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
+                        <Trophy size={16} />
+                      </Box>
+                      <Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
+                    </Box>
+                  ))
+                ) : (
+                  <Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
+                )}
+              </Stack>
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
+
+function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
+  return (
+    <Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50">
+      <Box color="text-zinc-600">
+        <Icon size={16} />
+      </Box>
+      <Stack gap={0}>
+        <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">{label}</Text>
+        <Text size="lg" weight="bold" color="text-white" font="mono">{value}</Text>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/templates/LeagueRulebookTemplate.tsx b/apps/website/templates/LeagueRulebookTemplate.tsx
index 852802831..f9fe0176c 100644
--- a/apps/website/templates/LeagueRulebookTemplate.tsx
+++ b/apps/website/templates/LeagueRulebookTemplate.tsx
@@ -1,19 +1,18 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Badge } from '@/ui/Badge';
 import { Grid } from '@/ui/Grid';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
 import { PointsTable } from '@/ui/PointsTable';
 import { RulebookTabs, type RulebookSection } from '@/ui/RulebookTabs';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
 import { Surface } from '@/ui/Surface';
-import { Clock } from 'lucide-react';
+import { Book, Shield, Scale, AlertTriangle, Info, Clock, type LucideIcon } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
 
 interface LeagueRulebookTemplateProps {
   viewData: LeagueRulebookViewData;
@@ -30,21 +29,20 @@ export function LeagueRulebookTemplate({
 }: LeagueRulebookTemplateProps) {
   if (loading) {
     return (
-      <Card>
-        <Stack align="center" py={12}>
-          <Text color="text-gray-400">Loading rulebook...</Text>
-        </Stack>
-      </Card>
+      <Surface variant="dark" border rounded="lg" padding={12} center>
+        <Text color="text-gray-400">Loading rulebook...</Text>
+      </Surface>
     );
   }
 
   if (!viewData || !viewData.scoringConfig) {
     return (
-      <Card>
-        <Stack align="center" py={12}>
+      <Surface variant="dark" border rounded="lg" padding={12} center>
+        <Stack align="center" gap={3}>
+          <Icon icon={AlertTriangle} size={8} color="text-warning-amber" />
           <Text color="text-gray-400">Unable to load rulebook</Text>
         </Stack>
-      </Card>
+      </Surface>
     );
   }
 
@@ -54,17 +52,6 @@ export function LeagueRulebookTemplate({
 
   return (
     <Stack gap={6}>
-      {/* Header */}
-      <Stack direction="row" align="center" justify="between">
-        <Box>
-          <Heading level={1}>Rulebook</Heading>
-          <Text size="sm" color="text-gray-400" block mt={1}>Official rules and regulations</Text>
-        </Box>
-        <Badge variant="primary">
-          {scoringConfig.scoringPresetName || 'Custom Rules'}
-        </Badge>
-      </Stack>
-
       {/* Navigation Tabs */}
       <RulebookTabs activeSection={activeSection} onSectionChange={onSectionChange} />
 
@@ -72,177 +59,158 @@ export function LeagueRulebookTemplate({
       {activeSection === 'scoring' && (
         <Stack gap={6}>
           {/* Quick Stats */}
-          <Grid cols={4} gap={4}>
-            <StatItem label="Platform" value={scoringConfig.gameName} />
-            <StatItem label="Championships" value={scoringConfig.championships.length} />
-            <StatItem label="Sessions Scored" value={primaryChampionship?.sessionTypes.join(', ') || 'Main'} />
-            <StatItem label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} />
+          <Grid cols={1} mdCols={2} lgCols={4} gap={4}>
+            <StatItem icon={Info} label="Platform" value={scoringConfig.gameName} color="text-primary-blue" />
+            <StatItem icon={Book} label="Championships" value={scoringConfig.championships.length} color="text-neon-aqua" />
+            <StatItem icon={Clock} label="Sessions" value={primaryChampionship?.sessionTypes.join(', ') || 'Main'} color="text-performance-green" />
+            <StatItem icon={Shield} label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} color="text-warning-amber" />
           </Grid>
 
           {/* Weekend Structure */}
-          <Card>
+          <Surface variant="dark" border rounded="lg" padding={6}>
             <Stack gap={4}>
               <Stack direction="row" align="center" gap={2}>
-                <Clock size={20} color="#3b82f6" />
-                <Heading level={2}>Weekend Structure & Timings</Heading>
+                <Icon icon={Clock} size={5} color="text-primary-blue" />
+                <Heading level={5} color="text-primary-blue">WEEKEND STRUCTURE</Heading>
               </Stack>
-              <Grid cols={4} gap={4}>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>PRACTICE</Text>
-                  <Text weight="medium" color="text-white">20 min</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>QUALIFYING</Text>
-                  <Text weight="medium" color="text-white">30 min</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>SPRINT</Text>
-                  <Text weight="medium" color="text-white">—</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>MAIN RACE</Text>
-                  <Text weight="medium" color="text-white">40 min</Text>
-                </Surface>
+              <Grid cols={2} mdCols={4} gap={4}>
+                <TimingItem label="PRACTICE" value="20 min" />
+                <TimingItem label="QUALIFYING" value="30 min" />
+                <TimingItem label="SPRINT" value="—" />
+                <TimingItem label="MAIN RACE" value="40 min" />
               </Grid>
             </Stack>
-          </Card>
+          </Surface>
 
           {/* Points Table */}
           <PointsTable points={positionPoints} />
 
           {/* Bonus Points */}
           {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
-            <Card>
+            <Surface variant="dark" border rounded="lg" padding={6}>
               <Stack gap={4}>
-                <Heading level={2}>Bonus Points</Heading>
+                <Heading level={5} color="text-performance-green">BONUS POINTS</Heading>
                 <Stack gap={2}>
                   {primaryChampionship.bonusSummary.map((bonus, idx) => (
-                    <Surface
-                      key={idx}
-                      variant="muted"
-                      rounded="lg"
-                      border
-                      padding={3}
-                    >
-                      <Stack direction="row" align="center" gap={4}>
-                        <Surface variant="muted" rounded="full" padding={1} w="2rem" h="2rem" bg="bg-green-500/10" borderColor="border-green-500/20" display="flex" alignItems="center" justifyContent="center">
-                          <Text color="text-performance-green" weight="bold">+</Text>
-                        </Surface>
+                    <Box key={idx} p={3} rounded="md" bg="bg-performance-green/5" border borderColor="border-performance-green/10">
+                      <Stack direction="row" align="center" gap={3}>
+                        <Box center w={6} h={6} rounded="full" bg="bg-performance-green/20">
+                          <Text color="text-performance-green" weight="bold" size="xs">+</Text>
+                        </Box>
                         <Text size="sm" color="text-gray-300">{bonus}</Text>
                       </Stack>
-                    </Surface>
+                    </Box>
                   ))}
                 </Stack>
               </Stack>
-            </Card>
-          )}
-
-          {/* Drop Policy */}
-          {!scoringConfig.dropPolicySummary.includes('All results count') && (
-            <Card>
-              <Stack gap={4}>
-                <Heading level={2}>Drop Policy</Heading>
-                <Text size="sm" color="text-gray-300">{scoringConfig.dropPolicySummary}</Text>
-                <Box mt={3}>
-                  <Text size="xs" color="text-gray-500" block>
-                    Drop rules are applied automatically when calculating championship standings.
-                  </Text>
-                </Box>
-              </Stack>
-            </Card>
+            </Surface>
           )}
         </Stack>
       )}
 
       {activeSection === 'conduct' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Driver Conduct</Heading>
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Shield} size={5} color="text-performance-green" />
+              <Heading level={5} color="text-performance-green">DRIVER CONDUCT</Heading>
+            </Stack>
             <Stack gap={4}>
               <ConductItem number={1} title="Respect" text="All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated." />
               <ConductItem number={2} title="Clean Racing" text="Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly." />
               <ConductItem number={3} title="Track Limits" text="Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties." />
               <ConductItem number={4} title="Blue Flags" text="Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties." />
-              <ConductItem number={5} title="Communication" text="Drivers are expected to communicate respectfully in voice and text chat during sessions." />
             </Stack>
           </Stack>
-        </Card>
+        </Surface>
       )}
 
       {activeSection === 'protests' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Protest Process</Heading>
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Scale} size={5} color="text-warning-amber" />
+              <Heading level={5} color="text-warning-amber">PROTEST PROCESS</Heading>
+            </Stack>
             <Stack gap={4}>
               <ConductItem number={1} title="Filing a Protest" text="Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident." />
               <ConductItem number={2} title="Evidence" text="Video evidence is highly recommended but not required. Stewards will review available replay data." />
               <ConductItem number={3} title="Review Process" text="League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented." />
-              <ConductItem number={4} title="Outcomes" text="Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity." />
             </Stack>
           </Stack>
-        </Card>
+        </Surface>
       )}
 
       {activeSection === 'penalties' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Penalty Guidelines</Heading>
-            <Stack gap={4}>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableHeader>Infraction</TableHeader>
-                    <TableHeader>Typical Penalty</TableHeader>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  <PenaltyRow infraction="Causing avoidable contact" penalty="5-10 second time penalty" />
-                  <PenaltyRow infraction="Unsafe rejoin" penalty="5 second time penalty" />
-                  <PenaltyRow infraction="Blocking" penalty="Warning or 3 second penalty" />
-                  <PenaltyRow infraction="Repeated track limit violations" penalty="5 second penalty" />
-                  <PenaltyRow infraction="Intentional wrecking" penalty="Disqualification" color="#f87171" />
-                  <PenaltyRow infraction="Unsportsmanlike conduct" penalty="Points deduction or ban" color="#f87171" />
-                </TableBody>
-              </Table>
-              <Box mt={4}>
-                <Text size="xs" color="text-gray-500" block>
-                  Penalties are applied at steward discretion based on incident severity and driver history.
-                </Text>
-              </Box>
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={AlertTriangle} size={5} color="text-error-red" />
+              <Heading level={5} color="text-error-red">PENALTY GUIDELINES</Heading>
             </Stack>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>Infraction</TableHeader>
+                  <TableHeader>Typical Penalty</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <PenaltyRow infraction="Causing avoidable contact" penalty="5-10 second time penalty" />
+                <PenaltyRow infraction="Unsafe rejoin" penalty="5 second time penalty" />
+                <PenaltyRow infraction="Blocking" penalty="Warning or 3 second penalty" />
+                <PenaltyRow infraction="Intentional wrecking" penalty="Disqualification" isSevere />
+              </TableBody>
+            </Table>
           </Stack>
-        </Card>
+        </Surface>
       )}
     </Stack>
   );
 }
 
-function StatItem({ label, value }: { label: string, value: string | number }) {
+function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string | number, color: string }) {
   return (
-    <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800" borderColor="border-neutral-800">
-      <Text size="xs" color="text-gray-500" block mb={1}>{label.toUpperCase()}</Text>
-      <Text weight="semibold" color="text-white" size="lg">{value}</Text>
+    <Surface variant="dark" border rounded="lg" padding={4}>
+      <Stack direction="row" align="center" gap={3}>
+        <Box center w={10} h={10} rounded="lg" bg="bg-white/5">
+          <Icon icon={icon} size={5} color={color} />
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest" display="block" mb={0.5}>{label.toUpperCase()}</Text>
+          <Text weight="bold" color="text-white">{value}</Text>
+        </Box>
+      </Stack>
     </Surface>
   );
 }
 
+function TimingItem({ label, value }: { label: string, value: string }) {
+  return (
+    <Box p={3} rounded="md" bg="bg-white/5" border borderColor="border-white/10">
+      <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest" display="block" mb={1}>{label}</Text>
+      <Text weight="bold" color="text-white">{value}</Text>
+    </Box>
+  );
+}
+
 function ConductItem({ number, title, text }: { number: number, title: string, text: string }) {
   return (
-    <Box>
-      <Text weight="medium" color="text-white" block mb={2}>{number}. {title}</Text>
-      <Text size="sm" color="text-gray-300">{text}</Text>
+    <Box py={4} borderBottom borderColor="border-charcoal-outline">
+      <Text weight="bold" color="text-white" display="block" mb={1}>{number}. {title}</Text>
+      <Text size="sm" color="text-gray-400" lineHeight="relaxed">{text}</Text>
     </Box>
   );
 }
 
-function PenaltyRow({ infraction, penalty, color }: { infraction: string, penalty: string, color?: string }) {
+function PenaltyRow({ infraction, penalty, isSevere }: { infraction: string, penalty: string, isSevere?: boolean }) {
   return (
     <TableRow>
       <TableCell>
         <Text size="sm" color="text-gray-300">{infraction}</Text>
       </TableCell>
       <TableCell>
-        <Text size="sm" color={color === '#f87171' ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
+        <Text size="sm" weight="bold" color={isSevere ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
       </TableCell>
     </TableRow>
   );
diff --git a/apps/website/templates/LeagueScheduleTemplate.tsx b/apps/website/templates/LeagueScheduleTemplate.tsx
index 14ecb65c5..2c4e07499 100644
--- a/apps/website/templates/LeagueScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueScheduleTemplate.tsx
@@ -2,27 +2,32 @@
 
 import React from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
+import { LeagueSchedulePanel } from '@/components/leagues/LeagueSchedulePanel';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import { LeagueSchedule } from '@/components/leagues/LeagueSchedule';
 
 interface LeagueScheduleTemplateProps {
   viewData: LeagueScheduleViewData;
 }
 
 export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
+  const events = viewData.races.map(race => ({
+    id: race.id,
+    title: race.name || `Race ${race.id.substring(0, 4)}`,
+    trackName: race.track || 'TBA',
+    date: race.scheduledAt,
+    time: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming'
+  }));
+
   return (
-    <Stack gap={6}>
-      <Box>
-        <Heading level={2}>Race Schedule</Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Upcoming and completed races for this season
-        </Text>
+    <Box display="flex" flexDirection="col" gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Race Schedule</Text>
+        <Text size="sm" color="text-zinc-500">Upcoming and past events for this season.</Text>
       </Box>
 
-      <LeagueSchedule leagueId={viewData.leagueId} />
-    </Stack>
+      <LeagueSchedulePanel events={events} />
+    </Box>
   );
 }
diff --git a/apps/website/templates/LeagueSettingsTemplate.tsx b/apps/website/templates/LeagueSettingsTemplate.tsx
index 9421dc3d4..6355471c0 100644
--- a/apps/website/templates/LeagueSettingsTemplate.tsx
+++ b/apps/website/templates/LeagueSettingsTemplate.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -10,8 +9,7 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
-import { Settings, Users, Trophy, Shield, Clock, LucideIcon } from 'lucide-react';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { Settings, Users, Trophy, Shield, Clock, type LucideIcon } from 'lucide-react';
 import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
 
 interface LeagueSettingsTemplateProps {
@@ -20,76 +18,69 @@ interface LeagueSettingsTemplateProps {
 
 export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
   return (
-    <Stack gap={6}>
-      <Box>
-        <Heading level={2}>League Settings</Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Manage your league configuration and preferences
-        </Text>
-      </Box>
-
+    <Stack gap={8}>
       <Stack gap={6}>
         {/* League Information */}
-        <Card>
-          <Stack gap={4}>
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
             <Stack direction="row" align="center" gap={3}>
-              <Surface variant="muted" rounded="lg" padding={2} bg="bg-blue-500/10">
-                <Icon icon={Settings} size={5} color="#3b82f6" />
-              </Surface>
+              <Box p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
+                <Icon icon={Settings} size={5} color="text-primary-blue" />
+              </Box>
               <Box>
-                <Heading level={3}>League Information</Heading>
-                <Text size="sm" color="text-gray-400">Basic league details</Text>
+                <Heading level={5} color="text-primary-blue">LEAGUE INFORMATION</Heading>
+                <Text size="xs" color="text-gray-500">Basic league details and identification</Text>
               </Box>
             </Stack>
 
-            <Grid cols={2} gap={4}>
+            <Grid cols={1} mdCols={2} gap={6}>
               <InfoItem label="Name" value={viewData.league.name} />
               <InfoItem label="Visibility" value={viewData.league.visibility} capitalize />
               <GridItem colSpan={2}>
                 <InfoItem label="Description" value={viewData.league.description} />
               </GridItem>
-              <InfoItem label="Created" value={DateDisplay.formatShort(viewData.league.createdAt)} />
+              <InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
               <InfoItem label="Owner ID" value={viewData.league.ownerId} />
             </Grid>
           </Stack>
-        </Card>
+        </Surface>
 
         {/* Configuration */}
-        <Card>
-          <Stack gap={4}>
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
             <Stack direction="row" align="center" gap={3}>
-              <Surface variant="muted" rounded="lg" padding={2} bg="bg-green-500/10">
-                <Icon icon={Trophy} size={5} color="#10b981" />
-              </Surface>
+              <Box p={2} bg="bg-performance-green/10" rounded="md" border borderColor="border-performance-green/20">
+                <Icon icon={Trophy} size={5} color="text-performance-green" />
+              </Box>
               <Box>
-                <Heading level={3}>Configuration</Heading>
-                <Text size="sm" color="text-gray-400">League rules and limits</Text>
+                <Heading level={5} color="text-performance-green">CONFIGURATION</Heading>
+                <Text size="xs" color="text-gray-500">League rules and participation limits</Text>
               </Box>
             </Stack>
 
-            <Grid cols={2} gap={4}>
+            <Grid cols={1} mdCols={2} gap={6}>
               <ConfigItem icon={Users} label="Max Drivers" value={viewData.config.maxDrivers} />
               <ConfigItem icon={Shield} label="Require Approval" value={viewData.config.requireApproval ? 'Yes' : 'No'} />
               <ConfigItem icon={Clock} label="Allow Late Join" value={viewData.config.allowLateJoin ? 'Yes' : 'No'} />
               <ConfigItem icon={Trophy} label="Scoring Preset" value={viewData.config.scoringPresetId} />
             </Grid>
           </Stack>
-        </Card>
+        </Surface>
 
         {/* Note about forms */}
-        <Card>
-          <Stack align="center" py={8} gap={4}>
-            <Surface variant="muted" rounded="full" padding={4} bg="bg-amber-500/10">
-              <Icon icon={Settings} size={8} color="#f59e0b" />
-            </Surface>
+        <Surface variant="dark" border rounded="lg" padding={8}>
+          <Stack align="center" gap={4}>
+            <Box p={4} bg="bg-warning-amber/10" rounded="full" border borderColor="border-warning-amber/20">
+              <Icon icon={Settings} size={8} color="text-warning-amber" />
+            </Box>
             <Box textAlign="center">
               <Heading level={3}>Settings Management</Heading>
-              <Text size="sm" color="text-gray-400" block mt={2}>
+              <Text size="sm" color="text-gray-400" mt={2} display="block">
                 Form-based editing and ownership transfer functionality will be implemented in future updates.
               </Text>
             </Box>
           </Stack>
-        </Card>
+        </Surface>
       </Stack>
     </Stack>
   );
@@ -98,19 +89,21 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
 function InfoItem({ label, value, capitalize }: { label: string, value: string, capitalize?: boolean }) {
   return (
     <Box>
-      <Text size="sm" weight="medium" color="text-gray-400" block mb={1}>{label}</Text>
-      <Text color="text-white">{capitalize ? value.toUpperCase() : value}</Text>
+      <Text size="xs" weight="bold" color="text-gray-500" display="block" mb={1} letterSpacing="wider">{label.toUpperCase()}</Text>
+      <Text color="text-white" weight="medium">{capitalize ? value.toUpperCase() : value}</Text>
     </Box>
   );
 }
 
 function ConfigItem({ icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
   return (
-    <Stack direction="row" align="center" gap={3}>
-      <Icon icon={icon} size={5} color="#9ca3af" />
+    <Stack direction="row" align="center" gap={4}>
+      <Box center w={10} h={10} rounded="lg" bg="bg-white/5">
+        <Icon icon={icon} size={5} color="text-gray-400" />
+      </Box>
       <Box>
-        <Text size="sm" weight="medium" color="text-gray-400" block>{label}</Text>
-        <Text color="text-white">{value}</Text>
+        <Text size="xs" weight="bold" color="text-gray-500" display="block" letterSpacing="wider">{label.toUpperCase()}</Text>
+        <Text color="text-white" weight="medium">{value}</Text>
       </Box>
     </Stack>
   );
diff --git a/apps/website/templates/LeagueStandingsTemplate.tsx b/apps/website/templates/LeagueStandingsTemplate.tsx
index 941a457b2..39bd86c98 100644
--- a/apps/website/templates/LeagueStandingsTemplate.tsx
+++ b/apps/website/templates/LeagueStandingsTemplate.tsx
@@ -1,12 +1,9 @@
 'use client';
 
 import React from 'react';
-import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
-import { StandingsTable } from '@/components/leagues/StandingsTable';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
+import { LeagueStandingsTable } from '@/components/leagues/LeagueStandingsTable';
 import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
 
 interface LeagueStandingsTemplateProps {
@@ -18,37 +15,38 @@ interface LeagueStandingsTemplateProps {
 
 export function LeagueStandingsTemplate({
   viewData,
-  onRemoveMember,
-  onUpdateRole,
   loading = false,
 }: LeagueStandingsTemplateProps) {
   if (loading) {
     return (
-      <Stack align="center" py={12}>
-        <Text color="text-gray-400">Loading standings...</Text>
-      </Stack>
+      <Box display="flex" alignItems="center" justifyContent="center" py={24}>
+        <Text color="text-zinc-500" font="mono" size="xs" uppercase letterSpacing="widest" animate="pulse">
+          Loading Standings...
+        </Text>
+      </Box>
     );
   }
 
-  return (
-    <Stack gap={6}>
-      {/* Championship Stats */}
-      <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />
+  const standings = viewData.standings.map((entry) => {
+    const driver = viewData.drivers.find(d => d.id === entry.driverId);
+    return {
+      position: entry.position,
+      driverName: driver?.name || 'Unknown Driver',
+      points: entry.totalPoints,
+      wins: 0,
+      podiums: 0,
+      gap: entry.position === 1 ? '—' : `-${viewData.standings[0].totalPoints - entry.totalPoints}`
+    };
+  });
 
-      <Card>
-        <Stack gap={4}>
-          <Heading level={2}>Championship Standings</Heading>
-          <StandingsTable
-            standings={viewData.standings}
-            drivers={viewData.drivers}
-            memberships={viewData.memberships}
-            currentDriverId={viewData.currentDriverId ?? undefined}
-            isAdmin={viewData.isAdmin}
-            onRemoveMember={onRemoveMember}
-            onUpdateRole={onUpdateRole}
-          />
-        </Stack>
-      </Card>
-    </Stack>
+  return (
+    <Box display="flex" flexDirection="col" gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Championship Standings</Text>
+        <Text size="sm" color="text-zinc-500">Official points classification for the current season.</Text>
+      </Box>
+
+      <LeagueStandingsTable standings={standings} />
+    </Box>
   );
 }
diff --git a/apps/website/templates/MediaTemplate.tsx b/apps/website/templates/MediaTemplate.tsx
new file mode 100644
index 000000000..91ea90709
--- /dev/null
+++ b/apps/website/templates/MediaTemplate.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { MediaGallery } from '@/components/media/MediaGallery';
+import { Container } from '@/ui/Container';
+import { Box } from '@/ui/Box';
+import { MediaViewData } from '@/lib/view-data/MediaViewData';
+
+export function MediaTemplate(viewData: MediaViewData) {
+  const { assets, categories, title, description } = viewData;
+  
+  return (
+    <Container py={8}>
+      <Box display="flex" flexDirection="col" gap={8}>
+        <MediaGallery
+          assets={assets}
+          categories={categories}
+          title={title}
+          description={description}
+        />
+      </Box>
+    </Container>
+  );
+}
diff --git a/apps/website/templates/NotFoundTemplate.test.tsx b/apps/website/templates/NotFoundTemplate.test.tsx
new file mode 100644
index 000000000..d1de039fc
--- /dev/null
+++ b/apps/website/templates/NotFoundTemplate.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { NotFoundTemplate, type NotFoundViewData } from './NotFoundTemplate';
+
+describe('NotFoundTemplate', () => {
+  const mockViewData: NotFoundViewData = {
+    errorCode: 'Error 404',
+    title: 'OFF TRACK',
+    message: 'The requested sector does not exist.',
+    actionLabel: 'Return to Pits'
+  };
+
+  const mockOnHomeClick = vi.fn();
+
+  it('renders the error code, title and message', () => {
+    render(<NotFoundTemplate viewData={mockViewData} onHomeClick={mockOnHomeClick} />);
+    
+    expect(screen.getByText('Error 404')).toBeDefined();
+    expect(screen.getByText('OFF TRACK')).toBeDefined();
+    expect(screen.getByText('The requested sector does not exist.')).toBeDefined();
+  });
+
+  it('calls onHomeClick when the button is clicked', () => {
+    render(<NotFoundTemplate viewData={mockViewData} onHomeClick={mockOnHomeClick} />);
+    
+    const button = screen.getByText('Return to Pits');
+    fireEvent.click(button);
+    
+    expect(mockOnHomeClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/website/templates/NotFoundTemplate.tsx b/apps/website/templates/NotFoundTemplate.tsx
new file mode 100644
index 000000000..0b3eaf517
--- /dev/null
+++ b/apps/website/templates/NotFoundTemplate.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { NotFoundScreen } from '@/components/errors/NotFoundScreen';
+
+export interface NotFoundViewData {
+  errorCode: string;
+  title: string;
+  message: string;
+  actionLabel: string;
+}
+
+interface NotFoundTemplateProps {
+  viewData: NotFoundViewData;
+  onHomeClick: () => void;
+}
+
+/**
+ * NotFoundTemplate
+ * 
+ * Template for the 404 page.
+ * Composes semantic components to build the page layout.
+ */
+export function NotFoundTemplate({ viewData, onHomeClick }: NotFoundTemplateProps) {
+  return (
+    <NotFoundScreen
+      errorCode={viewData.errorCode}
+      title={viewData.title}
+      message={viewData.message}
+      actionLabel={viewData.actionLabel}
+      onActionClick={onHomeClick}
+    />
+  );
+}
diff --git a/apps/website/templates/ProfileLayoutShellTemplate.tsx b/apps/website/templates/ProfileLayoutShellTemplate.tsx
new file mode 100644
index 000000000..e764ce1bb
--- /dev/null
+++ b/apps/website/templates/ProfileLayoutShellTemplate.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { ProfileSidebarTemplate } from '@/templates/ProfileSidebarTemplate';
+import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
+
+interface ProfileLayoutShellTemplateProps {
+  viewData: ProfileLayoutViewData;
+  children: ReactNode;
+}
+
+export function ProfileLayoutShellTemplate({ viewData, children }: ProfileLayoutShellTemplateProps) {
+  return (
+    <Box minHeight="screen" backgroundColor="#0C0D0F">
+      <Container size="lg" py={8}>
+        <Stack direction="row" gap={8} alignItems="start">
+          <Box as="aside" width="64" flexShrink={0}>
+            <ProfileSidebarTemplate viewData={viewData} />
+          </Box>
+          <Box as="main" flexGrow={1} minWidth="0">
+            {children}
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}
diff --git a/apps/website/templates/ProfileLeaguesTemplate.tsx b/apps/website/templates/ProfileLeaguesTemplate.tsx
index ebad7940b..799b02543 100644
--- a/apps/website/templates/ProfileLeaguesTemplate.tsx
+++ b/apps/website/templates/ProfileLeaguesTemplate.tsx
@@ -1,14 +1,11 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Container } from '@/ui/Container';
-import { Surface } from '@/ui/Surface';
+import { Box } from '@/ui/Box';
 import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
-import { LeagueListItem } from '@/ui/LeagueListItem';
+import { MembershipPanel } from '@/components/profile/MembershipPanel';
 
 interface ProfileLeaguesTemplateProps {
   viewData: ProfileLeaguesViewData;
@@ -16,67 +13,27 @@ interface ProfileLeaguesTemplateProps {
 
 export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
   return (
-    <Container size="md" py={8}>
-      <Stack gap={8}>
-        <Box>
-          <Heading level={1}>Manage leagues</Heading>
-          <Text color="text-gray-400" size="sm" block mt={2}>
-            View leagues you own and participate in, and jump into league admin tools.
-          </Text>
-        </Box>
-
-        {/* Leagues You Own */}
-        <Surface variant="muted" rounded="lg" border padding={6}>
-          <Stack gap={4}>
-            <Stack direction="row" align="center" justify="between">
-              <Heading level={2}>Leagues you own</Heading>
-              {viewData.ownedLeagues.length > 0 && (
-                <Text size="xs" color="text-gray-400">
-                  {viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
-                </Text>
-              )}
-            </Stack>
-
-            {viewData.ownedLeagues.length === 0 ? (
-              <Text size="sm" color="text-gray-400">
-                You don&apos;t own any leagues yet in this session.
-              </Text>
-            ) : (
-              <Stack gap={3}>
-                {viewData.ownedLeagues.map((league) => (
-                  <LeagueListItem key={league.leagueId} league={league} isAdmin />
-                ))}
-              </Stack>
-            )}
-          </Stack>
-        </Surface>
-
-        {/* Leagues You're In */}
-        <Surface variant="muted" rounded="lg" border padding={6}>
-          <Stack gap={4}>
-            <Stack direction="row" align="center" justify="between">
-              <Heading level={2}>Leagues you&apos;re in</Heading>
-              {viewData.memberLeagues.length > 0 && (
-                <Text size="xs" color="text-gray-400">
-                  {viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
-                </Text>
-              )}
-            </Stack>
-
-            {viewData.memberLeagues.length === 0 ? (
-              <Text size="sm" color="text-gray-400">
-                You&apos;re not a member of any other leagues yet.
-              </Text>
-            ) : (
-              <Stack gap={3}>
-                {viewData.memberLeagues.map((league) => (
-                  <LeagueListItem key={league.leagueId} league={league} />
-                ))}
-              </Stack>
-            )}
-          </Stack>
-        </Surface>
-      </Stack>
-    </Container>
+    <Stack gap={8}>
+      <Box as="header">
+        <Heading level={1}>My Leagues</Heading>
+      </Box>
+      
+      <Box as="main">
+        <MembershipPanel 
+          ownedLeagues={viewData.ownedLeagues.map(l => ({
+            ...l,
+            description: '', // ViewData doesn't have description, but LeagueListItem needs it
+            memberCount: 0, // ViewData doesn't have memberCount
+            roleLabel: 'Owner'
+          }))}
+          memberLeagues={viewData.memberLeagues.map(l => ({
+            ...l,
+            description: '',
+            memberCount: 0,
+            roleLabel: 'Member'
+          }))}
+        />
+      </Box>
+    </Stack>
   );
 }
diff --git a/apps/website/templates/ProfileLiveriesTemplate.tsx b/apps/website/templates/ProfileLiveriesTemplate.tsx
new file mode 100644
index 000000000..84194a326
--- /dev/null
+++ b/apps/website/templates/ProfileLiveriesTemplate.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/ui/Button';
+import { Plus } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { LiveryGallery } from '@/components/profile/LiveryGallery';
+import type { ProfileLiveriesViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+
+interface ProfileLiveriesTemplateProps {
+  viewData: ProfileLiveriesViewData;
+}
+
+export function ProfileLiveriesTemplate({ viewData }: ProfileLiveriesTemplateProps) {
+  return (
+    <Stack gap={8}>
+      <Box as="header">
+        <Stack direction="row" justify="between" align="center">
+          <Heading level={1}>My Liveries</Heading>
+          <Link href={routes.protected.profileLiveryUpload}>
+            <Button variant="primary" size="sm" icon={<Plus size={16} />}>
+              Upload Livery
+            </Button>
+          </Link>
+        </Stack>
+      </Box>
+
+      <Box as="main">
+        <LiveryGallery 
+          liveries={viewData.liveries} 
+        />
+      </Box>
+    </Stack>
+  );
+}
diff --git a/apps/website/templates/ProfileSettingsTemplate.tsx b/apps/website/templates/ProfileSettingsTemplate.tsx
new file mode 100644
index 000000000..89b1e1b5d
--- /dev/null
+++ b/apps/website/templates/ProfileSettingsTemplate.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
+import { ConnectedAccountsPanel } from '@/components/profile/ConnectedAccountsPanel';
+import { PreferencesPanel } from '@/components/profile/PreferencesPanel';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+
+interface ProfileSettingsTemplateProps {
+  viewData: ProfileViewData;
+  bio: string;
+  country: string;
+  onBioChange: (bio: string) => void;
+  onCountryChange: (country: string) => void;
+  onSave: () => void;
+}
+
+export function ProfileSettingsTemplate({ 
+  viewData, 
+  bio, 
+  country, 
+  onBioChange, 
+  onCountryChange, 
+  onSave 
+}: ProfileSettingsTemplateProps) {
+  return (
+    <Stack gap={8}>
+      <Box as="header">
+        <Stack direction="row" justify="between" align="center">
+          <Heading level={1}>Settings</Heading>
+          <Button variant="primary" onClick={onSave}>Save Changes</Button>
+        </Stack>
+      </Box>
+
+      <ProfileDetailsPanel 
+        driver={{
+          name: viewData.driver.name,
+          country: country,
+          bio: bio
+        }}
+        isEditing
+        onUpdate={(updates) => {
+          if (updates.bio !== undefined) onBioChange(updates.bio);
+          if (updates.country !== undefined) onCountryChange(updates.country);
+        }}
+      />
+
+      <ConnectedAccountsPanel 
+        iracingId={viewData.driver.iracingId || undefined}
+      />
+
+      <PreferencesPanel 
+        preferences={{
+          favoriteCarClass: 'GT3',
+          favoriteSeries: 'Endurance',
+          competitiveLevel: 'competitive',
+          showProfile: true,
+          showHistory: true
+        }}
+        isEditing
+      />
+    </Stack>
+  );
+}
diff --git a/apps/website/templates/ProfileSidebarTemplate.tsx b/apps/website/templates/ProfileSidebarTemplate.tsx
new file mode 100644
index 000000000..0a8e83852
--- /dev/null
+++ b/apps/website/templates/ProfileSidebarTemplate.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { 
+  User, 
+  Settings, 
+  Trophy, 
+  Palette, 
+  Handshake 
+} from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+
+import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
+
+export function ProfileSidebarTemplate({ viewData: _viewData }: { viewData: ProfileLayoutViewData }) {
+  const pathname = usePathname();
+
+  const navItems = [
+    { label: 'Overview', href: routes.protected.profile, icon: User },
+    { label: 'Leagues', href: routes.protected.profileLeagues, icon: Trophy },
+    { label: 'Liveries', href: routes.protected.profileLiveries, icon: Palette },
+    { label: 'Sponsorships', href: routes.protected.profileSponsorshipRequests, icon: Handshake },
+    { label: 'Settings', href: routes.protected.profileSettings, icon: Settings },
+  ];
+
+  return (
+    <Box width="240px" flexShrink={0}>
+      <Stack gap={1}>
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link key={item.href} href={item.href}>
+              <Box
+                px={4}
+                py={2.5}
+                rounded="md"
+                backgroundColor={isActive ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
+                color={isActive ? '#198CFF' : '#9ca3af'}
+                transition
+                display="flex"
+                alignItems="center"
+                gap={3}
+                cursor="pointer"
+                border
+                borderColor={isActive ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
+              >
+                <Icon icon={item.icon} size={4} color={isActive ? '#198CFF' : '#9ca3af'} />
+                <Text 
+                  size="sm" 
+                  weight={isActive ? 'bold' : 'medium'}
+                  color={isActive ? '#198CFF' : '#9ca3af'}
+                >
+                  {item.label}
+                </Text>
+                {isActive && (
+                  <Box 
+                    ml="auto" 
+                    width="4px" 
+                    height="4px" 
+                    rounded="full"
+                    backgroundColor="#198CFF" 
+                  />
+                )}
+              </Box>
+            </Link>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/templates/ProfileTemplate.tsx b/apps/website/templates/ProfileTemplate.tsx
index b61ab3ecd..3750b5c1d 100644
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -2,43 +2,30 @@
 
 import React from 'react';
 import { CreateDriverForm } from '@/components/drivers/CreateDriverForm';
-import { ProfileRaceHistory } from '@/components/drivers/ProfileRaceHistory';
-import { ProfileSettings } from '@/components/drivers/ProfileSettings';
-import { AchievementGrid } from '@/components/achievements/AchievementGrid';
-import { ProfileHero } from '@/components/drivers/ProfileHero';
+import { ProfileHeader } from '@/components/profile/ProfileHeader';
+import { ProfileNavTabs, type ProfileTab } from '@/components/profile/ProfileNavTabs';
+import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
+import { SessionHistoryTable } from '@/components/profile/SessionHistoryTable';
 import { ProfileStatGrid } from '@/ui/ProfileStatGrid';
-import { ProfileTabs, type ProfileTab as ProfileTabsType } from '@/ui/ProfileTabs';
 import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
-import {
-  Activity,
-  Award,
-  History,
-  User,
-} from 'lucide-react';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-
-export type ProfileTab = 'overview' | 'history' | 'stats';
+import { User } from 'lucide-react';
 
 interface ProfileTemplateProps {
   viewData: ProfileViewData;
   mode: 'profile-exists' | 'needs-profile';
   activeTab: ProfileTab;
   onTabChange: (tab: ProfileTab) => void;
-  editMode: boolean;
-  onEditModeChange: (edit: boolean) => void;
   friendRequestSent: boolean;
   onFriendRequestSend: () => void;
-  onSaveSettings: (updates: { bio?: string; country?: string }) => Promise<void>;
 }
 
 export function ProfileTemplate({
@@ -46,26 +33,21 @@ export function ProfileTemplate({
   mode,
   activeTab,
   onTabChange,
-  editMode,
-  onEditModeChange,
   friendRequestSent,
   onFriendRequestSend,
-  onSaveSettings,
 }: ProfileTemplateProps) {
   if (mode === 'needs-profile') {
     return (
-      <Container size="md">
-        <Stack align="center" gap={4} mb={8}>
-          <Surface variant="muted" rounded="xl" border padding={4}>
-            <Icon icon={User} size={8} color="#3b82f6" />
-          </Surface>
-          <Box>
-            <Heading level={1}>Create Your Driver Profile</Heading>
-            <Text color="text-gray-400">Join the GridPilot community and start your racing journey</Text>
-          </Box>
-        </Stack>
+      <Stack align="center" gap={4} mb={8}>
+        <Surface variant="muted" rounded="xl" border padding={4}>
+          <Icon icon={User} size={8} color="#3b82f6" />
+        </Surface>
+        <Box>
+          <Heading level={1}>Create Your Driver Profile</Heading>
+          <Text color="text-gray-400">Join the GridPilot community and start your racing journey</Text>
+        </Box>
 
-        <Box maxWidth="42rem" mx="auto">
+        <Box maxWidth="42rem" mx="auto" width="100%">
           <Card>
             <Stack gap={6}>
               <Box>
@@ -78,123 +60,89 @@ export function ProfileTemplate({
             </Stack>
           </Card>
         </Box>
-      </Container>
-    );
-  }
-
-  if (editMode) {
-    return (
-      <Container size="md">
-        <Stack gap={6}>
-          <Stack direction="row" align="center" justify="between">
-            <Heading level={1}>Edit Profile</Heading>
-            <Button variant="secondary" onClick={() => onEditModeChange(false)}>
-              Cancel
-            </Button>
-          </Stack>
-
-          <ProfileSettings
-            driver={{
-              id: viewData.driver.id,
-              name: viewData.driver.name,
-              country: viewData.driver.countryCode,
-              avatarUrl: viewData.driver.avatarUrl,
-              iracingId: viewData.driver.iracingId || '',
-              joinedAt: new Date().toISOString(),
-              rating: null,
-              globalRank: null,
-              consistency: null,
-              bio: viewData.driver.bio,
-              totalDrivers: null,
-            }}
-            onSave={async (updates) => {
-              await onSaveSettings(updates);
-              onEditModeChange(false);
-            }}
-          />
-        </Stack>
-      </Container>
+      </Stack>
     );
   }
 
   return (
-    <Container size="lg">
-      <Stack gap={6}>
-        {/* Back Navigation */}
-        <Box>
-          <Button
-            variant="secondary"
-            onClick={() => {}}
-            icon={<Icon icon={History} size={4} />}
-          >
-            Back to Drivers
-          </Button>
-        </Box>
+    <Stack gap={8}>
+      <ProfileHeader 
+        driver={{
+          ...viewData.driver,
+          country: viewData.driver.countryCode,
+          iracingId: Number(viewData.driver.iracingId) || 0,
+          joinedAt: new Date().toISOString(), // Placeholder
+        }}
+        stats={viewData.stats ? { rating: Number(viewData.stats.ratingLabel) || 0 } : null}
+        globalRank={Number(viewData.stats?.globalRankLabel) || 0}
+        onAddFriend={onFriendRequestSend}
+        friendRequestSent={friendRequestSent}
+        isOwnProfile={true}
+      />
 
-        {/* Breadcrumb */}
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Drivers', href: '/drivers' },
-            { label: viewData.driver.name },
-          ]}
-        />
+      <ProfileNavTabs activeTab={activeTab} onTabChange={onTabChange} />
 
-        <ProfileHero 
-          driver={{
-            ...viewData.driver,
-            country: viewData.driver.countryCode,
-            iracingId: Number(viewData.driver.iracingId) || 0,
-            joinedAt: new Date().toISOString(), // Placeholder
-          }}
-          stats={viewData.stats ? { rating: Number(viewData.stats.ratingLabel) || 0 } : null}
-          globalRank={Number(viewData.stats?.globalRankLabel) || 0}
-          timezone={viewData.extendedProfile?.timezone || 'UTC'}
-          socialHandles={viewData.extendedProfile?.socialHandles.map(s => ({ ...s, platform: s.platformLabel })) || []}
-          onAddFriend={onFriendRequestSend}
-          friendRequestSent={friendRequestSent}
-        />
-
-        {viewData.driver.bio && (
-          <Card>
-            <Stack gap={3}>
-              <Heading level={2} icon={<Icon icon={User} size={5} color="#3b82f6" />}>
-                About
-              </Heading>
-              <Text color="text-gray-300" block>{viewData.driver.bio}</Text>
-            </Stack>
-          </Card>
-        )}
-
-        {viewData.teamMemberships.length > 0 && (
-          <TeamMembershipGrid 
-            memberships={viewData.teamMemberships.map(m => ({
-              team: { id: m.teamId, name: m.teamName },
-              role: m.roleLabel,
-              joinedAt: new Date() // Placeholder
-            }))} 
+      {activeTab === 'overview' && (
+        <Stack gap={8}>
+          <ProfileDetailsPanel 
+            driver={{
+              name: viewData.driver.name,
+              country: viewData.driver.countryCode,
+              bio: viewData.driver.bio
+            }}
           />
-        )}
 
-        <ProfileTabs activeTab={activeTab as unknown as ProfileTabsType} onTabChange={onTabChange as unknown as (tab: ProfileTabsType) => void} />
+          {viewData.teamMemberships.length > 0 && (
+            <Box as="section" aria-labelledby="teams-heading">
+              <Stack gap={4}>
+                <Heading level={3} id="teams-heading" fontSize="1.125rem">Teams</Heading>
+                <TeamMembershipGrid 
+                  memberships={viewData.teamMemberships.map(m => ({
+                    team: { id: m.teamId, name: m.teamName },
+                    role: m.roleLabel,
+                    joinedAt: new Date() // Placeholder
+                  }))} 
+                />
+              </Stack>
+            </Box>
+          )}
 
-        {activeTab === 'history' && (
-          <Card>
-            <Stack gap={4}>
-              <Heading level={2} icon={<Icon icon={History} size={5} color="#f87171" />}>
-                Race History
-              </Heading>
-              <ProfileRaceHistory driverId={viewData.driver.id} />
-            </Stack>
-          </Card>
-        )}
+          {viewData.extendedProfile && (
+            <Box as="section" aria-labelledby="achievements-heading">
+              <Stack gap={4}>
+                <Stack direction="row" justify="between" align="center">
+                  <Heading level={3} id="achievements-heading" fontSize="1.125rem">Achievements</Heading>
+                  <Text size="sm" color="#6b7280">{viewData.extendedProfile.achievements.length} earned</Text>
+                </Stack>
+                <AchievementGrid
+                  achievements={viewData.extendedProfile.achievements.map(a => ({
+                    ...a,
+                    rarity: a.rarityLabel,
+                    earnedAt: new Date() // Placeholder
+                  }))}
+                />
+              </Stack>
+            </Box>
+          )}
+        </Stack>
+      )}
 
-        {activeTab === 'stats' && viewData.stats && (
-          <Card>
-            <Stack gap={6}>
-              <Heading level={2} icon={<Icon icon={Activity} size={5} color="#00f2ff" />}>
-                Performance Overview
-              </Heading>
+      {activeTab === 'history' && (
+        <Box as="section" aria-labelledby="history-heading">
+          <Stack gap={4}>
+            <Heading level={3} id="history-heading" fontSize="1.125rem">Race History</Heading>
+            <Card>
+              <SessionHistoryTable results={[]} />
+            </Card>
+          </Stack>
+        </Box>
+      )}
+
+      {activeTab === 'stats' && viewData.stats && (
+        <Box as="section" aria-labelledby="stats-heading">
+          <Stack gap={4}>
+            <Heading level={3} id="stats-heading" fontSize="1.125rem">Performance Overview</Heading>
+            <Card>
               <ProfileStatGrid
                 stats={[
                   { label: 'Races', value: viewData.stats.totalRacesLabel },
@@ -203,30 +151,10 @@ export function ProfileTemplate({
                   { label: 'Consistency', value: viewData.stats.consistencyLabel, color: '#3b82f6' },
                 ]}
               />
-            </Stack>
-          </Card>
-        )}
-
-        {activeTab === 'overview' && viewData.extendedProfile && (
-          <Card>
-            <Stack gap={4}>
-              <Stack direction="row" align="center" justify="between">
-                <Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
-                  Achievements
-                </Heading>
-                <Text size="sm" color="text-gray-400" weight="normal">{viewData.extendedProfile.achievements.length} earned</Text>
-              </Stack>
-              <AchievementGrid
-                achievements={viewData.extendedProfile.achievements.map(a => ({
-                  ...a,
-                  rarity: a.rarityLabel,
-                  earnedAt: new Date() // Placeholder
-                }))}
-              />
-            </Stack>
-          </Card>
-        )}
-      </Stack>
-    </Container>
+            </Card>
+          </Stack>
+        </Box>
+      )}
+    </Stack>
   );
 }
diff --git a/apps/website/templates/RaceDetailTemplate.tsx b/apps/website/templates/RaceDetailTemplate.tsx
index 3254b3f17..f02ff2d7d 100644
--- a/apps/website/templates/RaceDetailTemplate.tsx
+++ b/apps/website/templates/RaceDetailTemplate.tsx
@@ -1,35 +1,20 @@
 'use client';
 
 import React from 'react';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Skeleton } from '@/ui/Skeleton';
-import { InfoBox } from '@/ui/InfoBox';
-import { RaceJoinButton } from '@/ui/RaceJoinButton';
-import { RaceHero } from '@/ui/RaceHeroWrapper';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { RaceUserResult } from '@/ui/RaceUserResultWrapper';
-import { RaceEntryList } from '@/components/races/RaceEntryList';
-import { RaceDetailCard } from '@/ui/RaceDetailCard';
 import { LeagueSummaryCard } from '@/components/leagues/LeagueSummaryCardWrapper';
-import {
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle2,
-  Clock,
-  PlayCircle,
-  Trophy,
-  XCircle,
-  Scale,
-} from 'lucide-react';
-import { Surface } from '@/ui/Surface';
-import { Card } from '@/ui/Card';
+import { RaceActionBar } from '@/ui/RaceActionBar';
+import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
+import { TrackConditionsPanel } from '@/components/races/TrackConditionsPanel';
+import { EntrantsTable } from '@/components/races/EntrantsTable';
+import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 
 export interface RaceDetailEntryViewModel {
   id: string;
@@ -127,7 +112,6 @@ export function RaceDetailTemplate({
   onFileProtest,
   onResultsClick,
   onStewardingClick,
-  onDriverClick,
   isOwnerOrAdmin = false,
   animatedRatingChange,
   mutationLoading = {},
@@ -152,174 +136,122 @@ export function RaceDetailTemplate({
   if (error || !viewData || !viewData.race) {
     return (
       <Container size="md" py={8}>
-        <Stack gap={6}>
-          <Breadcrumbs items={[{ label: 'Races', href: '/races' }, { label: 'Error' }]} />
-
-          <Card>
-            <Stack align="center" gap={4} py={12}>
-              <Surface variant="muted" rounded="full" padding={4}>
-                <Icon icon={AlertTriangle} size={8} color="#f59e0b" />
-              </Surface>
-              <Box>
-                <Text weight="medium" color="text-white" block mb={1}>{error instanceof Error ? error.message : error || 'Race not found'}</Text>
-                <Text size="sm" color="text-gray-500">
-                  The race you&apos;re looking for doesn&apos;t exist or has been removed.
-                </Text>
-              </Box>
-              <Button
-                variant="secondary"
-                onClick={onBack}
-              >
-                Back to Races
-              </Button>
-            </Stack>
-          </Card>
-        </Stack>
+        <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
+          <Stack alignItems="center" gap={4}>
+            <Text as="h2" size="xl" weight="bold" color="text-white">Race Not Found</Text>
+            <Text color="text-gray-400">{`The race you're looking for doesn't exist or has been removed.`}</Text>
+            <Box 
+              as="button" 
+              onClick={onBack}
+              mt={4}
+              px={6}
+              py={2}
+              bg="bg-primary-accent"
+              color="text-white"
+              weight="bold"
+              rounded="md"
+              hoverBg="bg-primary-accent"
+              bgOpacity={0.8}
+              transition
+            >
+              Back to Schedule
+            </Box>
+          </Stack>
+        </Box>
       </Container>
     );
   }
 
   const { race, league, entryList, userResult } = viewData;
 
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      variant: 'primary' as const,
-      label: 'Scheduled',
-      description: 'This race is scheduled and waiting to start',
-    },
-    running: {
-      icon: PlayCircle,
-      variant: 'success' as const,
-      label: 'LIVE NOW',
-      description: 'This race is currently in progress',
-    },
-    completed: {
-      icon: CheckCircle2,
-      variant: 'default' as const,
-      label: 'Completed',
-      description: 'This race has finished',
-    },
-    cancelled: {
-      icon: XCircle,
-      variant: 'warning' as const,
-      label: 'Cancelled',
-      description: 'This race has been cancelled',
-    },
-  };
-
-  const config = statusConfig[race.status] || statusConfig.scheduled;
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
-    { label: race.track },
-  ];
-
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        {/* Navigation Row */}
-        <Stack direction="row" align="center" justify="between">
-          <Breadcrumbs items={breadcrumbItems} />
-          <Button
-            variant="secondary"
-            onClick={onBack}
-            size="sm"
-            icon={<Icon icon={ArrowLeft} size={4} />}
-          >
-            Back
-          </Button>
-        </Stack>
+    <Box as="main" minHeight="screen" bg="bg-base-black">
+      <RaceDetailsHeader 
+        title={race.track}
+        leagueName={league?.name || 'Official'}
+        trackName={race.track}
+        scheduledAt={race.scheduledAt}
+        status={race.status as SessionStatus}
+        onBack={onBack}
+      />
 
-        {/* User Result */}
-        {userResult && (
-          <RaceUserResult 
-            {...userResult} 
-            animatedRatingChange={animatedRatingChange} 
-          />
-        )}
+      <Container size="lg" py={8}>
+        <Stack gap={8}>
+          {userResult && (
+            <RaceUserResult 
+              {...userResult} 
+              animatedRatingChange={animatedRatingChange} 
+            />
+          )}
 
-        {/* Hero Header */}
-        <RaceHero 
-          track={race.track}
-          scheduledAt={race.scheduledAt}
-          car={race.car}
-          status={race.status}
-          statusConfig={config}
-        />
+          <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+            <RaceActionBar 
+              status={race.status}
+              isUserRegistered={viewData.registration.isUserRegistered}
+              canRegister={viewData.registration.canRegister}
+              onRegister={onRegister}
+              onWithdraw={onWithdraw}
+              onResultsClick={onResultsClick}
+              onStewardingClick={onStewardingClick}
+              onFileProtest={onFileProtest}
+              isAdmin={isOwnerOrAdmin}
+              onCancel={onCancel}
+              onReopen={onReopen}
+              onEndRace={onEndRace}
+              isLoading={mutationLoading}
+            />
+          </Box>
 
-        <Grid cols={12} gap={6}>
-          <GridItem lgSpan={8} colSpan={12}>
-            <Stack gap={6}>
-              <RaceDetailCard 
-                track={race.track}
-                car={race.car}
-                sessionType={race.sessionType}
-                statusLabel={config.label}
-                statusColor={config.variant === 'success' ? '#10b981' : config.variant === 'primary' ? '#3b82f6' : '#9ca3af'}
-              />
+          <Grid cols={12} gap={6}>
+            <GridItem lgSpan={8} colSpan={12}>
+              <Stack gap={6}>
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+                  <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
+                    <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Entry List</Text>
+                  </Box>
+                  <EntrantsTable 
+                    entrants={entryList.map(entry => ({
+                      id: entry.id,
+                      name: entry.name,
+                      carName: race.car,
+                      rating: entry.rating || 0,
+                      status: 'confirmed'
+                    }))}
+                  />
+                </Box>
+              </Stack>
+            </GridItem>
 
-              <RaceEntryList 
-                entries={entryList}
-                onDriverClick={onDriverClick}
-              />
-            </Stack>
-          </GridItem>
+            <GridItem lgSpan={4} colSpan={12}>
+              <Stack gap={6}>
+                {league && <LeagueSummaryCard league={league} />}
+                
+                <TrackConditionsPanel 
+                  airTemp="24°C"
+                  trackTemp="31°C"
+                  humidity="45%"
+                  windSpeed="12 km/h NW"
+                  weatherType="Partly Cloudy"
+                />
 
-          <GridItem lgSpan={4} colSpan={12}>
-            <Stack gap={6}>
-              {league && <LeagueSummaryCard league={league} />}
-
-              {/* Actions Card */}
-              <Card>
-                <Stack gap={4}>
-                  <Text size="xl" weight="bold" color="text-white">Actions</Text>
-                  <Stack gap={3}>
-                    <RaceJoinButton
-                      raceStatus={race.status}
-                      isUserRegistered={viewData.registration.isUserRegistered}
-                      canRegister={viewData.registration.canRegister}
-                      onRegister={onRegister}
-                      onWithdraw={onWithdraw}
-                      onCancel={onCancel}
-                      onReopen={onReopen}
-                      onEndRace={onEndRace}
-                      canReopenRace={viewData.canReopenRace}
-                      isOwnerOrAdmin={isOwnerOrAdmin}
-                      isLoading={mutationLoading}
-                    />
-
-                    {race.status === 'completed' && (
-                      <>
-                        <Button variant="primary" fullWidth onClick={onResultsClick} icon={<Icon icon={Trophy} size={4} />}>
-                          View Results
-                        </Button>
-                        {userResult && (
-                          <Button variant="secondary" fullWidth onClick={onFileProtest} icon={<Icon icon={Scale} size={4} />}>
-                            File Protest
-                          </Button>
-                        )}
-                        <Button variant="secondary" fullWidth onClick={onStewardingClick} icon={<Icon icon={Scale} size={4} />}>
-                          Stewarding
-                        </Button>
-                      </>
-                    )}
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+                  <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={4}>Session Info</Text>
+                  <Stack gap={4}>
+                    <Stack gap={1}>
+                      <Text size="xs" color="text-gray-500" uppercase weight="bold">Format</Text>
+                      <Text size="sm" color="text-white">{race.sessionType}</Text>
+                    </Stack>
+                    <Stack gap={1}>
+                      <Text size="xs" color="text-gray-500" uppercase weight="bold">Car Class</Text>
+                      <Text size="sm" color="text-white">{race.car}</Text>
+                    </Stack>
                   </Stack>
-                </Stack>
-              </Card>
-
-              {/* Status Info */}
-              <InfoBox 
-                icon={config.icon}
-                title={config.label}
-                description={config.description}
-                variant={config.variant}
-              />
-            </Stack>
-          </GridItem>
-        </Grid>
-      </Stack>
-    </Container>
+                </Box>
+              </Stack>
+            </GridItem>
+          </Grid>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
diff --git a/apps/website/templates/RaceResultsTemplate.tsx b/apps/website/templates/RaceResultsTemplate.tsx
index b2ba8344b..3cbc4e913 100644
--- a/apps/website/templates/RaceResultsTemplate.tsx
+++ b/apps/website/templates/RaceResultsTemplate.tsx
@@ -1,22 +1,17 @@
 'use client';
 
 import React from 'react';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
 import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
-import { ArrowLeft, Trophy, Zap, type LucideIcon } from 'lucide-react';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { Box } from '@/ui/Box';
+import { Trophy, Zap, AlertTriangle, type LucideIcon } from 'lucide-react';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
-import { RaceResultRow } from '@/components/races/RaceResultRow';
-import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
+import { RaceResultsTable } from '@/ui/RaceResultsTable';
+import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 
 export interface RaceResultsTemplateProps {
   viewData: RaceResultsViewData;
@@ -40,15 +35,9 @@ export function RaceResultsTemplate({
   isLoading,
   error,
   onBack,
-  onImportResults,
-  importing,
   importSuccess,
   importError,
 }: RaceResultsTemplateProps) {
-  const formatDate = (date: string) => {
-    return DateDisplay.formatFull(date);
-  };
-
   const formatTime = (ms: number) => {
     const minutes = Math.floor(ms / 60000);
     const seconds = Math.floor((ms % 60000) / 1000);
@@ -56,17 +45,10 @@ export function RaceResultsTemplate({
     return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
   };
 
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(viewData.leagueName ? [{ label: viewData.leagueName, href: `/leagues/${viewData.leagueName}` }] : []),
-    ...(viewData.raceTrack ? [{ label: viewData.raceTrack, href: `/races/${viewData.raceTrack}` }] : []),
-    { label: 'Results' },
-  ];
-
   if (isLoading) {
     return (
       <Container size="lg" py={12}>
-        <Stack align="center">
+        <Stack alignItems="center">
           <Text color="text-gray-400">Loading results...</Text>
         </Stack>
       </Container>
@@ -76,147 +58,123 @@ export function RaceResultsTemplate({
   if (error && !viewData.raceTrack) {
     return (
       <Container size="md" py={12}>
-        <Card>
-          <Stack align="center" py={12} gap={4}>
+        <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
+          <Stack alignItems="center" gap={4}>
             <Text color="text-warning-amber">{error?.message || 'Race not found'}</Text>
-            <Button
-              variant="secondary"
+            <Box 
+              as="button" 
               onClick={onBack}
+              mt={4}
+              px={6}
+              py={2}
+              bg="bg-primary-accent"
+              color="text-white"
+              weight="bold"
+              rounded="md"
+              hoverBg="bg-primary-accent"
+              bgOpacity={0.8}
+              transition
             >
-              Back to Races
-            </Button>
+              Back to Schedule
+            </Box>
           </Stack>
-        </Card>
+        </Box>
       </Container>
     );
   }
 
-  const hasResults = viewData.results.length > 0;
-
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        <Stack direction="row" align="center" justify="between">
-          <Breadcrumbs items={breadcrumbItems} />
-          <Button
-            variant="secondary"
-            onClick={onBack}
-            icon={<Icon icon={ArrowLeft} size={4} />}
-          >
-            Back
-          </Button>
-        </Stack>
+    <Box as="main" minHeight="screen" bg="bg-base-black">
+      <RaceDetailsHeader 
+        title={viewData.raceTrack || 'Unknown Track'}
+        leagueName={viewData.leagueName || 'Official'}
+        trackName={viewData.raceTrack || 'Unknown Track'}
+        scheduledAt={viewData.raceScheduledAt || ''}
+        status="completed"
+        onBack={onBack}
+      />
 
-        {/* Header */}
-        <Surface variant="muted" rounded="xl" border padding={6} bg="bg-neutral-800/50" borderColor="border-neutral-800">
-          <Stack direction="row" align="center" gap={4} mb={6}>
-            <Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/20">
-              <Icon icon={Trophy} size={6} color="#3b82f6" />
-            </Surface>
-            <Box>
-              <Heading level={1}>Race Results</Heading>
-              <Text size="sm" color="text-gray-400" block mt={1}>
-                {viewData.raceTrack} • {viewData.raceScheduledAt ? formatDate(viewData.raceScheduledAt) : ''}
-              </Text>
+      <Container size="lg" py={8}>
+        <Stack gap={8}>
+          {importSuccess && (
+            <Box p={4} bg="bg-success-green" bgOpacity={0.1} border borderColor="border-success-green" rounded>
+              <Text color="text-success-green" weight="bold">Success!</Text>
+              <Text color="text-success-green" size="sm" block mt={1}>Results imported and standings updated.</Text>
             </Box>
-          </Stack>
+          )}
 
-          {/* Stats */}
-          <Grid cols={4} gap={4}>
-            <StatItem label="Drivers" value={viewData.totalDrivers ?? 0} />
-            <StatItem label="League" value={viewData.leagueName ?? '—'} />
-            <StatItem label="SOF" value={viewData.raceSOF ?? '—'} icon={Zap} color="text-warning-amber" />
-            <StatItem label="Fastest Lap" value={viewData.fastestLapTime ? formatTime(viewData.fastestLapTime) : '—'} color="text-performance-green" />
-          </Grid>
-        </Surface>
+          {importError && (
+            <Box p={4} bg="bg-critical-red" bgOpacity={0.1} border borderColor="border-critical-red" rounded>
+              <Text color="text-critical-red" weight="bold">Error:</Text>
+              <Text color="text-critical-red" size="sm" block mt={1}>{importError}</Text>
+            </Box>
+          )}
 
-        {importSuccess && (
-          <Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
-            <Text color="text-performance-green" weight="bold">Success!</Text>
-            <Text color="text-performance-green" size="sm" block mt={1}>Results imported and standings updated.</Text>
-          </Surface>
-        )}
+          <Grid cols={12} gap={6}>
+            <GridItem colSpan={12} lgSpan={8}>
+              <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+                <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2} display="flex" alignItems="center" gap={2}>
+                  <Icon icon={Trophy} size={4} color="var(--color-primary)" />
+                  <Text as="h2" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Final Standings</Text>
+                </Box>
+                <RaceResultsTable 
+                  results={viewData.results as unknown as never[]}
+                  drivers={[]} 
+                  pointsSystem={viewData.pointsSystem as unknown as Record<number, number>}
+                  fastestLapTime={viewData.fastestLapTime}
+                  penalties={viewData.penalties as unknown as never[]}
+                />
+              </Box>
+            </GridItem>
 
-        {importError && (
-          <Surface variant="muted" rounded="lg" border padding={4} bg="bg-red-500/10" borderColor="border-red-500/30">
-            <Text color="text-error-red" weight="bold">Error:</Text>
-            <Text color="text-error-red" size="sm" block mt={1}>{importError}</Text>
-          </Surface>
-        )}
-
-        <Card>
-          {hasResults ? (
-            <Stack gap={6}>
-              {/* Results Table */}
-              <Stack gap={2}>
-                {viewData.results.map((result) => (
-                  <RaceResultRow 
-                    key={result.driverId} 
-                    result={result as unknown as never} 
-                    points={viewData.pointsSystem[result.position.toString()] ?? 0} 
-                  />
-                ))}
-              </Stack>
-
-              {/* Penalties Section */}
-              {viewData.penalties.length > 0 && (
-                <Box pt={6} borderTop="1px solid" borderColor="border-neutral-800">
-                  <Box mb={4}>
-                    <Heading level={2}>Penalties</Heading>
-                  </Box>
-                  <Stack gap={2}>
-                    {viewData.penalties.map((penalty, index) => (
-                      <RacePenaltyRow key={index} penalty={penalty as unknown as never} />
-                    ))}
+            <GridItem colSpan={12} lgSpan={4}>
+              <Stack gap={6}>
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+                  <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={4}>Session Stats</Text>
+                  <Stack gap={4}>
+                    <StatItem label="DRIVERS" value={viewData.totalDrivers ?? 0} />
+                    <StatItem label="SOF" value={viewData.raceSOF ?? '—'} icon={Zap} color="text-warning-amber" />
+                    <StatItem label="FASTEST LAP" value={viewData.fastestLapTime ? formatTime(viewData.fastestLapTime) : '—'} color="text-success-green" />
                   </Stack>
                 </Box>
-              )}
-            </Stack>
-          ) : (
-            <Stack gap={6}>
-              <Box>
-                <Heading level={2}>Import Results</Heading>
-                <Text size="sm" color="text-gray-400" block mt={2}>
-                  No results imported. Upload CSV to test the standings system.
-                </Text>
-              </Box>
-              {importing ? (
-                <Stack align="center" py={8}>
-                  <Text color="text-gray-400">Importing results and updating standings...</Text>
-                </Stack>
-              ) : (
-                <Stack gap={4}>
-                  <Text size="sm" color="text-gray-400">
-                    This is a placeholder for the import form. In the actual implementation,
-                    this would render the ImportResultsForm component.
-                  </Text>
-                  <Box>
-                    <Button
-                      variant="primary"
-                      onClick={() => onImportResults([])}
-                      disabled={importing}
-                    >
-                      Import Results (Demo)
-                    </Button>
+
+                {viewData.penalties.length > 0 && (
+                  <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+                    <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={4}>Penalties</Text>
+                    <Stack gap={2}>
+                      {viewData.penalties.map((penalty, index) => (
+                        <Box key={index} p={3} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
+                          <Stack direction="row" alignItems="center" gap={3}>
+                            <Icon icon={AlertTriangle} size={4} color="var(--color-critical)" />
+                            <Box>
+                              <Text size="sm" weight="bold" color="text-white" block>{penalty.driverName || 'Unknown Driver'}</Text>
+                              <Text size="xs" color="text-gray-500">{penalty.reason || penalty.type}</Text>
+                            </Box>
+                          </Stack>
+                        </Box>
+                      ))}
+                    </Stack>
                   </Box>
-                </Stack>
-              )}
-            </Stack>
-          )}
-        </Card>
-      </Stack>
-    </Container>
+                )}
+              </Stack>
+            </GridItem>
+          </Grid>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
 
 function StatItem({ label, value, icon, color = 'text-white' }: { label: string, value: string | number, icon?: LucideIcon, color?: string }) {
   return (
-    <Surface variant="muted" rounded="lg" padding={3} bg="bg-neutral-900/60">
-      <Text size="xs" color="text-gray-500" block mb={1}>{label}</Text>
-      <Stack direction="row" align="center" gap={1.5}>
-        {icon && <Icon icon={icon} size={4} color={color === 'text-white' ? '#9ca3af' : color} />}
-        <Text weight="bold" color={color} size="lg">{value}</Text>
+    <Box p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
+      <Stack gap={1}>
+        <Stack direction="row" alignItems="center" gap={2}>
+          {icon && <Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : color} />}
+          <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+        </Stack>
+        <Text size="xl" weight="bold" color={color}>{value}</Text>
       </Stack>
-    </Surface>
+    </Box>
   );
 }
diff --git a/apps/website/templates/RaceStewardingTemplate.tsx b/apps/website/templates/RaceStewardingTemplate.tsx
index 64a3dfc13..0adad12c2 100644
--- a/apps/website/templates/RaceStewardingTemplate.tsx
+++ b/apps/website/templates/RaceStewardingTemplate.tsx
@@ -1,29 +1,19 @@
 'use client';
 
 import React from 'react';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Flag, CheckCircle, Gavel, Info } from 'lucide-react';
 import { RaceStewardingStats } from '@/ui/RaceStewardingStats';
 import { StewardingTabs } from '@/ui/StewardingTabs';
 import { ProtestCard } from '@/components/leagues/ProtestCardWrapper';
 import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
-import { Card } from '@/ui/Card';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
-import {
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle,
-  Flag,
-  Gavel,
-  Scale,
-} from 'lucide-react';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import type { RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
 
 export type StewardingTab = 'pending' | 'resolved' | 'penalties';
@@ -52,13 +42,13 @@ export function RaceStewardingTemplate({
   setActiveTab,
 }: RaceStewardingTemplateProps) {
   const formatDate = (date: string) => {
-    return DateDisplay.formatShort(date);
+    return date; // Simplified for template
   };
 
   if (isLoading) {
     return (
       <Container size="lg" py={12}>
-        <Stack align="center">
+        <Stack alignItems="center">
           <Text color="text-gray-400">Loading stewarding data...</Text>
         </Stack>
       </Container>
@@ -68,164 +58,157 @@ export function RaceStewardingTemplate({
   if (!viewData?.race) {
     return (
       <Container size="md" py={12}>
-        <Card>
-          <Stack align="center" py={12} gap={4}>
-            <Surface variant="muted" rounded="full" padding={4}>
-              <Icon icon={AlertTriangle} size={8} color="#f59e0b" />
-            </Surface>
-            <Box textAlign="center">
-              <Text weight="medium" color="text-white" block mb={1}>Race not found</Text>
-              <Text size="sm" color="text-gray-500">The race you&apos;re looking for doesn&apos;t exist.</Text>
+        <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
+          <Stack alignItems="center" gap={4}>
+            <Text as="h2" size="xl" weight="bold" color="text-white">Race Not Found</Text>
+            <Text color="text-gray-400">{`The race you're looking for doesn't exist.`}</Text>
+            <Box 
+              as="button" 
+              onClick={onBack}
+              mt={4}
+              px={6}
+              py={2}
+              bg="bg-primary-accent"
+              color="text-white"
+              weight="bold"
+              rounded="md"
+              hoverBg="bg-primary-accent"
+              bgOpacity={0.8}
+              transition
+            >
+              Back to Schedule
             </Box>
-            <Button variant="secondary" onClick={onBack}>
-              Back to Races
-            </Button>
           </Stack>
-        </Card>
+        </Box>
       </Container>
     );
   }
 
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: viewData.race.track, href: `/races/${viewData.race.id}` },
-    { label: 'Stewarding' },
-  ];
-
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        {/* Navigation */}
-        <Stack direction="row" align="center" justify="between">
-          <Breadcrumbs items={breadcrumbItems} />
-          <Button
-            variant="secondary"
-            onClick={onBack}
-            icon={<Icon icon={ArrowLeft} size={4} />}
-          >
-            Back to Race
-          </Button>
+    <Box as="main" minHeight="screen" bg="bg-base-black">
+      <RaceDetailsHeader 
+        title="Stewarding Dashboard"
+        leagueName={viewData.race.track}
+        trackName={viewData.race.track}
+        scheduledAt={viewData.race.scheduledAt}
+        status="completed"
+        onBack={onBack}
+      />
+
+      <Container size="lg" py={8}>
+        <Stack gap={8}>
+          <Grid cols={12} gap={6}>
+            <GridItem colSpan={12} lgSpan={8}>
+              <Stack gap={6}>
+                <StewardingTabs
+                  activeTab={activeTab}
+                  onTabChange={setActiveTab}
+                  pendingCount={viewData.pendingProtests.length}
+                />
+
+                {activeTab === 'pending' && (
+                  <Stack gap={4}>
+                    {viewData.pendingProtests.length === 0 ? (
+                      <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center">
+                        <Stack alignItems="center" gap={4}>
+                          <Icon icon={Flag} size={8} color="var(--color-success)" />
+                          <Box>
+                            <Text weight="semibold" size="lg" color="text-white" block mb={1}>All Clear!</Text>
+                            <Text size="sm" color="text-gray-400">No pending protests to review</Text>
+                          </Box>
+                        </Stack>
+                      </Box>
+                    ) : (
+                      viewData.pendingProtests.map((protest) => (
+                        <ProtestCard 
+                          key={protest.id} 
+                          protest={protest} 
+                          protester={viewData.driverMap[protest.protestingDriverId]}
+                          accused={viewData.driverMap[protest.accusedDriverId]}
+                          isAdmin={isAdmin}
+                          onReview={onReviewProtest}
+                          formatDate={formatDate}
+                        />
+                      ))
+                    )}
+                  </Stack>
+                )}
+
+                {activeTab === 'resolved' && (
+                  <Stack gap={4}>
+                    {viewData.resolvedProtests.length === 0 ? (
+                      <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center">
+                        <Stack alignItems="center" gap={4}>
+                          <Icon icon={CheckCircle} size={8} color="#525252" />
+                          <Box>
+                            <Text weight="semibold" size="lg" color="text-white" block mb={1}>No Resolved Protests</Text>
+                            <Text size="sm" color="text-gray-400">Resolved protests will appear here</Text>
+                          </Box>
+                        </Stack>
+                      </Box>
+                    ) : (
+                      viewData.resolvedProtests.map((protest) => (
+                        <ProtestCard 
+                          key={protest.id} 
+                          protest={protest} 
+                          protester={viewData.driverMap[protest.protestingDriverId]}
+                          accused={viewData.driverMap[protest.accusedDriverId]}
+                          isAdmin={isAdmin}
+                          onReview={onReviewProtest}
+                          formatDate={formatDate}
+                        />
+                      ))
+                    )}
+                  </Stack>
+                )}
+
+                {activeTab === 'penalties' && (
+                  <Stack gap={4}>
+                    {viewData.penalties.length === 0 ? (
+                      <Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center">
+                        <Stack alignItems="center" gap={4}>
+                          <Icon icon={Gavel} size={8} color="#525252" />
+                          <Box>
+                            <Text weight="semibold" size="lg" color="text-white" block mb={1}>No Penalties</Text>
+                            <Text size="sm" color="text-gray-400">Penalties issued for this race will appear here</Text>
+                          </Box>
+                        </Stack>
+                      </Box>
+                    ) : (
+                      viewData.penalties.map((penalty) => (
+                        <RacePenaltyRow 
+                          key={penalty.id} 
+                          penalty={{
+                            ...penalty,
+                            driverName: viewData.driverMap[penalty.driverId]?.name || 'Unknown',
+                            type: penalty.type as 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points'
+                          }} 
+                        />
+                      ))
+                    )}
+                  </Stack>
+                )}
+              </Stack>
+            </GridItem>
+
+            <GridItem colSpan={12} lgSpan={4}>
+              <Stack gap={6}>
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+                  <Box display="flex" alignItems="center" gap={2} mb={4}>
+                    <Icon icon={Info} size={4} color="var(--color-primary)" />
+                    <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Stewarding Stats</Text>
+                  </Box>
+                  <RaceStewardingStats
+                    pendingCount={viewData.pendingCount}
+                    resolvedCount={viewData.resolvedCount}
+                    penaltiesCount={viewData.penaltiesCount}
+                  />
+                </Box>
+              </Stack>
+            </GridItem>
+          </Grid>
         </Stack>
-
-        {/* Header */}
-        <Surface variant="muted" rounded="xl" border padding={6} bg="bg-gradient-to-r from-neutral-800/50 to-neutral-800/30" borderColor="border-neutral-800">
-          <Stack direction="row" align="center" gap={4} mb={6}>
-            <Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/20">
-              <Icon icon={Scale} size={6} color="#3b82f6" />
-            </Surface>
-            <Box>
-              <Heading level={1}>Stewarding</Heading>
-              <Text size="sm" color="text-gray-400" block mt={1}>
-                {viewData.race.track} • {formatDate(viewData.race.scheduledAt)}
-              </Text>
-            </Box>
-          </Stack>
-
-          {/* Stats */}
-          <RaceStewardingStats
-            pendingCount={viewData.pendingCount}
-            resolvedCount={viewData.resolvedCount}
-            penaltiesCount={viewData.penaltiesCount}
-          />
-        </Surface>
-
-        {/* Tab Navigation */}
-        <StewardingTabs
-          activeTab={activeTab}
-          onTabChange={setActiveTab}
-          pendingCount={viewData.pendingProtests.length}
-        />
-
-        {/* Content */}
-        {activeTab === 'pending' && (
-          <Stack gap={4}>
-            {viewData.pendingProtests.length === 0 ? (
-              <Card>
-                <Stack align="center" py={12} gap={4}>
-                  <Surface variant="muted" rounded="full" padding={4}>
-                    <Icon icon={Flag} size={8} color="#10b981" />
-                  </Surface>
-                  <Box textAlign="center">
-                    <Text weight="semibold" size="lg" color="text-white" block mb={1}>All Clear!</Text>
-                    <Text size="sm" color="text-gray-400">No pending protests to review</Text>
-                  </Box>
-                </Stack>
-              </Card>
-            ) : (
-              viewData.pendingProtests.map((protest) => (
-                <ProtestCard 
-                  key={protest.id} 
-                  protest={protest} 
-                  protester={viewData.driverMap[protest.protestingDriverId]}
-                  accused={viewData.driverMap[protest.accusedDriverId]}
-                  isAdmin={isAdmin}
-                  onReview={onReviewProtest}
-                  formatDate={formatDate}
-                />
-              ))
-            )}
-          </Stack>
-        )}
-
-        {activeTab === 'resolved' && (
-          <Stack gap={4}>
-            {viewData.resolvedProtests.length === 0 ? (
-              <Card>
-                <Stack align="center" py={12} gap={4}>
-                  <Surface variant="muted" rounded="full" padding={4}>
-                    <Icon icon={CheckCircle} size={8} color="#525252" />
-                  </Surface>
-                  <Box textAlign="center">
-                    <Text weight="semibold" size="lg" color="text-white" block mb={1}>No Resolved Protests</Text>
-                    <Text size="sm" color="text-gray-400">Resolved protests will appear here</Text>
-                  </Box>
-                </Stack>
-              </Card>
-            ) : (
-              viewData.resolvedProtests.map((protest) => (
-                <ProtestCard 
-                  key={protest.id} 
-                  protest={protest} 
-                  protester={viewData.driverMap[protest.protestingDriverId]}
-                  accused={viewData.driverMap[protest.accusedDriverId]}
-                  isAdmin={isAdmin}
-                  onReview={onReviewProtest}
-                  formatDate={formatDate}
-                />
-              ))
-            )}
-          </Stack>
-        )}
-
-        {activeTab === 'penalties' && (
-          <Stack gap={4}>
-            {viewData.penalties.length === 0 ? (
-              <Card>
-                <Stack align="center" py={12} gap={4}>
-                  <Surface variant="muted" rounded="full" padding={4}>
-                    <Icon icon={Gavel} size={8} color="#525252" />
-                  </Surface>
-                  <Box textAlign="center">
-                    <Text weight="semibold" size="lg" color="text-white" block mb={1}>No Penalties</Text>
-                    <Text size="sm" color="text-gray-400">Penalties issued for this race will appear here</Text>
-                  </Box>
-                </Stack>
-              </Card>
-            ) : (
-              viewData.penalties.map((penalty) => (
-                <RacePenaltyRow 
-                  key={penalty.id} 
-                  penalty={{
-                    ...penalty,
-                    driverName: viewData.driverMap[penalty.driverId]?.name || 'Unknown',
-                    type: penalty.type as 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points'
-                  }} 
-                />
-              ))
-            )}
-          </Stack>
-        )}
-      </Stack>
-    </Container>
+      </Container>
+    </Box>
   );
 }
diff --git a/apps/website/templates/RacesAllTemplate.tsx b/apps/website/templates/RacesAllTemplate.tsx
index 5d9626e88..926ed4ebd 100644
--- a/apps/website/templates/RacesAllTemplate.tsx
+++ b/apps/website/templates/RacesAllTemplate.tsx
@@ -1,26 +1,17 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import {
-  Flag,
-  SlidersHorizontal,
-  Calendar,
-} from 'lucide-react';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
-import { Pagination } from '@/ui/Pagination';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
-import { RaceListItem } from '@/components/races/RaceListItemWrapper';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Pagination } from '@/ui/Pagination';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import { RacesHeader } from '@/components/races/RacesHeader';
+import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 
 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 
@@ -66,26 +57,18 @@ export function RacesAllTemplate({
   setLeagueFilter,
   searchQuery,
   setSearchQuery,
-  showFilters,
-  setShowFilters,
   showFilterModal,
   setShowFilterModal,
   onRaceClick,
 }: RacesAllTemplateProps) {
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: 'All Races' },
-  ];
-
   if (isLoading) {
     return (
       <Container size="lg" py={8}>
         <Stack gap={6}>
-          <Skeleton width="8rem" height="1.5rem" />
-          <Skeleton width="12rem" height="2.5rem" />
+          <Skeleton width="100%" height="12rem" />
           <Stack gap={4}>
             {[1, 2, 3, 4, 5].map(i => (
-              <Skeleton key={i} width="100%" height="6rem" />
+              <Skeleton key={i} width="100%" height="4rem" />
             ))}
           </Stack>
         </Stack>
@@ -94,98 +77,84 @@ export function RacesAllTemplate({
   }
 
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={breadcrumbItems} />
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
+        <Stack gap={8}>
+          <RacesHeader 
+            totalCount={viewData.totalCount}
+            scheduledCount={viewData.scheduledCount}
+            runningCount={viewData.runningCount}
+            completedCount={viewData.completedCount}
+          />
 
-        {/* Header */}
-        <Stack direction="row" align="center" justify="between" wrap gap={4}>
-          <Box>
-            <Heading level={1} icon={<Icon icon={Flag} size={6} color="#3b82f6" />}>
-              All Races
-            </Heading>
-            <Text size="sm" color="text-gray-400" block mt={1}>
-              {totalFilteredCount} race{totalFilteredCount !== 1 ? 's' : ''} found
+          <Box display="flex" justifyContent="between" alignItems="center">
+            <Text size="sm" color="text-gray-400">
+              Showing <Text as="span" color="text-white" weight="bold">{totalFilteredCount}</Text> races
             </Text>
+            <Box 
+              as="button"
+              onClick={() => setShowFilterModal(true)}
+              px={4}
+              py={2}
+              bg="bg-surface-charcoal"
+              border
+              borderColor="border-outline-steel"
+              fontSize="10px"
+              weight="bold"
+              uppercase
+              letterSpacing="wider"
+              hoverBorderColor="border-primary-accent"
+              transition
+            >
+              Filters
+            </Box>
           </Box>
-          
-          <Button
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            icon={<Icon icon={SlidersHorizontal} size={4} />}
-          >
-            Filters
-          </Button>
+
+          <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+            {races.length === 0 ? (
+              <Box p={12} textAlign="center">
+                <Text color="text-gray-500">No races found matching your criteria.</Text>
+              </Box>
+            ) : (
+              <RaceScheduleTable 
+                races={races.map(race => ({
+                  id: race.id,
+                  track: race.track,
+                  car: race.car,
+                  leagueName: race.leagueName,
+                  time: race.timeLabel,
+                  status: race.status as SessionStatus
+                }))}
+                onRaceClick={onRaceClick}
+              />
+            )}
+          </Box>
+
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            totalItems={totalFilteredCount}
+            itemsPerPage={itemsPerPage}
+            onPageChange={onPageChange}
+          />
+
+          <RaceFilterModal
+            isOpen={showFilterModal}
+            onClose={() => setShowFilterModal(false)}
+            statusFilter={statusFilter}
+            setStatusFilter={setStatusFilter}
+            leagueFilter={leagueFilter}
+            setLeagueFilter={setLeagueFilter}
+            timeFilter="all"
+            setTimeFilter={() => {}}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            leagues={viewData.leagues}
+            showSearch={true}
+            showTimeFilter={false}
+          />
         </Stack>
-
-        {/* Search & Filters (Simplified for template) */}
-        {showFilters && (
-          <Card>
-            <Stack gap={4}>
-              <Text size="sm" color="text-gray-400">
-                Use the filter button to open advanced search and filtering options.
-              </Text>
-              <Box>
-                <Button variant="primary" onClick={() => setShowFilterModal(true)}>
-                  Open Filters
-                </Button>
-              </Box>
-            </Stack>
-          </Card>
-        )}
-
-        {/* Race List */}
-        {races.length === 0 ? (
-          <Card>
-            <Stack align="center" py={12} gap={4}>
-              <Surface variant="muted" rounded="full" padding={4}>
-                <Icon icon={Calendar} size={8} color="#525252" />
-              </Surface>
-              <Box textAlign="center">
-                <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
-                <Text size="sm" color="text-gray-500">
-                  {viewData.races.length === 0 
-                    ? 'No races have been scheduled yet'
-                    : 'Try adjusting your search or filters'}
-                </Text>
-              </Box>
-            </Stack>
-          </Card>
-        ) : (
-          <Stack gap={3}>
-            {races.map(race => (
-              <RaceListItem key={race.id} race={race} onClick={onRaceClick} />
-            ))}
-          </Stack>
-        )}
-
-        {/* Pagination */}
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          totalItems={totalFilteredCount}
-          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={viewData.leagues}
-          showSearch={true}
-          showTimeFilter={false}
-        />
-      </Stack>
-    </Container>
+      </Container>
+    </Box>
   );
 }
diff --git a/apps/website/templates/RacesTemplate.tsx b/apps/website/templates/RacesTemplate.tsx
index 16d954118..e7d23f34c 100644
--- a/apps/website/templates/RacesTemplate.tsx
+++ b/apps/website/templates/RacesTemplate.tsx
@@ -1,18 +1,20 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Container } from '@/ui/Container';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
-import type { RacesViewData } from '@/lib/view-data/RacesViewData';
-import { RacePageHeader } from '@/ui/RacePageHeader';
-import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
-import { RaceFilterBar } from '@/components/races/RaceFilterBar';
-import { RaceList } from '@/components/races/RaceList';
-import { RaceSidebar } from '@/components/races/RaceSidebar';
+import { Stack } from '@/ui/Stack';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { RacesHeader } from '@/components/races/RacesHeader';
+import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
+import { RaceFilterBar } from '@/components/races/RaceFilterBar';
+import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
+import { RaceSidebar } from '@/components/races/RaceSidebar';
+import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
 export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
@@ -49,10 +51,10 @@ export function RacesTemplate({
   setShowFilterModal,
 }: RacesTemplateProps) {
   return (
-    <Box as="main">
-      <Container size="lg" py={8}>
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
         <Stack gap={8}>
-          <RacePageHeader 
+          <RacesHeader 
             totalCount={viewData.totalCount}
             scheduledCount={viewData.scheduledCount}
             runningCount={viewData.runningCount}
@@ -76,11 +78,22 @@ export function RacesTemplate({
                   onShowMoreFilters={() => setShowFilterModal(true)}
                 />
 
-                <RaceList 
-                  racesByDate={viewData.racesByDate}
-                  totalCount={viewData.totalCount}
-                  onRaceClick={onRaceClick}
-                />
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+                  <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
+                    <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Race Schedule</Text>
+                  </Box>
+                  <RaceScheduleTable 
+                    races={viewData.races.map(race => ({
+                      id: race.id,
+                      track: race.track,
+                      car: race.car,
+                      leagueName: race.leagueName,
+                      time: race.timeLabel,
+                      status: race.status as SessionStatus
+                    }))}
+                    onRaceClick={onRaceClick}
+                  />
+                </Box>
               </Stack>
             </GridItem>
 
diff --git a/apps/website/templates/RosterAdminTemplate.tsx b/apps/website/templates/RosterAdminTemplate.tsx
index 41877153c..9e9aa1e2c 100644
--- a/apps/website/templates/RosterAdminTemplate.tsx
+++ b/apps/website/templates/RosterAdminTemplate.tsx
@@ -1,14 +1,15 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Text } from '@/ui/Text';
-import { Button } from '@/ui/Button';
-import { Select } from '@/ui/Select';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Surface } from '@/ui/Surface';
+import { Button } from '@/ui/Button';
+import { Shield, UserPlus, UserMinus } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import type { LeagueRosterAdminViewData } from '@/lib/view-data/LeagueRosterAdminViewData';
 
@@ -36,119 +37,131 @@ export function RosterAdminTemplate({
   const { joinRequests, members } = viewData;
 
   return (
-    <Stack gap={6}>
-      <Card>
-        <Stack gap={6}>
-          <Box>
-            <Heading level={1}>Roster Admin</Heading>
-            <Text size="sm" color="text-gray-400" block mt={1}>
-              Manage join requests and member roles.
-            </Text>
-          </Box>
-
-          <Box>
-            <Stack direction="row" align="center" justify="between" mb={4}>
-              <Heading level={2}>Pending join requests</Heading>
-              <Text size="xs" color="text-gray-500">
-                {pendingCountLabel}
-              </Text>
-            </Stack>
-
-            {loading ? (
-              <Text size="sm" color="text-gray-400">Loading…</Text>
-            ) : joinRequests.length > 0 ? (
-              <Stack gap={3}>
-                {joinRequests.map((req) => (
-                  <Surface
-                    key={req.id}
-                    variant="muted"
-                    rounded="lg"
-                    border
-                    padding={3}
-                  >
-                    <Stack direction="row" align="center" justify="between">
-                      <Box>
-                        <Text weight="medium" color="text-white" block>{req.driver.name}</Text>
-                        <Text size="xs" color="text-gray-400" block mt={1}>{req.requestedAt}</Text>
-                        {req.message && (
-                          <Text size="xs" color="text-gray-500" block mt={1} truncate>{req.message}</Text>
-                        )}
-                      </Box>
-
-                      <Stack direction="row" gap={2}>
-                        <Button
-                          onClick={() => onApprove(req.id)}
-                          variant="primary"
-                          size="sm"
-                        >
-                          Approve
-                        </Button>
-                        <Button
-                          onClick={() => onReject(req.id)}
-                          variant="secondary"
-                          size="sm"
-                        >
-                          Reject
-                        </Button>
-                      </Stack>
-                    </Stack>
-                  </Surface>
-                ))}
-              </Stack>
-            ) : (
-              <Text size="sm" color="text-gray-500">No pending join requests.</Text>
-            )}
-          </Box>
-
-          <Box pt={6} borderTop borderColor="border-neutral-800">
-            <Box mb={4}>
-              <Heading level={2}>Members</Heading>
-            </Box>
-
-            {loading ? (
-              <Text size="sm" color="text-gray-400">Loading…</Text>
-            ) : members.length > 0 ? (
-              <Stack gap={3}>
-                {members.map((member) => (
-                  <Surface
-                    key={member.driverId}
-                    variant="muted"
-                    rounded="lg"
-                    border
-                    padding={3}
-                  >
-                    <Stack direction="row" align="center" justify="between" wrap gap={4}>
-                      <Box>
-                        <Text weight="medium" color="text-white" block>{member.driver.name}</Text>
-                        <Text size="xs" color="text-gray-400" block mt={1}>{member.joinedAt}</Text>
-                      </Box>
-
-                      <Stack direction="row" align="center" gap={3}>
-                        <Box>
-                          <Select
-                            value={member.role}
-                            onChange={(e) => onRoleChange(member.driverId, e.target.value as MembershipRole)}
-                            options={roleOptions.map((role) => ({ value: role, label: role }))}
-                          />
-                        </Box>
-                        <Button
-                          onClick={() => onRemove(member.driverId)}
-                          variant="secondary"
-                          size="sm"
-                        >
-                          Remove
-                        </Button>
-                      </Stack>
-                    </Stack>
-                  </Surface>
-                ))}
-              </Stack>
-            ) : (
-              <Text size="sm" color="text-gray-500">No members found.</Text>
-            )}
+    <Stack gap={8}>
+      {/* Join Requests Section */}
+      <Box>
+        <Stack direction="row" align="center" justify="between" mb={4}>
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={UserPlus} size={4} color="text-primary-blue" />
+            <Heading level={5} color="text-primary-blue">PENDING JOIN REQUESTS</Heading>
+          </Stack>
+          <Box px={2} py={0.5} rounded="md" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
+            <Text size="xs" color="text-primary-blue" weight="bold">{pendingCountLabel}</Text>
           </Box>
         </Stack>
-      </Card>
+
+        {loading ? (
+          <Surface variant="dark" border rounded="lg" padding={12} center>
+            <Text color="text-gray-500">Loading requests...</Text>
+          </Surface>
+        ) : joinRequests.length > 0 ? (
+          <Surface variant="dark" border rounded="lg" overflow="hidden">
+            <Stack gap={0}>
+              {joinRequests.map((req) => (
+                <Box key={req.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
+                  <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={4}>
+                    <Stack gap={1}>
+                      <Text weight="bold" color="text-white">{req.driver.name}</Text>
+                      <Text size="xs" color="text-gray-500">{new Date(req.requestedAt).toLocaleString()}</Text>
+                      {req.message && (
+                        <Text size="sm" color="text-gray-400" mt={1}>&quot;{req.message}&quot;</Text>
+                      )}
+                    </Stack>
+
+                    <Stack direction="row" gap={2}>
+                      <Button onClick={() => onApprove(req.id)} variant="primary" size="sm">
+                        Approve
+                      </Button>
+                      <Button onClick={() => onReject(req.id)} variant="secondary" size="sm">
+                        Reject
+                      </Button>
+                    </Stack>
+                  </Stack>
+                </Box>
+              ))}
+            </Stack>
+          </Surface>
+        ) : (
+          <Surface variant="dark" border rounded="lg" padding={8} center>
+            <Text color="text-gray-500">No pending join requests.</Text>
+          </Surface>
+        )}
+      </Box>
+
+      {/* Members Section */}
+      <Box>
+        <Stack direction="row" align="center" gap={2} mb={4}>
+          <Icon icon={Shield} size={4} color="text-performance-green" />
+          <Heading level={5} color="text-performance-green">ACTIVE ROSTER</Heading>
+        </Stack>
+
+        {loading ? (
+          <Surface variant="dark" border rounded="lg" padding={12} center>
+            <Text color="text-gray-500">Loading members...</Text>
+          </Surface>
+        ) : members.length > 0 ? (
+          <Surface variant="dark" border rounded="lg" overflow="hidden">
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>Driver</TableHeader>
+                  <TableHeader>Joined</TableHeader>
+                  <TableHeader>Role</TableHeader>
+                  <TableHeader textAlign="right">Actions</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {members.map((member) => (
+                  <TableRow key={member.driverId}>
+                    <TableCell>
+                      <Text weight="bold" color="text-white">{member.driver.name}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text size="sm" color="text-gray-400">{new Date(member.joinedAt).toLocaleDateString()}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Box 
+                        as="select"
+                        value={member.role}
+                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onRoleChange(member.driverId, e.target.value as MembershipRole)}
+                        bg="bg-iron-gray"
+                        border
+                        borderColor="border-charcoal-outline"
+                        rounded="md"
+                        px={2}
+                        py={1}
+                        fontSize="xs"
+                        weight="bold"
+                        color="text-white"
+                      >
+                        {roleOptions.map((role) => (
+                          <Box as="option" key={role} value={role}>{role.toUpperCase()}</Box>
+                        ))}
+                      </Box>
+                    </TableCell>
+                    <TableCell textAlign="right">
+                      <Button
+                        onClick={() => onRemove(member.driverId)}
+                        variant="ghost"
+                        size="sm"
+                      >
+                        <Stack direction="row" align="center" gap={1.5}>
+                          <Icon icon={UserMinus} size={3.5} color="text-error-red" />
+                          <Text size="xs" weight="bold" color="text-error-red">REMOVE</Text>
+                        </Stack>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Surface>
+        ) : (
+          <Surface variant="dark" border rounded="lg" padding={8} center>
+            <Text color="text-gray-500">No members found.</Text>
+          </Surface>
+        )}
+      </Box>
     </Stack>
   );
 }
diff --git a/apps/website/templates/RulebookTemplate.tsx b/apps/website/templates/RulebookTemplate.tsx
index b93e9eba4..ee5564834 100644
--- a/apps/website/templates/RulebookTemplate.tsx
+++ b/apps/website/templates/RulebookTemplate.tsx
@@ -1,15 +1,9 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Badge } from '@/ui/Badge';
-import { Grid } from '@/ui/Grid';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
-import { Surface } from '@/ui/Surface';
+import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
 import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
 
 interface RulebookTemplateProps {
@@ -17,104 +11,77 @@ interface RulebookTemplateProps {
 }
 
 export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
+  const rules = [
+    {
+      id: 'points',
+      title: 'Points System',
+      content: `Points are awarded to the top ${viewData.positionPoints.length} finishers. 1st place receives ${viewData.positionPoints[0]?.points || 0} points.`
+    },
+    {
+      id: 'drops',
+      title: 'Drop Policy',
+      content: viewData.hasActiveDropPolicy ? viewData.dropPolicySummary : 'No drop races are active for this season.'
+    },
+    {
+      id: 'platform',
+      title: 'Platform & Sessions',
+      content: `Racing on ${viewData.gameName}. Sessions scored: ${viewData.sessionTypes}.`
+    }
+  ];
+
+  if (viewData.hasBonusPoints) {
+    rules.push({
+      id: 'bonus',
+      title: 'Bonus Points',
+      content: viewData.bonusPoints.join('. ')
+    });
+  }
+
   return (
-    <Stack gap={6}>
-      {/* Header */}
-      <Stack direction="row" align="center" justify="between">
-        <Box>
-          <Heading level={1}>Rulebook</Heading>
-          <Text size="sm" color="text-gray-400" block mt={1}>Official rules and regulations</Text>
-        </Box>
-        <Badge variant="primary">
-          {viewData.scoringPresetName || 'Custom Rules'}
-        </Badge>
-      </Stack>
-
-      {/* Quick Stats */}
-      <Grid cols={4} gap={4}>
-        <StatItem label="Platform" value={viewData.gameName} />
-        <StatItem label="Championships" value={viewData.championshipsCount} />
-        <StatItem label="Sessions Scored" value={viewData.sessionTypes} />
-        <StatItem label="Drop Policy" value={viewData.hasActiveDropPolicy ? 'Active' : 'None'} />
-      </Grid>
-
-      {/* Points Table */}
-      <Card>
-        <Box mb={4}>
-          <Heading level={2}>Points System</Heading>
-        </Box>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableHeader>Position</TableHeader>
-              <TableHeader>Points</TableHeader>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {viewData.positionPoints.map((point) => (
-              <TableRow key={point.position}>
-                <TableCell>
-                  <Text color="text-white">{point.position}</Text>
-                </TableCell>
-                <TableCell>
-                  <Text color="text-white">{point.points}</Text>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Card>
-
-      {/* Bonus Points */}
-      {viewData.hasBonusPoints && (
-        <Card>
-          <Box mb={4}>
-            <Heading level={2}>Bonus Points</Heading>
-          </Box>
-          <Stack gap={2}>
-            {viewData.bonusPoints.map((bonus, idx) => (
-              <Surface
-                key={idx}
-                variant="muted"
-                rounded="lg"
-                border
-                padding={3}
-              >
-                <Stack direction="row" align="center" gap={4}>
-                  <Surface variant="muted" rounded="full" padding={1} w="8" h="8" bg="bg-performance-green/10" borderColor="border-performance-green/20" display="flex" alignItems="center" justifyContent="center" border>
-                    <Text color="text-performance-green" weight="bold">+</Text>
-                  </Surface>
-                  <Text size="sm" color="text-gray-300">{bonus}</Text>
-                </Stack>
-              </Surface>
-            ))}
-          </Stack>
-        </Card>
-      )}
-
-      {/* Drop Policy */}
-      {viewData.hasActiveDropPolicy && (
-        <Card>
-          <Box mb={4}>
-            <Heading level={2}>Drop Policy</Heading>
-          </Box>
-          <Text size="sm" color="text-gray-300">{viewData.dropPolicySummary}</Text>
-          <Box mt={3}>
-            <Text size="xs" color="text-gray-500" block>
-              Drop rules are applied automatically when calculating championship standings.
+    <Box display="flex" flexDirection="col" gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Box display="flex" alignItems="center" justifyContent="between">
+          <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Rulebook</Text>
+          <Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
+            <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="widest">
+              {viewData.scoringPresetName || 'Custom Rules'}
             </Text>
           </Box>
-        </Card>
-      )}
-    </Stack>
-  );
-}
+        </Box>
+        <Text size="sm" color="text-zinc-500">Official rules and regulations for this championship.</Text>
+      </Box>
 
-function StatItem({ label, value }: { label: string, value: string | number }) {
-  return (
-    <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800" borderColor="border-neutral-800">
-      <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
-      <Text weight="semibold" color="text-white" size="lg">{value}</Text>
-    </Surface>
+      <LeagueRulesPanel rules={rules} />
+
+      <Box as="section" mt={8}>
+        <Text as="h3" size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" mb={4} block>Points Classification</Text>
+        <Box overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
+          <Box as="table" w="full" textAlign="left">
+            <Box as="thead">
+              <Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
+                <Box as="th" px={4} py={2}>
+                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Position</Text>
+                </Box>
+                <Box as="th" px={4} py={2} textAlign="right">
+                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Points</Text>
+                </Box>
+              </Box>
+            </Box>
+            <Box as="tbody">
+              {viewData.positionPoints.map((point) => (
+                <Box as="tr" key={point.position} hoverBg="zinc-800/50" transition>
+                  <Box as="td" px={4} py={2}>
+                    <Text size="sm" color="text-zinc-400" font="mono">{point.position}</Text>
+                  </Box>
+                  <Box as="td" px={4} py={2} textAlign="right">
+                    <Text size="sm" weight="bold" color="text-white">{point.points}</Text>
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 }
diff --git a/apps/website/templates/ServerErrorTemplate.tsx b/apps/website/templates/ServerErrorTemplate.tsx
new file mode 100644
index 000000000..ab985121a
--- /dev/null
+++ b/apps/website/templates/ServerErrorTemplate.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { Stack } from '@/ui/Stack';
+import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
+import { RecoveryActions } from '@/components/errors/RecoveryActions';
+import { ErrorDetails } from '@/components/errors/ErrorDetails';
+
+export interface ServerErrorViewData {
+  error: Error & { digest?: string };
+  incidentId?: string;
+}
+
+interface ServerErrorTemplateProps {
+  viewData: ServerErrorViewData;
+  onRetry: () => void;
+  onHome: () => void;
+}
+
+/**
+ * ServerErrorTemplate
+ * 
+ * Template for the 500 error page.
+ * Composes semantic error components into an "instrument-grade" layout.
+ */
+export function ServerErrorTemplate({ viewData, onRetry, onHome }: ServerErrorTemplateProps) {
+  return (
+    <Box 
+      as="main" 
+      minHeight="screen"
+      fullWidth
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="bg-deep-graphite"
+      position="relative"
+      overflow="hidden"
+      px={6}
+    >
+      {/* Background Accents */}
+      <Glow color="primary" size="xl" position="center" opacity={0.05} />
+      
+      <Surface 
+        variant="glass" 
+        border 
+        rounded="lg" 
+        padding={8} 
+        maxWidth="2xl"
+        fullWidth
+        position="relative"
+        zIndex={10}
+        shadow="xl"
+        borderColor="border-white"
+        bgOpacity={0.05}
+      >
+        <Stack gap={8} align="center">
+          <ServerErrorPanel 
+            message={viewData.error.message} 
+            incidentId={viewData.incidentId || viewData.error.digest} 
+          />
+          
+          <RecoveryActions 
+            onRetry={onRetry} 
+            onHome={onHome} 
+          />
+          
+          <ErrorDetails 
+            error={viewData.error} 
+          />
+        </Stack>
+      </Surface>
+    </Box>
+  );
+}
diff --git a/apps/website/templates/SponsorBillingTemplate.tsx b/apps/website/templates/SponsorBillingTemplate.tsx
new file mode 100644
index 000000000..b6cd30966
--- /dev/null
+++ b/apps/website/templates/SponsorBillingTemplate.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import React from 'react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { InfoBanner } from '@/ui/InfoBanner';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
+import { SponsorPayoutQueueTable, PayoutItem } from '@/components/sponsors/SponsorPayoutQueueTable';
+import { 
+  CreditCard, 
+  Building2, 
+  Download, 
+  Percent,
+  Receipt,
+  ExternalLink,
+  LucideIcon
+} from 'lucide-react';
+import { siteConfig } from '@/lib/siteConfig';
+import type { PaymentMethodDTO, InvoiceDTO } from '@/lib/types/tbd/SponsorBillingDTO';
+
+export interface SponsorBillingViewData {
+  stats: {
+    totalSpent: number;
+    pendingAmount: number;
+    nextPaymentDate: string;
+    nextPaymentAmount: number;
+    averageMonthlySpend: number;
+  };
+  paymentMethods: PaymentMethodDTO[];
+  invoices: InvoiceDTO[];
+}
+
+interface SponsorBillingTemplateProps {
+  viewData: SponsorBillingViewData;
+  billingStats: Array<{
+    label: string;
+    value: string;
+    subValue?: string;
+    icon: LucideIcon;
+    variant: 'success' | 'warning' | 'info' | 'default';
+  }>;
+  transactions: Array<{
+    id: string;
+    date: string;
+    amount: number | string;
+    status: string;
+    recipient?: string;
+    description?: string;
+    invoiceNumber?: string;
+  }>;
+  onSetDefaultPaymentMethod: (id: string) => void;
+  onDownloadInvoice: (id: string) => void;
+}
+
+export function SponsorBillingTemplate({
+  viewData,
+  billingStats,
+  transactions,
+  onSetDefaultPaymentMethod,
+  onDownloadInvoice
+}: SponsorBillingTemplateProps) {
+  // Map transactions to PayoutItems for the new table
+  const payoutItems: PayoutItem[] = transactions.map(t => ({
+    id: t.id,
+    date: t.date,
+    amount: typeof t.amount === 'number' ? t.amount.toFixed(2) : t.amount,
+    status: t.status === 'paid' ? 'completed' : t.status === 'pending' ? 'pending' : 'failed',
+    recipient: t.recipient || 'GridPilot Platform',
+    description: t.description || `Invoice ${t.invoiceNumber}`
+  }));
+
+  return (
+    <Container size="lg" py={8}>
+      <Stack gap={8}>
+        <SponsorDashboardHeader 
+          sponsorName="Sponsor" 
+          onRefresh={() => console.log('Refresh')} 
+        />
+
+        <BillingSummaryPanel stats={billingStats} />
+
+        <Box display="grid" gridCols={{ base: 1, lg: 12 }} gap={8}>
+          <Box colSpan={{ base: 1, lg: 8 }}>
+            <Stack gap={8}>
+              {/* Billing History */}
+              <Box>
+                <Stack direction="row" align="center" justify="between" mb={4}>
+                  <Heading level={3}>Billing History</Heading>
+                  <Button variant="secondary" size="sm" icon={<Icon icon={Download} size={4} />} onClick={() => onDownloadInvoice('all')}>
+                    Export All
+                  </Button>
+                </Stack>
+                <Card p={0} overflow="hidden">
+                  <SponsorPayoutQueueTable payouts={payoutItems} />
+                </Card>
+              </Box>
+
+              {/* Platform Fees & VAT */}
+              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
+                <Card overflow="hidden">
+                  <Box p={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/10">
+                    <Stack direction="row" align="center" gap={2}>
+                      <Icon icon={Percent} size={4} color="text-primary-blue" />
+                      <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
+                        Platform Fee
+                      </Text>
+                    </Stack>
+                  </Box>
+                  <Box p={5}>
+                    <Text size="3xl" weight="bold" color="text-white" block mb={2}>
+                      {siteConfig.fees.platformFeePercent}%
+                    </Text>
+                    <Text size="sm" color="text-gray-400" block>
+                      {siteConfig.fees.description}
+                    </Text>
+                  </Box>
+                </Card>
+
+                <Card overflow="hidden">
+                  <Box p={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/10">
+                    <Stack direction="row" align="center" gap={2}>
+                      <Icon icon={Receipt} size={4} color="text-performance-green" />
+                      <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
+                        VAT Information
+                      </Text>
+                    </Stack>
+                  </Box>
+                  <Box p={5}>
+                    <Text size="sm" color="text-gray-400" block mb={4}>
+                      {siteConfig.vat.notice}
+                    </Text>
+                    <Stack gap={2}>
+                      <Box display="flex" justifyContent="between">
+                        <Text size="sm" color="text-gray-500">Standard Rate</Text>
+                        <Text size="sm" color="text-white" weight="medium">{siteConfig.vat.standardRate}%</Text>
+                      </Box>
+                      <Box display="flex" justifyContent="between">
+                        <Text size="sm" color="text-gray-500">B2B Reverse Charge</Text>
+                        <Text size="sm" color="text-performance-green" weight="medium">Available</Text>
+                      </Box>
+                    </Stack>
+                  </Box>
+                </Card>
+              </Box>
+            </Stack>
+          </Box>
+
+          <Box colSpan={{ base: 1, lg: 4 }}>
+            <Stack gap={6}>
+              {/* Payment Methods */}
+              <Card>
+                <Stack gap={4}>
+                  <Heading level={3}>Payment Methods</Heading>
+                  <Stack gap={3}>
+                    {viewData.paymentMethods.map((method: PaymentMethodDTO) => (
+                      <Box 
+                        key={method.id} 
+                        p={3} 
+                        rounded="lg" 
+                        border 
+                        borderColor={method.isDefault ? 'border-primary-blue/50' : 'border-charcoal-outline/50'}
+                        bg={method.isDefault ? 'bg-primary-blue/5' : 'bg-iron-gray/5'}
+                      >
+                        <Stack direction="row" align="center" justify="between">
+                          <Stack direction="row" align="center" gap={3}>
+                            <Icon icon={method.type === 'sepa' ? Building2 : CreditCard} size={5} color={method.isDefault ? 'text-primary-blue' : 'text-gray-400'} />
+                            <Box>
+                              <Text size="sm" weight="medium" color="text-white">
+                                {method.brand || 'Bank Account'} •••• {method.last4}
+                              </Text>
+                              {method.isDefault && (
+                                <Text size="xs" color="text-primary-blue" weight="medium" block>Default</Text>
+                              )}
+                            </Box>
+                          </Stack>
+                          {!method.isDefault && (
+                            <Button variant="ghost" size="sm" onClick={() => onSetDefaultPaymentMethod(method.id)}>
+                              Set Default
+                            </Button>
+                          )}
+                        </Stack>
+                      </Box>
+                    ))}
+                  </Stack>
+                  <InfoBanner type="info">
+                    <Text size="xs">All payments are securely processed by our payment provider.</Text>
+                  </InfoBanner>
+                </Stack>
+              </Card>
+
+              {/* Support */}
+              <Card>
+                <Stack gap={4}>
+                  <Heading level={3}>Billing Support</Heading>
+                  <Text size="sm" color="text-gray-400">
+                    Need help with an invoice or have questions about your plan?
+                  </Text>
+                  <Button variant="secondary" fullWidth icon={<Icon icon={ExternalLink} size={4} />}>
+                    Contact Support
+                  </Button>
+                </Stack>
+              </Card>
+            </Stack>
+          </Box>
+        </Box>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/apps/website/templates/SponsorCampaignsTemplate.tsx b/apps/website/templates/SponsorCampaignsTemplate.tsx
new file mode 100644
index 000000000..fadffc48e
--- /dev/null
+++ b/apps/website/templates/SponsorCampaignsTemplate.tsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
+import { SponsorContractCard } from '@/components/sponsors/SponsorContractCard';
+import { 
+  Search, 
+  Check,
+  Clock,
+  Eye,
+  BarChart3,
+  LucideIcon
+} from 'lucide-react';
+
+export type SponsorshipType = 'all' | 'leagues' | 'teams' | 'drivers' | 'races' | 'platform';
+export type SponsorshipStatus = 'all' | 'active' | 'pending_approval' | 'approved' | 'rejected' | 'expired';
+
+export interface SponsorCampaignsViewData {
+  sponsorships: Array<{
+    id: string;
+    type: string;
+    status: string;
+    leagueName: string;
+    seasonName: string;
+    tier: string;
+    pricing: { amount: number; currency: string };
+    metrics: { impressions: number };
+    seasonStartDate?: Date;
+    seasonEndDate?: Date;
+  }>;
+  stats: {
+    total: number;
+    active: number;
+    pending: number;
+    approved: number;
+    rejected: number;
+    totalInvestment: number;
+    totalImpressions: number;
+  };
+}
+
+interface SponsorCampaignsTemplateProps {
+  viewData: SponsorCampaignsViewData;
+  filteredSponsorships: SponsorCampaignsViewData['sponsorships'];
+  typeFilter: SponsorshipType;
+  setTypeFilter: (type: SponsorshipType) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+}
+
+export function SponsorCampaignsTemplate({ 
+  viewData,
+  filteredSponsorships,
+  typeFilter,
+  setTypeFilter,
+  searchQuery,
+  setSearchQuery
+}: SponsorCampaignsTemplateProps) {
+  const billingStats: Array<{
+    label: string;
+    value: string | number;
+    icon: LucideIcon;
+    variant: 'success' | 'warning' | 'info' | 'default';
+  }> = [
+    {
+      label: 'Active Campaigns',
+      value: viewData.stats.active,
+      icon: Check,
+      variant: 'success',
+    },
+    {
+      label: 'Pending Approval',
+      value: viewData.stats.pending,
+      icon: Clock,
+      variant: viewData.stats.pending > 0 ? 'warning' : 'default',
+    },
+    {
+      label: 'Total Investment',
+      value: `$${viewData.stats.totalInvestment.toLocaleString()}`,
+      icon: BarChart3,
+      variant: 'info',
+    },
+    {
+      label: 'Total Impressions',
+      value: `${(viewData.stats.totalImpressions / 1000).toFixed(0)}k`,
+      icon: Eye,
+      variant: 'default',
+    },
+  ];
+
+  return (
+    <Container size="lg" py={8}>
+      <Stack gap={8}>
+        <SponsorDashboardHeader 
+          sponsorName="Sponsor" 
+          onRefresh={() => console.log('Refresh')} 
+        />
+
+        <BillingSummaryPanel stats={billingStats} />
+
+        <Box>
+          <Stack direction={{ base: 'col', lg: 'row' }} gap={4} mb={6}>
+            <Box position="relative" flexGrow={1}>
+              <Box position="absolute" left={3} top="1/2" transform="-translate-y-1/2">
+                <Icon icon={Search} size={4} color="text-gray-500" />
+              </Box>
+              <Box 
+                as="input"
+                type="text"
+                placeholder="Search sponsorships..."
+                value={searchQuery}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                w="full"
+                pl={10}
+                pr={4}
+                py={2}
+                rounded="lg"
+                border
+                borderColor="border-charcoal-outline"
+                bg="bg-iron-gray/50"
+                color="text-white"
+                outline="none"
+                focusBorderColor="border-primary-blue"
+              />
+            </Box>
+
+            <Stack direction="row" gap={2} overflow="auto" pb={{ base: 2, lg: 0 }}>
+              {(['all', 'leagues', 'teams', 'drivers'] as const).map((type) => (
+                <Button
+                  key={type}
+                  variant={typeFilter === type ? 'primary' : 'secondary'}
+                  size="sm"
+                  onClick={() => setTypeFilter(type)}
+                >
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </Button>
+              ))}
+            </Stack>
+          </Stack>
+
+          <Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={4}>
+            {filteredSponsorships.map((s) => {
+              return (
+                <SponsorContractCard
+                  key={s.id}
+                  id={s.id}
+                  type="league"
+                  status={s.status}
+                  title={s.leagueName}
+                  subtitle={s.seasonName}
+                  tier={s.tier}
+                  investment={`$${s.pricing.amount.toLocaleString()}`}
+                  impressions={s.metrics.impressions.toLocaleString()}
+                  startDate={s.seasonStartDate ? new Date(s.seasonStartDate).toLocaleDateString() : undefined}
+                  endDate={s.seasonEndDate ? new Date(s.seasonEndDate).toLocaleDateString() : undefined}
+                />
+              );
+            })}
+          </Box>
+        </Box>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/apps/website/templates/SponsorDashboardTemplate.tsx b/apps/website/templates/SponsorDashboardTemplate.tsx
index 15d7a4ace..5c3964a5b 100644
--- a/apps/website/templates/SponsorDashboardTemplate.tsx
+++ b/apps/website/templates/SponsorDashboardTemplate.tsx
@@ -6,38 +6,32 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Link } from '@/ui/Link';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
-import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
-import { Badge } from '@/ui/Badge';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { SponsorContractCard } from '@/components/sponsors/SponsorContractCard';
 import { MetricCard } from '@/components/sponsors/MetricCard';
 import { SponsorshipCategoryCard } from '@/components/sponsors/SponsorshipCategoryCard';
-import { ActivityItem } from '@/components/sponsors/ActivityItem';
 import { RenewalAlert } from '@/components/sponsors/RenewalAlert';
+import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
+import { SponsorActivityPanel, Activity } from '@/components/sponsors/SponsorActivityPanel';
 import {
   Eye,
   Users,
   Trophy,
   TrendingUp,
   DollarSign,
-  Target,
-  ExternalLink,
-  Car,
-  Flag,
-  Megaphone,
   ChevronRight,
   Plus,
   Bell,
-  Settings,
-  CreditCard,
-  FileText,
-  RefreshCw,
-  BarChart3,
-  Calendar
+  Clock,
+  Car,
+  Flag,
+  Megaphone,
+  LucideIcon
 } from 'lucide-react';
 import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
 import { routes } from '@/lib/routing/RouteConfig';
@@ -49,43 +43,59 @@ interface SponsorDashboardTemplateProps {
 export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateProps) {
   const categoryData = viewData.categoryData;
 
+  const billingStats: Array<{
+    label: string;
+    value: string | number;
+    icon: LucideIcon;
+    variant: 'info' | 'success' | 'default' | 'warning';
+  }> = [
+    {
+      label: 'Total Investment',
+      value: viewData.formattedTotalInvestment,
+      icon: DollarSign,
+      variant: 'info',
+    },
+    {
+      label: 'Active Sponsorships',
+      value: viewData.activeSponsorships,
+      icon: Trophy,
+      variant: 'success',
+    },
+    {
+      label: 'Cost per 1K Views',
+      value: viewData.costPerThousandViews,
+      icon: Eye,
+      variant: 'default',
+    },
+    {
+      label: 'Upcoming Renewals',
+      value: viewData.upcomingRenewals.length,
+      icon: Bell,
+      variant: viewData.upcomingRenewals.length > 0 ? 'warning' : 'default',
+    },
+  ];
+
+  const activities: Activity[] = viewData.recentActivity.map(a => ({
+    id: a.id,
+    type: 'sponsorship_approved', // Mapping logic would go here
+    title: a.message,
+    description: a.formattedImpressions ? `${a.formattedImpressions} impressions` : '',
+    timestamp: a.time,
+    icon: Clock,
+    color: a.typeColor || 'text-primary-blue',
+  }));
+
   return (
     <Container size="lg" py={8}>
       <Stack gap={8}>
         {/* Header */}
-        <Stack direction="row" align="center" justify="between" wrap gap={4}>
-          <Box>
-            <Heading level={2}>Sponsor Dashboard</Heading>
-            <Text color="text-gray-400" block mt={1}>Welcome back, {viewData.sponsorName}</Text>
-          </Box>
-          <Stack direction="row" align="center" gap={3}>
-            {/* Time Range Selector */}
-            <Surface variant="muted" rounded="lg" padding={1}>
-              <Stack direction="row" align="center">
-                {(['7d', '30d', '90d', 'all'] as const).map((range) => (
-                  <Button
-                    key={range}
-                    variant="ghost"
-                    size="sm"
-                  >
-                    {range === 'all' ? 'All' : range}
-                  </Button>
-                ))}
-              </Stack>
-            </Surface>
+        <SponsorDashboardHeader 
+          sponsorName={viewData.sponsorName} 
+          onRefresh={() => console.log('Refresh')} 
+        />
 
-            <Button variant="secondary">
-              <Icon icon={RefreshCw} size={4} />
-            </Button>
-            <Box>
-              <Link href={routes.sponsor.settings} variant="ghost">
-                <Button variant="secondary">
-                  <Icon icon={Settings} size={4} />
-                </Button>
-              </Link>
-            </Box>
-          </Stack>
-        </Stack>
+        {/* Billing Summary */}
+        <BillingSummaryPanel stats={billingStats} />
 
         {/* Key Metrics */}
         <Grid cols={4} gap={4}>
@@ -120,167 +130,135 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
           />
         </Grid>
 
-        {/* Sponsorship Categories */}
-        <Box>
-          <Stack direction="row" align="center" justify="between" mb={4}>
-            <Heading level={3}>Your Sponsorships</Heading>
-            <Box>
-              <Link href={routes.sponsor.campaigns} variant="primary">
-                <Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
-                  View All
-                </Button>
-              </Link>
-            </Box>
-          </Stack>
-
-          <Grid cols={5} gap={4}>
-            <SponsorshipCategoryCard
-              icon={Trophy}
-              title="Leagues"
-              count={categoryData.leagues.count}
-              impressions={categoryData.leagues.impressions}
-              color="#3b82f6"
-              href="/sponsor/campaigns?type=leagues"
-            />
-            <SponsorshipCategoryCard
-              icon={Users}
-              title="Teams"
-              count={categoryData.teams.count}
-              impressions={categoryData.teams.impressions}
-              color="#a855f7"
-              href="/sponsor/campaigns?type=teams"
-            />
-            <SponsorshipCategoryCard
-              icon={Car}
-              title="Drivers"
-              count={categoryData.drivers.count}
-              impressions={categoryData.drivers.impressions}
-              color="#10b981"
-              href="/sponsor/campaigns?type=drivers"
-            />
-            <SponsorshipCategoryCard
-              icon={Flag}
-              title="Races"
-              count={categoryData.races.count}
-              impressions={categoryData.races.impressions}
-              color="#f59e0b"
-              href="/sponsor/campaigns?type=races"
-            />
-            <SponsorshipCategoryCard
-              icon={Megaphone}
-              title="Platform Ads"
-              count={categoryData.platform.count}
-              impressions={categoryData.platform.impressions}
-              color="#ef4444"
-              href="/sponsor/campaigns?type=platform"
-            />
-          </Grid>
-        </Box>
-
         {/* Main Content Grid */}
         <Grid cols={12} gap={6}>
           <GridItem colSpan={12} lgSpan={8}>
             <Stack gap={6}>
-              {/* Top Performing Sponsorships */}
-              <Card p={0}>
-                <Box p={4} borderBottom borderColor="border-neutral-800">
-                  <Stack direction="row" align="center" justify="between">
-                    <Heading level={3}>Top Performing</Heading>
-                    <Box>
-                      <Link href={routes.public.leagues} variant="primary">
-                        <Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
-                          Find More
-                        </Button>
-                      </Link>
-                    </Box>
-                  </Stack>
-                </Box>
-                <Box p={4}>
-                  <Surface variant="muted" rounded="lg" padding={4}>
-                    <Stack direction="row" align="center" justify="between">
-                      <Stack direction="row" align="center" gap={4}>
-                        <Badge variant="primary">Main</Badge>
-                        <Box>
-                          <Stack direction="row" align="center" gap={2}>
-                            <Icon icon={Trophy} size={4} color="#737373" />
-                            <Text weight="medium" color="text-white">Sample League</Text>
-                          </Stack>
-                          <Text size="sm" color="text-gray-500" block mt={1}>Sample details</Text>
-                        </Box>
-                      </Stack>
-                      <Stack direction="row" align="center" gap={4}>
-                        <Box textAlign="right">
-                          <Text weight="semibold" color="text-white" block>1.2k</Text>
-                          <Text size="xs" color="text-gray-500">impressions</Text>
-                        </Box>
-                        <Button variant="secondary" size="sm">
-                          <Icon icon={ExternalLink} size={3} />
-                        </Button>
-                      </Stack>
-                    </Stack>
-                  </Surface>
-                </Box>
-              </Card>
+              {/* Sponsorship Categories */}
+              <Box>
+                <Stack direction="row" align="center" justify="between" mb={4}>
+                  <Heading level={3}>Your Sponsorships</Heading>
+                  <Link href={routes.sponsor.campaigns}>
+                    <Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
+                      View All
+                    </Button>
+                  </Link>
+                </Stack>
 
-              {/* Upcoming Events */}
-              <Card p={0}>
-                <Box p={4} borderBottom borderColor="border-neutral-800">
-                  <Heading level={3} icon={<Icon icon={Calendar} size={5} color="#f59e0b" />}>
-                    Upcoming Sponsored Events
-                  </Heading>
-                </Box>
-                <Box p={4}>
-                  <Stack align="center" gap={2} py={8}>
-                    <Icon icon={Calendar} size={8} color="#737373" />
-                    <Text color="text-gray-400">No upcoming sponsored events</Text>
-                  </Stack>
-                </Box>
-              </Card>
+                <Grid cols={5} gap={4}>
+                  <SponsorshipCategoryCard
+                    icon={Trophy}
+                    title="Leagues"
+                    count={categoryData.leagues.count}
+                    impressions={categoryData.leagues.impressions}
+                    color="#3b82f6"
+                    href="/sponsor/campaigns?type=leagues"
+                  />
+                  <SponsorshipCategoryCard
+                    icon={Users}
+                    title="Teams"
+                    count={categoryData.teams.count}
+                    impressions={categoryData.teams.impressions}
+                    color="#a855f7"
+                    href="/sponsor/campaigns?type=teams"
+                  />
+                  <SponsorshipCategoryCard
+                    icon={Car}
+                    title="Drivers"
+                    count={categoryData.drivers.count}
+                    impressions={categoryData.drivers.impressions}
+                    color="#10b981"
+                    href="/sponsor/campaigns?type=drivers"
+                  />
+                  <SponsorshipCategoryCard
+                    icon={Flag}
+                    title="Races"
+                    count={categoryData.races.count}
+                    impressions={categoryData.races.impressions}
+                    color="#f59e0b"
+                    href="/sponsor/campaigns?type=races"
+                  />
+                  <SponsorshipCategoryCard
+                    icon={Megaphone}
+                    title="Platform Ads"
+                    count={categoryData.platform.count}
+                    impressions={categoryData.platform.impressions}
+                    color="#ef4444"
+                    href="/sponsor/campaigns?type=platform"
+                  />
+                </Grid>
+              </Box>
+
+              {/* Top Performing Sponsorships */}
+              <Box>
+                <Stack direction="row" align="center" justify="between" mb={4}>
+                  <Heading level={3}>Top Performing</Heading>
+                  <Link href={routes.public.leagues}>
+                    <Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
+                      Find More
+                    </Button>
+                  </Link>
+                </Stack>
+                <Grid cols={2} gap={4}>
+                  <SponsorContractCard
+                    id="sample-1"
+                    type="league"
+                    status="active"
+                    title="Sample League"
+                    subtitle="Season 5 • GT3 Series"
+                    tier="Main Sponsor"
+                    investment="$2,500"
+                    impressions="1.2M"
+                    startDate="2025-10-01"
+                    endDate="2026-02-15"
+                  />
+                  <SponsorContractCard
+                    id="sample-2"
+                    type="team"
+                    status="active"
+                    title="Apex Racing Team"
+                    subtitle="Endurance Championship"
+                    tier="Secondary Sponsor"
+                    investment="$1,200"
+                    impressions="450k"
+                    startDate="2025-11-15"
+                    endDate="2026-03-20"
+                  />
+                </Grid>
+              </Box>
             </Stack>
           </GridItem>
 
           <GridItem colSpan={12} lgSpan={4}>
             <Stack gap={6}>
+              {/* Recent Activity */}
+              <SponsorActivityPanel activities={activities} />
+
               {/* Quick Actions */}
               <Card>
                 <Stack gap={4}>
                   <Heading level={3}>Quick Actions</Heading>
                   <Stack gap={2}>
-                    <Box>
-                      <Link href={routes.public.leagues} variant="ghost">
-                        <Button variant="secondary" fullWidth icon={<Icon icon={Target} size={4} />}>
-                          Find Leagues to Sponsor
-                        </Button>
-                      </Link>
-                    </Box>
-                    <Box>
-                      <Link href={routes.public.teams} variant="ghost">
-                        <Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
-                          Browse Teams
-                        </Button>
-                      </Link>
-                    </Box>
-                    <Box>
-                      <Link href={routes.public.drivers} variant="ghost">
-                        <Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
-                          Discover Drivers
-                        </Button>
-                      </Link>
-                    </Box>
-                    <Box>
-                      <Link href={routes.sponsor.billing} variant="ghost">
-                        <Button variant="secondary" fullWidth icon={<Icon icon={CreditCard} size={4} />}>
-                          Manage Billing
-                        </Button>
-                      </Link>
-                    </Box>
-                    <Box>
-                      <Link href={routes.sponsor.campaigns} variant="ghost">
-                        <Button variant="secondary" fullWidth icon={<Icon icon={BarChart3} size={4} />}>
-                          View Analytics
-                        </Button>
-                      </Link>
-                    </Box>
+                    <Link href={routes.public.leagues}>
+                      <Button variant="secondary" fullWidth icon={<Icon icon={Trophy} size={4} />}>
+                        Find Leagues to Sponsor
+                      </Button>
+                    </Link>
+                    <Link href={routes.public.teams}>
+                      <Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
+                        Browse Teams
+                      </Button>
+                    </Link>
+                    <Link href={routes.public.drivers}>
+                      <Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
+                        Discover Drivers
+                      </Button>
+                    </Link>
+                    <Link href={routes.sponsor.billing}>
+                      <Button variant="secondary" fullWidth icon={<Icon icon={DollarSign} size={4} />}>
+                        Manage Billing
+                      </Button>
+                    </Link>
                   </Stack>
                 </Stack>
               </Card>
@@ -300,56 +278,6 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
                   </Stack>
                 </Card>
               )}
-
-              {/* Recent Activity */}
-              <Card>
-                <Stack gap={4}>
-                  <Heading level={3}>Recent Activity</Heading>
-                  <Box>
-                    {viewData.recentActivity.map((activity) => (
-                      <ActivityItem key={activity.id} activity={activity} />
-                    ))}
-                  </Box>
-                </Stack>
-              </Card>
-
-              {/* Investment Summary */}
-              <Card>
-                <Stack gap={4}>
-                  <Heading level={3} icon={<Icon icon={FileText} size={5} color="#3b82f6" />}>
-                    Investment Summary
-                  </Heading>
-                  <Stack gap={3}>
-                    <Stack direction="row" align="center" justify="between">
-                      <Text color="text-gray-400">Active Sponsorships</Text>
-                      <Text weight="medium" color="text-white">{viewData.activeSponsorships}</Text>
-                    </Stack>
-                    <Stack direction="row" align="center" justify="between">
-                      <Text color="text-gray-400">Total Investment</Text>
-                      <Text weight="medium" color="text-white">{viewData.formattedTotalInvestment}</Text>
-                    </Stack>
-                    <Stack direction="row" align="center" justify="between">
-                      <Text color="text-gray-400">Cost per 1K Views</Text>
-                      <Text weight="medium" color="text-performance-green">
-                        {viewData.costPerThousandViews}
-                      </Text>
-                    </Stack>
-                    <Stack direction="row" align="center" justify="between">
-                      <Text color="text-gray-400">Next Invoice</Text>
-                      <Text weight="medium" color="text-white">Jan 1, 2026</Text>
-                    </Stack>
-                    <Box pt={3} borderTop borderColor="border-neutral-800">
-                      <Box>
-                        <Link href={routes.sponsor.billing} variant="ghost">
-                          <Button variant="secondary" fullWidth size="sm" icon={<Icon icon={CreditCard} size={4} />}>
-                            View Billing Details
-                          </Button>
-                        </Link>
-                      </Box>
-                    </Box>
-                  </Stack>
-                </Stack>
-              </Card>
             </Stack>
           </GridItem>
         </Grid>
diff --git a/apps/website/templates/SponsorLeagueDetailTemplate.tsx b/apps/website/templates/SponsorLeagueDetailTemplate.tsx
index 21521a955..6daf2e0e4 100644
--- a/apps/website/templates/SponsorLeagueDetailTemplate.tsx
+++ b/apps/website/templates/SponsorLeagueDetailTemplate.tsx
@@ -1,14 +1,16 @@
 'use client';
 
 import React from 'react';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { PricingTableShell, PricingTier } from '@/components/sponsors/PricingTableShell';
+import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
+import { SponsorBrandingPreview } from '@/components/sponsors/SponsorBrandingPreview';
+import { SponsorStatusChip } from '@/components/sponsors/SponsorStatusChip';
 import {
   Trophy,
-  Users,
   Calendar,
   Eye,
   TrendingUp,
-  ExternalLink,
-  Star,
   Flag,
   BarChart3,
   Megaphone,
@@ -28,9 +30,6 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
-import { Badge } from '@/ui/Badge';
-import { SponsorTierCard } from '@/components/sponsors/SponsorTierCard';
-import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
 import { siteConfig } from '@/lib/siteConfig';
 import { routes } from '@/lib/routing/RouteConfig';
 
@@ -118,6 +117,60 @@ export function SponsorLeagueDetailTemplate({
 }: SponsorLeagueDetailTemplateProps) {
   const league = viewData.league;
 
+  const billingStats: Array<{
+    label: string;
+    value: string | number;
+    icon: LucideIcon;
+    variant: 'info' | 'success' | 'warning' | 'default';
+  }> = [
+    {
+      label: 'Total Views',
+      value: league.formattedTotalImpressions,
+      icon: Eye,
+      variant: 'info',
+    },
+    {
+      label: 'Avg/Race',
+      value: league.formattedAvgViewsPerRace,
+      icon: TrendingUp,
+      variant: 'success',
+    },
+    {
+      label: 'Engagement',
+      value: `${league.engagement}%`,
+      icon: BarChart3,
+      variant: 'warning',
+    },
+    {
+      label: 'Races Left',
+      value: league.racesLeft,
+      icon: Calendar,
+      variant: 'default',
+    },
+  ];
+
+  const pricingTiers: PricingTier[] = [
+    {
+      id: 'main',
+      name: 'Main Sponsor',
+      price: league.sponsorSlots.main.price,
+      period: 'Season',
+      description: 'Exclusive primary branding across all league assets.',
+      features: league.sponsorSlots.main.benefits,
+      available: league.sponsorSlots.main.available,
+      isPopular: true,
+    },
+    {
+      id: 'secondary',
+      name: 'Secondary Sponsor',
+      price: league.sponsorSlots.secondary.price,
+      period: 'Season',
+      description: 'Supporting branding on cars and broadcast overlays.',
+      features: league.sponsorSlots.secondary.benefits,
+      available: league.sponsorSlots.secondary.available > 0,
+    }
+  ];
+
   return (
     <Container size="lg" py={8}>
       <Stack gap={8}>
@@ -137,49 +190,13 @@ export function SponsorLeagueDetailTemplate({
         </Box>
 
         {/* Header */}
-        <Stack direction="row" align="start" justify="between" wrap gap={6}>
-          <Box flexGrow={1}>
-            <Stack direction="row" align="center" gap={3} mb={2}>
-              <Badge variant="primary">⭐ {league.tier}</Badge>
-              <Badge variant="success">Active Season</Badge>
-              <Surface variant="muted" rounded="lg" padding={1} bg="bg-neutral-800/50" px={2}>
-                <Stack direction="row" align="center" gap={1}>
-                  <Icon icon={Star} size={3.5} color="#facc15" />
-                  <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
-                </Stack>
-              </Surface>
-            </Stack>
-            <Heading level={1}>{league.name}</Heading>
-            <Text color="text-gray-400" block mt={2}>
-              {league.game} • {league.season} • {league.completedRaces}/{league.races} races completed
-            </Text>
-            <Text color="text-gray-400" block mt={4} maxWidth="42rem">
-              {league.description}
-            </Text>
-          </Box>
-          
-          <Stack direction="row" gap={3}>
-            <Link href={routes.league.detail(league.id)}>
-              <Button variant="secondary" icon={<Icon icon={ExternalLink} size={4} />}>
-                View League
-              </Button>
-            </Link>
-            {(league.sponsorSlots.main.available || league.sponsorSlots.secondary.available > 0) && (
-              <Button variant="primary" onClick={() => setActiveTab('sponsor')} icon={<Icon icon={Megaphone} size={4} />}>
-                Become a Sponsor
-              </Button>
-            )}
-          </Stack>
-        </Stack>
+        <SponsorDashboardHeader 
+          sponsorName="Sponsor" 
+          onRefresh={() => console.log('Refresh')} 
+        />
 
         {/* Quick Stats */}
-        <Grid cols={5} gap={4}>
-          <StatCard icon={Eye} label="Total Views" value={league.formattedTotalImpressions} color="#3b82f6" />
-          <StatCard icon={TrendingUp} label="Avg/Race" value={league.formattedAvgViewsPerRace} color="#10b981" />
-          <StatCard icon={Users} label="Drivers" value={league.drivers} color="#a855f7" />
-          <StatCard icon={BarChart3} label="Engagement" value={`${league.engagement}%`} color="#f59e0b" />
-          <StatCard icon={Calendar} label="Races Left" value={league.racesLeft} color="#ef4444" />
-        </Grid>
+        <BillingSummaryPanel stats={billingStats} />
 
         {/* Tabs */}
         <Box borderBottom borderColor="border-neutral-800">
@@ -321,11 +338,11 @@ export function SponsorLeagueDetailTemplate({
                     <Box>
                       {race.status === 'completed' ? (
                         <Box textAlign="right">
-                          <Text weight="semibold" color="text-white" block>{NumberDisplay.format(race.views)}</Text>
+                          <Text weight="semibold" color="text-white" block>{race.views.toLocaleString()}</Text>
                           <Text size="xs" color="text-gray-500">views</Text>
                         </Box>
                       ) : (
-                        <Badge variant="warning">Upcoming</Badge>
+                        <SponsorStatusChip status="pending" label="Upcoming" />
                       )}
                     </Box>
                   </Stack>
@@ -336,85 +353,65 @@ export function SponsorLeagueDetailTemplate({
         )}
 
         {activeTab === 'sponsor' && (
-          <Stack gap={6}>
-            <Grid cols={2} gap={6}>
-              <SponsorTierCard
-                type="main"
-                available={league.sponsorSlots.main.available}
-                price={league.sponsorSlots.main.price}
-                benefits={league.sponsorSlots.main.benefits}
-                isSelected={selectedTier === 'main'}
-                onClick={() => setSelectedTier('main')}
+          <Grid cols={12} gap={6}>
+            <GridItem colSpan={12} lgSpan={8}>
+              <PricingTableShell 
+                title="Sponsorship Tiers"
+                tiers={pricingTiers}
+                selectedId={selectedTier}
+                onSelect={(id) => setSelectedTier(id as 'main' | 'secondary')}
               />
-              <SponsorTierCard
-                type="secondary"
-                available={league.sponsorSlots.secondary.available > 0}
-                availableCount={league.sponsorSlots.secondary.available}
-                totalCount={league.sponsorSlots.secondary.total}
-                price={league.sponsorSlots.secondary.price}
-                benefits={league.sponsorSlots.secondary.benefits}
-                isSelected={selectedTier === 'secondary'}
-                onClick={() => setSelectedTier('secondary')}
-              />
-            </Grid>
-
-            <Card>
-              <Box mb={4}>
-                <Heading level={2} icon={<Icon icon={CreditCard} size={5} color="#3b82f6" />}>
-                  Sponsorship Summary
-                </Heading>
-              </Box>
-              
-              <Stack gap={3} mb={6}>
-                <InfoRow label="Selected Tier" value={`${selectedTier.charAt(0).toUpperCase() + selectedTier.slice(1)} Sponsor`} />
-                <InfoRow label="Season Price" value={`$${selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price}`} />
-                <InfoRow label={`Platform Fee (${siteConfig.fees.platformFeePercent}%)`} value={`$${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * siteConfig.fees.platformFeePercent / 100).toFixed(2)}`} />
-                <Box pt={4} borderTop borderColor="border-neutral-800">
-                  <Stack direction="row" align="center" justify="between">
-                    <Text weight="semibold" color="text-white">Total (excl. VAT)</Text>
-                    <Text size="xl" weight="bold" color="text-white">
-                      ${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * (1 + siteConfig.fees.platformFeePercent / 100)).toFixed(2)}
-                    </Text>
+            </GridItem>
+            
+            <GridItem colSpan={12} lgSpan={4}>
+              <Stack gap={6}>
+                <SponsorBrandingPreview 
+                  name="Your Brand" 
+                />
+                
+                <Card>
+                  <Box mb={4}>
+                    <Heading level={2} icon={<Icon icon={CreditCard} size={5} color="#3b82f6" />}>
+                      Sponsorship Summary
+                    </Heading>
+                  </Box>
+                  
+                  <Stack gap={3} mb={6}>
+                    <InfoRow label="Selected Tier" value={`${selectedTier.charAt(0).toUpperCase() + selectedTier.slice(1)} Sponsor`} />
+                    <InfoRow label="Season Price" value={`$${selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price}`} />
+                    <InfoRow label={`Platform Fee (${siteConfig.fees.platformFeePercent}%)`} value={`$${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * siteConfig.fees.platformFeePercent / 100).toFixed(2)}`} />
+                    <Box pt={4} borderTop borderColor="border-neutral-800">
+                      <Stack direction="row" align="center" justify="between">
+                        <Text weight="semibold" color="text-white">Total (excl. VAT)</Text>
+                        <Text size="xl" weight="bold" color="text-white">
+                          ${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * (1 + siteConfig.fees.platformFeePercent / 100)).toFixed(2)}
+                        </Text>
+                      </Stack>
+                    </Box>
                   </Stack>
-                </Box>
-              </Stack>
 
-              <Text size="xs" color="text-gray-500" block mb={4}>
-                {siteConfig.vat.notice}
-              </Text>
+                  <Text size="xs" color="text-gray-500" block mb={4}>
+                    {siteConfig.vat.notice}
+                  </Text>
 
-              <Stack direction="row" gap={3}>
-                <Button variant="primary" fullWidth icon={<Icon icon={Megaphone} size={4} />}>
-                  Request Sponsorship
-                </Button>
-                <Button variant="secondary" icon={<Icon icon={FileText} size={4} />}>
-                  Download Info Pack
-                </Button>
+                  <Stack direction="row" gap={3}>
+                    <Button variant="primary" fullWidth icon={<Icon icon={Megaphone} size={4} />}>
+                      Request Sponsorship
+                    </Button>
+                    <Button variant="secondary" icon={<Icon icon={FileText} size={4} />}>
+                      Download Info Pack
+                    </Button>
+                  </Stack>
+                </Card>
               </Stack>
-            </Card>
-          </Stack>
+            </GridItem>
+          </Grid>
         )}
       </Stack>
     </Container>
   );
 }
 
-function StatCard({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string | number, color: string }) {
-  return (
-    <Card>
-      <Stack direction="row" align="center" gap={3}>
-        <Surface variant="muted" rounded="lg" padding={2} bg={`${color}1A`}>
-          <Icon icon={icon} size={5} color={color} />
-        </Surface>
-        <Box>
-          <Text size="xl" weight="bold" color="text-white" block>{value}</Text>
-          <Text size="xs" color="text-gray-500" block>{label}</Text>
-        </Box>
-      </Stack>
-    </Card>
-  );
-}
-
 function InfoRow({ label, value, color = 'text-white', last }: { label: string, value: string | number, color?: string, last?: boolean }) {
   return (
     <Box py={2} borderBottom={!last} borderColor="border-neutral-800/50">
diff --git a/apps/website/templates/SponsorLeaguesTemplate.tsx b/apps/website/templates/SponsorLeaguesTemplate.tsx
index 40e165917..83322a2a5 100644
--- a/apps/website/templates/SponsorLeaguesTemplate.tsx
+++ b/apps/website/templates/SponsorLeaguesTemplate.tsx
@@ -22,6 +22,7 @@ import {
 } from 'lucide-react';
 import { siteConfig } from '@/lib/siteConfig';
 import { routes } from '@/lib/routing/RouteConfig';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
 import { AvailableLeagueCard } from '@/components/sponsors/AvailableLeagueCard';
 import { Input } from '@/ui/Input';
 
@@ -47,7 +48,7 @@ export type SortOption = 'rating' | 'drivers' | 'price' | 'views';
 export type TierFilter = 'all' | 'premium' | 'standard' | 'starter';
 export type AvailabilityFilter = 'all' | 'main' | 'secondary';
 
-interface SponsorLeaguesViewData {
+export interface SponsorLeaguesViewData {
   leagues: AvailableLeague[];
   stats: {
     total: number;
@@ -88,14 +89,10 @@ export function SponsorLeaguesTemplate({
         </Box>
 
         {/* Header */}
-        <Box>
-          <Heading level={1} icon={<Icon icon={Trophy} size={7} color="#3b82f6" />}>
-            League Sponsorship Marketplace
-          </Heading>
-          <Text color="text-gray-400" block mt={2}>
-            Discover racing leagues looking for sponsors. All prices shown exclude VAT.
-          </Text>
-        </Box>
+        <SponsorDashboardHeader 
+          sponsorName="Sponsor" 
+          onRefresh={() => console.log('Refresh')} 
+        />
 
         {/* Stats Overview */}
         <Grid cols={5} gap={4}>
diff --git a/apps/website/templates/SponsorSettingsTemplate.tsx b/apps/website/templates/SponsorSettingsTemplate.tsx
new file mode 100644
index 000000000..327f42a06
--- /dev/null
+++ b/apps/website/templates/SponsorSettingsTemplate.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
+import { Toggle } from '@/ui/Toggle';
+import { FormField } from '@/ui/FormField';
+import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { 
+  Building2, 
+  Save, 
+  Bell, 
+  AlertCircle,
+  RefreshCw
+} from 'lucide-react';
+
+export interface SponsorSettingsViewData {
+  profile: {
+    companyName: string;
+    contactName: string;
+    contactEmail: string;
+    description: string;
+    industry: string;
+  };
+  notifications: {
+    emailNewSponsorships: boolean;
+    emailWeeklyReport: boolean;
+    emailPaymentAlerts: boolean;
+  };
+  privacy: {
+    publicProfile: boolean;
+    showStats: boolean;
+    showActiveSponsorships: boolean;
+    allowDirectContact: boolean;
+  };
+}
+
+interface SponsorSettingsTemplateProps {
+  viewData: SponsorSettingsViewData;
+  profile: {
+    companyName: string;
+    contactName: string;
+    contactEmail: string;
+    description: string;
+    industry: string;
+  };
+  setProfile: (profile: {
+    companyName: string;
+    contactName: string;
+    contactEmail: string;
+    description: string;
+    industry: string;
+  }) => void;
+  notifications: {
+    emailNewSponsorships: boolean;
+    emailWeeklyReport: boolean;
+    emailPaymentAlerts: boolean;
+  };
+  setNotifications: (notifications: {
+    emailNewSponsorships: boolean;
+    emailWeeklyReport: boolean;
+    emailPaymentAlerts: boolean;
+  }) => void;
+  onSaveProfile: () => void | Promise<void>;
+  onDeleteAccount: () => void | Promise<void>;
+  saving: boolean;
+  saved: boolean;
+}
+
+export function SponsorSettingsTemplate({
+  profile,
+  setProfile,
+  notifications,
+  setNotifications,
+  onSaveProfile,
+  onDeleteAccount,
+  saving,
+}: SponsorSettingsTemplateProps) {
+  return (
+    <Container size="md" py={8}>
+      <Stack gap={8}>
+        <SponsorDashboardHeader 
+          sponsorName={profile.companyName} 
+          onRefresh={() => console.log('Refresh')} 
+        />
+
+        <Stack gap={6}>
+          {/* Company Profile */}
+          <Card>
+            <Stack gap={6}>
+              <Heading level={3} icon={<Icon icon={Building2} size={5} color="text-primary-blue" />}>
+                Company Profile
+              </Heading>
+              
+              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
+                <FormField label="Company Name" required>
+                  <Input 
+                    value={profile.companyName} 
+                    onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
+                  />
+                </FormField>
+                <FormField label="Industry">
+                  <Input 
+                    value={profile.industry} 
+                    onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
+                  />
+                </FormField>
+                <FormField label="Contact Name" required>
+                  <Input 
+                    value={profile.contactName} 
+                    onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
+                  />
+                </FormField>
+                <FormField label="Contact Email" required>
+                  <Input 
+                    value={profile.contactEmail} 
+                    onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
+                  />
+                </FormField>
+              </Box>
+
+              <FormField label="Company Description">
+                <Box 
+                  as="textarea" 
+                  rows={4}
+                  value={profile.description}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setProfile({ ...profile, description: e.target.value })}
+                  w="full"
+                  p={3}
+                  rounded="lg"
+                  border
+                  borderColor="border-charcoal-outline"
+                  bg="bg-iron-gray/50"
+                  color="text-white"
+                  outline="none"
+                  focusBorderColor="border-primary-blue"
+                />
+              </FormField>
+
+              <Box display="flex" justifyContent="end">
+                <Button 
+                  variant="primary" 
+                  onClick={onSaveProfile} 
+                  disabled={saving}
+                  icon={<Icon icon={saving ? RefreshCw : Save} size={4} animate={saving ? 'spin' : undefined} />}
+                >
+                  {saving ? 'Saving...' : 'Save Changes'}
+                </Button>
+              </Box>
+            </Stack>
+          </Card>
+
+          {/* Notifications */}
+          <Card>
+            <Stack gap={6}>
+              <Heading level={3} icon={<Icon icon={Bell} size={5} color="text-warning-amber" />}>
+                Notifications
+              </Heading>
+              <Stack gap={4}>
+                <Toggle 
+                  label="Sponsorship Approvals" 
+                  description="Receive confirmation when your sponsorship requests are approved"
+                  checked={notifications.emailNewSponsorships}
+                  onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
+                />
+                <Toggle 
+                  label="Weekly Analytics Report" 
+                  description="Get a weekly summary of your sponsorship performance"
+                  checked={notifications.emailWeeklyReport}
+                  onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
+                />
+                <Toggle 
+                  label="Payment & Invoice Notifications" 
+                  description="Receive invoices and payment confirmations"
+                  checked={notifications.emailPaymentAlerts}
+                  onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
+                />
+              </Stack>
+            </Stack>
+          </Card>
+
+          {/* Danger Zone */}
+          <Card border borderColor="border-racing-red/30">
+            <Stack gap={6}>
+              <Heading level={3} color="text-racing-red" icon={<Icon icon={AlertCircle} size={5} color="text-racing-red" />}>
+                Danger Zone
+              </Heading>
+              <Box display="flex" alignItems="center" justifyContent="between">
+                <Box>
+                  <Text weight="medium" color="text-white" block>Delete Sponsor Account</Text>
+                  <Text size="sm" color="text-gray-500">Permanently remove your account and all data.</Text>
+                </Box>
+                <Button variant="danger" onClick={onDeleteAccount}>
+                  Delete Account
+                </Button>
+              </Box>
+            </Stack>
+          </Card>
+        </Stack>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/apps/website/templates/SponsorshipRequestsTemplate.tsx b/apps/website/templates/SponsorshipRequestsTemplate.tsx
index 51daa250c..062e45fd4 100644
--- a/apps/website/templates/SponsorshipRequestsTemplate.tsx
+++ b/apps/website/templates/SponsorshipRequestsTemplate.tsx
@@ -1,95 +1,39 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/Surface';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
+import { SponsorshipRequestsPanel } from '@/components/profile/SponsorshipRequestsPanel';
 
 export interface SponsorshipRequestsTemplateProps {
   viewData: SponsorshipRequestsViewData;
   onAccept: (requestId: string) => Promise<void>;
   onReject: (requestId: string, reason?: string) => Promise<void>;
+  processingId?: string | null;
 }
 
 export function SponsorshipRequestsTemplate({
   viewData,
   onAccept,
   onReject,
+  processingId,
 }: SponsorshipRequestsTemplateProps) {
   return (
-    <Container size="md" py={8}>
-      <Stack gap={8}>
-        <Box>
-          <Heading level={1}>Sponsorship Requests</Heading>
-          <Text size="sm" color="text-gray-400" block mt={2}>
-            Manage pending sponsorship requests for your profile.
-          </Text>
-        </Box>
+    <Stack gap={8}>
+      <Box as="header">
+        <Heading level={1}>Sponsorship Requests</Heading>
+      </Box>
 
-        {viewData.sections.map((section) => (
-          <Card key={`${section.entityType}-${section.entityId}`}>
-            <Stack gap={4}>
-              <Stack direction="row" align="center" justify="between">
-                <Heading level={2}>{section.entityName}</Heading>
-                <Text size="xs" color="text-gray-400">
-                  {section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
-                </Text>
-              </Stack>
-
-              {section.requests.length === 0 ? (
-                <Text size="sm" color="text-gray-400">No pending requests.</Text>
-              ) : (
-                <Stack gap={3}>
-                  {section.requests.map((request) => (
-                    <Surface
-                      key={request.id}
-                      variant="muted"
-                      rounded="lg"
-                      border
-                      padding={4}
-                    >
-                      <Stack direction="row" align="center" justify="between" wrap gap={4}>
-                        <Box flexGrow={1} minWidth="0">
-                          <Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
-                          {request.message && (
-                            <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
-                          )}
-                          <Text size="xs" color="text-gray-500" block mt={2}>
-                            {DateDisplay.formatShort(request.createdAtIso)}
-                          </Text>
-                        </Box>
-                        <Stack direction="row" gap={2}>
-                          <Button
-                            variant="primary"
-                            onClick={() => onAccept(request.id)}
-                            size="sm"
-                          >
-                            Accept
-                          </Button>
-                          <Button
-                            variant="secondary"
-                            onClick={() => onReject(request.id)}
-                            size="sm"
-                          >
-                            Reject
-                          </Button>
-                        </Stack>
-                      </Stack>
-                    </Surface>
-                  ))}
-                </Stack>
-              )}
-            </Stack>
-          </Card>
-        ))}
-      </Stack>
-    </Container>
+      <Box as="main">
+        <SponsorshipRequestsPanel 
+          sections={viewData.sections}
+          onAccept={onAccept}
+          onReject={onReject}
+          processingId={processingId}
+        />
+      </Box>
+    </Stack>
   );
 }
diff --git a/apps/website/templates/TeamDetailTemplate.tsx b/apps/website/templates/TeamDetailTemplate.tsx
index b20e3b2dc..8e8431d6e 100644
--- a/apps/website/templates/TeamDetailTemplate.tsx
+++ b/apps/website/templates/TeamDetailTemplate.tsx
@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
 import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
+import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
 import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
@@ -15,12 +14,11 @@ import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
+import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader';
+import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
+import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel';
 import { TeamAdmin } from '@/components/teams/TeamAdmin';
-import { TeamHero } from '@/components/teams/TeamHero';
-import { TeamRoster } from '@/components/teams/TeamRoster';
-import { TeamStandings } from '@/components/teams/TeamStandings';
 import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -34,7 +32,6 @@ export interface TeamDetailTemplateProps {
   onTabChange: (tab: Tab) => void;
   onUpdate: () => void;
   onRemoveMember: (driverId: string) => void;
-  onChangeRole: (driverId: string, newRole: 'owner' | 'admin' | 'member') => void;
   onGoBack: () => void;
 }
 
@@ -45,170 +42,178 @@ export function TeamDetailTemplate({
   onTabChange,
   onUpdate,
   onRemoveMember,
-  onChangeRole,
   onGoBack,
 }: TeamDetailTemplateProps) {
   const isSponsorMode = useSponsorMode();
-
   const team = viewData.team;
 
-  // Show loading state
   if (loading) {
     return (
-      <Container size="lg" py={12}>
-        <Stack align="center">
-          <Text color="text-gray-400">Loading team...</Text>
+      <Box bg="base-black" minH="screen" display="flex" center>
+        <Stack align="center" gap={4}>
+          <Box w="12" h="12" border={4} borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" />
+          <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">Synchronizing Telemetry...</Text>
         </Stack>
-      </Container>
+      </Box>
     );
   }
 
-  // Show not found state
   if (!team) {
     return (
-      <Container size="md" py={12}>
-        <Card>
-          <Stack align="center" py={12} gap={6}>
-            <Box textAlign="center">
-              <Heading level={1}>Team Not Found</Heading>
-              <Text color="text-gray-400" block mt={2}>
-                The team you&apos;re looking for doesn&apos;t exist or has been disbanded.
-              </Text>
+      <Box bg="base-black" minH="screen">
+        <Container size="md" py={24}>
+          <Box border borderColor="outline-steel" bg="surface-charcoal" p={12} textAlign="center">
+            <Heading level={1}>404: Team Disconnected</Heading>
+            <Text color="text-gray-500" block mt={4} font="mono">
+              The requested team entity is no longer broadcasting.
+            </Text>
+            <Box mt={8}>
+              <Button variant="primary" onClick={onGoBack}>
+                Return to Base
+              </Button>
             </Box>
-            <Button variant="primary" onClick={onGoBack}>
-              Go Back
-            </Button>
-          </Stack>
-        </Card>
-      </Container>
+          </Box>
+        </Container>
+      </Box>
     );
   }
 
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        {/* Breadcrumb */}
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Teams', href: '/teams' },
-            { label: team.name }
-          ]}
-        />
-
-        {/* Sponsor Insights Card */}
-        {isSponsorMode && team && (
-          <SponsorInsightsCard
-            entityType="team"
-            entityId={team.id}
-            entityName={team.name}
-            tier="standard"
-            metrics={viewData.teamMetrics}
-            slots={SlotTemplates.team(true, true, 500, 250)}
-            trustScore={90}
-            monthlyActivity={85}
-            onNavigate={(href) => window.location.href = href}
+    <Box bg="base-black" minH="screen">
+      <Container size="lg" py={8}>
+        <Stack gap={8}>
+          <Breadcrumbs
+            items={[
+              { label: 'Home', href: '/' },
+              { label: 'Teams', href: '/teams' },
+              { label: team.name }
+            ]}
           />
-        )}
 
-        <TeamHero 
-          team={{
-            ...team,
-            leagues: team.leagues.map(id => ({ id }))
-          }} 
-          memberCount={viewData.memberships.length} 
-          onUpdate={onUpdate} 
-        />
-
-        {/* Tabs */}
-        <Box borderBottom={true} borderColor="border-charcoal-outline">
-          <Stack direction="row" gap={6}>
-            {viewData.tabs.map((tab) => (
-              tab.visible && (
-                <Box
-                  key={tab.id}
-                  onClick={() => onTabChange(tab.id)}
-                  pb={3}
-                  cursor="pointer"
-                  borderBottom={activeTab === tab.id ? '2px solid' : '2px solid'}
-                  borderColor={activeTab === tab.id ? 'border-primary-blue' : 'border-transparent'}
-                  color={activeTab === tab.id ? 'text-primary-blue' : 'text-gray-400'}
-                >
-                  <Text weight="medium">{tab.label}</Text>
-                </Box>
-              )
-            ))}
-          </Stack>
-        </Box>
-
-        <Box>
-          {activeTab === 'overview' && (
-            <Stack gap={6}>
-              <Grid cols={12} gap={6}>
-                <GridItem colSpan={12} lgSpan={8}>
-                  <Card>
-                    <Box mb={4}>
-                      <Heading level={2}>About</Heading>
-                    </Box>
-                    <Text color="text-gray-300" leading="relaxed">{team.description}</Text>
-                  </Card>
-                </GridItem>
-
-                <GridItem colSpan={12} lgSpan={4}>
-                  <Card>
-                    <Box mb={4}>
-                      <Heading level={2}>Quick Stats</Heading>
-                    </Box>
-                    <Stack gap={3}>
-                      <HorizontalStatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
-                      {team.category && (
-                        <HorizontalStatItem label="Category" value={team.category} color="text-purple-400" />
-                      )}
-                      {team.leagues && team.leagues.length > 0 && (
-                        <HorizontalStatItem label="Leagues" value={team.leagues.length.toString()} color="text-green-400" />
-                      )}
-                      {team.createdAt && (
-                        <HorizontalStatItem
-                          label="Founded"
-                          value={DateDisplay.formatMonthYear(team.createdAt)}
-                          color="text-gray-300"
-                        />
-                      )}
-                    </Stack>
-                  </Card>
-                </GridItem>
-              </Grid>
-
-              <Card>
-                <Box mb={4}>
-                  <Heading level={2}>Recent Activity</Heading>
-                </Box>
-                <Box py={8}>
-                  <Text color="text-gray-400" block align="center">No recent activity to display</Text>
-                </Box>
-              </Card>
-            </Stack>
-          )}
-
-          {activeTab === 'roster' && (
-            <TeamRoster
-              teamId={team.id}
-              memberships={viewData.memberships}
-              isAdmin={viewData.isAdmin}
-              onRemoveMember={onRemoveMember}
-              onChangeRole={onChangeRole}
+          {isSponsorMode && (
+            <SponsorInsightsCard
+              entityType="team"
+              entityId={team.id}
+              entityName={team.name}
+              tier="standard"
+              metrics={viewData.teamMetrics}
+              slots={SlotTemplates.team(true, true, 500, 250)}
+              trustScore={90}
+              monthlyActivity={85}
+              onNavigate={(href) => window.location.href = href}
             />
           )}
 
-          {activeTab === 'standings' && (
-            <TeamStandings teamId={team.id} leagues={team.leagues} />
-          )}
+          <TeamDetailsHeader
+            teamId={team.id}
+            name={team.name}
+            tag={team.tag}
+            description={team.description}
+            memberCount={viewData.memberships.length}
+            foundedDate={team.createdAt}
+            isAdmin={viewData.isAdmin}
+            onAdminClick={() => onTabChange('admin')}
+          />
 
-          {activeTab === 'admin' && viewData.isAdmin && (
-            <TeamAdmin team={team} onUpdate={onUpdate} />
-          )}
-        </Box>
-      </Stack>
-    </Container>
+          {/* Tabs */}
+          <Box borderBottom borderColor="outline-steel">
+            <Stack direction="row" gap={8}>
+              {viewData.tabs.map((tab) => (
+                tab.visible && (
+                  <Box
+                    key={tab.id}
+                    onClick={() => onTabChange(tab.id)}
+                    pb={4}
+                    cursor="pointer"
+                    position="relative"
+                  >
+                    <Text 
+                      weight="bold" 
+                      size="xs"
+                      uppercase
+                      letterSpacing="widest"
+                      color={activeTab === tab.id ? 'text-primary-accent' : 'text-gray-500'}
+                    >
+                      {tab.label}
+                    </Text>
+                    {activeTab === tab.id && (
+                      <Box 
+                        position="absolute" 
+                        bottom="-1px" 
+                        left="0" 
+                        right="0" 
+                        h="2px" 
+                        bg="primary-accent" 
+                      />
+                    )}
+                  </Box>
+                )
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            {activeTab === 'overview' && (
+              <Stack gap={8}>
+                <Grid cols={12} gap={8}>
+                  <GridItem colSpan={12} lgSpan={8}>
+                    <Stack gap={8}>
+                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.3} p={6}>
+                        <Text size="xs" weight="bold" color="text-gray-400" uppercase>Mission Statement</Text>
+                        <Text color="text-gray-300" leading="relaxed" size="sm" block mt={4}>
+                          {team.description || 'No description provided.'}
+                        </Text>
+                      </Box>
+
+                      <Box>
+                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Recent Operations</Text>
+                        <Box py={12} border borderStyle="dashed" borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.1} textAlign="center">
+                          <Text color="text-gray-600" font="mono" size="xs">NO RECENT TELEMETRY DATA</Text>
+                        </Box>
+                      </Box>
+                    </Stack>
+                  </GridItem>
+
+                  <GridItem colSpan={12} lgSpan={4}>
+                    <Stack gap={6}>
+                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.5} p={6}>
+                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Performance Metrics</Text>
+                        <Stack gap={4}>
+                          <HorizontalStatItem label="Avg Rating" value="1450" color="text-primary-accent" />
+                          <HorizontalStatItem label="Win Rate" value="12.5%" color="text-telemetry-aqua" />
+                          <HorizontalStatItem label="Total Podiums" value="42" color="text-warning-amber" />
+                        </Stack>
+                      </Box>
+                    </Stack>
+                  </GridItem>
+                </Grid>
+              </Stack>
+            )}
+
+            {activeTab === 'roster' && (
+              <Box>
+                <Stack direction="row" align="center" justify="between" mb={6}>
+                  <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Personnel</Text>
+                  <Text size="xs" color="text-gray-500" font="mono">{viewData.memberships.length} UNITS ACTIVE</Text>
+                </Stack>
+                <TeamMembersTable 
+                  members={viewData.memberships} 
+                  isAdmin={viewData.isAdmin}
+                  onRemoveMember={onRemoveMember}
+                />
+              </Box>
+            )}
+
+            {activeTab === 'standings' && (
+              <TeamStandingsPanel standings={[]} /> // Mocked for now as in original
+            )}
+
+            {activeTab === 'admin' && viewData.isAdmin && (
+              <TeamAdmin team={team} onUpdate={onUpdate} />
+            )}
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
diff --git a/apps/website/templates/TeamLeaderboardTemplate.tsx b/apps/website/templates/TeamLeaderboardTemplate.tsx
index b03011846..d7cfbdd61 100644
--- a/apps/website/templates/TeamLeaderboardTemplate.tsx
+++ b/apps/website/templates/TeamLeaderboardTemplate.tsx
@@ -1,18 +1,16 @@
 'use client';
 
 import React from 'react';
-import { Award, ArrowLeft } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
+import { Award, ChevronLeft } from 'lucide-react';
+import { Container } from '@/ui/Container';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Container } from '@/ui/Container';
+import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { ModalIcon } from '@/ui/ModalIcon';
-import { TeamPodium } from '@/components/teams/TeamPodium';
-import { TeamFilter } from '@/ui/TeamFilter';
-import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
+import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
 import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
 
 interface TeamLeaderboardTemplateProps {
@@ -27,64 +25,93 @@ interface TeamLeaderboardTemplateProps {
 export function TeamLeaderboardTemplate({
   viewData,
   onSearchChange,
-  filterLevelChange,
-  onSortChange,
   onTeamClick,
   onBackToTeams,
 }: TeamLeaderboardTemplateProps) {
-  const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;
+  const { searchQuery, filteredAndSortedTeams } = viewData;
 
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={8}>
-        {/* Header */}
-        <Box>
-          <Box mb={6}>
-            <Button
-              variant="secondary"
-              onClick={onBackToTeams}
-              icon={<Icon icon={ArrowLeft} size={4} />}
-            >
-              Back to Teams
-            </Button>
-          </Box>
-
-          <Stack direction="row" align="center" gap={4}>
-            <ModalIcon 
-              icon={Award} 
-              color="text-yellow-400" 
-              bgColor="bg-yellow-400/10" 
-              borderColor="border-yellow-400/30" 
-            />
-            <Box>
-              <Heading level={1}>Team Leaderboard</Heading>
-              <Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
-            </Box>
+    <Box bg="base-black" minH="screen">
+      <Container size="lg" py={12}>
+        <Stack gap={8}>
+          {/* Header */}
+          <Stack direction="row" align="center" justify="between">
+            <Stack direction="row" align="center" gap={4}>
+              <Button variant="secondary" size="sm" onClick={onBackToTeams} icon={<Icon icon={ChevronLeft} size={4} />}>
+                Back
+              </Button>
+              <Box>
+                <Heading level={1} weight="bold">Global Standings</Heading>
+                <Text color="text-gray-500" size="sm" font="mono" uppercase letterSpacing="widest">Team Performance Index</Text>
+              </Box>
+            </Stack>
+            <Icon icon={Award} size={8} color="warning-amber" />
           </Stack>
-        </Box>
 
-        {/* Filters and Search */}
-        <TeamFilter
-          searchQuery={searchQuery}
-          onSearchChange={onSearchChange}
-          filterLevel={filterLevel}
-          onFilterLevelChange={filterLevelChange}
-          sortBy={sortBy}
-          onSortChange={onSortChange}
-        />
+          <LeaderboardFiltersBar
+            searchQuery={searchQuery}
+            onSearchChange={onSearchChange}
+            placeholder="Search teams..."
+          />
 
-        {/* Podium for Top 3 */}
-        {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
-          <TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
-        )}
-
-        {/* Leaderboard Table */}
-        <TeamRankingsTable 
-          teams={filteredAndSortedTeams} 
-          sortBy={sortBy} 
-          onTeamClick={onTeamClick} 
-        />
-      </Stack>
-    </Container>
+          <Box border borderColor="outline-steel" bg="surface-charcoal/30">
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableHeader w="20">Rank</TableHeader>
+                  <TableHeader>Team</TableHeader>
+                  <TableHeader textAlign="center">Personnel</TableHeader>
+                  <TableHeader textAlign="center">Races</TableHeader>
+                  <TableHeader textAlign="right">Rating</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {filteredAndSortedTeams.length > 0 ? (
+                  filteredAndSortedTeams.map((team, index) => (
+                    <TableRow 
+                      key={team.id} 
+                      onClick={() => onTeamClick(team.id)}
+                      cursor="pointer"
+                      hoverBg="surface-charcoal/50"
+                    >
+                      <TableCell>
+                        <Text font="mono" weight="bold" color={index < 3 ? 'warning-amber' : 'text-gray-500'}>
+                          #{index + 1}
+                        </Text>
+                      </TableCell>
+                      <TableCell>
+                        <Stack direction="row" align="center" gap={3}>
+                          <Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
+                            <Text size="xs" weight="bold" color="primary-accent">{team.name.substring(0, 2).toUpperCase()}</Text>
+                          </Box>
+                          <Text weight="bold" size="sm" color="text-white">{team.name}</Text>
+                        </Stack>
+                      </TableCell>
+                      <TableCell textAlign="center">
+                        <Text size="xs" color="text-gray-400" font="mono">{team.memberCount}</Text>
+                      </TableCell>
+                      <TableCell textAlign="center">
+                        <Text size="xs" color="text-gray-400" font="mono">{team.totalRaces}</Text>
+                      </TableCell>
+                      <TableCell textAlign="right">
+                        <Text font="mono" weight="bold" color="primary-accent">1450</Text>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={5} textAlign="center" py={12}>
+                      <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
+                        No teams found matching criteria
+                      </Text>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
diff --git a/apps/website/templates/TeamsTemplate.tsx b/apps/website/templates/TeamsTemplate.tsx
index 39abe1f96..18341f0a5 100644
--- a/apps/website/templates/TeamsTemplate.tsx
+++ b/apps/website/templates/TeamsTemplate.tsx
@@ -2,17 +2,15 @@
 
 import React from 'react';
 import { Users } from 'lucide-react';
-import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
-import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { TeamCard } from '@/ui/TeamCardWrapper';
 import { EmptyState } from '@/components/shared/state/EmptyState';
-import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';
+import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
+import { TeamGrid } from '@/components/teams/TeamGrid';
+import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
+import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
 
 interface TeamsTemplateProps {
   viewData: TeamsViewData;
@@ -25,50 +23,39 @@ export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, on
   const { teams } = viewData;
 
   return (
-    <Box as="main">
-      <Container size="lg" py={8}>
-        <Stack gap={8}>
-          {/* Header */}
-          <Stack direction="row" align="center" justify="between" wrap gap={4}>
-            <Box>
-              <Heading level={1}>Teams</Heading>
-              <Text color="text-gray-400">Browse and manage your racing teams</Text>
-            </Box>
-            <Box>
-              <Button variant="primary" onClick={onCreateTeam}>Create Team</Button>
-            </Box>
-          </Stack>
+    <Box as="main" bg="base-black" minH="screen">
+      <Container size="lg" py={12}>
+        <Stack gap={10}>
+          <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
 
-          {/* Teams Grid */}
-          {teams.length > 0 ? (
-            <Grid cols={3} gap={6}>
-              {teams.map((team: TeamSummaryData) => (
-                <TeamCard 
-                  key={team.teamId} 
-                  id={team.teamId}
-                  name={team.teamName}
-                  logo={team.logoUrl}
-                  memberCount={team.memberCount}
-                  leagues={[team.leagueName]}
-                  onClick={() => onTeamClick?.(team.teamId)}
-                />
-              ))}
-            </Grid>
-          ) : (
-            <EmptyState
-              icon={Users}
-              title="No teams yet"
-              description="Get started by creating your first racing team"
-              action={{
-                label: 'Create Team',
-                onClick: onCreateTeam,
-                variant: 'primary'
-              }}
-            />
-          )}
+          <Box>
+            <Stack direction="row" align="center" gap={2} mb={6}>
+              <Box w="2" h="2" bg="primary-accent" />
+              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Rosters</Text>
+            </Stack>
+            
+            {teams.length > 0 ? (
+              <TeamGrid teams={teams} onTeamClick={onTeamClick} />
+            ) : (
+              <EmptyState
+                icon={Users}
+                title="No teams yet"
+                description="Get started by creating your first racing team"
+                action={{
+                  label: 'Create Team',
+                  onClick: onCreateTeam,
+                  variant: 'primary'
+                }}
+              />
+            )}
+          </Box>
 
           {/* Team Leaderboard Preview */}
-          <Box mt={12}>
+          <Box pt={10} borderTop borderColor="outline-steel" borderOpacity={0.3}>
+            <Stack direction="row" align="center" gap={2} mb={6}>
+              <Box w="2" h="2" bg="telemetry-aqua" />
+              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Global Standings</Text>
+            </Stack>
             <TeamLeaderboardPreview 
               topTeams={[]} 
               onTeamClick={(id) => onTeamClick?.(id)} 
diff --git a/apps/website/templates/actions/ActionsTemplate.tsx b/apps/website/templates/actions/ActionsTemplate.tsx
new file mode 100644
index 000000000..cfa9730bf
--- /dev/null
+++ b/apps/website/templates/actions/ActionsTemplate.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { ActionsViewData } from '@/lib/view-data/ActionsViewData';
+import { ActionsHeader } from '@/components/actions/ActionsHeader';
+import { ActionList } from '@/components/actions/ActionList';
+import { ActionFiltersBar } from '@/components/actions/ActionFiltersBar';
+import { Box } from '@/ui/Box';
+
+export function ActionsTemplate({ actions }: ActionsViewData) {
+  return (
+    <Box display="flex" flexDirection="col" fullHeight bg="bg-[#0C0D0F]" color="text-white">
+      <ActionsHeader title="Telemetry Actions" />
+      <Box display="flex" flexDirection="col" flexGrow={1} overflow="hidden">
+        <ActionFiltersBar />
+        <Box flexGrow={1} overflow="auto" p={4}>
+          <ActionList actions={actions} />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/templates/auth/ForgotPasswordTemplate.tsx b/apps/website/templates/auth/ForgotPasswordTemplate.tsx
index 68176c3cd..9889f9178 100644
--- a/apps/website/templates/auth/ForgotPasswordTemplate.tsx
+++ b/apps/website/templates/auth/ForgotPasswordTemplate.tsx
@@ -1,25 +1,18 @@
 'use client';
 
 import React from 'react';
-import {
-  Mail,
-  ArrowLeft,
-  AlertCircle,
-  Flag,
-  Shield,
-  CheckCircle2,
-} from 'lucide-react';
-import { Card } from '@/ui/Card';
+import { Mail, ArrowLeft, AlertCircle, Shield, CheckCircle2 } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
-import { Icon } from '@/ui/Icon';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { AuthCard } from '@/components/auth/AuthCard';
+import { AuthForm } from '@/components/auth/AuthForm';
+import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { routes } from '@/lib/routing/RouteConfig';
 import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';
 
@@ -37,145 +30,97 @@ interface ForgotPasswordTemplateProps {
 }
 
 export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
+  const isSubmitting = mutationState.isPending;
+
   return (
-    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
-      {/* Background Pattern */}
-      <Box position="absolute" inset={0} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
-      
-      <Box position="relative" w="full" maxWidth="28rem" px={4}>
-        {/* Header */}
-        <Box textAlign="center" mb={8}>
-          <Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
-            <Icon icon={Flag} size={8} color="#3b82f6" />
-          </Surface>
-          <Heading level={1}>Reset Password</Heading>
-          <Text color="text-gray-400" block mt={2}>
-            Enter your email and we will send you a reset link
-          </Text>
-        </Box>
+    <AuthCard 
+      title="Reset Password" 
+      description={viewData.showSuccess ? undefined : "Enter your email and we'll send you a reset link"}
+    >
+      {!viewData.showSuccess ? (
+        <AuthForm onSubmit={formActions.handleSubmit}>
+          <Input
+            label="Email Address"
+            id="email"
+            name="email"
+            type="email"
+            value={viewData.formState.fields.email.value}
+            onChange={formActions.handleChange}
+            errorMessage={viewData.formState.fields.email.error}
+            placeholder="you@example.com"
+            disabled={isSubmitting}
+            autoComplete="email"
+            icon={<Mail size={16} />}
+          />
 
-        <Card position="relative" overflow="hidden">
-          {/* Background accent */}
-          <Box position="absolute" top={0} right={0} w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
-
-          {!viewData.showSuccess ? (
-            <Box as="form" onSubmit={formActions.handleSubmit}>
-              <Stack gap={5} position="relative">
-                {/* Email */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Email Address
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Mail} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={viewData.formState.fields.email.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.email.error ? 'error' : 'default'}
-                      placeholder="you@example.com"
-                      disabled={mutationState.isPending}
-                      autoComplete="email"
-                    />
-                  </Box>
-                  {viewData.formState.fields.email.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.email.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Error Message */}
-                {mutationState.error && (
-                  <Surface variant="muted" rounded="lg" border padding={3} bg="bg-red-500/10" borderColor="border-red-500/30">
-                    <Stack direction="row" align="start" gap={3}>
-                      <Icon icon={AlertCircle} size={5} color="#ef4444" />
-                      <Text size="sm" color="text-error-red">{mutationState.error}</Text>
-                    </Stack>
-                  </Surface>
-                )}
-
-                {/* Submit Button */}
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={mutationState.isPending}
-                  fullWidth
-                  icon={mutationState.isPending ? <LoadingSpinner size={4} color="white" /> : <Icon icon={Shield} size={4} />}
-                >
-                  {mutationState.isPending ? 'Sending...' : 'Send Reset Link'}
-                </Button>
-
-                {/* Back to Login */}
-                <Box textAlign="center">
-                  <Link href={routes.auth.login}>
-                    <Stack direction="row" align="center" justify="center" gap={1}>
-                      <Icon icon={ArrowLeft} size={4} color="#3b82f6" />
-                      <Text size="sm" color="text-primary-blue">Back to Login</Text>
-                    </Stack>
-                  </Link>
-                </Box>
+          {mutationState.error && (
+            <Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
+              <Stack direction="row" align="start" gap={3}>
+                <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
+                <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
               </Stack>
             </Box>
-          ) : (
-            <Stack gap={4} position="relative">
-              <Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
-                <Stack direction="row" align="start" gap={3}>
-                  <Icon icon={CheckCircle2} size={6} color="#10b981" />
-                  <Box>
-                    <Text size="sm" color="text-performance-green" weight="medium" block>{viewData.successMessage}</Text>
-                    {viewData.magicLink && (
-                      <Box mt={2}>
-                        <Text size="xs" color="text-gray-400" block mb={1}>Development Mode - Magic Link:</Text>
-                        <Surface variant="muted" rounded="md" border padding={2} bg="bg-neutral-800">
-                          <Text size="xs" color="text-primary-blue">{viewData.magicLink}</Text>
-                        </Surface>
-                        <Text size="xs" color="text-gray-500" block mt={1}>
-                          In production, this would be sent via email
-                        </Text>
-                      </Box>
-                    )}
-                  </Box>
-                </Stack>
-              </Surface>
-
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => window.location.href = '/auth/login'}
-                fullWidth
-              >
-                Return to Login
-              </Button>
-            </Stack>
           )}
-        </Card>
 
-        {/* Trust Indicators */}
-        <Stack direction="row" align="center" justify="center" gap={6} mt={6}>
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={Shield} size={4} color="#737373" />
-            <Text size="sm" color="text-gray-500">Secure reset process</Text>
-          </Stack>
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={CheckCircle2} size={4} color="#737373" />
-            <Text size="sm" color="text-gray-500">15 minute expiration</Text>
-          </Stack>
-        </Stack>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={isSubmitting}
+            fullWidth
+            icon={isSubmitting ? <LoadingSpinner size={4} /> : <Shield size={16} />}
+          >
+            {isSubmitting ? 'Sending...' : 'Send Reset Link'}
+          </Button>
 
-        {/* Footer */}
-        <Box mt={6} textAlign="center">
-          <Text size="xs" color="text-gray-500">
-            Need help?{' '}
-            <Link href="/support">
-              <Text color="text-gray-400">Contact support</Text>
+          <Box textAlign="center">
+            <Link href={routes.auth.login}>
+              <Stack direction="row" align="center" justify="center" gap={2} group>
+                <Icon icon={ArrowLeft} size={3.5} color="var(--color-primary)" groupHoverScale />
+                <Text size="sm" weight="bold" color="text-primary-accent">Back to Login</Text>
+              </Stack>
             </Link>
-          </Text>
-        </Box>
-      </Box>
-    </Box>
+          </Box>
+        </AuthForm>
+      ) : (
+        <Stack gap={6}>
+          <Box p={4} bg="success-green/10" border borderColor="success-green/30" rounded="md">
+            <Stack direction="row" align="start" gap={3}>
+              <Icon icon={CheckCircle2} size={5} color="var(--color-success)" />
+              <Box>
+                <Text size="sm" color="text-success-green" weight="bold" block>Check your email</Text>
+                <Text size="xs" color="text-gray-400" block mt={1}>{viewData.successMessage}</Text>
+              </Box>
+            </Stack>
+          </Box>
+
+          {viewData.magicLink && (
+            <Box p={3} bg="surface-charcoal" border borderColor="outline-steel" rounded="md">
+              <Text size="xs" color="text-gray-500" block mb={2} weight="bold">DEVELOPMENT MAGIC LINK</Text>
+              <Link href={viewData.magicLink}>
+                <Text size="xs" color="text-primary-accent" block>
+                  {viewData.magicLink}
+                </Text>
+              </Link>
+            </Box>
+          )}
+
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => window.location.href = '/auth/login'}
+            fullWidth
+          >
+            Return to Login
+          </Button>
+        </Stack>
+      )}
+
+      <AuthFooterLinks>
+        <Text size="xs" color="text-gray-600">
+          Need help?{' '}
+          <Link href="/support">Contact support</Link>
+        </Text>
+      </AuthFooterLinks>
+    </AuthCard>
   );
 }
diff --git a/apps/website/templates/auth/LoginTemplate.tsx b/apps/website/templates/auth/LoginTemplate.tsx
index be307676f..14541ea56 100644
--- a/apps/website/templates/auth/LoginTemplate.tsx
+++ b/apps/website/templates/auth/LoginTemplate.tsx
@@ -1,30 +1,20 @@
 'use client';
 
 import React from 'react';
-import {
-  Mail,
-  Lock,
-  Eye,
-  EyeOff,
-  LogIn,
-  AlertCircle,
-  Flag,
-  Shield,
-} from 'lucide-react';
-import { Card } from '@/ui/Card';
+import { LogIn, Mail, AlertCircle } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
+import { PasswordField } from '@/ui/PasswordField';
+import { AuthCard } from '@/components/auth/AuthCard';
+import { AuthForm } from '@/components/auth/AuthForm';
+import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
-import { UserRolesPreview } from '@/components/auth/UserRolesPreview';
-import { AuthWorkflowMockup } from '@/components/auth/AuthWorkflowMockup';
 import { routes } from '@/lib/routing/RouteConfig';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { FormState } from '@/lib/builders/view-data/types/FormState';
@@ -45,264 +35,129 @@ interface LoginTemplateProps {
 }
 
 export function LoginTemplate({ viewData, formActions, mutationState }: LoginTemplateProps) {
+  const isSubmitting = viewData.formState.isSubmitting || mutationState.isPending;
+
   return (
-    <Box as="main" minHeight="100vh" display="flex" position="relative">
-      {/* Background Pattern */}
-      <Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
-      
-      {/* Left Side - Info Panel (Hidden on mobile) */}
-      <Box display={{ base: 'none', lg: 'flex' }} w={{ lg: '1/2' }} position="relative" alignItems="center" justifyContent="center" p={12}>
-        <Box maxWidth="32rem">
-          {/* Logo */}
-          <Stack direction="row" align="center" gap={3} mb={8}>
-            <Surface variant="muted" rounded="xl" border padding={2} bg="bg-blue-500/10" borderColor="border-blue-500/30">
-              <Icon icon={Flag} size={6} color="#3b82f6" />
-            </Surface>
-            <Text size="2xl" weight="bold" color="text-white">GridPilot</Text>
-          </Stack>
+    <AuthCard 
+      title="Welcome Back" 
+      description="Sign in to access your racing dashboard"
+    >
+      <AuthForm onSubmit={formActions.handleSubmit}>
+        <Stack gap={4}>
+          <Input
+            label="Email Address"
+            id="email"
+            name="email"
+            type="email"
+            value={viewData.formState.fields.email.value as string}
+            onChange={formActions.handleChange}
+            errorMessage={viewData.formState.fields.email.error}
+            placeholder="you@example.com"
+            disabled={isSubmitting}
+            autoComplete="email"
+            icon={<Mail size={16} />}
+          />
 
-          <Box mb={4}>
-            <Heading level={2}>
-              Your Sim Racing Infrastructure
-            </Heading>
-          </Box>
-          
-          <Text size="lg" color="text-gray-400" block mb={8}>
-            Manage leagues, track performance, join teams, and compete with drivers worldwide. One account, multiple roles.
-          </Text>
-
-          {/* Role Cards */}
-          <UserRolesPreview variant="full" />
-
-          {/* Workflow Mockup */}
-          <Box mt={8}>
-            <AuthWorkflowMockup />
-          </Box>
-
-          {/* Trust Indicators */}
-          <Stack direction="row" align="center" gap={6} mt={8}>
-            <Stack direction="row" align="center" gap={2}>
-              <Icon icon={Shield} size={4} color="#737373" />
-              <Text size="sm" color="text-gray-500">Secure login</Text>
-            </Stack>
-            <Text size="sm" color="text-gray-500">iRacing verified</Text>
-          </Stack>
-        </Box>
-      </Box>
-
-      {/* Right Side - Login Form */}
-      <Box flex={1} display="flex" alignItems="center" justifyContent="center" p={{ base: 4, lg: 12 }} position="relative">
-        <Box w="full" maxWidth="28rem">
-          {/* Mobile Logo/Header */}
-          <Box display={{ base: 'block', lg: 'none' }} textAlign="center" mb={8}>
-            <Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
-              <Icon icon={Flag} size={8} color="#3b82f6" />
-            </Surface>
-            <Heading level={1}>Welcome Back</Heading>
-            <Text color="text-gray-400" block mt={2}>
-              Sign in to continue to GridPilot
-            </Text>
-          </Box>
-
-          {/* Desktop Header */}
-          <Box display={{ base: 'none', lg: 'block' }} textAlign="center" mb={8}>
-            <Heading level={2}>Welcome Back</Heading>
-            <Text color="text-gray-400" block mt={2}>
-              Sign in to access your racing dashboard
-            </Text>
-          </Box>
-
-          <Card position="relative" overflow="hidden">
-            {/* Background accent */}
-            <Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
-
-            <Box as="form" onSubmit={formActions.handleSubmit}>
-              <Stack gap={5} position="relative">
-                {/* Email */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Email Address
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Mail} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="email"
-                      name="email"
-                      type="email"
-                      value={viewData.formState.fields.email.value as string}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.email.error ? 'error' : 'default'}
-                      placeholder="you@example.com"
-                      disabled={viewData.formState.isSubmitting || mutationState.isPending}
-                      autoComplete="email"
-                    />
-                  </Box>
-                  {viewData.formState.fields.email.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.email.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Password */}
-                <Box>
-                  <Stack direction="row" align="center" justify="between" mb={2}>
-                    <Text size="sm" weight="medium" color="text-gray-300">
-                      Password
-                    </Text>
-                    <Link href={routes.auth.forgotPassword}>
-                      <Text size="xs" color="text-primary-blue">Forgot password?</Text>
-                    </Link>
-                  </Stack>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Lock} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="password"
-                      name="password"
-                      type={viewData.showPassword ? 'text' : 'password'}
-                      value={viewData.formState.fields.password.value as string}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.password.error ? 'error' : 'default'}
-                      placeholder="••••••••"
-                      disabled={viewData.formState.isSubmitting || mutationState.isPending}
-                      autoComplete="current-password"
-                    />
-                    <Box
-                      as="button"
-                      type="button"
-                      onClick={() => formActions.setShowPassword(!viewData.showPassword)}
-                      position="absolute"
-                      right="3"
-                      top="50%"
-                      zIndex={10}
-                      bg="transparent"
-                      borderStyle="none"
-                      cursor="pointer"
-                    >
-                      <Icon icon={viewData.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
-                    </Box>
-                  </Box>
-                  {viewData.formState.fields.password.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.password.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Remember Me */}
-                <Stack direction="row" align="center" gap={2}>
-                  <Box
-                    as="input"
-                    id="rememberMe"
-                    name="rememberMe"
-                    type="checkbox"
-                    checked={viewData.formState.fields.rememberMe.value as boolean}
-                    onChange={formActions.handleChange}
-                    disabled={viewData.formState.isSubmitting || mutationState.isPending}
-                  />
-                  <Text size="sm" color="text-gray-300">Keep me signed in</Text>
-                </Stack>
-
-                {/* Insufficient Permissions Message */}
-                {viewData.hasInsufficientPermissions && (
-                  <Surface variant="muted" rounded="lg" border padding={4} bg="bg-amber-500/10" borderColor="border-amber-500/30">
-                    <Stack direction="row" align="start" gap={3}>
-                      <Icon icon={AlertCircle} size={5} color="#f59e0b" />
-                      <Box>
-                        <Text weight="bold" color="text-warning-amber" block>Insufficient Permissions</Text>
-                        <Text size="sm" color="text-gray-300" block mt={1}>
-                          You don&apos;t have permission to access that page. Please log in with an account that has the required role.
-                        </Text>
-                      </Box>
-                    </Stack>
-                  </Surface>
-                )}
-
-                {/* Enhanced Error Display */}
-                {viewData.submitError && (
-                  <EnhancedFormError
-                    error={new Error(viewData.submitError)}
-                    onDismiss={() => {
-                      formActions.setFormState((prev: FormState) => ({ ...prev, submitError: undefined }));
-                    }}
-                    showDeveloperDetails={viewData.showErrorDetails}
-                  />
-                )}
-
-                {/* Submit Button */}
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={viewData.formState.isSubmitting || mutationState.isPending}
-                  fullWidth
-                  icon={mutationState.isPending || viewData.formState.isSubmitting ? <LoadingSpinner size={4} color="white" /> : <Icon icon={LogIn} size={4} />}
-                >
-                  {mutationState.isPending || viewData.formState.isSubmitting ? 'Signing in...' : 'Sign In'}
-                </Button>
-              </Stack>
-            </Box>
-
-            {/* Divider */}
-            <Box position="relative" my={6}>
-              <Box position="absolute" inset="0" display="flex" alignItems="center">
-                <Box w="full" borderTop borderColor="border-neutral-800" />
-              </Box>
-              <Box position="relative" display="flex" justifyContent="center">
-                <Box px={4} bg="bg-neutral-900">
-                  <Text size="xs" color="text-gray-500">or continue with</Text>
-                </Box>
-              </Box>
-            </Box>
-
-            {/* Sign Up Link */}
-            <Box textAlign="center" mt={6}>
-              <Text size="sm" color="text-gray-400">
-                Don&apos;t have an account?{' '}
-                <Link
-                  href={viewData.returnTo && viewData.returnTo !== '/dashboard' ? `/auth/signup?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/signup'}
-                >
-                  <Text color="text-primary-blue" weight="medium">Create one</Text>
-                </Link>
-              </Text>
-            </Box>
-          </Card>
-
-          {/* Name Immutability Notice */}
-          <Box mt={6}>
-            <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/30" borderColor="border-neutral-800">
-              <Stack direction="row" align="start" gap={3}>
-                <Icon icon={AlertCircle} size={5} color="#737373" />
-                <Text size="xs" color="text-gray-400">
-                  <Text weight="bold">Note:</Text> Your display name cannot be changed after signup. Please ensure it&apos;s correct when creating your account.
+          <Stack gap={1.5}>
+            <PasswordField
+              label="Password"
+              id="password"
+              name="password"
+              value={viewData.formState.fields.password.value as string}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.password.error}
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoComplete="current-password"
+              showPassword={viewData.showPassword}
+              onTogglePassword={() => formActions.setShowPassword(!viewData.showPassword)}
+            />
+            <Box textAlign="right">
+              <Link href={routes.auth.forgotPassword}>
+                <Text size="xs" color="text-primary-accent">
+                  Forgot password?
                 </Text>
-              </Stack>
-            </Surface>
-          </Box>
+              </Link>
+            </Box>
+          </Stack>
 
-          {/* Footer */}
-          <Box mt={6} textAlign="center">
-            <Text size="xs" color="text-gray-500">
-              By signing in, you agree to our{' '}
-              <Link href="/terms">
-                <Text color="text-gray-400">Terms of Service</Text>
-              </Link>
-              {' '}and{' '}
-              <Link href="/privacy">
-                <Text color="text-gray-400">Privacy Policy</Text>
-              </Link>
+          <Stack direction="row" align="center" gap={2}>
+            <Box
+              as="input"
+              id="rememberMe"
+              name="rememberMe"
+              type="checkbox"
+              rounded="sm"
+              borderColor="outline-steel"
+              bg="surface-charcoal"
+              color="text-primary-accent"
+              ring="focus:ring-primary-accent/50"
+              w="1rem"
+              h="1rem"
+              checked={viewData.formState.fields.rememberMe.value as boolean}
+              onChange={formActions.handleChange}
+              disabled={isSubmitting}
+            />
+            <Text as="label" htmlFor="rememberMe" size="sm" color="text-med" cursor="pointer">
+              Keep me signed in
             </Text>
-          </Box>
+          </Stack>
+        </Stack>
 
-          {/* Mobile Role Info */}
-          <Box mt={8} display={{ base: 'block', lg: 'none' }}>
-            <UserRolesPreview variant="compact" />
+        {viewData.hasInsufficientPermissions && (
+          <Box p={4} bg="warning-amber/10" border borderColor="warning-amber/30" rounded="md">
+            <Stack direction="row" align="start" gap={3}>
+              <Icon icon={AlertCircle} size={5} color="var(--color-warning)" />
+              <Box>
+                <Text weight="bold" color="text-warning-amber" block size="sm">Insufficient Permissions</Text>
+                <Text size="xs" color="text-gray-400" block mt={1}>
+                  Please log in with an account that has the required role.
+                </Text>
+              </Box>
+            </Stack>
           </Box>
+        )}
+
+        {viewData.submitError && (
+          <EnhancedFormError
+            error={new Error(viewData.submitError)}
+            onDismiss={() => {
+              formActions.setFormState((prev: FormState) => ({ ...prev, submitError: undefined }));
+            }}
+            showDeveloperDetails={viewData.showErrorDetails}
+          />
+        )}
+
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={isSubmitting}
+          fullWidth
+          icon={isSubmitting ? <LoadingSpinner size={4} /> : <LogIn size={16} />}
+        >
+          {isSubmitting ? 'Signing in...' : 'Sign In'}
+        </Button>
+      </AuthForm>
+
+      <AuthFooterLinks>
+        <Text size="sm" color="text-gray-400">
+          Don&apos;t have an account?{' '}
+          <Link
+            href={viewData.returnTo && viewData.returnTo !== '/dashboard' ? `/auth/signup?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/signup'}
+          >
+            <Text color="text-primary-accent" weight="bold">Create one</Text>
+          </Link>
+        </Text>
+        
+        <Box mt={2}>
+          <Text size="xs" color="text-gray-600">
+            By signing in, you agree to our{' '}
+            <Link href="/terms">Terms</Link>
+            {' '}and{' '}
+            <Link href="/privacy">Privacy</Link>
+          </Text>
         </Box>
-      </Box>
-    </Box>
+      </AuthFooterLinks>
+    </AuthCard>
   );
 }
diff --git a/apps/website/templates/auth/ResetPasswordTemplate.tsx b/apps/website/templates/auth/ResetPasswordTemplate.tsx
index 317cca2cc..4d85acdbf 100644
--- a/apps/website/templates/auth/ResetPasswordTemplate.tsx
+++ b/apps/website/templates/auth/ResetPasswordTemplate.tsx
@@ -1,27 +1,18 @@
 'use client';
 
 import React from 'react';
-import {
-  Lock,
-  Eye,
-  EyeOff,
-  AlertCircle,
-  Flag,
-  Shield,
-  CheckCircle2,
-  ArrowLeft,
-} from 'lucide-react';
-import { Card } from '@/ui/Card';
+import { Shield, CheckCircle2, ArrowLeft, AlertCircle } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
-import { Icon } from '@/ui/Icon';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { AuthCard } from '@/components/auth/AuthCard';
+import { AuthForm } from '@/components/auth/AuthForm';
+import { PasswordField } from '@/ui/PasswordField';
+import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { routes } from '@/lib/routing/RouteConfig';
 import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
 
@@ -50,194 +41,102 @@ export function ResetPasswordTemplate({
   uiState,
   mutationState,
 }: ResetPasswordTemplateProps) {
+  const isSubmitting = mutationState.isPending;
+
   return (
-    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
-      {/* Background Pattern */}
-      <Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
-      
-      <Box position="relative" w="full" maxWidth="28rem" px={4}>
-        {/* Header */}
-        <Box textAlign="center" mb={8}>
-          <Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
-            <Icon icon={Flag} size={8} color="#3b82f6" />
-          </Surface>
-          <Heading level={1}>Reset Password</Heading>
-          <Text color="text-gray-400" block mt={2}>
-            Create a new secure password for your account
-          </Text>
-        </Box>
+    <AuthCard 
+      title="Reset Password" 
+      description={viewData.showSuccess ? undefined : "Create a new secure password for your account"}
+    >
+      {!viewData.showSuccess ? (
+        <AuthForm onSubmit={formActions.handleSubmit}>
+          <Stack gap={4}>
+            <PasswordField
+              label="New Password"
+              id="newPassword"
+              name="newPassword"
+              value={viewData.formState.fields.newPassword.value}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.newPassword.error}
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoComplete="new-password"
+              showPassword={uiState.showPassword}
+              onTogglePassword={() => formActions.setShowPassword(!uiState.showPassword)}
+            />
 
-        <Card position="relative" overflow="hidden">
-          {/* Background accent */}
-          <Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
+            <PasswordField
+              label="Confirm Password"
+              id="confirmPassword"
+              name="confirmPassword"
+              value={viewData.formState.fields.confirmPassword.value}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.confirmPassword.error}
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoComplete="new-password"
+              showPassword={uiState.showConfirmPassword}
+              onTogglePassword={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
+            />
+          </Stack>
 
-          {!viewData.showSuccess ? (
-            <Box as="form" onSubmit={formActions.handleSubmit}>
-              <Stack gap={5} position="relative">
-                {/* New Password */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    New Password
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Lock} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="newPassword"
-                      name="newPassword"
-                      type={uiState.showPassword ? 'text' : 'password'}
-                      value={viewData.formState.fields.newPassword.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.newPassword.error ? 'error' : 'default'}
-                      placeholder="••••••••"
-                      disabled={mutationState.isPending}
-                      autoComplete="new-password"
-                    />
-                    <Box
-                      as="button"
-                      type="button"
-                      onClick={() => formActions.setShowPassword(!uiState.showPassword)}
-                      position="absolute"
-                      right="3"
-                      top="50%"
-                      zIndex={10}
-                      bg="transparent"
-                      borderStyle="none"
-                      cursor="pointer"
-                    >
-                      <Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
-                    </Box>
-                  </Box>
-                  {viewData.formState.fields.newPassword.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.newPassword.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Confirm Password */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Confirm Password
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Lock} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="confirmPassword"
-                      name="confirmPassword"
-                      type={uiState.showConfirmPassword ? 'text' : 'password'}
-                      value={viewData.formState.fields.confirmPassword.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.confirmPassword.error ? 'error' : 'default'}
-                      placeholder="••••••••"
-                      disabled={mutationState.isPending}
-                      autoComplete="new-password"
-                    />
-                    <Box
-                      as="button"
-                      type="button"
-                      onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
-                      position="absolute"
-                      right="3"
-                      top="50%"
-                      zIndex={10}
-                      bg="transparent"
-                      borderStyle="none"
-                      cursor="pointer"
-                    >
-                      <Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
-                    </Box>
-                  </Box>
-                  {viewData.formState.fields.confirmPassword.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.confirmPassword.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Error Message */}
-                {mutationState.error && (
-                  <Surface variant="muted" rounded="lg" border padding={3} bg="bg-red-500/10" borderColor="border-red-500/30">
-                    <Stack direction="row" align="start" gap={3}>
-                      <Icon icon={AlertCircle} size={5} color="#ef4444" />
-                      <Text size="sm" color="text-error-red">{mutationState.error}</Text>
-                    </Stack>
-                  </Surface>
-                )}
-
-                {/* Submit Button */}
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={mutationState.isPending}
-                  fullWidth
-                  icon={mutationState.isPending ? <LoadingSpinner size={4} color="white" /> : <Icon icon={Shield} size={4} />}
-                >
-                  {mutationState.isPending ? 'Resetting...' : 'Reset Password'}
-                </Button>
-
-                {/* Back to Login */}
-                <Box textAlign="center">
-                  <Link href={routes.auth.login}>
-                    <Stack direction="row" align="center" justify="center" gap={1}>
-                      <Icon icon={ArrowLeft} size={4} color="#3b82f6" />
-                      <Text size="sm" color="text-primary-blue">Back to Login</Text>
-                    </Stack>
-                  </Link>
-                </Box>
+          {mutationState.error && (
+            <Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
+              <Stack direction="row" align="start" gap={3}>
+                <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
+                <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
               </Stack>
             </Box>
-          ) : (
-            <Stack gap={4} position="relative">
-              <Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
-                <Stack direction="row" align="start" gap={3}>
-                  <Icon icon={CheckCircle2} size={6} color="#10b981" />
-                  <Box>
-                    <Text size="sm" color="text-performance-green" weight="medium" block>{viewData.successMessage}</Text>
-                    <Text size="xs" color="text-gray-400" block mt={1}>
-                      Your password has been successfully reset
-                    </Text>
-                  </Box>
-                </Stack>
-              </Surface>
-
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => window.location.href = '/auth/login'}
-                fullWidth
-              >
-                Return to Login
-              </Button>
-            </Stack>
           )}
-        </Card>
 
-        {/* Trust Indicators */}
-        <Stack direction="row" align="center" justify="center" gap={6} mt={6}>
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={Shield} size={4} color="#737373" />
-            <Text size="sm" color="text-gray-500">Secure password reset</Text>
-          </Stack>
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={CheckCircle2} size={4} color="#737373" />
-            <Text size="sm" color="text-gray-500">Encrypted transmission</Text>
-          </Stack>
-        </Stack>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={isSubmitting}
+            fullWidth
+            icon={isSubmitting ? <LoadingSpinner size={4} /> : <Shield size={16} />}
+          >
+            {isSubmitting ? 'Resetting...' : 'Reset Password'}
+          </Button>
 
-        {/* Footer */}
-        <Box mt={6} textAlign="center">
-          <Text size="xs" color="text-gray-500">
-            Need help?{' '}
-            <Link href="/support">
-              <Text color="text-gray-400">Contact support</Text>
+          <Box textAlign="center">
+            <Link href={routes.auth.login}>
+              <Stack direction="row" align="center" justify="center" gap={2} group>
+                <Icon icon={ArrowLeft} size={3.5} color="var(--color-primary)" groupHoverScale />
+                <Text size="sm" weight="bold" color="text-primary-accent">Back to Login</Text>
+              </Stack>
             </Link>
-          </Text>
-        </Box>
-      </Box>
-    </Box>
+          </Box>
+        </AuthForm>
+      ) : (
+        <Stack gap={6}>
+          <Box p={4} bg="success-green/10" border borderColor="success-green/30" rounded="md">
+            <Stack direction="row" align="start" gap={3}>
+              <Icon icon={CheckCircle2} size={5} color="var(--color-success)" />
+              <Box>
+                <Text size="sm" color="text-success-green" weight="bold" block>Password Reset</Text>
+                <Text size="xs" color="text-gray-400" block mt={1}>{viewData.successMessage}</Text>
+              </Box>
+            </Stack>
+          </Box>
+
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => window.location.href = '/auth/login'}
+            fullWidth
+          >
+            Return to Login
+          </Button>
+        </Stack>
+      )}
+
+      <AuthFooterLinks>
+        <Text size="xs" color="text-gray-600">
+          Need help?{' '}
+          <Link href="/support">Contact support</Link>
+        </Text>
+      </AuthFooterLinks>
+    </AuthCard>
   );
 }
diff --git a/apps/website/templates/auth/SignupTemplate.tsx b/apps/website/templates/auth/SignupTemplate.tsx
index 7ee2400e2..1dd6549d8 100644
--- a/apps/website/templates/auth/SignupTemplate.tsx
+++ b/apps/website/templates/auth/SignupTemplate.tsx
@@ -1,34 +1,19 @@
 'use client';
 
 import React from 'react';
-import {
-  Mail,
-  Lock,
-  Eye,
-  EyeOff,
-  UserPlus,
-  AlertCircle,
-  Flag,
-  User,
-  Check,
-  X,
-  Car,
-  Users,
-  Trophy,
-  Shield,
-  Sparkles,
-} from 'lucide-react';
-import { Card } from '@/ui/Card';
+import { UserPlus, Mail, User, Check, X, AlertCircle } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
+import { PasswordField } from '@/ui/PasswordField';
+import { AuthCard } from '@/components/auth/AuthCard';
+import { AuthForm } from '@/components/auth/AuthForm';
+import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { SignupViewData } from '@/lib/builders/view-data/types/SignupViewData';
 import { checkPasswordStrength } from '@/lib/utils/validation';
 
@@ -50,432 +35,180 @@ interface SignupTemplateProps {
   };
 }
 
-const USER_ROLES = [
-  {
-    icon: Car,
-    title: 'Driver',
-    description: 'Race, track stats, join teams',
-    color: '#3b82f6',
-    bg: 'bg-blue-500/10',
-  },
-  {
-    icon: Trophy,
-    title: 'League Admin',
-    description: 'Organize leagues and events',
-    color: '#10b981',
-    bg: 'bg-green-500/10',
-  },
-  {
-    icon: Users,
-    title: 'Team Manager',
-    description: 'Manage team and drivers',
-    color: '#a855f7',
-    bg: 'bg-purple-500/10',
-  },
-];
-
-const FEATURES = [
-  'Track your racing statistics and progress',
-  'Join or create competitive leagues',
-  'Build or join racing teams',
-  'Connect your iRacing account',
-  'Compete in organized events',
-  'Access detailed performance analytics',
-];
-
 export function SignupTemplate({ viewData, formActions, uiState, mutationState }: SignupTemplateProps) {
-  const passwordStrength = checkPasswordStrength(viewData.formState.fields.password.value);
+  const isSubmitting = mutationState.isPending;
+  const passwordValue = viewData.formState.fields.password.value || '';
+  const passwordStrength = checkPasswordStrength(passwordValue);
 
   const passwordRequirements = [
-    { met: viewData.formState.fields.password.value.length >= 8, label: 'At least 8 characters' },
-    { met: /[a-z]/.test(viewData.formState.fields.password.value) && /[A-Z]/.test(viewData.formState.fields.password.value), label: 'Upper and lowercase letters' },
-    { met: /\d/.test(viewData.formState.fields.password.value), label: 'At least one number' },
-    { met: /[^a-zA-Z\d]/.test(viewData.formState.fields.password.value), label: 'At least one special character' },
+    { met: passwordValue.length >= 8, label: '8+ characters' },
+    { met: /[a-z]/.test(passwordValue) && /[A-Z]/.test(passwordValue), label: 'Case mix' },
+    { met: /\d/.test(passwordValue), label: 'Number' },
+    { met: /[^a-zA-Z\d]/.test(passwordValue), label: 'Special' },
   ];
 
   return (
-    <Box as="main" minHeight="100vh" display="flex" position="relative">
-      {/* Background Pattern */}
-      <Box position="absolute" inset="0" bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
-      
-      {/* Left Side - Info Panel (Hidden on mobile) */}
-      <Box display={{ base: 'none', lg: 'flex' }} w={{ lg: '1/2' }} position="relative" alignItems="center" justifyContent="center" p={12}>
-        <Box maxWidth="32rem">
-          {/* Logo */}
-          <Stack direction="row" align="center" gap={3} mb={8}>
-            <Surface variant="muted" rounded="xl" border padding={2} bg="bg-blue-500/10" borderColor="border-blue-500/30">
-              <Icon icon={Flag} size={6} color="#3b82f6" />
-            </Surface>
-            <Text size="2xl" weight="bold" color="text-white">GridPilot</Text>
+    <AuthCard 
+      title="Create Account" 
+      description="Join the GridPilot racing community"
+    >
+      <AuthForm onSubmit={formActions.handleSubmit}>
+        <Stack gap={6}>
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-low" uppercase letterSpacing="wide" block>Personal Information</Text>
+            <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
+              <Input
+                label="First Name"
+                id="firstName"
+                name="firstName"
+                value={viewData.formState.fields.firstName.value}
+                onChange={formActions.handleChange}
+                errorMessage={viewData.formState.fields.firstName.error}
+                placeholder="John"
+                disabled={isSubmitting}
+                autoComplete="given-name"
+                icon={<User size={16} />}
+              />
+              <Input
+                label="Last Name"
+                id="lastName"
+                name="lastName"
+                value={viewData.formState.fields.lastName.value}
+                onChange={formActions.handleChange}
+                errorMessage={viewData.formState.fields.lastName.error}
+                placeholder="Smith"
+                disabled={isSubmitting}
+                autoComplete="family-name"
+                icon={<User size={16} />}
+              />
+            </Box>
+            
+            <Box p={3} bg="warning-amber/5" border borderColor="warning-amber/20" rounded="md">
+              <Stack direction="row" align="start" gap={2}>
+                <Icon icon={AlertCircle} size={3.5} color="var(--color-warning)" mt={0.5} />
+                <Text size="xs" color="text-med">
+                  <Text weight="bold" color="text-warning-amber">Note:</Text> Your name cannot be changed after signup.
+                </Text>
+              </Stack>
+            </Box>
+
+            <Input
+              label="Email Address"
+              id="email"
+              name="email"
+              type="email"
+              value={viewData.formState.fields.email.value}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.email.error}
+              placeholder="you@example.com"
+              disabled={isSubmitting}
+              autoComplete="email"
+              icon={<Mail size={16} />}
+            />
           </Stack>
 
-          <Box mb={4}>
-            <Heading level={2}>Start Your Racing Journey</Heading>
-          </Box>
-          
-          <Text size="lg" color="text-gray-400" block mb={8}>
-            Join thousands of sim racers. One account gives you access to all roles - race as a driver, organize leagues, or manage teams.
-          </Text>
+          <Stack gap={4}>
+            <Text size="xs" weight="bold" color="text-low" uppercase letterSpacing="wide" block>Security</Text>
+            <PasswordField
+              label="Password"
+              id="password"
+              name="password"
+              value={viewData.formState.fields.password.value}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.password.error}
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoComplete="new-password"
+              showPassword={uiState.showPassword}
+              onTogglePassword={() => formActions.setShowPassword(!uiState.showPassword)}
+            />
 
-          {/* Role Cards */}
-          <Stack gap={3} mb={8}>
-            {USER_ROLES.map((role) => (
-              <Surface
-                key={role.title}
-                variant="muted"
-                rounded="xl"
-                border
-                padding={4}
-                bg="bg-neutral-800/30"
-                borderColor="border-neutral-800"
-              >
-                <Stack direction="row" align="center" gap={4}>
-                  <Surface variant="muted" rounded="lg" padding={2} bg={role.bg}>
-                    <Icon icon={role.icon} size={5} color={role.color} />
-                  </Surface>
-                  <Box>
-                    <Text weight="medium" color="text-white" block>{role.title}</Text>
-                    <Text size="sm" color="text-gray-500" block mt={1}>{role.description}</Text>
+            {passwordValue && (
+              <Stack gap={3}>
+                <Stack direction="row" align="center" gap={2}>
+                  <Box flexGrow={1} h="1px" bg="outline-steel" rounded="full" overflow="hidden">
+                    <Box 
+                      h="full" 
+                      transition
+                      w={`${(passwordStrength.score / 5) * 100}%`}
+                      bg={
+                        passwordStrength.score <= 2 ? 'critical-red' : 
+                        passwordStrength.score <= 4 ? 'warning-amber' : 'success-green'
+                      }
+                    />
                   </Box>
+                  <Text size="xs" weight="bold" color="text-low" uppercase>
+                    {passwordStrength.label}
+                  </Text>
                 </Stack>
-              </Surface>
-            ))}
-          </Stack>
-
-          {/* Features List */}
-          <Box mb={8}>
-            <Surface variant="muted" rounded="xl" border padding={5} bg="bg-neutral-800/20" borderColor="border-neutral-800">
-              <Stack direction="row" align="center" gap={2} mb={4}>
-                <Icon icon={Sparkles} size={4} color="#3b82f6" />
-                <Text size="sm" weight="medium" color="text-white">What you&apos;ll get</Text>
-              </Stack>
-              <Stack gap={2}>
-                {FEATURES.map((feature, index) => (
-                  <Stack key={index} direction="row" align="center" gap={2}>
-                    <Icon icon={Check} size={3.5} color="#10b981" />
-                    <Text size="sm" color="text-gray-400">{feature}</Text>
-                  </Stack>
-                ))}
-              </Stack>
-            </Surface>
-          </Box>
-
-          {/* Trust Indicators */}
-          <Stack direction="row" align="center" gap={6}>
-            <Stack direction="row" align="center" gap={2}>
-              <Icon icon={Shield} size={4} color="#737373" />
-              <Text size="sm" color="text-gray-500">Secure signup</Text>
-            </Stack>
-            <Text size="sm" color="text-gray-500">iRacing integration</Text>
-          </Stack>
-        </Box>
-      </Box>
-
-      {/* Right Side - Signup Form */}
-      <Box flex={1} display="flex" alignItems="center" justifyContent="center" p={{ base: 4, lg: 12 }} position="relative" overflow="auto">
-        <Box w="full" maxWidth="28rem">
-          {/* Mobile Logo/Header */}
-          <Box display={{ base: 'block', lg: 'none' }} textAlign="center" mb={8}>
-            <Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
-              <Icon icon={Flag} size={8} color="#3b82f6" />
-            </Surface>
-            <Heading level={1}>Join GridPilot</Heading>
-            <Text color="text-gray-400" block mt={2}>
-              Create your account and start racing
-            </Text>
-          </Box>
-
-          {/* Desktop Header */}
-          <Box display={{ base: 'none', lg: 'block' }} textAlign="center" mb={8}>
-            <Heading level={2}>Create Account</Heading>
-            <Text color="text-gray-400" block mt={2}>
-              Get started with your free account
-            </Text>
-          </Box>
-
-          <Card position="relative" overflow="hidden">
-            {/* Background accent */}
-            <Box position="absolute" top="0" right="0" w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />
-
-            <Box as="form" onSubmit={formActions.handleSubmit}>
-              <Stack gap={4} position="relative">
-                {/* First Name */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    First Name
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={User} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="firstName"
-                      name="firstName"
-                      type="text"
-                      value={viewData.formState.fields.firstName.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.firstName.error ? 'error' : 'default'}
-                      placeholder="John"
-                      disabled={mutationState.isPending}
-                      autoComplete="given-name"
-                    />
-                  </Box>
-                  {viewData.formState.fields.firstName.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.firstName.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Last Name */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Last Name
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={User} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="lastName"
-                      name="lastName"
-                      type="text"
-                      value={viewData.formState.fields.lastName.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.lastName.error ? 'error' : 'default'}
-                      placeholder="Smith"
-                      disabled={mutationState.isPending}
-                      autoComplete="family-name"
-                    />
-                  </Box>
-                  {viewData.formState.fields.lastName.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.lastName.error}
-                    </Text>
-                  )}
-                  <Text size="xs" color="text-gray-500" block mt={1}>Your name will be used as-is and cannot be changed later</Text>
-                </Box>
-
-                {/* Name Immutability Warning */}
-                <Surface variant="muted" rounded="lg" border padding={3} bg="bg-amber-500/10" borderColor="border-amber-500/30">
-                  <Stack direction="row" align="start" gap={3}>
-                    <Icon icon={AlertCircle} size={5} color="#f59e0b" />
-                    <Text size="sm" color="text-warning-amber">
-                      <Text weight="bold">Important:</Text> Your name cannot be changed after signup. Please ensure it&apos;s correct.
-                    </Text>
-                  </Stack>
-                </Surface>
-
-                {/* Email */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Email Address
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Mail} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="email"
-                      name="email"
-                      type="email"
-                      value={viewData.formState.fields.email.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.email.error ? 'error' : 'default'}
-                      placeholder="you@example.com"
-                      disabled={mutationState.isPending}
-                      autoComplete="email"
-                    />
-                  </Box>
-                  {viewData.formState.fields.email.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.email.error}
-                    </Text>
-                  )}
-                </Box>
-
-                {/* Password */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Password
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Lock} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="password"
-                      name="password"
-                      type={uiState.showPassword ? 'text' : 'password'}
-                      value={viewData.formState.fields.password.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.password.error ? 'error' : 'default'}
-                      placeholder="••••••••"
-                      disabled={mutationState.isPending}
-                      autoComplete="new-password"
-                    />
-                    <Box
-                      as="button"
-                      type="button"
-                      onClick={() => formActions.setShowPassword(!uiState.showPassword)}
-                      position="absolute"
-                      right="3"
-                      top="50%"
-                      zIndex={10}
-                      bg="transparent"
-                      borderStyle="none"
-                      cursor="pointer"
-                    >
-                      <Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
-                    </Box>
-                  </Box>
-                  {viewData.formState.fields.password.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.password.error}
-                    </Text>
-                  )}
-
-                  {/* Password Strength */}
-                  {viewData.formState.fields.password.value && (
-                    <Box mt={3}>
-                      <Stack direction="row" align="center" gap={2} mb={2}>
-                        <Box flex={1} h="1.5" rounded="full" bg="bg-neutral-800" overflow="hidden">
-                          <Box h="full" w={`${(passwordStrength.score / 5) * 100}%`} bg={passwordStrength.color === 'bg-red-500' ? 'bg-red-500' : passwordStrength.color === 'bg-yellow-500' ? 'bg-amber-500' : passwordStrength.color === 'bg-blue-500' ? 'bg-blue-500' : 'bg-green-500'} />
-                        </Box>
-                        <Text size="xs" weight="medium" color={passwordStrength.color === 'bg-red-500' ? 'text-red-400' : passwordStrength.color === 'bg-yellow-500' ? 'text-amber-400' : passwordStrength.color === 'bg-blue-500' ? 'text-blue-400' : 'text-green-400'}>
-                          {passwordStrength.label}
-                        </Text>
-                      </Stack>
-                      <Box display="grid" gridCols={2} gap={1}>
-                        {passwordRequirements.map((req, index) => (
-                          <Stack key={index} direction="row" align="center" gap={1.5}>
-                            <Icon icon={req.met ? Check : X} size={3} color={req.met ? '#10b981' : '#525252'} />
-                            <Text size="xs" color={req.met ? 'text-gray-300' : 'text-gray-500'}>
-                              {req.label}
-                            </Text>
-                          </Stack>
-                        ))}
-                      </Box>
-                    </Box>
-                  )}
-                </Box>
-
-                {/* Confirm Password */}
-                <Box>
-                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
-                    Confirm Password
-                  </Text>
-                  <Box position="relative">
-                    <Box position="absolute" left="3" top="50%" zIndex={10}>
-                      <Icon icon={Lock} size={4} color="#6b7280" />
-                    </Box>
-                    <Input
-                      id="confirmPassword"
-                      name="confirmPassword"
-                      type={uiState.showConfirmPassword ? 'text' : 'password'}
-                      value={viewData.formState.fields.confirmPassword.value}
-                      onChange={formActions.handleChange}
-                      variant={viewData.formState.fields.confirmPassword.error ? 'error' : 'default'}
-                      placeholder="••••••••"
-                      disabled={mutationState.isPending}
-                      autoComplete="new-password"
-                    />
-                    <Box
-                      as="button"
-                      type="button"
-                      onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
-                      position="absolute"
-                      right="3"
-                      top="50%"
-                      zIndex={10}
-                      bg="transparent"
-                      borderStyle="none"
-                      cursor="pointer"
-                    >
-                      <Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
-                    </Box>
-                  </Box>
-                  {viewData.formState.fields.confirmPassword.error && (
-                    <Text size="xs" color="text-error-red" block mt={1}>
-                      {viewData.formState.fields.confirmPassword.error}
-                    </Text>
-                  )}
-                  {viewData.formState.fields.confirmPassword.value && viewData.formState.fields.password.value === viewData.formState.fields.confirmPassword.value && (
-                    <Stack direction="row" align="center" gap={1} mt={1}>
-                      <Icon icon={Check} size={3} color="#10b981" />
-                      <Text size="xs" color="text-performance-green">Passwords match</Text>
+                <Box display="grid" gridCols={2} gap={2}>
+                  {passwordRequirements.map((req, index) => (
+                    <Stack key={index} direction="row" align="center" gap={1.5}>
+                      <Icon icon={req.met ? Check : X} size={3} color={req.met ? 'var(--color-success)' : 'var(--color-text-low)'} />
+                      <Text size="xs" color={req.met ? 'text-med' : 'text-low'}>
+                        {req.label}
+                      </Text>
                     </Stack>
-                  )}
+                  ))}
                 </Box>
-
-                {/* Submit Button */}
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={mutationState.isPending}
-                  fullWidth
-                  icon={mutationState.isPending ? <LoadingSpinner size={4} color="white" /> : <Icon icon={UserPlus} size={4} />}
-                >
-                  {mutationState.isPending ? 'Creating account...' : 'Create Account'}
-                </Button>
               </Stack>
-            </Box>
+            )}
 
-            {/* Divider */}
-            <Box position="relative" my={6}>
-              <Box position="absolute" inset="0" display="flex" alignItems="center">
-                <Box w="full" borderTop borderColor="border-neutral-800" />
-              </Box>
-              <Box position="relative" display="flex" justifyContent="center">
-                <Box px={4} bg="bg-neutral-900">
-                  <Text size="xs" color="text-gray-500">or continue with</Text>
-                </Box>
-              </Box>
-            </Box>
+            <PasswordField
+              label="Confirm Password"
+              id="confirmPassword"
+              name="confirmPassword"
+              value={viewData.formState.fields.confirmPassword.value}
+              onChange={formActions.handleChange}
+              errorMessage={viewData.formState.fields.confirmPassword.error}
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoComplete="new-password"
+              showPassword={uiState.showConfirmPassword}
+              onTogglePassword={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
+            />
+          </Stack>
+        </Stack>
 
-            {/* Login Link */}
-            <Box textAlign="center" mt={6}>
-              <Text size="sm" color="text-gray-400">
-                Already have an account?{' '}
-                <Link
-                  href={viewData.returnTo && viewData.returnTo !== '/onboarding' ? `/auth/login?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/login'}
-                >
-                  <Text color="text-primary-blue" weight="medium">Sign in</Text>
-                </Link>
-              </Text>
-            </Box>
-          </Card>
-
-          {/* Footer */}
-          <Box mt={6} textAlign="center">
-            <Text size="xs" color="text-gray-500">
-              By creating an account, you agree to our{' '}
-              <Link href="/terms">
-                <Text color="text-gray-400">Terms of Service</Text>
-              </Link>
-              {' '}and{' '}
-              <Link href="/privacy">
-                <Text color="text-gray-400">Privacy Policy</Text>
-              </Link>
-            </Text>
-          </Box>
-
-          {/* Mobile Role Info */}
-          <Box mt={8} display={{ base: 'block', lg: 'none' }}>
-            <Text size="xs" color="text-gray-500" block mb={4} textAlign="center">One account for all roles</Text>
-            <Stack direction="row" align="center" justify="center" gap={6}>
-              {USER_ROLES.map((role) => (
-                <Stack key={role.title} align="center" gap={1}>
-                  <Surface variant="muted" rounded="lg" padding={2} bg={role.bg}>
-                    <Icon icon={role.icon} size={4} color={role.color} />
-                  </Surface>
-                  <Text size="xs" color="text-gray-500">{role.title}</Text>
-                </Stack>
-              ))}
+        {mutationState.error && (
+          <Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
+            <Stack direction="row" align="start" gap={3}>
+              <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
+              <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
             </Stack>
           </Box>
+        )}
+
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={isSubmitting}
+          fullWidth
+          icon={isSubmitting ? <LoadingSpinner size={4} /> : <UserPlus size={16} />}
+        >
+          {isSubmitting ? 'Creating account...' : 'Create Account'}
+        </Button>
+      </AuthForm>
+
+      <AuthFooterLinks>
+        <Text size="sm" color="text-gray-400">
+          Already have an account?{' '}
+          <Link
+            href={viewData.returnTo && viewData.returnTo !== '/onboarding' ? `/auth/login?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/login'}
+          >
+            <Text color="text-primary-accent" weight="bold">Sign in</Text>
+          </Link>
+        </Text>
+        
+        <Box mt={2}>
+          <Text size="xs" color="text-gray-600">
+            By creating an account, you agree to our{' '}
+            <Link href="/terms">Terms</Link>
+            {' '}and{' '}
+            <Link href="/privacy">Privacy</Link>
+          </Text>
         </Box>
-      </Box>
-    </Box>
+      </AuthFooterLinks>
+    </AuthCard>
   );
 }
diff --git a/apps/website/templates/layout/GlobalFooterTemplate.tsx b/apps/website/templates/layout/GlobalFooterTemplate.tsx
new file mode 100644
index 000000000..2155402f5
--- /dev/null
+++ b/apps/website/templates/layout/GlobalFooterTemplate.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { AppFooter } from '@/ui/AppFooter';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export interface GlobalFooterViewData {}
+
+export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
+  return (
+    <AppFooter>
+      <Box maxWidth="7xl" mx="auto" display="grid" responsiveGridCols={{ base: 1, md: 4 }} gap={12}>
+        <Box colSpan={{ base: 1, md: 2 }}>
+          <Box mb={6} opacity={0.8}>
+            <Image
+              src="/images/logos/wordmark-rectangle-dark.svg"
+              alt="GridPilot"
+              width={140}
+              height={26}
+            />
+          </Box>
+          <Box maxWidth="sm" mb={6}>
+            <Text color="text-gray-500">
+              The professional infrastructure for serious sim racing. 
+              Precision telemetry, automated results, and elite league management.
+            </Text>
+          </Box>
+          <Box display="flex" alignItems="center" gap={4}>
+            <Text size="xs" color="text-gray-600" font="mono" letterSpacing="widest">
+              © 2026 GRIDPILOT
+            </Text>
+          </Box>
+        </Box>
+        
+        <Box>
+          <Box mb={4}>
+            <Text weight="bold" color="text-gray-300" letterSpacing="wider">PLATFORM</Text>
+          </Box>
+          <Stack as="ul" direction="col" gap={2}>
+            <Box as="li">
+              <Box as={Link} href="/leagues" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Leagues
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/teams" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Teams
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/leaderboards" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Leaderboards
+              </Box>
+            </Box>
+          </Stack>
+        </Box>
+        
+        <Box>
+          <Box mb={4}>
+            <Text weight="bold" color="text-gray-300" letterSpacing="wider">SUPPORT</Text>
+          </Box>
+          <Stack as="ul" direction="col" gap={2}>
+            <Box as="li">
+              <Box as={Link} href="/docs" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Documentation
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/status" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                System Status
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/contact" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Contact
+              </Box>
+            </Box>
+          </Stack>
+        </Box>
+      </Box>
+    </AppFooter>
+  );
+}
diff --git a/apps/website/templates/layout/GlobalSidebarTemplate.tsx b/apps/website/templates/layout/GlobalSidebarTemplate.tsx
new file mode 100644
index 000000000..65d44251a
--- /dev/null
+++ b/apps/website/templates/layout/GlobalSidebarTemplate.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { DashboardRail } from '@/ui/DashboardRail';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Trophy, Users, Calendar, Layout, Settings, Home } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export interface GlobalSidebarViewData {}
+
+export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
+  const pathname = usePathname();
+
+  const navItems = [
+    { label: 'Dashboard', href: '/', icon: Home },
+    { label: 'Leagues', href: '/leagues', icon: Trophy },
+    { label: 'Teams', href: '/teams', icon: Users },
+    { label: 'Races', href: '/races', icon: Calendar },
+    { label: 'Leaderboards', href: '/leaderboards', icon: Layout },
+    { label: 'Settings', href: '/settings', icon: Settings },
+  ];
+
+  return (
+    <DashboardRail>
+      <Box py={6}>
+        <Box px={6} mb={8}>
+          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
+            NAVIGATION
+          </Text>
+        </Box>
+        <Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            const Icon = item.icon;
+            return (
+              <Box
+                key={item.href}
+                as={Link}
+                href={item.href}
+                display="flex"
+                alignItems="center"
+                gap={3}
+                px={3}
+                py={2}
+                rounded="md"
+                transition
+                bg={isActive ? 'primary-accent/10' : 'transparent'}
+                color={isActive ? 'primary-accent' : 'text-gray-400'}
+                hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
+                hoverTextColor={isActive ? 'primary-accent' : 'white'}
+                group
+              >
+                <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
+                <Text weight="medium">{item.label}</Text>
+                {isActive && (
+                  <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
+                )}
+              </Box>
+            );
+          })}
+        </Stack>
+        
+        <Box px={6} mt="auto" pt={6} borderTop borderColor="[#23272B]">
+          <Stack direction="row" align="center" gap={2} mb={4}>
+            <Box w="8px" h="8px" rounded="full" bg="success-green" />
+            <Text size="xs" color="text-gray-400" font="mono">
+              SYSTEM ONLINE
+            </Text>
+          </Stack>
+        </Box>
+      </Box>
+    </DashboardRail>
+  );
+}
diff --git a/apps/website/templates/layout/HeaderContentTemplate.tsx b/apps/website/templates/layout/HeaderContentTemplate.tsx
new file mode 100644
index 000000000..1dada35d5
--- /dev/null
+++ b/apps/website/templates/layout/HeaderContentTemplate.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+export interface HeaderContentViewData {}
+
+export function HeaderContentTemplate(_props: HeaderContentViewData) {
+  return (
+    <>
+      <Stack direction="row" align="center" gap={6}>
+        <Box as={Link} href="/" display="inline-flex" alignItems="center" group>
+          <Box position="relative">
+            <Box h={{ base: '24px', md: '28px' }} w="auto" transition opacity={1} groupHoverOpacity={0.8}>
+              <Image
+                src="/images/logos/wordmark-rectangle-dark.svg"
+                alt="GridPilot"
+                width={160}
+                height={30}
+                priority
+              />
+            </Box>
+            <Box 
+              position="absolute" 
+              bottom="-4px" 
+              left="0" 
+              w="0" 
+              h="2px" 
+              bg="primary-accent" 
+              transition 
+              groupHoverWidth="full" 
+            />
+          </Box>
+        </Box>
+        <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={6}>
+          <Box w="6px" h="6px" rounded="full" bg="primary-accent" animate="pulse" />
+          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
+            MOTORSPORT INFRASTRUCTURE
+          </Text>
+        </Box>
+      </Stack>
+      
+      <Box display="flex" alignItems="center" gap={4}>
+        <Stack direction="row" display={{ base: 'none', md: 'flex' }} align="center" gap={1} px={3} py={1} border borderColor="[#23272B]" bg="[#141619]/20">
+          <Text size="xs" color="text-gray-600" weight="bold" font="mono">STATUS:</Text>
+          <Text size="xs" color="text-success-green" weight="bold" font="mono">OPERATIONAL</Text>
+        </Stack>
+      </Box>
+    </>
+  );
+}
diff --git a/apps/website/templates/layout/RootAppShellTemplate.tsx b/apps/website/templates/layout/RootAppShellTemplate.tsx
new file mode 100644
index 000000000..825131ec7
--- /dev/null
+++ b/apps/website/templates/layout/RootAppShellTemplate.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { AppShell } from '@/ui/AppShell';
+import { ControlBar } from '@/ui/ControlBar';
+import { TopNav } from '@/ui/TopNav';
+import { ContentViewport } from '@/ui/ContentViewport';
+import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
+import { GlobalFooterTemplate } from './GlobalFooterTemplate';
+import { HeaderContentTemplate } from './HeaderContentTemplate';
+import { Box } from '@/ui/Box';
+
+export interface RootAppShellViewData {
+  children: React.ReactNode;
+}
+
+/**
+ * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
+ * It follows the "Telemetry Workspace" structure:
+ * - ControlBar = header/control bar
+ * - DashboardRail = sidebar rail
+ * - ContentViewport = content area
+ */
+export function RootAppShellTemplate({ children }: RootAppShellViewData) {
+  return (
+    <AppShell>
+      <ControlBar>
+        <TopNav>
+          <HeaderContentTemplate />
+        </TopNav>
+      </ControlBar>
+      
+      <Box display="flex" flexGrow={1} overflow="hidden">
+        <GlobalSidebarTemplate />
+        
+        <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
+          <ContentViewport>
+            {children}
+          </ContentViewport>
+          <GlobalFooterTemplate />
+        </Box>
+      </Box>
+    </AppShell>
+  );
+}
diff --git a/apps/website/templates/onboarding/OnboardingTemplate.tsx b/apps/website/templates/onboarding/OnboardingTemplate.tsx
new file mode 100644
index 000000000..f355e432a
--- /dev/null
+++ b/apps/website/templates/onboarding/OnboardingTemplate.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import { OnboardingShell } from '@/components/onboarding/OnboardingShell';
+import { OnboardingStepper } from '@/components/onboarding/OnboardingStepper';
+import { OnboardingHelpPanel } from '@/components/onboarding/OnboardingHelpPanel';
+import { OnboardingStepPanel } from '@/components/onboarding/OnboardingStepPanel';
+import { OnboardingPrimaryActions } from '@/components/onboarding/OnboardingPrimaryActions';
+import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
+import { AvatarInfo, AvatarStep } from '@/components/onboarding/AvatarStep';
+import { FormEvent } from 'react';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { OnboardingError } from '@/ui/OnboardingError';
+
+type OnboardingStep = 1 | 2;
+
+interface FormErrors {
+  [key: string]: string | undefined;
+  firstName?: string;
+  lastName?: string;
+  displayName?: string;
+  country?: string;
+  facePhoto?: string;
+  avatar?: string;
+  submit?: string;
+}
+
+export interface OnboardingViewData {
+  onCompleted: () => void;
+  onCompleteOnboarding: (data: {
+    firstName: string;
+    lastName: string;
+    displayName: string;
+    country: string;
+    timezone?: string;
+  }) => Promise<{ success: boolean; error?: string }>;
+  onGenerateAvatars: (params: {
+    facePhotoData: string;
+    suitColor: string;
+  }) => Promise<{ success: boolean; data?: { success: boolean; avatarUrls?: string[]; errorMessage?: string }; error?: string }>;
+  isProcessing: boolean;
+  step: OnboardingStep;
+  setStep: (step: OnboardingStep) => void;
+  errors: FormErrors;
+  setErrors: (errors: FormErrors) => void;
+  personalInfo: PersonalInfo;
+  setPersonalInfo: (info: PersonalInfo) => void;
+  avatarInfo: AvatarInfo;
+  setAvatarInfo: (info: AvatarInfo) => void;
+}
+
+interface OnboardingTemplateProps {
+  viewData: OnboardingViewData;
+}
+
+export function OnboardingTemplate({ viewData }: OnboardingTemplateProps) {
+  const { 
+    onCompleted, 
+    onCompleteOnboarding, 
+    onGenerateAvatars, 
+    isProcessing,
+    step,
+    setStep,
+    errors,
+    setErrors,
+    personalInfo,
+    setPersonalInfo,
+    avatarInfo,
+    setAvatarInfo
+  } = viewData;
+
+  const steps = ['Personal Info', 'Racing Avatar'];
+
+  // Validation
+  const validateStep = (currentStep: OnboardingStep): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (currentStep === 1) {
+      if (!personalInfo.firstName.trim()) {
+        newErrors.firstName = 'First name is required';
+      }
+      if (!personalInfo.lastName.trim()) {
+        newErrors.lastName = 'Last name is required';
+      }
+      if (!personalInfo.displayName.trim()) {
+        newErrors.displayName = 'Display name is required';
+      } else if (personalInfo.displayName.length < 3) {
+        newErrors.displayName = 'Display name must be at least 3 characters';
+      }
+      if (!personalInfo.country) {
+        newErrors.country = 'Please select your country';
+      }
+    }
+
+    if (currentStep === 2) {
+      if (!avatarInfo.facePhoto) {
+        newErrors.facePhoto = 'Please upload a photo of your face';
+      }
+      if (avatarInfo.generatedAvatars.length > 0 && avatarInfo.selectedAvatarIndex === null) {
+        newErrors.avatar = 'Please select one of the generated avatars';
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleNext = () => {
+    const isValid = validateStep(step);
+    if (isValid && step < 2) {
+      setStep((step + 1) as OnboardingStep);
+    }
+  };
+
+  const handleBack = () => {
+    if (step > 1) {
+      setStep((step - 1) as OnboardingStep);
+    }
+  };
+
+  const generateAvatars = async () => {
+    if (!avatarInfo.facePhoto) {
+      setErrors({ ...errors, facePhoto: 'Please upload a photo first' });
+      return;
+    }
+
+    setAvatarInfo({ ...avatarInfo, isGenerating: true, generatedAvatars: [], selectedAvatarIndex: null });
+    const newErrors = { ...errors };
+    delete newErrors.avatar;
+    setErrors(newErrors);
+
+    try {
+      const result = await onGenerateAvatars({
+        facePhotoData: avatarInfo.facePhoto,
+        suitColor: avatarInfo.suitColor,
+      });
+
+      if (result.success && result.data?.success && result.data.avatarUrls) {
+        setAvatarInfo({
+          ...avatarInfo,
+          generatedAvatars: result.data.avatarUrls,
+          isGenerating: false,
+        });
+      } else {
+        setErrors({ ...errors, avatar: result.data?.errorMessage || result.error || 'Failed to generate avatars' });
+        setAvatarInfo({ ...avatarInfo, isGenerating: false });
+      }
+    } catch (error) {
+      setErrors({ ...errors, avatar: 'Failed to generate avatars. Please try again.' });
+      setAvatarInfo({ ...avatarInfo, isGenerating: false });
+    }
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!validateStep(2)) {
+      return;
+    }
+
+    if (avatarInfo.selectedAvatarIndex === null) {
+      setErrors({ ...errors, avatar: 'Please select an avatar' });
+      return;
+    }
+
+    setErrors({});
+
+    try {
+      const result = await onCompleteOnboarding({
+        firstName: personalInfo.firstName.trim(),
+        lastName: personalInfo.lastName.trim(),
+        displayName: personalInfo.displayName.trim(),
+        country: personalInfo.country,
+        timezone: personalInfo.timezone || undefined,
+      });
+
+      if (result.success) {
+        onCompleted();
+      } else {
+        setErrors({ submit: result.error || 'Failed to create profile' });
+      }
+    } catch (error) {
+      setErrors({ submit: 'Failed to create profile' });
+    }
+  };
+
+  const header = (
+    <Stack direction="row" align="center" justify="between">
+      <Stack gap={1}>
+        <Text size="xl" weight="bold" color="text-white" uppercase letterSpacing="tighter">
+          GridPilot <Text color="text-primary-blue">Onboarding</Text>
+        </Text>
+        <Text size="xs" color="text-gray-500" uppercase letterSpacing="widest">
+          System Initialization
+        </Text>
+      </Stack>
+      <Box w="64">
+        <OnboardingStepper currentStep={step} totalSteps={2} steps={steps} />
+      </Box>
+    </Stack>
+  );
+
+  const sidebar = (
+    <Stack gap={6}>
+      <OnboardingHelpPanel title="Onboarding Process">
+        Welcome to GridPilot. We&apos;re setting up your racing identity. This process ensures you&apos;re ready for the track with a complete profile and a unique AI-generated avatar.
+      </OnboardingHelpPanel>
+      
+      {step === 2 && (
+        <OnboardingHelpPanel title="Avatar Generation">
+          Our AI uses your photo to create a professional racing avatar. For best results, use a clear, front-facing photo with good lighting.
+        </OnboardingHelpPanel>
+      )}
+    </Stack>
+  );
+
+  return (
+    <OnboardingShell header={header} sidebar={sidebar}>
+      <Box as="form" onSubmit={handleSubmit}>
+        {step === 1 && (
+          <OnboardingStepPanel 
+            title="Personal Information" 
+            description="Tell us a bit about yourself to get started."
+          >
+            <PersonalInfoStep
+              personalInfo={personalInfo}
+              setPersonalInfo={setPersonalInfo}
+              errors={errors}
+              loading={isProcessing}
+            />
+          </OnboardingStepPanel>
+        )}
+
+        {step === 2 && (
+          <OnboardingStepPanel 
+            title="Create Your Racing Avatar" 
+            description="Upload a photo and we will generate a unique racing avatar for you."
+          >
+            <AvatarStep
+              avatarInfo={avatarInfo}
+              setAvatarInfo={setAvatarInfo}
+              errors={errors}
+              setErrors={setErrors}
+              onGenerateAvatars={generateAvatars}
+            />
+          </OnboardingStepPanel>
+        )}
+
+        {errors.submit && (
+          <Box mt={4}>
+            <OnboardingError message={errors.submit} />
+          </Box>
+        )}
+
+        <OnboardingPrimaryActions
+          onBack={step > 1 ? handleBack : undefined}
+          onNext={step < 2 ? handleNext : undefined}
+          isLastStep={step === 2}
+          canNext={step === 1 ? true : avatarInfo.selectedAvatarIndex !== null}
+          isLoading={isProcessing}
+          type={step === 2 ? 'submit' : 'button'}
+        />
+      </Box>
+    </OnboardingShell>
+  );
+}
diff --git a/apps/website/ui/AppFooter.tsx b/apps/website/ui/AppFooter.tsx
new file mode 100644
index 000000000..d5416c6c0
--- /dev/null
+++ b/apps/website/ui/AppFooter.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface AppFooterProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * AppFooter is the bottom section of the application.
+ */
+export function AppFooter({ children, className = '' }: AppFooterProps) {
+  return (
+    <footer className={`bg-[#141619] border-t border-[#23272B] py-8 px-4 md:px-6 ${className}`}>
+      {children}
+    </footer>
+  );
+}
diff --git a/apps/website/ui/AppHeader.tsx b/apps/website/ui/AppHeader.tsx
new file mode 100644
index 000000000..6f911911d
--- /dev/null
+++ b/apps/website/ui/AppHeader.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface AppHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * AppHeader is the top control bar of the application.
+ * It follows the "Telemetry Workspace" structure.
+ */
+export function AppHeader({ children, className = '' }: AppHeaderProps) {
+  return (
+    <header 
+      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
+    >
+      {children}
+    </header>
+  );
+}
diff --git a/apps/website/ui/AppShell.tsx b/apps/website/ui/AppShell.tsx
new file mode 100644
index 000000000..f6d7af878
--- /dev/null
+++ b/apps/website/ui/AppShell.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface AppShellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * AppShell is the root container for the entire application layout.
+ * It provides the base background and layout structure.
+ */
+export function AppShell({ children, className = '' }: AppShellProps) {
+  return (
+    <div className={`min-h-screen bg-[#0C0D0F] text-gray-100 flex flex-col ${className}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/website/ui/AppSidebar.tsx b/apps/website/ui/AppSidebar.tsx
new file mode 100644
index 000000000..149fbc5aa
--- /dev/null
+++ b/apps/website/ui/AppSidebar.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface AppSidebarProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * AppSidebar is the "dashboard rail" of the application.
+ * It provides global navigation and context.
+ */
+export function AppSidebar({ children, className = '' }: AppSidebarProps) {
+  return (
+    <aside 
+      className={`hidden lg:flex flex-col w-64 bg-[#141619] border-r border-[#23272B] overflow-y-auto ${className}`}
+    >
+      {children}
+    </aside>
+  );
+}
diff --git a/apps/website/ui/AuthContainer.tsx b/apps/website/ui/AuthContainer.tsx
deleted file mode 100644
index 2ec95c3b6..000000000
--- a/apps/website/ui/AuthContainer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-import React from 'react';
-import { Box } from './Box';
-
-interface AuthContainerProps {
-  children: React.ReactNode;
-}
-
-export function AuthContainer({ children }: AuthContainerProps) {
-  return (
-    <Box style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', backgroundColor: '#0f1115' }}>
-      {children}
-    </Box>
-  );
-}
diff --git a/apps/website/ui/Avatar.tsx b/apps/website/ui/Avatar.tsx
index 1ad1961f1..0a2332625 100644
--- a/apps/website/ui/Avatar.tsx
+++ b/apps/website/ui/Avatar.tsx
@@ -1,27 +1,51 @@
-/**
- * Avatar
- *
- * Pure UI component for displaying driver avatars.
- * Renders an image with fallback on error.
- */
+import React from 'react';
+import { Box } from './Box';
+import { Image } from './Image';
+import { User } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface AvatarProps {
-  driverId: string;
+  driverId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
+  border?: boolean;
 }
 
-export function Avatar({ driverId, alt, className = '' }: AvatarProps) {
+export function Avatar({ 
+  driverId, 
+  src, 
+  alt, 
+  size = 40, 
+  className = '',
+  border = true,
+}: AvatarProps) {
+  const avatarSrc = src || (driverId ? `/media/avatar/${driverId}` : undefined);
+
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={`/media/avatar/${driverId}`}
-      alt={alt}
-      className={`w-10 h-10 rounded-full object-cover ${className}`}
-      onError={(e) => {
-        // Fallback to default avatar
-        (e.target as HTMLImageElement).src = '/default-avatar.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/20"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {avatarSrc ? (
+        <Image
+          src={avatarSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-avatar.png"
+        />
+      ) : (
+        <Icon icon={User} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/ui/Box.tsx b/apps/website/ui/Box.tsx
index 4f4640e3a..3dbb51e49 100644
--- a/apps/website/ui/Box.tsx
+++ b/apps/website/ui/Box.tsx
@@ -91,6 +91,7 @@ export interface BoxProps<T extends ElementType> {
   groupHoverTextColor?: string;
   groupHoverScale?: boolean;
   groupHoverOpacity?: number;
+  groupHoverWidth?: 'full' | '0' | 'auto';
   fontSize?: string;
   transform?: string;
   borderWidth?: string;
@@ -115,6 +116,9 @@ export interface BoxProps<T extends ElementType> {
   backgroundPosition?: string;
   backgroundColor?: string;
   insetY?: Spacing | string;
+  letterSpacing?: string;
+  lineHeight?: string;
+  backgroundImage?: string;
 }
 
 type ResponsiveValue<T> = {
@@ -190,6 +194,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     groupHoverTextColor,
     groupHoverScale,
     groupHoverOpacity,
+    groupHoverWidth,
     fontSize,
     transform,
     borderWidth,
@@ -213,6 +218,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     backgroundPosition,
     backgroundColor,
     insetY,
+    letterSpacing,
+    lineHeight,
+    backgroundImage,
     ...props 
   }: BoxProps<T> & ComponentPropsWithoutRef<T>,
   ref: ForwardedRef<HTMLElement>
@@ -356,6 +364,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
     groupHoverScale ? 'group-hover:scale-[1.02]' : '',
     groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
+    groupHoverWidth ? `group-hover:w-${groupHoverWidth}` : '',
     getResponsiveClasses('', display),
     getFlexDirectionClass(flexDirection),
     getAlignItemsClass(alignItems),
@@ -399,6 +408,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(webkitMaskImage ? { WebkitMaskImage: webkitMaskImage } : {}),
     ...(backgroundSize ? { backgroundSize } : {}),
     ...(backgroundPosition ? { backgroundPosition } : {}),
+    ...(backgroundImage ? { backgroundImage } : {}),
+    ...(letterSpacing ? { letterSpacing } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
     ...(top !== undefined && !spacingMap[top as string | number] ? { top } : {}),
     ...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
     ...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
diff --git a/apps/website/ui/BreadcrumbBar.tsx b/apps/website/ui/BreadcrumbBar.tsx
new file mode 100644
index 000000000..725a6dc32
--- /dev/null
+++ b/apps/website/ui/BreadcrumbBar.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface BreadcrumbBarProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * BreadcrumbBar is a container for breadcrumbs, typically placed at the top of the ContentShell.
+ */
+export function BreadcrumbBar({ children, className = '' }: BreadcrumbBarProps) {
+  return (
+    <div className={`mb-6 flex items-center space-x-2 text-sm ${className}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/website/ui/Button.tsx b/apps/website/ui/Button.tsx
index 34d255443..fc217e1e5 100644
--- a/apps/website/ui/Button.tsx
+++ b/apps/website/ui/Button.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, forwardRef } from 'react';
 import { Stack } from './Stack';
 import { Box, BoxProps } from './Box';
+import { Loader2 } from 'lucide-react';
+import { Icon } from './Icon';
 
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'onMouseEnter' | 'onMouseLeave' | 'onSubmit'>, Omit<BoxProps<'button'>, 'as' | 'onClick' | 'onSubmit'> {
   children: ReactNode;
@@ -9,6 +11,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-final' | 'discord';
   size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
+  isLoading?: boolean;
   type?: 'button' | 'submit' | 'reset';
   icon?: ReactNode;
   fullWidth?: boolean;
@@ -25,6 +28,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  isLoading = false,
   type = 'button',
   icon,
   fullWidth = false,
@@ -51,7 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     lg: 'min-h-[48px] px-6 py-3 text-base font-medium'
   };
   
-  const disabledClasses = disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
+  const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
   const widthClasses = fullWidth ? 'w-full' : '';
   
   const classes = [
@@ -63,12 +67,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     className
   ].filter(Boolean).join(' ');
   
-  const content = icon ? (
+  const content = (
     <Stack direction="row" align="center" gap={2} center={fullWidth}>
-      {icon}
+      {isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
+      {!isLoading && icon}
       {children}
     </Stack>
-  ) : children;
+  );
 
   if (as === 'a') {
     return (
@@ -92,7 +97,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       type={type}
       className={classes}
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       {...props}
     >
       {content}
diff --git a/apps/website/ui/CategoryIcon.tsx b/apps/website/ui/CategoryIcon.tsx
index a87232c01..c3934a32d 100644
--- a/apps/website/ui/CategoryIcon.tsx
+++ b/apps/website/ui/CategoryIcon.tsx
@@ -1,27 +1,44 @@
-/**
- * CategoryIcon
- *
- * Pure UI component for displaying category icons.
- * Renders an image with fallback on error.
- */
+import React from 'react';
+import { Box } from './Box';
+import { Image } from './Image';
+import { Tag } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface CategoryIconProps {
-  categoryId: string;
+  categoryId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
 }
 
-export function CategoryIcon({ categoryId, alt, className = '' }: CategoryIconProps) {
+export function CategoryIcon({ 
+  categoryId, 
+  src, 
+  alt, 
+  size = 24, 
+  className = '',
+}: CategoryIconProps) {
+  const iconSrc = src || (categoryId ? `/media/categories/${categoryId}/icon` : undefined);
+
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={`/media/categories/${categoryId}/icon`}
-      alt={alt}
-      className={`w-6 h-6 object-contain ${className}`}
-      onError={(e) => {
-        // Fallback to default icon
-        (e.target as HTMLImageElement).src = '/default-category-icon.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {iconSrc ? (
+        <Image
+          src={iconSrc}
+          alt={alt}
+          className="w-full h-full object-contain"
+          fallbackSrc="/default-category-icon.png"
+        />
+      ) : (
+        <Icon icon={Tag} size={size > 20 ? 4 : 3} color="text-gray-500" />
+      )}
+    </Box>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/website/ui/ContentShell.tsx b/apps/website/ui/ContentShell.tsx
new file mode 100644
index 000000000..858e6e59f
--- /dev/null
+++ b/apps/website/ui/ContentShell.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface ContentShellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ContentShell is the main data zone of the application.
+ * It houses the primary content and track maps/data tables.
+ */
+export function ContentShell({ children, className = '' }: ContentShellProps) {
+  return (
+    <main className={`flex-1 overflow-y-auto bg-[#0C0D0F] ${className}`}>
+      <div className="max-w-7xl mx-auto px-4 md:px-6 py-6">
+        {children}
+      </div>
+    </main>
+  );
+}
diff --git a/apps/website/ui/ContentViewport.tsx b/apps/website/ui/ContentViewport.tsx
new file mode 100644
index 000000000..6aaed7a93
--- /dev/null
+++ b/apps/website/ui/ContentViewport.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ContentViewportProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ContentViewport is the main data zone of the "Telemetry Workspace".
+ * It houses the primary content, track maps, and data tables.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function ContentViewport({ children, className = '' }: ContentViewportProps) {
+  return (
+    <main className={`flex-1 overflow-y-auto bg-[#0C0D0F] ${className}`}>
+      <div className="max-w-7xl mx-auto px-4 md:px-6 py-6">
+        {children}
+      </div>
+    </main>
+  );
+}
diff --git a/apps/website/ui/ControlBar.tsx b/apps/website/ui/ControlBar.tsx
new file mode 100644
index 000000000..5185d95bc
--- /dev/null
+++ b/apps/website/ui/ControlBar.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ControlBarProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ControlBar is the top-level header of the "Telemetry Workspace".
+ * It provides global controls, navigation, and status information.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function ControlBar({ children, className = '' }: ControlBarProps) {
+  return (
+    <header 
+      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
+    >
+      {children}
+    </header>
+  );
+}
diff --git a/apps/website/ui/DashboardHero.tsx b/apps/website/ui/DashboardHero.tsx
index f95f3058e..e2795933a 100644
--- a/apps/website/ui/DashboardHero.tsx
+++ b/apps/website/ui/DashboardHero.tsx
@@ -1,12 +1,9 @@
-
-
-import { ReactNode } from 'react';
-import { Badge } from './Badge';
+import React, { ReactNode } from 'react';
 import { Box } from './Box';
 import { Heading } from './Heading';
 import { Image } from './Image';
-import { Stack } from './Stack';
 import { Text } from './Text';
+import { Glow } from './Glow';
 
 interface DashboardHeroProps {
   driverName: string;
@@ -17,8 +14,15 @@ interface DashboardHeroProps {
   totalRaces: string | number;
   actions?: ReactNode;
   stats?: ReactNode;
+  className?: string;
 }
 
+/**
+ * DashboardHero
+ * 
+ * Redesigned for "Precision Racing Minimal" theme.
+ * Uses subtle accent glows and crisp separators.
+ */
 export function DashboardHero({
   driverName,
   avatarUrl,
@@ -28,112 +32,111 @@ export function DashboardHero({
   totalRaces,
   actions,
   stats,
+  className = '',
 }: DashboardHeroProps) {
   return (
-    <Box as="section" position="relative" overflow="hidden">
-      {/* Background Pattern */}
-      <Box
-        position="absolute"
-        inset="0"
-        style={{
-          background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))',
-        }}
+    <Box 
+      as="section" 
+      position="relative" 
+      className={`bg-[#0C0D0F] border-b border-[#23272B] overflow-hidden ${className}`}
+    >
+      {/* Subtle Accent Glow */}
+      <Glow 
+        position="top-right" 
+        color="primary" 
+        opacity={0.1} 
+        size="xl" 
       />
 
       <Box
-        position="relative"
         maxWidth="80rem"
         mx="auto"
         px={6}
-        py={10}
+        py={8}
+        position="relative"
+        zIndex={1}
       >
-        <Stack gap={8}>
-          <Stack direction="row" align="center" justify="between" wrap gap={8}>
-            {/* Welcome Message */}
-            <Stack direction="row" align="start" gap={5}>
+        <Box display="flex" flexDirection="col" gap={8}>
+          <Box display="flex" align="center" justify="between" wrap gap={6}>
+            {/* Driver Identity */}
+            <Box display="flex" align="center" gap={6}>
               <Box position="relative">
                 <Box
-                  w="20"
-                  h="20"
-                  rounded="xl"
-                  p={0.5}
-                  style={{
-                    background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
-                    boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)',
-                  }}
+                  w="24"
+                  h="24"
+                  className="border border-[#23272B] p-1 bg-[#141619]"
                 >
-                  <Box
-                    w="full"
-                    h="full"
-                    rounded="lg"
-                    overflow="hidden"
-                    bg="bg-deep-graphite"
-                  >
-                    <Image
-                      src={avatarUrl}
-                      alt={driverName}
-                      width={80}
-                      height={80}
-                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                    />
-                  </Box>
+                  <Image
+                    src={avatarUrl}
+                    alt={driverName}
+                    width={96}
+                    height={96}
+                    className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300"
+                  />
                 </Box>
                 <Box
                   position="absolute"
                   bottom="-1"
                   right="-1"
-                  w="5"
-                  h="5"
-                  rounded="full"
-                  bg="bg-performance-green"
-                  border
-                  style={{ borderColor: '#0f1115', borderWidth: '3px' }}
+                  w="4"
+                  h="4"
+                  className="bg-[#4ED4E0] border-2 border-[#0C0D0F]"
                 />
               </Box>
+
               <Box>
-                <Text size="sm" color="text-gray-400" block mb={1}>
-                  Good morning,
-                </Text>
-                <Heading level={1} mb={2}>
-                  {driverName}
-                  <Text size="2xl" ml={3}>
+                <Box display="flex" align="center" gap={3} mb={1}>
+                  <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
+                    Driver Profile
+                  </Text>
+                  <Text size="xs" color="text-gray-600">
+                    /
+                  </Text>
+                  <Text size="xs" color="text-gray-400">
                     {country}
                   </Text>
+                </Box>
+                <Heading level={1} className="text-3xl md:text-4xl font-black uppercase tracking-tighter mb-2">
+                  {driverName}
                 </Heading>
-                <Stack direction="row" align="center" gap={3} wrap>
-                  <Badge variant="primary">
-                    {rating}
-                  </Badge>
-                  <Badge variant="warning">
-                    #{rank}
-                  </Badge>
-                  <Text size="xs" color="text-gray-500">
-                    {totalRaces} races completed
-                  </Text>
-                </Stack>
+                <Box display="flex" align="center" gap={4}>
+                  <Box display="flex" align="center" gap={2}>
+                    <Text size="xs" color="text-gray-500" uppercase>Rating</Text>
+                    <Text size="sm" weight="bold" className="text-[#4ED4E0] font-mono">{rating}</Text>
+                  </Box>
+                  <Box display="flex" align="center" gap={2}>
+                    <Text size="xs" color="text-gray-500" uppercase>Rank</Text>
+                    <Text size="sm" weight="bold" className="text-[#FFBE4D] font-mono">#{rank}</Text>
+                  </Box>
+                  <Box display="flex" align="center" gap={2}>
+                    <Text size="xs" color="text-gray-500" uppercase>Starts</Text>
+                    <Text size="sm" weight="bold" className="text-gray-300 font-mono">{totalRaces}</Text>
+                  </Box>
+                </Box>
               </Box>
-            </Stack>
+            </Box>
 
-            {/* Quick Actions */}
+            {/* Actions */}
             {actions && (
-              <Stack direction="row" gap={3} wrap>
+              <Box display="flex" gap={3}>
                 {actions}
-              </Stack>
+              </Box>
             )}
-          </Stack>
+          </Box>
 
-          {/* Quick Stats Row */}
+          {/* Stats Grid */}
           {stats && (
-            <Box
-              display="grid"
-              gridCols={2}
-              responsiveGridCols={{ md: 4 }}
+            <Box 
+              display="grid" 
+              gridCols={2} 
+              responsiveGridCols={{ md: 4 }} 
               gap={4}
+              className="border-t border-[#23272B]/50 pt-6"
             >
               {stats}
             </Box>
           )}
-        </Stack>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/apps/website/ui/DashboardLayoutWrapper.tsx b/apps/website/ui/DashboardLayoutWrapper.tsx
deleted file mode 100644
index 7874b0869..000000000
--- a/apps/website/ui/DashboardLayoutWrapper.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-// TODO very useless component
-
-interface DashboardLayoutWrapperProps {
-  children: ReactNode;
-}
-
-/**
- * DashboardLayoutWrapper
- *
- * Full-screen layout wrapper for dashboard pages.
- * Provides the base container with background styling.
- */
-export function DashboardLayoutWrapper({ children }: DashboardLayoutWrapperProps) {
-  return (
-    <div className="min-h-screen bg-deep-graphite">
-      {children}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/website/ui/DashboardRail.tsx b/apps/website/ui/DashboardRail.tsx
new file mode 100644
index 000000000..7f3279987
--- /dev/null
+++ b/apps/website/ui/DashboardRail.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DashboardRailProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * DashboardRail is the primary sidebar navigation for the "Telemetry Workspace".
+ * It provides a high-density, instrument-grade navigation experience.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function DashboardRail({ children, className = '' }: DashboardRailProps) {
+  return (
+    <aside 
+      className={`hidden lg:flex flex-col w-64 bg-[#141619] border-r border-[#23272B] overflow-y-auto ${className}`}
+    >
+      {children}
+    </aside>
+  );
+}
diff --git a/apps/website/ui/DriverHeaderPanel.tsx b/apps/website/ui/DriverHeaderPanel.tsx
new file mode 100644
index 000000000..47c122b49
--- /dev/null
+++ b/apps/website/ui/DriverHeaderPanel.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+import { Image } from './Image';
+import { RatingBadge } from './RatingBadge';
+
+interface DriverHeaderPanelProps {
+  name: string;
+  avatarUrl?: string;
+  nationality: string;
+  rating: number;
+  globalRank?: number | null;
+  bio?: string | null;
+  actions?: React.ReactNode;
+}
+
+export function DriverHeaderPanel({
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  globalRank,
+  bio,
+  actions
+}: DriverHeaderPanelProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+      position="relative"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="24" 
+        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
+        opacity={0.5}
+      />
+
+      <Box p={6} position="relative">
+        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
+          {/* Avatar */}
+          <Box 
+            width="32" 
+            height="32" 
+            rounded="2xl" 
+            overflow="hidden" 
+            border 
+            borderColor="border-charcoal-outline"
+            bg="bg-graphite-black"
+            flexShrink={0}
+          >
+            <Image 
+              src={avatarUrl || defaultAvatar} 
+              alt={name} 
+              fill 
+              objectFit="cover" 
+            />
+          </Box>
+
+          {/* Info */}
+          <Box flexGrow={1}>
+            <Stack gap={2}>
+              <Stack direction="row" align="center" gap={3} wrap>
+                <Text as="h1" size="3xl" weight="bold" color="text-white">
+                  {name}
+                </Text>
+                <RatingBadge rating={rating} size="lg" />
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={4} wrap>
+                <Text size="sm" color="text-gray-400">
+                  {nationality}
+                </Text>
+                {globalRank !== undefined && globalRank !== null && (
+                  <Text size="sm" color="text-gray-400">
+                    Global Rank: <Text color="text-warning-amber" weight="semibold">#{globalRank}</Text>
+                  </Text>
+                )}
+              </Stack>
+
+              {bio && (
+                <Text size="sm" color="text-gray-400" className="max-w-2xl mt-2" lineClamp={2}>
+                  {bio}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+
+          {/* Actions */}
+          {actions && (
+            <Box flexShrink={0}>
+              {actions}
+            </Box>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/DurationField.tsx b/apps/website/ui/DurationField.tsx
index 91124f1fc..bb705464c 100644
--- a/apps/website/ui/DurationField.tsx
+++ b/apps/website/ui/DurationField.tsx
@@ -55,7 +55,7 @@ export function DurationField({
             disabled={disabled}
             min={1}
             className="pr-16"
-            error={!!error}
+            variant={error ? 'error' : 'default'}
           />
         </div>
         <span className="text-xs text-gray-400 -ml-14">{unitLabel}</span>
diff --git a/apps/website/ui/FormSection.tsx b/apps/website/ui/FormSection.tsx
new file mode 100644
index 000000000..bbe3bc1f8
--- /dev/null
+++ b/apps/website/ui/FormSection.tsx
@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface FormSectionProps {
+  children: ReactNode;
+  title?: string;
+}
+
+/**
+ * FormSection
+ * 
+ * Groups related form fields with an optional title.
+ */
+export function FormSection({ children, title }: FormSectionProps) {
+  return (
+    <Stack gap={4} fullWidth>
+      {title && (
+        <Text 
+          size="xs" 
+          weight="bold" 
+          color="text-gray-500" 
+          className="uppercase tracking-widest border-b border-border-gray pb-1"
+        >
+          {title}
+        </Text>
+      )}
+      <Stack gap={4} fullWidth>
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/apps/website/ui/IconButton.tsx b/apps/website/ui/IconButton.tsx
index ecb06a6d8..b898b4e8f 100644
--- a/apps/website/ui/IconButton.tsx
+++ b/apps/website/ui/IconButton.tsx
@@ -13,6 +13,8 @@ interface IconButtonProps {
   title?: string;
   disabled?: boolean;
   color?: string;
+  className?: string;
+  backgroundColor?: string;
 }
 
 export function IconButton({
@@ -23,6 +25,8 @@ export function IconButton({
   title,
   disabled,
   color,
+  className = '',
+  backgroundColor,
 }: IconButtonProps) {
   const sizeMap = {
     sm: { btn: 'w-8 h-8 p-0', icon: 4 },
@@ -36,7 +40,8 @@ export function IconButton({
       onClick={onClick}
       title={title}
       disabled={disabled}
-      className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0`}
+      className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0 ${className}`}
+      backgroundColor={backgroundColor}
     >
       <Icon icon={icon} size={sizeMap[size].icon} color={color} />
     </Button>
diff --git a/apps/website/ui/ImagePlaceholder.tsx b/apps/website/ui/ImagePlaceholder.tsx
new file mode 100644
index 000000000..241c4b985
--- /dev/null
+++ b/apps/website/ui/ImagePlaceholder.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Image as ImageIcon, AlertCircle, Loader2 } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export interface ImagePlaceholderProps {
+  size?: number | string;
+  aspectRatio?: string;
+  variant?: 'default' | 'error' | 'loading';
+  message?: string;
+  className?: string;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+
+export function ImagePlaceholder({
+  size = 'full',
+  aspectRatio = '1/1',
+  variant = 'default',
+  message,
+  className = '',
+  rounded = 'md',
+}: ImagePlaceholderProps) {
+  const config = {
+    default: {
+      icon: ImageIcon,
+      color: 'text-gray-500',
+      bg: 'bg-charcoal-outline/20',
+      borderColor: 'border-charcoal-outline/50',
+      animate: undefined as 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'none' | undefined,
+    },
+    error: {
+      icon: AlertCircle,
+      color: 'text-amber-500',
+      bg: 'bg-amber-500/5',
+      borderColor: 'border-amber-500/20',
+      animate: undefined as 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'none' | undefined,
+    },
+    loading: {
+      icon: Loader2,
+      color: 'text-blue-500',
+      bg: 'bg-blue-500/5',
+      borderColor: 'border-blue-500/20',
+      animate: 'spin' as const,
+    },
+  };
+
+  const { icon, color, bg, borderColor, animate } = config[variant];
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="col"
+      alignItems="center"
+      justifyContent="center"
+      w={typeof size === 'string' ? size : undefined}
+      h={typeof size === 'string' ? size : undefined}
+      style={typeof size === 'number' ? { width: size, height: size } : { aspectRatio }}
+      bg={bg}
+      border
+      borderColor={borderColor}
+      rounded={rounded}
+      className={`overflow-hidden ${className}`}
+      gap={2}
+      p={4}
+    >
+      <Icon 
+        icon={icon} 
+        size={6} 
+        color={color} 
+        animate={animate}
+      />
+      {message && (
+        <Text 
+          size="xs" 
+          color={color} 
+          weight="medium" 
+          align="center"
+          className="max-w-[80%]"
+        >
+          {message}
+        </Text>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/ui/JoinRequestsPanel.tsx b/apps/website/ui/JoinRequestsPanel.tsx
new file mode 100644
index 000000000..0c5655ef5
--- /dev/null
+++ b/apps/website/ui/JoinRequestsPanel.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Button } from './Button';
+import { Check, X, Clock } from 'lucide-react';
+import { Icon } from './Icon';
+
+interface JoinRequestsPanelProps {
+  requests: Array<{
+    id: string;
+    driverName: string;
+    driverAvatar?: string;
+    message?: string;
+    requestedAt: string;
+  }>;
+  onAccept: (id: string) => void;
+  onDecline: (id: string) => void;
+}
+
+export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
+  if (requests.length === 0) {
+    return (
+      <Box p={8} border borderDash borderColor="border-steel-grey" bg="surface-charcoal/20" textAlign="center">
+        <Text color="text-gray-500" size="sm">No pending join requests</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Box p={4} borderBottom borderColor="border-steel-grey" bg="base-graphite/50">
+        <Heading level={4} weight="bold" className="uppercase tracking-widest text-gray-400 text-[10px]">
+          Pending Requests ({requests.length})
+        </Heading>
+      </Box>
+      <Stack gap={0} className="divide-y divide-border-steel-grey/30">
+        {requests.map((request) => (
+          <Box key={request.id} p={4} className="hover:bg-white/[0.02] transition-colors">
+            <Stack direction="row" align="start" justify="between" gap={4}>
+              <Stack direction="row" align="center" gap={3}>
+                <Box w="10" h="10" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center>
+                  <Text size="xs" weight="bold" color="text-primary-blue">
+                    {request.driverName.substring(0, 2).toUpperCase()}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text weight="bold" size="sm" color="text-white" block>{request.driverName}</Text>
+                  <Stack direction="row" align="center" gap={1.5} mt={0.5}>
+                    <Icon icon={Clock} size={3} color="text-gray-500" />
+                    <Text size="xs" color="text-gray-500" font="mono">{request.requestedAt}</Text>
+                  </Stack>
+                </Box>
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={2}>
+                <Button 
+                  variant="secondary" 
+                  size="sm" 
+                  onClick={() => onDecline(request.id)}
+                  className="h-8 w-8 p-0 flex items-center justify-center border-red-500/30 hover:bg-red-500/10"
+                >
+                  <Icon icon={X} size={4} color="text-red-400" />
+                </Button>
+                <Button 
+                  variant="primary" 
+                  size="sm" 
+                  onClick={() => onAccept(request.id)}
+                  className="h-8 w-8 p-0 flex items-center justify-center"
+                >
+                  <Icon icon={Check} size={4} />
+                </Button>
+              </Stack>
+            </Stack>
+            {request.message && (
+              <Box mt={3} p={3} bg="base-graphite/30" borderLeft borderPrimary borderColor="primary-blue/40">
+                <Text size="xs" color="text-gray-400" italic leading="relaxed">
+                  &ldquo;{request.message}&rdquo;
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/LandingItems.tsx b/apps/website/ui/LandingItems.tsx
index e36ec09a0..b0c68607d 100644
--- a/apps/website/ui/LandingItems.tsx
+++ b/apps/website/ui/LandingItems.tsx
@@ -6,10 +6,10 @@ import { Box } from '@/ui/Box';
 
 export function FeatureItem({ text }: { text: string }) {
   return (
-    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
+    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
       <Stack direction="row" align="center" gap={4}>
-        <Box w="1" h="4" bg="primary-accent" className="group-hover:h-6 transition-all" />
-        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
+        <Box w="0.5" h="3" bg="primary-accent" className="group-hover:h-5 transition-all" />
+        <Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
           {text}
         </Text>
       </Stack>
@@ -19,10 +19,10 @@ export function FeatureItem({ text }: { text: string }) {
 
 export function ResultItem({ text, color }: { text: string, color: string }) {
   return (
-    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
+    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
       <Stack direction="row" align="center" gap={4}>
-        <Box w="1" h="4" style={{ backgroundColor: color }} className="group-hover:h-6 transition-all" />
-        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
+        <Box w="0.5" h="3" style={{ backgroundColor: color }} className="group-hover:h-5 transition-all" />
+        <Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
           {text}
         </Text>
       </Stack>
@@ -32,12 +32,12 @@ export function ResultItem({ text, color }: { text: string, color: string }) {
 
 export function StepItem({ step, text }: { step: number, text: string }) {
   return (
-    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
+    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
       <Stack direction="row" align="center" gap={4}>
-        <Box w="8" h="8" display="flex" center border borderColor="border-gray" className="group-hover:border-primary-accent/50 transition-colors">
-          <Text weight="bold" size="xs" color="text-primary-accent" font="mono">{step.toString().padStart(2, '0')}</Text>
+        <Box w="6" h="6" display="flex" center border borderColor="border-gray/20" className="group-hover:border-primary-accent/30 transition-colors">
+          <Text weight="bold" size="xs" color="text-primary-accent" font="mono" opacity={0.7}>{step.toString().padStart(2, '0')}</Text>
         </Box>
-        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
+        <Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
           {text}
         </Text>
       </Stack>
diff --git a/apps/website/ui/LeaderboardTableShell.tsx b/apps/website/ui/LeaderboardTableShell.tsx
new file mode 100644
index 000000000..04173bbee
--- /dev/null
+++ b/apps/website/ui/LeaderboardTableShell.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface LeaderboardTableShellProps {
+  columns: {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+  }[];
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function LeaderboardTableShell({ columns, children, className = '' }: LeaderboardTableShellProps) {
+  return (
+    <Box 
+      rounded="xl" 
+      bg="bg-iron-gray/30" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+      className={className}
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="border-b border-charcoal-outline/50 bg-graphite-black/50">
+              {columns.map((col) => (
+                <th 
+                  key={col.key}
+                  className={`px-4 py-3 text-[10px] uppercase tracking-widest font-bold text-gray-500 ${
+                    col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
+                  }`}
+                  style={col.width ? { width: col.width } : {}}
+                >
+                  {col.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-charcoal-outline/30">
+            {children}
+          </tbody>
+        </table>
+      </div>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/LeagueCover.tsx b/apps/website/ui/LeagueCover.tsx
index ed493bae5..c990cb907 100644
--- a/apps/website/ui/LeagueCover.tsx
+++ b/apps/website/ui/LeagueCover.tsx
@@ -1,20 +1,45 @@
-
-
+import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface LeagueCoverProps {
-  leagueId: string;
+  leagueId?: string;
+  src?: string;
   alt: string;
   height?: string;
+  aspectRatio?: string;
+  className?: string;
 }
 
-export function LeagueCover({ leagueId, alt, height = '12rem' }: LeagueCoverProps) {
+export function LeagueCover({ 
+  leagueId, 
+  src, 
+  alt, 
+  height, 
+  aspectRatio = '21/9',
+  className = '',
+}: LeagueCoverProps) {
+  const coverSrc = src || (leagueId ? `/media/leagues/${leagueId}/cover` : undefined);
+
   return (
-    <Image
-      src={`/media/leagues/${leagueId}/cover`}
-      alt={alt}
-      style={{ width: '100%', height, objectFit: 'cover' }}
-      fallbackSrc="/default-league-cover.png"
-    />
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      className={className}
+      style={{ height, aspectRatio: height ? undefined : aspectRatio }}
+    >
+      {coverSrc ? (
+        <Image
+          src={coverSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-league-cover.png"
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
   );
 }
diff --git a/apps/website/ui/LeagueLogo.tsx b/apps/website/ui/LeagueLogo.tsx
index cb9cb2eba..69d720b54 100644
--- a/apps/website/ui/LeagueLogo.tsx
+++ b/apps/website/ui/LeagueLogo.tsx
@@ -1,22 +1,53 @@
-
-
+import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { Trophy } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface LeagueLogoProps {
-  leagueId: string;
+  leagueId?: string;
+  src?: string;
   alt: string;
   size?: number;
+  className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
-export function LeagueLogo({ leagueId, alt, size = 100 }: LeagueLogoProps) {
+export function LeagueLogo({ 
+  leagueId, 
+  src, 
+  alt, 
+  size = 64, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: LeagueLogoProps) {
+  const logoSrc = src || (leagueId ? `/media/leagues/${leagueId}/logo` : undefined);
+
   return (
-    <Image
-      src={`/media/leagues/${leagueId}/logo`}
-      alt={alt}
-      width={size}
-      height={size}
-      style={{ objectFit: 'contain' }}
-      fallbackSrc="/default-league-logo.png"
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackSrc="/default-league-logo.png"
+        />
+      ) : (
+        <Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
 }
diff --git a/apps/website/ui/LeagueSummaryCard.tsx b/apps/website/ui/LeagueSummaryCard.tsx
index 994f8ae4b..f13defebb 100644
--- a/apps/website/ui/LeagueSummaryCard.tsx
+++ b/apps/website/ui/LeagueSummaryCard.tsx
@@ -7,7 +7,7 @@ import { Card } from './Card';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
-import { Image } from './Image';
+import { LeagueLogo } from './LeagueLogo';
 import { Link } from './Link';
 import { Stack } from './Stack';
 import { Surface } from './Surface';
@@ -34,22 +34,7 @@ export function LeagueSummaryCard({
     <Card p={0} style={{ overflow: 'hidden' }}>
       <Box p={4}>
         <Stack direction="row" align="center" gap={4} mb={4}>
-          <Box
-            w="14"
-            h="14"
-            rounded="lg"
-            overflow="hidden"
-            bg="bg-deep-graphite"
-            flexShrink={0}
-          >
-            <Image
-              src={`/media/league-logo/${id}`}
-              alt={name}
-              width={56}
-              height={56}
-              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-            />
-          </Box>
+          <LeagueLogo leagueId={id} alt={name} size={56} />
           <Box style={{ flex: 1, minWidth: 0 }}>
             <Text
               size="xs"
diff --git a/apps/website/ui/MediaMetaPanel.tsx b/apps/website/ui/MediaMetaPanel.tsx
new file mode 100644
index 000000000..e1074abbd
--- /dev/null
+++ b/apps/website/ui/MediaMetaPanel.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Info, FileText, Maximize2, Type, Calendar, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+export interface MediaMetaItem {
+  label: string;
+  value: string | number;
+  icon?: LucideIcon;
+}
+
+export interface MediaMetaPanelProps {
+  title?: string;
+  items: MediaMetaItem[];
+  className?: string;
+}
+
+export function MediaMetaPanel({
+  title = 'Asset Details',
+  items,
+  className = '',
+}: MediaMetaPanelProps) {
+  return (
+    <Box
+      bg="bg-charcoal-outline/10"
+      border
+      borderColor="border-charcoal-outline/50"
+      rounded="lg"
+      p={4}
+      className={className}
+    >
+      <Box display="flex" alignItems="center" gap={2} mb={4}>
+        <Icon icon={Info} size={4} color="text-blue-500" />
+        <Text weight="semibold" size="sm" uppercase letterSpacing="wider">
+          {title}
+        </Text>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={3}>
+        {items.map((item, index) => (
+          <Box 
+            key={`${item.label}-${index}`}
+            display="flex" 
+            alignItems="center" 
+            justifyContent="between"
+            pb={index === items.length - 1 ? 0 : 3}
+            borderBottom={index === items.length - 1 ? false : true}
+            borderColor="border-charcoal-outline/20"
+          >
+            <Box display="flex" alignItems="center" gap={2}>
+              {item.icon && <Icon icon={item.icon} size={3.5} color="text-gray-500" />}
+              <Text size="xs" color="text-gray-500" weight="medium">
+                {item.label}
+              </Text>
+            </Box>
+            <Text size="xs" weight="semibold" font="mono">
+              {item.value}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+// Helper to map common media metadata
+export const mapMediaMetadata = (metadata: {
+  filename?: string;
+  size?: number;
+  dimensions?: string;
+  contentType?: string;
+  createdAt?: string | Date;
+}): MediaMetaItem[] => {
+  const items: MediaMetaItem[] = [];
+
+  if (metadata.filename) {
+    items.push({ label: 'Filename', value: metadata.filename, icon: FileText });
+  }
+  if (metadata.size) {
+    items.push({ label: 'Size', value: `${Math.round(metadata.size / 1024)} KB`, icon: Maximize2 });
+  }
+  if (metadata.dimensions) {
+    items.push({ label: 'Dimensions', value: metadata.dimensions, icon: Maximize2 });
+  }
+  if (metadata.contentType) {
+    items.push({ label: 'Type', value: metadata.contentType, icon: Type });
+  }
+  if (metadata.createdAt) {
+    const date = typeof metadata.createdAt === 'string' ? new Date(metadata.createdAt) : metadata.createdAt;
+    items.push({ label: 'Created', value: date.toLocaleDateString(), icon: Calendar });
+  }
+
+  return items;
+};
diff --git a/apps/website/ui/MediaPreviewCard.tsx b/apps/website/ui/MediaPreviewCard.tsx
new file mode 100644
index 000000000..b1c094dd2
--- /dev/null
+++ b/apps/website/ui/MediaPreviewCard.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { ImagePlaceholder } from './ImagePlaceholder';
+import { Image } from './Image';
+
+export interface MediaPreviewCardProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+  subtitle?: string;
+  aspectRatio?: string;
+  isLoading?: boolean;
+  error?: string;
+  onClick?: () => void;
+  className?: string;
+  actions?: React.ReactNode;
+}
+
+export function MediaPreviewCard({
+  src,
+  alt = 'Media preview',
+  title,
+  subtitle,
+  aspectRatio = '16/9',
+  isLoading,
+  error,
+  onClick,
+  className = '',
+  actions,
+}: MediaPreviewCardProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="col"
+      bg="bg-charcoal-outline/10"
+      border
+      borderColor="border-charcoal-outline/50"
+      rounded="lg"
+      overflow="hidden"
+      transition
+      hoverScale={!!onClick}
+      cursor={onClick ? 'pointer' : 'default'}
+      onClick={onClick}
+      className={`group ${className}`}
+    >
+      <Box position="relative" width="full" style={{ aspectRatio }}>
+        {isLoading ? (
+          <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
+        ) : error ? (
+          <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
+        ) : src ? (
+          <Image
+            src={src}
+            alt={alt}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+        )}
+        
+        {actions && (
+          <Box
+            position="absolute"
+            top={2}
+            right={2}
+            display="flex"
+            gap={2}
+            opacity={0}
+            className="group-hover:opacity-100 transition-opacity"
+          >
+            {actions}
+          </Box>
+        )}
+      </Box>
+
+      {(title || subtitle) && (
+        <Box p={3} borderTop borderColor="border-charcoal-outline/30">
+          {title && (
+            <Text block size="sm" weight="semibold" truncate>
+              {title}
+            </Text>
+          )}
+          {subtitle && (
+            <Text block size="xs" color="text-gray-500" truncate mt={0.5}>
+              {subtitle}
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/ui/MetricCard.tsx b/apps/website/ui/MetricCard.tsx
new file mode 100644
index 000000000..44e433d94
--- /dev/null
+++ b/apps/website/ui/MetricCard.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+interface MetricCardProps {
+  label: string;
+  value: string | number;
+  icon?: LucideIcon;
+  color?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  border?: boolean;
+  bg?: string;
+}
+
+/**
+ * A semantic component for displaying metrics.
+ * Instrument-grade typography and dense-but-readable hierarchy.
+ */
+export function MetricCard({
+  label,
+  value,
+  icon,
+  color = 'text-primary-accent',
+  trend,
+  border = true,
+  bg = 'panel-gray/40',
+}: MetricCardProps) {
+  return (
+    <Box
+      bg={bg}
+      rounded="none"
+      p={4}
+      border={border}
+      borderColor="border-gray/30"
+      display="flex"
+      flexDirection="col"
+      gap={2}
+      hoverBg="panel-gray/60"
+      transition
+    >
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box display="flex" alignItems="center" gap={2}>
+          {icon && <Icon icon={icon} size={4} className={color} />}
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
+            {label}
+          </Text>
+        </Box>
+        {trend && (
+          <Text size="xs" color={trend.isPositive ? 'text-success-green' : 'text-red-400'} font="mono">
+            {trend.isPositive ? '▲' : '▼'} {trend.value}%
+          </Text>
+        )}
+      </Box>
+      <Text size="2xl" weight="bold" color="text-white" font="mono">
+        {typeof value === 'number' ? value.toLocaleString() : value}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/OnboardingCTA.tsx b/apps/website/ui/OnboardingCTA.tsx
new file mode 100644
index 000000000..93188fff5
--- /dev/null
+++ b/apps/website/ui/OnboardingCTA.tsx
@@ -0,0 +1,59 @@
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+
+interface OnboardingCTAProps {
+  onBack?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  backLabel?: string;
+  isLastStep?: boolean;
+  canNext?: boolean;
+  isLoading?: boolean;
+  type?: 'button' | 'submit';
+}
+
+export function OnboardingCTA({
+  onBack,
+  onNext,
+  nextLabel = 'Continue',
+  backLabel = 'Back',
+  isLastStep = false,
+  canNext = true,
+  isLoading = false,
+  type = 'button',
+}: OnboardingCTAProps) {
+  return (
+    <Stack direction="row" justify="between" mt={8} gap={4}>
+      {onBack ? (
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onBack}
+          disabled={isLoading}
+          className="px-8"
+        >
+          {backLabel}
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <Button
+        type={type}
+        variant="primary"
+        onClick={onNext}
+        disabled={isLoading || !canNext}
+        className="px-8 min-w-[140px]"
+      >
+        {isLoading ? (
+          <Stack direction="row" gap={2} align="center">
+            <span className="animate-spin">⟳</span>
+            <span>Processing...</span>
+          </Stack>
+        ) : (
+          isLastStep ? 'Complete Setup' : nextLabel
+        )}
+      </Button>
+    </Stack>
+  );
+}
diff --git a/apps/website/ui/OnboardingStepHeader.tsx b/apps/website/ui/OnboardingStepHeader.tsx
new file mode 100644
index 000000000..a7389d0eb
--- /dev/null
+++ b/apps/website/ui/OnboardingStepHeader.tsx
@@ -0,0 +1,22 @@
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface OnboardingStepHeaderProps {
+  title: string;
+  description?: string;
+}
+
+export function OnboardingStepHeader({ title, description }: OnboardingStepHeaderProps) {
+  return (
+    <Stack gap={1} mb={6}>
+      <Text size="2xl" color="text-white" weight="bold" className="tracking-tight" block>
+        {title}
+      </Text>
+      {description && (
+        <Text size="sm" color="text-gray-400" block>
+          {description}
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/ui/OnboardingStepPanel.tsx b/apps/website/ui/OnboardingStepPanel.tsx
new file mode 100644
index 000000000..fdc687f5d
--- /dev/null
+++ b/apps/website/ui/OnboardingStepPanel.tsx
@@ -0,0 +1,20 @@
+import { Surface } from '@/ui/Surface';
+
+interface OnboardingStepPanelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function OnboardingStepPanel({ children, className = '' }: OnboardingStepPanelProps) {
+  return (
+    <Surface
+      variant="dark"
+      rounded="xl"
+      border
+      padding={6}
+      className={`border-charcoal-outline ${className}`}
+    >
+      {children}
+    </Surface>
+  );
+}
diff --git a/apps/website/ui/Panel.tsx b/apps/website/ui/Panel.tsx
new file mode 100644
index 000000000..79fc76e12
--- /dev/null
+++ b/apps/website/ui/Panel.tsx
@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react';
+import { Surface } from './Surface';
+import { Box, BoxProps } from './Box';
+import { Text } from './Text';
+
+interface PanelProps extends Omit<BoxProps<'div'>, 'variant' | 'padding'> {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'muted' | 'dark' | 'glass';
+  padding?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
+  border?: boolean;
+  className?: string;
+}
+
+/**
+ * A semantic wrapper for content panels.
+ * Follows the "Precision Racing Minimal" theme.
+ */
+export function Panel({
+  children,
+  title,
+  description,
+  variant = 'default',
+  padding = 6,
+  border = true,
+  ...props
+}: PanelProps) {
+  return (
+    <Surface
+      variant={variant}
+      padding={padding}
+      border={border}
+      display="flex"
+      flexDirection="col"
+      gap={4}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      {...(props as any)}
+    >
+      {(title || description) && (
+        <Box display="flex" flexDirection="col" gap={1} borderBottom borderStyle="solid" borderColor="border-gray/30" pb={4} mb={2}>
+          {title && (
+            <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
+              {title}
+            </Text>
+          )}
+          {description && (
+            <Text size="sm" color="text-gray-400">
+              {description}
+            </Text>
+          )}
+        </Box>
+      )}
+      {children}
+    </Surface>
+  );
+}
diff --git a/apps/website/ui/PasswordField.tsx b/apps/website/ui/PasswordField.tsx
new file mode 100644
index 000000000..794ec33ae
--- /dev/null
+++ b/apps/website/ui/PasswordField.tsx
@@ -0,0 +1,42 @@
+import React, { ComponentProps } from 'react';
+import { Eye, EyeOff, Lock } from 'lucide-react';
+import { Input } from './Input';
+import { Box } from './Box';
+
+interface PasswordFieldProps extends ComponentProps<typeof Input> {
+  showPassword?: boolean;
+  onTogglePassword?: () => void;
+}
+
+/**
+ * PasswordField
+ * 
+ * A specialized input for passwords with visibility toggling.
+ * Stateless UI component.
+ */
+export function PasswordField({ showPassword, onTogglePassword, ...props }: PasswordFieldProps) {
+  return (
+    <Box position="relative" fullWidth>
+      <Input
+        {...props}
+        type={showPassword ? 'text' : 'password'}
+        icon={<Lock size={16} />}
+      />
+      {onTogglePassword && (
+        <Box
+          as="button"
+          type="button"
+          onClick={onTogglePassword}
+          position="absolute"
+          right="3"
+          top={props.label ? "34px" : "50%"}
+          style={props.label ? {} : { transform: 'translateY(-50%)' }}
+          zIndex={10}
+          className="text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/ui/ProfileLayoutShell.tsx b/apps/website/ui/ProfileLayoutShell.tsx
deleted file mode 100644
index 4a1e18b43..000000000
--- a/apps/website/ui/ProfileLayoutShell.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-
-interface ProfileLayoutShellProps {
-  children: ReactNode;
-}
-
-export function ProfileLayoutShell({ children }: ProfileLayoutShellProps) {
-  return <div className="min-h-screen bg-deep-graphite">{children}</div>;
-}
diff --git a/apps/website/ui/QuickActionsPanel.tsx b/apps/website/ui/QuickActionsPanel.tsx
new file mode 100644
index 000000000..a3dae9b33
--- /dev/null
+++ b/apps/website/ui/QuickActionsPanel.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Panel } from './Panel';
+import { Box } from './Box';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface QuickAction {
+  label: string;
+  icon: LucideIcon;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+}
+
+interface QuickActionsPanelProps {
+  actions: QuickAction[];
+  className?: string;
+}
+
+/**
+ * QuickActionsPanel
+ * 
+ * Provides fast access to common dashboard tasks.
+ */
+export function QuickActionsPanel({ actions, className = '' }: QuickActionsPanelProps) {
+  return (
+    <Panel title="Quick Actions" className={className}>
+      <Box display="grid" gridCols={1} gap={2}>
+        {actions.map((action, index) => (
+          <Button
+            key={index}
+            variant={action.variant || 'secondary'}
+            onClick={action.onClick}
+            fullWidth
+            style={{ justifyContent: 'flex-start', height: 'auto', padding: '12px' }}
+          >
+            <Box display="flex" align="center" gap={3}>
+              <Icon icon={action.icon} size={5} />
+              <span>{action.label}</span>
+            </Box>
+          </Button>
+        ))}
+      </Box>
+    </Panel>
+  );
+}
diff --git a/apps/website/ui/RaceActionBar.tsx b/apps/website/ui/RaceActionBar.tsx
new file mode 100644
index 000000000..899f18ec2
--- /dev/null
+++ b/apps/website/ui/RaceActionBar.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import { Stack } from './Stack';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Trophy, Scale, LogOut, CheckCircle, XCircle, PlayCircle } from 'lucide-react';
+
+interface RaceActionBarProps {
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
+  isUserRegistered: boolean;
+  canRegister: boolean;
+  onRegister?: () => void;
+  onWithdraw?: () => void;
+  onResultsClick?: () => void;
+  onStewardingClick?: () => void;
+  onFileProtest?: () => void;
+  isAdmin?: boolean;
+  onCancel?: () => void;
+  onReopen?: () => void;
+  onEndRace?: () => void;
+  isLoading?: {
+    register?: boolean;
+    withdraw?: boolean;
+    cancel?: boolean;
+    reopen?: boolean;
+    complete?: boolean;
+  };
+}
+
+export function RaceActionBar({
+  status,
+  isUserRegistered,
+  canRegister,
+  onRegister,
+  onWithdraw,
+  onResultsClick,
+  onStewardingClick,
+  onFileProtest,
+  isAdmin,
+  onCancel,
+  onReopen,
+  onEndRace,
+  isLoading = {}
+}: RaceActionBarProps) {
+  return (
+    <Stack direction="row" gap={3} wrap>
+      {status === 'scheduled' && (
+        <>
+          {!isUserRegistered && canRegister && (
+            <Button 
+              variant="primary" 
+              onClick={onRegister} 
+              disabled={isLoading.register}
+              icon={<Icon icon={CheckCircle} size={4} />}
+            >
+              Register
+            </Button>
+          )}
+          {isUserRegistered && (
+            <Button 
+              variant="secondary" 
+              onClick={onWithdraw} 
+              disabled={isLoading.withdraw}
+              icon={<Icon icon={LogOut} size={4} />}
+            >
+              Withdraw
+            </Button>
+          )}
+          {isAdmin && (
+            <Button 
+              variant="danger" 
+              onClick={onCancel} 
+              disabled={isLoading.cancel}
+              icon={<Icon icon={XCircle} size={4} />}
+            >
+              Cancel Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'running' && (
+        <>
+          <Button variant="race-final" disabled icon={<Icon icon={PlayCircle} size={4} />}>
+            Live Now
+          </Button>
+          {isAdmin && (
+            <Button 
+              variant="primary" 
+              onClick={onEndRace} 
+              disabled={isLoading.complete}
+            >
+              End Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'completed' && (
+        <>
+          <Button 
+            variant="primary" 
+            onClick={onResultsClick} 
+            icon={<Icon icon={Trophy} size={4} />}
+          >
+            View Results
+          </Button>
+          {isUserRegistered && onFileProtest && (
+            <Button 
+              variant="secondary" 
+              onClick={onFileProtest} 
+              icon={<Icon icon={Scale} size={4} />}
+            >
+              File Protest
+            </Button>
+          )}
+          <Button 
+            variant="secondary" 
+            onClick={onStewardingClick} 
+            icon={<Icon icon={Scale} size={4} />}
+          >
+            Stewarding
+          </Button>
+          {isAdmin && onReopen && (
+            <Button 
+              variant="secondary" 
+              onClick={onReopen} 
+              disabled={isLoading.reopen}
+            >
+              Reopen Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'cancelled' && isAdmin && onReopen && (
+        <Button 
+          variant="primary" 
+          onClick={onReopen} 
+          disabled={isLoading.reopen}
+        >
+          Reopen Race
+        </Button>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/website/ui/RaceHeaderPanel.tsx b/apps/website/ui/RaceHeaderPanel.tsx
new file mode 100644
index 000000000..64607b112
--- /dev/null
+++ b/apps/website/ui/RaceHeaderPanel.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+import { RaceStatusBadge } from './RaceStatusBadge';
+import { Icon } from './Icon';
+import { Calendar, MapPin, Car } from 'lucide-react';
+
+interface RaceHeaderPanelProps {
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: string;
+  leagueName?: string;
+  actions?: React.ReactNode;
+}
+
+export function RaceHeaderPanel({
+  track,
+  car,
+  scheduledAt,
+  status,
+  leagueName,
+  actions
+}: RaceHeaderPanelProps) {
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+      position="relative"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="24" 
+        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
+        opacity={0.5}
+      />
+
+      <Box p={6} position="relative">
+        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
+          {/* Info */}
+          <Box flexGrow={1}>
+            <Stack gap={3}>
+              <Stack direction="row" align="center" gap={3} wrap>
+                <Text as="h1" size="3xl" weight="bold" color="text-white">
+                  {track}
+                </Text>
+                <RaceStatusBadge status={status} />
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={6} wrap>
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={Car} size={4} color="#9ca3af" />
+                  <Text size="sm" color="text-gray-400">
+                    {car}
+                  </Text>
+                </Stack>
+
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={Calendar} size={4} color="#9ca3af" />
+                  <Text size="sm" color="text-gray-400">
+                    {scheduledAt}
+                  </Text>
+                </Stack>
+
+                {leagueName && (
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={MapPin} size={4} color="#9ca3af" />
+                    <Text size="sm" color="text-gray-400">
+                      {leagueName}
+                    </Text>
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          </Box>
+
+          {/* Actions */}
+          {actions && (
+            <Box flexShrink={0} width={{ base: 'full', md: 'auto' }}>
+              {actions}
+            </Box>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/RacePageHeader.tsx b/apps/website/ui/RacePageHeader.tsx
index a81d5ebed..d8ef8d022 100644
--- a/apps/website/ui/RacePageHeader.tsx
+++ b/apps/website/ui/RacePageHeader.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { Flag, CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
+import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } from 'lucide-react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Hero } from '@/ui/Hero';
 import { Stack } from '@/ui/Stack';
 import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Grid } from '@/ui/Grid';
-import { StatBox } from '@/ui/StatBox';
+import { Surface } from '@/ui/Surface';
 
 interface RacePageHeaderProps {
   totalCount: number;
@@ -23,26 +22,57 @@ export function RacePageHeader({
   completedCount,
 }: RacePageHeaderProps) {
   return (
-    <Hero variant="primary">
-      <Stack gap={2}>
-        <Stack direction="row" align="center" gap={3}>
-          <Box p={2} bg="bg-primary-blue/10" rounded="lg">
-            <Icon icon={Flag} size={6} color="rgb(59, 130, 246)" />
-          </Box>
-          <Heading level={1}>Race Calendar</Heading>
-        </Stack>
-        <Text color="text-gray-400" maxWidth="42rem">
-          Track upcoming races, view live events, and explore results across all your leagues.
-        </Text>
-      </Stack>
+    <Surface 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      padding={6}
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="1" 
+        bg="bg-primary-blue"
+      />
 
-      {/* Quick Stats */}
-      <Grid cols={2} mdCols={4} gap={4} mt={6}>
-        <StatBox icon={CalendarDays} label="Total" value={totalCount} />
-        <StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="rgb(59, 130, 246)" />
-        <StatBox icon={Zap} label="Live Now" value={runningCount} color="rgb(16, 185, 129)" />
-        <StatBox icon={Trophy} label="Completed" value={completedCount} />
-      </Grid>
-    </Hero>
+      <Stack gap={6}>
+        <Stack gap={2}>
+          <Stack direction="row" align="center" gap={3}>
+            <Icon icon={Flag} size={6} color="#198CFF" />
+            <Heading level={1}>RACE DASHBOARD</Heading>
+          </Stack>
+          <Text color="text-gray-400" size="sm">
+            Precision tracking for upcoming sessions and live events.
+          </Text>
+        </Stack>
+
+        <Grid cols={2} mdCols={4} gap={4}>
+          <StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
+          <StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-blue" />
+          <StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-performance-green" />
+          <StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
+        </Grid>
+      </Stack>
+    </Surface>
+  );
+}
+
+function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
+  return (
+    <Box p={4} bg="bg-graphite-black/50" border borderColor="border-charcoal-outline">
+      <Stack gap={1}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} className={color !== 'text-white' ? color : ''} />
+          <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+        </Stack>
+        <Text size="2xl" weight="bold" className={color}>{value}</Text>
+      </Stack>
+    </Box>
   );
 }
diff --git a/apps/website/ui/RaceResultsTable.tsx b/apps/website/ui/RaceResultsTable.tsx
index b9f52755a..37215bd98 100644
--- a/apps/website/ui/RaceResultsTable.tsx
+++ b/apps/website/ui/RaceResultsTable.tsx
@@ -129,7 +129,7 @@ export function RaceResultsTable({
             <TableHeader>Points</TableHeader>
             <TableHeader>+/-</TableHeader>
             <TableHeader>Penalties</TableHeader>
-            {isAdmin && <TableHeader align="right">Actions</TableHeader>}
+            {isAdmin && <TableHeader className="text-right">Actions</TableHeader>}
           </TableRow>
         </TableHead>
         <TableBody>
@@ -250,7 +250,7 @@ export function RaceResultsTable({
                   )}
                 </TableCell>
                 {isAdmin && (
-                  <TableCell align="right">
+                  <TableCell className="text-right">
                     {driver && penaltyButtonRenderer && penaltyButtonRenderer(driver)}
                   </TableCell>
                 )}
diff --git a/apps/website/ui/RaceSidebarPanel.tsx b/apps/website/ui/RaceSidebarPanel.tsx
new file mode 100644
index 000000000..6b59e3242
--- /dev/null
+++ b/apps/website/ui/RaceSidebarPanel.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface RaceSidebarPanelProps {
+  title: string;
+  icon?: LucideIcon;
+  children: React.ReactNode;
+}
+
+export function RaceSidebarPanel({
+  title,
+  icon,
+  children
+}: RaceSidebarPanelProps) {
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+    >
+      <Box p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
+        <Stack direction="row" align="center" gap={2}>
+          {icon && <Icon icon={icon} size={4} color="#198CFF" />}
+          <Text weight="bold" size="sm" color="text-white" uppercase>
+            {title}
+          </Text>
+        </Stack>
+      </Box>
+      <Box p={4}>
+        {children}
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/RaceStatusBadge.tsx b/apps/website/ui/RaceStatusBadge.tsx
index 1cccf5550..88ed4682c 100644
--- a/apps/website/ui/RaceStatusBadge.tsx
+++ b/apps/website/ui/RaceStatusBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StatusBadge } from './StatusBadge';
+import { Box } from './Box';
 
 interface RaceStatusBadgeProps {
   status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
@@ -9,30 +9,52 @@ export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
   const config = {
     scheduled: {
       variant: 'info' as const,
-      label: 'Scheduled',
+      label: 'SCHEDULED',
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30'
     },
     running: {
       variant: 'success' as const,
       label: 'LIVE',
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30'
     },
     completed: {
       variant: 'neutral' as const,
-      label: 'Completed',
+      label: 'COMPLETED',
+      color: 'text-gray-400',
+      bg: 'bg-gray-400/10',
+      border: 'border-gray-400/30'
     },
     cancelled: {
       variant: 'warning' as const,
-      label: 'Cancelled',
+      label: 'CANCELLED',
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30'
     },
   };
 
   const badgeConfig = config[status as keyof typeof config] || {
     variant: 'neutral' as const,
-    label: status,
+    label: status.toUpperCase(),
+    color: 'text-gray-400',
+    bg: 'bg-gray-400/10',
+    border: 'border-gray-400/30'
   };
 
   return (
-    <StatusBadge variant={badgeConfig.variant}>
+    <Box 
+      px={2.5} 
+      py={0.5} 
+      rounded="none" 
+      border 
+      className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
+      style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
+    >
       {badgeConfig.label}
-    </StatusBadge>
+    </Box>
   );
 }
diff --git a/apps/website/ui/RatingBadge.tsx b/apps/website/ui/RatingBadge.tsx
new file mode 100644
index 000000000..f2859cbe3
--- /dev/null
+++ b/apps/website/ui/RatingBadge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface RatingBadgeProps {
+  rating: number;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function RatingBadge({ rating, size = 'md', className = '' }: RatingBadgeProps) {
+  const getColor = (val: number) => {
+    if (val >= 2500) return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/20';
+    if (val >= 2000) return 'text-purple-400 bg-purple-400/10 border-purple-400/20';
+    if (val >= 1500) return 'text-primary-blue bg-primary-blue/10 border-primary-blue/20';
+    if (val >= 1000) return 'text-performance-green bg-performance-green/10 border-performance-green/20';
+    return 'text-gray-400 bg-gray-400/10 border-gray-400/20';
+  };
+
+  const sizeMap = {
+    sm: 'px-1.5 py-0.5 text-[10px]',
+    md: 'px-2 py-1 text-xs',
+    lg: 'px-3 py-1.5 text-sm',
+  };
+
+  return (
+    <div className={`inline-flex items-center justify-center font-mono font-bold rounded border ${sizeMap[size]} ${getColor(rating)} ${className}`}>
+      {rating.toLocaleString()}
+    </div>
+  );
+}
diff --git a/apps/website/ui/RosterTable.tsx b/apps/website/ui/RosterTable.tsx
new file mode 100644
index 000000000..ccd298f02
--- /dev/null
+++ b/apps/website/ui/RosterTable.tsx
@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './Table';
+
+interface RosterTableProps {
+  children: ReactNode;
+  columns?: string[];
+}
+
+export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Table>
+        <TableHead className="bg-base-graphite/50">
+          <TableRow>
+            {columns.map((col) => (
+              <TableHeader key={col} className="py-3 border-b border-border-steel-grey">
+                <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
+                  {col}
+                </Text>
+              </TableHeader>
+            ))}
+            <TableHeader className="py-3 border-b border-border-steel-grey">
+              {null}
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {children}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
+
+interface RosterTableRowProps {
+  driver: ReactNode;
+  role: ReactNode;
+  joined: string;
+  rating: ReactNode;
+  rank: ReactNode;
+  actions?: ReactNode;
+  onClick?: () => void;
+}
+
+export function RosterTableRow({
+  driver,
+  role,
+  joined,
+  rating,
+  rank,
+  actions,
+  onClick,
+}: RosterTableRowProps) {
+  return (
+    <TableRow 
+      onClick={onClick} 
+      clickable={!!onClick}
+      className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
+    >
+      <TableCell className="py-4">
+        {driver}
+      </TableCell>
+      <TableCell className="py-4">
+        {role}
+      </TableCell>
+      <TableCell className="py-4">
+        <Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
+      </TableCell>
+      <TableCell className="py-4">
+        {rating}
+      </TableCell>
+      <TableCell className="py-4">
+        {rank}
+      </TableCell>
+      <TableCell className="py-4 text-right">
+        <Stack direction="row" align="center" justify="end" gap={2}>
+          {actions}
+        </Stack>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/apps/website/ui/Section.tsx b/apps/website/ui/Section.tsx
index 06cc239c1..f2bcef80c 100644
--- a/apps/website/ui/Section.tsx
+++ b/apps/website/ui/Section.tsx
@@ -14,6 +14,10 @@ interface SectionProps {
   id?: string;
   py?: number;
   minHeight?: string;
+  borderBottom?: boolean;
+  borderColor?: string;
+  overflow?: 'hidden' | 'visible' | 'auto' | 'scroll';
+  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
 }
 
 export function Section({ 
@@ -24,7 +28,11 @@ export function Section({
   variant = 'default',
   id,
   py = 16,
-  minHeight
+  minHeight,
+  borderBottom,
+  borderColor,
+  overflow,
+  position
 }: SectionProps) {
   const variantClasses = {
     default: '',
@@ -40,7 +48,18 @@ export function Section({
   ].filter(Boolean).join(' ');
   
   return (
-    <Box as="section" id={id} className={classes} py={py as 0} px={4} minHeight={minHeight}>
+    <Box 
+      as="section" 
+      id={id} 
+      className={classes} 
+      py={py as 0} 
+      px={4} 
+      minHeight={minHeight}
+      borderBottom={borderBottom}
+      borderColor={borderColor}
+      overflow={overflow}
+      position={position}
+    >
       <Box className="mx-auto max-w-7xl">
         {(title || description) && (
           <Box mb={8}>
diff --git a/apps/website/ui/SessionSummaryPanel.tsx b/apps/website/ui/SessionSummaryPanel.tsx
new file mode 100644
index 000000000..8416104f3
--- /dev/null
+++ b/apps/website/ui/SessionSummaryPanel.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Panel } from './Panel';
+import { Text } from './Text';
+import { Box } from './Box';
+import { StatusDot } from './StatusDot';
+
+interface SessionSummaryPanelProps {
+  title: string;
+  status: 'live' | 'upcoming' | 'completed';
+  startTime?: string;
+  trackName?: string;
+  carName?: string;
+  className?: string;
+}
+
+/**
+ * SessionSummaryPanel
+ * 
+ * Displays a dense summary of a racing session.
+ * Part of the "Telemetry Workspace" layout.
+ */
+export function SessionSummaryPanel({
+  title,
+  status,
+  startTime,
+  trackName,
+  carName,
+  className = '',
+}: SessionSummaryPanelProps) {
+  const statusColor = status === 'live' ? '#4ED4E0' : status === 'upcoming' ? '#FFBE4D' : '#94a3b8';
+
+  return (
+    <Panel title="Session Summary" className={className}>
+      <Box display="flex" flexDirection="col" gap={3}>
+        <Box display="flex" align="center" justify="between">
+          <Text weight="bold" size="lg">{title}</Text>
+          <Box display="flex" align="center" gap={2}>
+            <StatusDot color={statusColor} pulse={status === 'live'} size={2} />
+            <Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
+              {status}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
+          {startTime && (
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Start Time</Text>
+              <Text size="sm">{startTime}</Text>
+            </Box>
+          )}
+          {trackName && (
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Track</Text>
+              <Text size="sm">{trackName}</Text>
+            </Box>
+          )}
+          {carName && (
+            <Box colSpan={2}>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Vehicle</Text>
+              <Text size="sm">{carName}</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Panel>
+  );
+}
diff --git a/apps/website/ui/SimpleCheckbox.tsx b/apps/website/ui/SimpleCheckbox.tsx
new file mode 100644
index 000000000..fdead6363
--- /dev/null
+++ b/apps/website/ui/SimpleCheckbox.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { Box } from './Box';
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  'aria-label'?: string;
+}
+
+/**
+ * SimpleCheckbox
+ * 
+ * A checkbox without a label for use in tables.
+ */
+export function SimpleCheckbox({ checked, onChange, disabled, 'aria-label': ariaLabel }: CheckboxProps) {
+  return (
+    <Box
+      as="input"
+      type="checkbox"
+      checked={checked}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
+      disabled={disabled}
+      w="4"
+      h="4"
+      bg="bg-deep-graphite"
+      border
+      borderColor="border-charcoal-outline"
+      rounded="sm"
+      aria-label={ariaLabel}
+      className="text-primary-blue focus:ring-primary-blue"
+    />
+  );
+}
diff --git a/apps/website/ui/SponsorLogo.tsx b/apps/website/ui/SponsorLogo.tsx
index b3ff1c84d..cf049f7b2 100644
--- a/apps/website/ui/SponsorLogo.tsx
+++ b/apps/website/ui/SponsorLogo.tsx
@@ -1,31 +1,53 @@
-/**
- * SponsorLogo
- *
- * Pure UI component for displaying sponsor logos.
- * Renders an optimized image with fallback on error.
- */
-
 import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { Building2 } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface SponsorLogoProps {
-  sponsorId: string;
+  sponsorId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
-export function SponsorLogo({ sponsorId, alt, className = '' }: SponsorLogoProps) {
+export function SponsorLogo({ 
+  sponsorId, 
+  src, 
+  alt, 
+  size = 48, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: SponsorLogoProps) {
+  const logoSrc = src || (sponsorId ? `/media/sponsors/${sponsorId}/logo` : undefined);
+
   return (
-    <Image
-      src={`/media/sponsors/${sponsorId}/logo`}
-      alt={alt}
-      width={100}
-      height={100}
-      className={`object-contain ${className}`}
-      onError={(e) => {
-        // Fallback to default logo
-        (e.target as HTMLImageElement).src = '/default-sponsor-logo.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackSrc="/default-sponsor-logo.png"
+        />
+      ) : (
+        <Icon icon={Building2} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
 }
diff --git a/apps/website/ui/StatGrid.tsx b/apps/website/ui/StatGrid.tsx
new file mode 100644
index 000000000..b2f579e7c
--- /dev/null
+++ b/apps/website/ui/StatGrid.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Grid } from './Grid';
+import { GridItem } from './GridItem';
+import { Surface } from './Surface';
+import { Text } from './Text';
+import { Stack } from './Stack';
+
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+
+interface StatItem {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  color?: string;
+  icon?: React.ElementType;
+}
+
+interface StatGridProps {
+  stats: StatItem[];
+  cols?: GridCols;
+  mdCols?: GridCols;
+  lgCols?: GridCols;
+  className?: string;
+}
+
+export function StatGrid({ stats, cols = 2, mdCols = 3, lgCols = 4, className = '' }: StatGridProps) {
+  return (
+    <Grid 
+      cols={cols}
+      mdCols={mdCols}
+      lgCols={lgCols}
+      gap={4} 
+      className={className}
+    >
+      {stats.map((stat, index) => (
+        <GridItem key={index}>
+          <Surface variant="muted" padding={4} rounded="lg" border className="h-full">
+            <Stack gap={1}>
+              <Text size="xs" color="text-gray-500" uppercase weight="semibold" letterSpacing="wider">
+                {stat.label}
+              </Text>
+              <Stack direction="row" align="baseline" gap={2}>
+                <Text size="2xl" weight="bold" font="mono" color={stat.color || 'text-white'}>
+                  {stat.value}
+                </Text>
+                {stat.subValue && (
+                  <Text size="xs" color="text-gray-500" font="mono">
+                    {stat.subValue}
+                  </Text>
+                )}
+              </Stack>
+            </Stack>
+          </Surface>
+        </GridItem>
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/website/ui/StatusDot.tsx b/apps/website/ui/StatusDot.tsx
new file mode 100644
index 000000000..2fc3b084a
--- /dev/null
+++ b/apps/website/ui/StatusDot.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface StatusDotProps {
+  color?: string;
+  pulse?: boolean;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * StatusDot
+ * 
+ * A simple status indicator dot with optional pulse effect.
+ */
+export function StatusDot({ 
+  color = '#4ED4E0', 
+  pulse = false, 
+  size = 2,
+  className = '' 
+}: StatusDotProps) {
+  const sizeClass = `w-${size} h-${size}`;
+  
+  return (
+    <Box position="relative" className={`${sizeClass} ${className}`}>
+      <Box 
+        w="full" 
+        h="full" 
+        rounded="full" 
+        style={{ backgroundColor: color }} 
+      />
+      {pulse && (
+        <Box 
+          position="absolute" 
+          inset={0} 
+          rounded="full" 
+          className="animate-ping" 
+          style={{ backgroundColor: color, opacity: 0.75 }} 
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/apps/website/ui/StepProgressRail.tsx b/apps/website/ui/StepProgressRail.tsx
new file mode 100644
index 000000000..c45127c66
--- /dev/null
+++ b/apps/website/ui/StepProgressRail.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@/ui/Box';
+import { motion } from 'framer-motion';
+
+interface StepProgressRailProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export function StepProgressRail({ currentStep, totalSteps }: StepProgressRailProps) {
+  const progress = (currentStep / totalSteps) * 100;
+
+  return (
+    <Box w="full" h="1" bg="bg-iron-gray" rounded="full" overflow="hidden" mb={8}>
+      <motion.div
+        className="h-full bg-primary-blue"
+        initial={{ width: 0 }}
+        animate={{ width: `${progress}%` }}
+        transition={{ duration: 0.5, ease: 'easeOut' }}
+      />
+    </Box>
+  );
+}
diff --git a/apps/website/ui/TeamHeaderPanel.tsx b/apps/website/ui/TeamHeaderPanel.tsx
new file mode 100644
index 000000000..c7af9cc53
--- /dev/null
+++ b/apps/website/ui/TeamHeaderPanel.tsx
@@ -0,0 +1,117 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Heading } from './Heading';
+import { Text } from './Text';
+import { TeamLogo } from './TeamLogo';
+import { TeamTag } from './TeamTag';
+
+interface TeamHeaderPanelProps {
+  teamId: string;
+  name: string;
+  tag?: string | null;
+  description?: string;
+  memberCount: number;
+  activeLeaguesCount?: number;
+  foundedDate?: string;
+  category?: string | null;
+  actions?: ReactNode;
+}
+
+export function TeamHeaderPanel({
+  teamId,
+  name,
+  tag,
+  description,
+  memberCount,
+  activeLeaguesCount,
+  foundedDate,
+  category,
+  actions,
+}: TeamHeaderPanelProps) {
+  return (
+    <Box 
+      bg="surface-charcoal" 
+      border 
+      borderColor="border-steel-grey" 
+      p={6} 
+      className="relative overflow-hidden"
+    >
+      {/* Instrument-grade accent corner */}
+      <Box position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-blue/40" />
+      
+      <Stack direction="row" align="start" justify="between" wrap gap={6}>
+        <Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
+          {/* Logo Container */}
+          <Box 
+            w="24" 
+            h="24" 
+            bg="base-graphite" 
+            border 
+            borderColor="border-steel-grey" 
+            display="flex" 
+            center 
+            overflow="hidden"
+            className="relative"
+          >
+            <TeamLogo teamId={teamId} alt={name} />
+            {/* Corner detail */}
+            <Box position="absolute" bottom="0" right="0" w="2" h="2" bg="primary-blue/20" />
+          </Box>
+          
+          <Box flexGrow={1} minWidth="0">
+            <Stack direction="row" align="center" gap={3} mb={2}>
+              <Heading level={1} weight="bold" className="tracking-tight">{name}</Heading>
+              {tag && <TeamTag tag={tag} />}
+            </Stack>
+
+            {description && (
+              <Text color="text-gray-400" block mb={4} maxWidth="42rem" size="sm" leading="relaxed">
+                {description}
+              </Text>
+            )}
+
+            <Stack direction="row" align="center" gap={4} wrap>
+              <Box display="flex" alignItems="center" gap={1.5}>
+                <Box w="1.5" h="1.5" bg="primary-blue" />
+                <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                  {memberCount} {memberCount === 1 ? 'Member' : 'Members'}
+                </Text>
+              </Box>
+              
+              {category && (
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box w="1.5" h="1.5" bg="telemetry-aqua" />
+                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                    {category}
+                  </Text>
+                </Box>
+              )}
+
+              {activeLeaguesCount !== undefined && (
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box w="1.5" h="1.5" bg="warning-amber" />
+                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                    {activeLeaguesCount} {activeLeaguesCount === 1 ? 'League' : 'Leagues'}
+                  </Text>
+                </Box>
+              )}
+
+              {foundedDate && (
+                <Text size="xs" color="text-gray-500" font="mono" className="uppercase tracking-wider">
+                  EST. {foundedDate}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+        </Stack>
+
+        {actions && (
+          <Box>
+            {actions}
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/TeamLeaderboardPanel.tsx b/apps/website/ui/TeamLeaderboardPanel.tsx
new file mode 100644
index 000000000..d78b9b05e
--- /dev/null
+++ b/apps/website/ui/TeamLeaderboardPanel.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './Table';
+import { TeamLogo } from './TeamLogo';
+import { RankBadge } from './RankBadge';
+
+interface TeamLeaderboardPanelProps {
+  teams: Array<{
+    id: string;
+    name: string;
+    logoUrl?: string;
+    rating: number;
+    wins: number;
+    races: number;
+    memberCount: number;
+  }>;
+  onTeamClick: (id: string) => void;
+}
+
+export function TeamLeaderboardPanel({ teams, onTeamClick }: TeamLeaderboardPanelProps) {
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Table>
+        <TableHead className="bg-base-graphite/50">
+          <TableRow>
+            <TableHeader className="w-16 text-center">Rank</TableHeader>
+            <TableHeader>Team</TableHeader>
+            <TableHeader className="text-center">Rating</TableHeader>
+            <TableHeader className="text-center">Wins</TableHeader>
+            <TableHeader className="text-center">Races</TableHeader>
+            <TableHeader className="text-center">Members</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {teams.map((team, index) => (
+            <TableRow 
+              key={team.id} 
+              onClick={() => onTeamClick(team.id)} 
+              clickable
+              className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
+            >
+              <TableCell className="text-center">
+                <RankBadge rank={index + 1} />
+              </TableCell>
+              <TableCell>
+                <Stack direction="row" align="center" gap={3}>
+                  <Box w="8" h="8" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center overflow="hidden">
+                    <TeamLogo teamId={team.id} alt={team.name} />
+                  </Box>
+                  <Text weight="bold" size="sm" color="text-white" className="group-hover:text-primary-blue transition-colors">
+                    {team.name}
+                  </Text>
+                </Stack>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" weight="bold" color="text-primary-blue">{team.rating}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-300">{team.wins}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-300">{team.races}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-400" size="xs">{team.memberCount}</Text>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/TeamLogo.tsx b/apps/website/ui/TeamLogo.tsx
index ac5334964..2ad2080cf 100644
--- a/apps/website/ui/TeamLogo.tsx
+++ b/apps/website/ui/TeamLogo.tsx
@@ -1,31 +1,53 @@
-/**
- * TeamLogo
- *
- * Pure UI component for displaying team logos.
- * Renders an optimized image with fallback on error.
- */
-
 import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { Users } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface TeamLogoProps {
-  teamId: string;
+  teamId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
-export function TeamLogo({ teamId, alt, className = '' }: TeamLogoProps) {
+export function TeamLogo({ 
+  teamId, 
+  src, 
+  alt, 
+  size = 48, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: TeamLogoProps) {
+  const logoSrc = src || (teamId ? `/media/teams/${teamId}/logo` : undefined);
+
   return (
-    <Image
-      src={`/media/teams/${teamId}/logo`}
-      alt={alt}
-      width={100}
-      height={100}
-      className={`object-contain ${className}`}
-      onError={(e) => {
-        // Fallback to default logo
-        (e.target as HTMLImageElement).src = '/default-team-logo.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackSrc="/default-team-logo.png"
+        />
+      ) : (
+        <Icon icon={Users} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
 }
diff --git a/apps/website/ui/TelemetryStrip.tsx b/apps/website/ui/TelemetryStrip.tsx
new file mode 100644
index 000000000..9ee1ff738
--- /dev/null
+++ b/apps/website/ui/TelemetryStrip.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface TelemetryItem {
+  label: string;
+  value: string | number;
+  trend?: 'up' | 'down' | 'neutral';
+  color?: string;
+}
+
+interface TelemetryStripProps {
+  items: TelemetryItem[];
+  className?: string;
+}
+
+/**
+ * TelemetryStrip
+ * 
+ * A thin, dense strip showing key telemetry or performance metrics.
+ * Follows the "Precision Racing Minimal" theme.
+ */
+export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
+  return (
+    <Box 
+      className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
+    >
+      {items.map((item, index) => (
+        <Box key={index} display="flex" align="center" gap={2} className="whitespace-nowrap">
+          <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
+            {item.label}
+          </Text>
+          <Text 
+            size="sm" 
+            weight="bold" 
+            style={{ color: item.color || '#4ED4E0' }}
+            className="font-mono"
+          >
+            {item.value}
+          </Text>
+          {item.trend && (
+            <Text size="xs" style={{ color: item.trend === 'up' ? '#10b981' : item.trend === 'down' ? '#ef4444' : '#94a3b8' }}>
+              {item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
+            </Text>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
diff --git a/apps/website/ui/Text.tsx b/apps/website/ui/Text.tsx
index 9e8db4cc1..7af14e0c7 100644
--- a/apps/website/ui/Text.tsx
+++ b/apps/website/ui/Text.tsx
@@ -36,7 +36,8 @@ interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'c
   align?: TextAlign | ResponsiveTextAlign;
   truncate?: boolean;
   uppercase?: boolean;
-  letterSpacing?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | '0.05em';
+  capitalize?: boolean;
+  letterSpacing?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | '0.05em' | string;
   leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
   fontSize?: string;
   style?: React.CSSProperties;
@@ -68,6 +69,7 @@ export function Text<T extends ElementType = 'span'>({
   align = 'left',
   truncate = false,
   uppercase = false,
+  capitalize = false,
   letterSpacing,
   leading,
   fontSize,
@@ -180,6 +182,7 @@ export function Text<T extends ElementType = 'span'>({
     color,
     truncate ? 'truncate' : '',
     uppercase ? 'uppercase' : '',
+    capitalize ? 'capitalize' : '',
     italic ? 'italic' : '',
     letterSpacing === '0.05em' ? 'tracking-wider' : letterSpacing ? `tracking-${letterSpacing}` : '',
     getSpacingClass('ml', ml),
diff --git a/apps/website/ui/TopNav.tsx b/apps/website/ui/TopNav.tsx
new file mode 100644
index 000000000..538bba4d5
--- /dev/null
+++ b/apps/website/ui/TopNav.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface TopNavProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * TopNav is a horizontal navigation container used within the AppHeader.
+ */
+export function TopNav({ children, className = '' }: TopNavProps) {
+  return (
+    <nav className={`flex items-center justify-between w-full ${className}`}>
+      {children}
+    </nav>
+  );
+}
diff --git a/apps/website/ui/TrackImage.tsx b/apps/website/ui/TrackImage.tsx
index 2793f80e0..743ec45b9 100644
--- a/apps/website/ui/TrackImage.tsx
+++ b/apps/website/ui/TrackImage.tsx
@@ -1,31 +1,46 @@
-/**
- * TrackImage
- *
- * Pure UI component for displaying track images.
- * Renders an optimized image with fallback on error.
- */
-
 import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface TrackImageProps {
-  trackId: string;
+  trackId?: string;
+  src?: string;
   alt: string;
+  aspectRatio?: string;
   className?: string;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
-export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
+export function TrackImage({ 
+  trackId, 
+  src, 
+  alt, 
+  aspectRatio = '16/9',
+  className = '',
+  rounded = 'lg',
+}: TrackImageProps) {
+  const imageSrc = src || (trackId ? `/media/tracks/${trackId}/image` : undefined);
+
   return (
-    <Image
-      src={`/media/tracks/${trackId}/image`}
-      alt={alt}
-      width={800}
-      height={256}
-      className={`w-full h-64 object-cover ${className}`}
-      onError={(e) => {
-        // Fallback to default track image
-        (e.target as HTMLImageElement).src = '/default-track-image.png';
-      }}
-    />
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      rounded={rounded}
+      className={className}
+      style={{ aspectRatio }}
+    >
+      {imageSrc ? (
+        <Image
+          src={imageSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-track-image.png"
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
   );
 }
diff --git a/apps/website/ui/state-types.ts b/apps/website/ui/state-types.ts
index 7c5885069..a6aeef0da 100644
--- a/apps/website/ui/state-types.ts
+++ b/apps/website/ui/state-types.ts
@@ -6,7 +6,7 @@ import { LucideIcon } from 'lucide-react';
 export interface EmptyStateAction {
   label: string;
   onClick: () => void;
-  variant?: 'primary' | 'secondary' | 'danger' | 'race-performance' | 'race-final';
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-final' | 'discord';
   icon?: LucideIcon;
 }