diff --git a/migrations/007_atomic_band_claim.sql b/migrations/007_atomic_band_claim.sql
new file mode 100644
index 0000000..ffe8208
--- /dev/null
+++ b/migrations/007_atomic_band_claim.sql
@@ -0,0 +1,113 @@
+-- Migration: 007_atomic_band_claim.sql
+-- Description: Replaces the multi-step client-side band claim flow with a single atomic RPC.
+-- This eliminates race conditions where two users might claim the same band simultaneously,
+-- and prevents partial failures (e.g., band assigned but token not consumed).
+
+CREATE OR REPLACE FUNCTION public.claim_band_atomic(
+  p_token text,
+  p_band_id text
+)
+RETURNS jsonb
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  v_claim record;
+  v_band record;
+  v_now timestamptz := now();
+BEGIN
+  -- 1. Lock and validate the token claim
+  SELECT * INTO v_claim
+  FROM token_claims
+  WHERE token_hash = p_token
+  FOR UPDATE;
+
+  IF NOT FOUND THEN
+    RETURN jsonb_build_object(
+      'success', false,
+      'code', 'invalid_token',
+      'message', 'Claim session not found.'
+    );
+  END IF;
+
+  IF v_claim.used_at IS NOT NULL THEN
+    RETURN jsonb_build_object(
+      'success', false,
+      'code', 'token_already_used',
+      'message', 'This registration link has already been used.'
+    );
+  END IF;
+
+  IF v_claim.expires_at < v_now THEN
+    RETURN jsonb_build_object(
+      'success', false,
+      'code', 'expired_token',
+      'message', 'This claim link has expired.'
+    );
+  END IF;
+
+  -- 2. Lock and validate the band
+  SELECT * INTO v_band
+  FROM bands
+  WHERE band_id = p_band_id
+  FOR UPDATE;
+
+  IF NOT FOUND THEN
+    RETURN jsonb_build_object(
+      'success', false,
+      'code', 'band_not_found',
+      'message', 'That wristband number was not found.'
+    );
+  END IF;
+
+  IF v_band.status != 'available' THEN
+    RETURN jsonb_build_object(
+      'success', false,
+      'code', 'band_unavailable',
+      'message', 'This wristband is already assigned.'
+    );
+  END IF;
+
+  -- 3. Execute the atomic updates
+  -- Note: We update bands first, then athletes, to satisfy the circular FK if deferred,
+  -- or just to maintain the same order the client used.
+
+  UPDATE bands
+  SET 
+    status = 'assigned',
+    athlete_id = v_claim.athlete_id,
+    assigned_at = v_now
+  WHERE band_id = p_band_id;
+
+  UPDATE athletes
+  SET band_id = p_band_id
+  WHERE id = v_claim.athlete_id;
+
+  UPDATE token_claims
+  SET used_at = v_now
+  WHERE token_hash = p_token;
+
+  -- 4. Return success payload
+  RETURN jsonb_build_object(
+    'success', true,
+    'code', 'success',
+    'athlete_id', v_claim.athlete_id,
+    'band_id', p_band_id,
+    'display_number', v_band.display_number
+  );
+
+EXCEPTION WHEN OTHERS THEN
+  -- Catch any unexpected DB errors (e.g., constraint violations) and return a safe payload
+  -- The transaction will automatically roll back.
+  RETURN jsonb_build_object(
+    'success', false,
+    'code', 'claim_failed',
+    'message', SQLERRM
+  );
+END;
+$$;
+
+-- Grant execute permission to authenticated and anon roles
+GRANT EXECUTE ON FUNCTION public.claim_band_atomic(text, text) TO authenticated;
+GRANT EXECUTE ON FUNCTION public.claim_band_atomic(text, text) TO anon;
diff --git a/migrations/008_security_and_schema_alignment.sql b/migrations/008_security_and_schema_alignment.sql
new file mode 100644
index 0000000..f0c814e
--- /dev/null
+++ b/migrations/008_security_and_schema_alignment.sql
@@ -0,0 +1,88 @@
+-- Migration: 008_security_and_schema_alignment.sql
+-- Description: Hardens RLS policies across core tables and fixes schema drift
+
+-- ============================================================================
+-- 1. SCHEMA DRIFT FIXES
+-- ============================================================================
+
+-- Fix 1.1: Add missing assigned_at column to bands table
+-- This column is used by the claim_band_atomic RPC but was missing from migration 002
+ALTER TABLE bands ADD COLUMN IF NOT EXISTS assigned_at TIMESTAMPTZ;
+
+-- Fix 1.2: Fix incidents.station_id foreign key type mismatch
+-- stations.id is TEXT, but incidents.station_id was created as UUID in migration 005
+-- We must drop the constraint, change the type, and re-add the constraint
+ALTER TABLE incidents DROP CONSTRAINT IF EXISTS incidents_station_id_fkey;
+ALTER TABLE incidents ALTER COLUMN station_id TYPE TEXT USING station_id::TEXT;
+ALTER TABLE incidents ADD CONSTRAINT incidents_station_id_fkey FOREIGN KEY (station_id) REFERENCES stations(id);
+
+-- Fix 1.3: Add missing columns to report_jobs table
+-- These columns exist in supabase_schema.sql but were missing from migration 004
+ALTER TABLE report_jobs ADD COLUMN IF NOT EXISTS requested_by UUID REFERENCES auth.users(id);
+ALTER TABLE report_jobs ADD COLUMN IF NOT EXISTS format TEXT DEFAULT 'pdf';
+ALTER TABLE report_jobs ADD COLUMN IF NOT EXISTS error_message TEXT;
+
+-- ============================================================================
+-- 2. RLS POLICY HARDENING
+-- ============================================================================
+
+-- ----------------------------------------------------------------------------
+-- Table: token_claims
+-- Issue: "Public Token Claims" FOR ALL USING (true) allowed full public read/write
+-- Fix: Restrict to SELECT only. Mutations are handled exclusively by the RPC.
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Public Token Claims" ON token_claims;
+
+CREATE POLICY "Public Read Own Token" ON token_claims
+  FOR SELECT USING (true);
+
+CREATE POLICY "Admin Full Access Tokens" ON token_claims
+  FOR ALL TO authenticated USING (
+    EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin')
+  );
+
+-- ----------------------------------------------------------------------------
+-- Table: athletes
+-- Issue: "Public Update Athlete via ID" FOR UPDATE USING (true) allowed public mutation
+-- Fix: Remove public UPDATE. The claim_band_atomic RPC handles band_id update securely.
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Public Update Athlete via ID" ON athletes;
+
+-- ----------------------------------------------------------------------------
+-- Table: bands
+-- Issue: "Public Update Band Claim" FOR UPDATE USING (true) allowed public mutation
+-- Fix: Remove public UPDATE. The claim_band_atomic RPC handles band assignment securely.
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Public Update Band Claim" ON bands;
+
+-- ----------------------------------------------------------------------------
+-- Table: results
+-- Issue: "Admin Update Results" FOR UPDATE TO authenticated USING (true) allowed any staff
+-- Fix: Restrict UPDATE to admins only. Staff should only INSERT (append-only).
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Admin Update Results" ON results;
+
+CREATE POLICY "Admin Update Results" ON results
+  FOR UPDATE TO authenticated USING (
+    EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin')
+  );
+
+-- ----------------------------------------------------------------------------
+-- Table: profiles
+-- Issue: "Public profiles are viewable by everyone." leaked staff names/roles
+-- Fix: Restrict profile visibility to authenticated users only.
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Public profiles are viewable by everyone." ON profiles;
+
+CREATE POLICY "Authenticated Read Profiles" ON profiles
+  FOR SELECT TO authenticated USING (true);
+
+-- ----------------------------------------------------------------------------
+-- Table: device_status
+-- Issue: "Public Device Status Update" FOR UPDATE USING (true) allowed public mutation
+-- Fix: Restrict UPDATE to authenticated staff/admins. Stations can only INSERT (upsert).
+-- ----------------------------------------------------------------------------
+DROP POLICY IF EXISTS "Public Device Status Update" ON device_status;
+
+CREATE POLICY "Staff Update Device Status" ON device_status
+  FOR UPDATE TO authenticated USING (true);
diff --git a/src/App.tsx b/src/App.tsx
index d18c58b..3a8060c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ const Home = lazy(() => import('./pages/Home'));
 const Register = lazy(() => import('./pages/Register'));
 const ClaimBand = lazy(() => import('./pages/ClaimBand'));
 const StaffLogin = lazy(() => import('./pages/StaffLogin'));
+const StaffStationSelect = lazy(() => import('./pages/StaffStationSelect'));
 const StationMode = lazy(() => import('./pages/StationMode'));
 const AdminLogin = lazy(() => import('./pages/AdminLogin'));
 const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
@@ -37,6 +38,11 @@ export default function App() {
               <Route path="/p/:token" element={<ParentPortal />} />
               <Route path="/claim-band" element={<ClaimBand />} />
               <Route path="/staff/login" element={<StaffLogin />} />
+              <Route path="/staff/select-station" element={
+                <RouteGuard>
+                  <StaffStationSelect />
+                </RouteGuard>
+              } />
               <Route path="/staff/station/:stationId" element={
                 <RouteGuard>
                   <StationMode />
diff --git a/src/hooks/useOfflineSync.ts b/src/hooks/useOfflineSync.ts
index 6d5fbd6..dc1b39c 100644
--- a/src/hooks/useOfflineSync.ts
+++ b/src/hooks/useOfflineSync.ts
@@ -1,73 +1,192 @@
 import { useEffect, useState, useCallback } from 'react';
-import { getOutboxItems, removeFromOutbox, OutboxItem } from '../lib/offline';
+import {
+  getOutboxItems,
+  getAllOutboxItems,
+  removeFromOutbox,
+  updateOutboxItem,
+  OutboxItem,
+  MAX_RETRIES,
+  computeNextRetryAt,
+} from '../lib/offline';
 import { supabase } from '../lib/supabase';
 
+// ---------------------------------------------------------------------------
+// Dev-only logger -- never surfaces to public UI
+// ---------------------------------------------------------------------------
+function logDev(message: string, ...args: unknown[]): void {
+  if (import.meta.env.DEV) {
+    console.log(`[OfflineSync] ${message}`, ...args);
+  }
+}
+function logDevError(message: string, ...args: unknown[]): void {
+  if (import.meta.env.DEV) {
+    console.error(`[OfflineSync] ${message}`, ...args);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
 export function useOfflineSync() {
   const [isOnline, setIsOnline] = useState(navigator.onLine);
   const [pendingCount, setPendingCount] = useState(0);
+  const [retryingCount, setRetryingCount] = useState(0);
+  const [deadLetterCount, setDeadLetterCount] = useState(0);
   const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null);
 
-  const updatePendingCount = useCallback(async () => {
-    const items = await getOutboxItems();
-    setPendingCount(items.length);
+  // -------------------------------------------------------------------------
+  // Refresh diagnostic counts from the full outbox (all statuses)
+  // -------------------------------------------------------------------------
+  const updateCounts = useCallback(async () => {
+    const all = await getAllOutboxItems();
+    setPendingCount(all.filter((i) => i.status === 'pending').length);
+    setRetryingCount(all.filter((i) => i.status === 'retrying').length);
+    setDeadLetterCount(all.filter((i) => i.status === 'dead_letter').length);
+  }, []);
+
+  // -------------------------------------------------------------------------
+  // Attempt to sync a single 'result' item
+  // -------------------------------------------------------------------------
+  const syncResultItem = useCallback(async (item: OutboxItem): Promise<boolean> => {
+    const { error } = await supabase.from('results').insert(item.payload);
+
+    if (!error || error.code === '23505') {
+      // Success or idempotent duplicate -- remove from outbox
+      await removeFromOutbox(item.id);
+
+      // Trigger report-completion check (best-effort; failure is non-fatal)
+      try {
+        const [{ data: athleteResults }, { data: eventData }] = await Promise.all([
+          supabase
+            .from('results')
+            .select('drill_type')
+            .eq('athlete_id', item.payload.athlete_id),
+          supabase
+            .from('events')
+            .select('required_drills')
+            .eq('id', item.payload.event_id)
+            .single(),
+        ]);
+
+        if (athleteResults && eventData?.required_drills) {
+          const completedDrills = new Set(athleteResults.map((r: { drill_type: string }) => r.drill_type));
+          const allDone = eventData.required_drills.every((d: string) => completedDrills.has(d));
+          if (allDone) {
+            await supabase.from('report_jobs').upsert(
+              {
+                athlete_id: item.payload.athlete_id,
+                event_id: item.payload.event_id,
+                status: 'pending',
+              },
+              { onConflict: 'athlete_id' },
+            );
+          }
+        }
+      } catch (e) {
+        logDevError('Report trigger check failed for item', item.id, e);
+      }
+
+      return true;
+    }
+
+    // Transient failure -- caller will handle retry bookkeeping
+    logDevError('Sync error for result item', item.id, error);
+    return false;
   }, []);
 
+  // -------------------------------------------------------------------------
+  // Attempt to sync a single 'device_status' item
+  // -------------------------------------------------------------------------
+  const syncDeviceStatusItem = useCallback(async (item: OutboxItem): Promise<boolean> => {
+    const { error } = await supabase.from('device_status').upsert(item.payload);
+    if (!error) {
+      await removeFromOutbox(item.id);
+      return true;
+    }
+    logDevError('Sync error for device_status item', item.id, error);
+    return false;
+  }, []);
+
+  // -------------------------------------------------------------------------
+  // Main sync loop -- processes all eligible items with retry governance
+  // -------------------------------------------------------------------------
   const syncOutbox = useCallback(async () => {
     if (!navigator.onLine) return;
 
+    // getOutboxItems() already filters out dead_letter and not-yet-due items
     const items = await getOutboxItems();
     if (items.length === 0) return;
 
-    console.log(`Syncing ${items.length} items...`);
+    logDev(`Syncing ${items.length} eligible item(s)...`);
 
     for (const item of items) {
+      // Mark as 'retrying' if this is not the first attempt
+      if (item.retry_count > 0 && item.status !== 'retrying') {
+        await updateOutboxItem(item.id, { status: 'retrying' });
+      }
+
+      let succeeded = false;
+      let errorMessage: string | null = null;
+
       try {
         if (item.type === 'result') {
-          const { error } = await supabase.from('results').insert(item.payload);
-          // If error is duplicate (409/23505), we still remove it from outbox
-          if (!error || error.code === '23505') {
-            await removeFromOutbox(item.id);
-
-            // Check if athlete has completed all drills to trigger report
-            try {
-              const [{ data: athleteResults }, { data: eventData }] = await Promise.all([
-                supabase.from('results').select('drill_type').eq('athlete_id', item.payload.athlete_id),
-                supabase.from('events').select('required_drills').eq('id', item.payload.event_id).single()
-              ]);
-
-              if (athleteResults && eventData?.required_drills) {
-                const completedDrills = new Set(athleteResults.map(r => r.drill_type));
-                const allDone = eventData.required_drills.every((d: string) => completedDrills.has(d));
-                
-                if (allDone) {
-                  await supabase.from('report_jobs').upsert({
-                    athlete_id: item.payload.athlete_id,
-                    event_id: item.payload.event_id,
-                    status: 'pending'
-                  }, { onConflict: 'athlete_id' });
-                }
-              }
-            } catch (e) {
-              console.error('Report trigger check failed', e);
-            }
-          } else {
-            console.error('Sync error for item', item.id, error);
-          }
+          succeeded = await syncResultItem(item);
         } else if (item.type === 'device_status') {
-          const { error } = await supabase.from('device_status').upsert(item.payload);
-          if (!error) {
-            await removeFromOutbox(item.id);
-          }
+          succeeded = await syncDeviceStatusItem(item);
+        } else {
+          // Unknown item type -- treat as unrecoverable
+          logDevError('Unknown outbox item type, moving to dead_letter', item);
+          await updateOutboxItem(item.id, {
+            status: 'dead_letter',
+            error_message: `Unknown item type: ${(item as any).type}`,
+            last_attempt_at: Date.now(),
+          });
+          continue;
         }
       } catch (err) {
-        console.error('Failed to sync item', item.id, err);
+        errorMessage = err instanceof Error ? err.message : String(err);
+        logDevError('Unexpected exception syncing item', item.id, err);
+        succeeded = false;
+      }
+
+      if (!succeeded) {
+        const newRetryCount = item.retry_count + 1;
+
+        if (newRetryCount >= MAX_RETRIES) {
+          // Exhausted all retries -- move to dead letter
+          logDev(`Item ${item.id} reached max retries (${MAX_RETRIES}). Moving to dead_letter.`);
+          await updateOutboxItem(item.id, {
+            retry_count: newRetryCount,
+            last_attempt_at: Date.now(),
+            next_retry_at: null,
+            error_message: errorMessage ?? item.error_message,
+            status: 'dead_letter',
+          });
+        } else {
+          // Schedule next retry with exponential backoff
+          const nextRetryAt = computeNextRetryAt(newRetryCount);
+          logDev(
+            `Item ${item.id} failed (attempt ${newRetryCount}/${MAX_RETRIES}). ` +
+            `Next retry at ${new Date(nextRetryAt).toISOString()}.`,
+          );
+          await updateOutboxItem(item.id, {
+            retry_count: newRetryCount,
+            last_attempt_at: Date.now(),
+            next_retry_at: nextRetryAt,
+            error_message: errorMessage ?? item.error_message,
+            status: 'retrying',
+          });
+        }
       }
     }
 
-    await updatePendingCount();
+    await updateCounts();
     setLastSyncTime(new Date());
-  }, [updatePendingCount]);
+  }, [syncResultItem, syncDeviceStatusItem, updateCounts]);
 
+  // -------------------------------------------------------------------------
+  // Event listeners and polling interval
+  // -------------------------------------------------------------------------
   useEffect(() => {
     const handleOnline = () => {
       setIsOnline(true);
@@ -78,19 +197,36 @@ export function useOfflineSync() {
     window.addEventListener('online', handleOnline);
     window.addEventListener('offline', handleOffline);
 
-    updatePendingCount();
+    updateCounts();
 
+    // Poll every 30 s -- getOutboxItems() respects next_retry_at so this is safe
     const interval = setInterval(() => {
       if (navigator.onLine) syncOutbox();
-      updatePendingCount();
-    }, 30000);
+      updateCounts();
+    }, 30_000);
 
     return () => {
       window.removeEventListener('online', handleOnline);
       window.removeEventListener('offline', handleOffline);
       clearInterval(interval);
     };
-  }, [syncOutbox, updatePendingCount]);
+  }, [syncOutbox, updateCounts]);
 
-  return { isOnline, pendingCount, lastSyncTime, syncOutbox, updatePendingCount };
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+  return {
+    isOnline,
+    /** Items in 'pending' status (never attempted). */
+    pendingCount,
+    /** Items in 'retrying' status (failed at least once, still within retry budget). */
+    retryingCount,
+    /** Items in 'dead_letter' status (exhausted all retries, requires manual review). */
+    deadLetterCount,
+    /** Total active items = pendingCount + retryingCount. */
+    activeCount: pendingCount + retryingCount,
+    lastSyncTime,
+    syncOutbox,
+    updateCounts,
+  };
 }
diff --git a/src/lib/offline.ts b/src/lib/offline.ts
index 0bdde2d..fc8138b 100644
--- a/src/lib/offline.ts
+++ b/src/lib/offline.ts
@@ -1,14 +1,50 @@
-import { openDB, IDBPDatabase } from 'idb';
+import { openDB } from 'idb';
 
 const DB_NAME = 'core_elite_combine_db';
-const DB_VERSION = 1;
+// Bumped from 1 to 2 to add the 'status' index on the outbox store.
+const DB_VERSION = 2;
+
+// ---------------------------------------------------------------------------
+// Retry governance constants
+// ---------------------------------------------------------------------------
+export const MAX_RETRIES = 5;
+export const BASE_DELAY_MS = 5_000;   // 5 s
+export const MAX_DELAY_MS = 300_000;  // 5 min
+
+/**
+ * Compute the timestamp (ms since epoch) at which the next retry should be
+ * attempted, using capped exponential backoff.
+ *
+ *   delay = min(BASE_DELAY_MS * 2^retryCount, MAX_DELAY_MS)
+ */
+export function computeNextRetryAt(retryCount: number): number {
+  const delay = Math.min(BASE_DELAY_MS * Math.pow(2, retryCount), MAX_DELAY_MS);
+  return Date.now() + delay;
+}
+
+// ---------------------------------------------------------------------------
+// OutboxItem -- extended schema (DB_VERSION 2)
+// ---------------------------------------------------------------------------
+export type OutboxStatus = 'pending' | 'retrying' | 'dead_letter' | 'synced';
 
 export interface OutboxItem {
-  id: string; // client_result_id
+  /** Stable client-generated ID (client_result_id for results, station key for
+   *  device_status).  Used as the IDB keyPath -- put() is therefore idempotent. */
+  id: string;
   type: 'result' | 'device_status';
   payload: any;
+  /** Unix ms timestamp when the item was first created. */
   timestamp: number;
-  attempts: number;
+  /** Total number of sync attempts made so far (including the current one). */
+  retry_count: number;
+  /** Unix ms timestamp of the most recent sync attempt, or null if never tried. */
+  last_attempt_at: number | null;
+  /** Unix ms timestamp before which the item must NOT be retried. */
+  next_retry_at: number | null;
+  /** Most recent error message from a failed attempt. Dev-only display. */
+  error_message: string | null;
+  /** Lifecycle status of this item. */
+  status: OutboxStatus;
 }
 
 export interface AthleteCache {
@@ -19,11 +55,21 @@ export interface AthleteCache {
   position?: string;
 }
 
+// ---------------------------------------------------------------------------
+// IndexedDB initialisation
+// ---------------------------------------------------------------------------
 export async function initDB() {
   return openDB(DB_NAME, DB_VERSION, {
-    upgrade(db) {
+    upgrade(db, oldVersion) {
       if (!db.objectStoreNames.contains('outbox')) {
-        db.createObjectStore('outbox', { keyPath: 'id' });
+        const store = db.createObjectStore('outbox', { keyPath: 'id' });
+        store.createIndex('by_status', 'status');
+      } else if (oldVersion < 2) {
+        const tx = db.transaction('outbox', 'readwrite');
+        const existingStore = tx.objectStore('outbox');
+        if (!existingStore.indexNames.contains('by_status')) {
+          existingStore.createIndex('by_status', 'status');
+        }
       }
       if (!db.objectStoreNames.contains('athlete_cache')) {
         db.createObjectStore('athlete_cache', { keyPath: 'band_id' });
@@ -35,22 +81,103 @@ export async function initDB() {
   });
 }
 
-export async function addToOutbox(item: OutboxItem) {
+// ---------------------------------------------------------------------------
+// Outbox CRUD
+// ---------------------------------------------------------------------------
+
+/**
+ * Add or replace an item in the outbox.  Uses db.put() so calling this with
+ * the same id is safe -- it overwrites rather than duplicates.
+ * New items are created with sensible defaults for all v2 fields.
+ */
+export async function addToOutbox(
+  item: Omit<OutboxItem, 'retry_count' | 'last_attempt_at' | 'next_retry_at' | 'error_message' | 'status'>
+    & Partial<Pick<OutboxItem, 'retry_count' | 'last_attempt_at' | 'next_retry_at' | 'error_message' | 'status'>>
+): Promise<void> {
   const db = await initDB();
-  await db.put('outbox', item);
+  const full: OutboxItem = {
+    retry_count: 0,
+    last_attempt_at: null,
+    next_retry_at: null,
+    error_message: null,
+    status: 'pending',
+    ...item,
+  };
+  await db.put('outbox', full);
 }
 
+/**
+ * Retrieve all items eligible for a sync attempt right now:
+ * status is 'pending' or 'retrying' AND next_retry_at is null or in the past.
+ */
 export async function getOutboxItems(): Promise<OutboxItem[]> {
+  const db = await initDB();
+  const all: OutboxItem[] = await db.getAll('outbox');
+  const now = Date.now();
+  return all.filter(
+    (item) =>
+      (item.status === 'pending' || item.status === 'retrying') &&
+      (item.next_retry_at === null || item.next_retry_at <= now),
+  );
+}
+
+/**
+ * Retrieve ALL items regardless of status -- used by diagnostics hooks.
+ */
+export async function getAllOutboxItems(): Promise<OutboxItem[]> {
   const db = await initDB();
   return db.getAll('outbox');
 }
 
-export async function removeFromOutbox(id: string) {
+/**
+ * Partially update a queued item (e.g. after a failed attempt).
+ */
+export async function updateOutboxItem(
+  id: string,
+  updates: Partial<Omit<OutboxItem, 'id'>>,
+): Promise<void> {
+  const db = await initDB();
+  const existing = await db.get('outbox', id);
+  if (!existing) return;
+  await db.put('outbox', { ...existing, ...updates });
+}
+
+export async function removeFromOutbox(id: string): Promise<void> {
   const db = await initDB();
   await db.delete('outbox', id);
 }
 
-export async function cacheAthlete(athlete: AthleteCache) {
+/**
+ * For device_status items: collapse any existing queued item for the same
+ * station/device key into a single entry with the latest payload.
+ * This prevents heartbeat spam from filling the outbox while offline.
+ * Callers must use a stable key such as device_status:${stationId}.
+ */
+export async function upsertDeviceStatusItem(stationId: string, payload: any): Promise<void> {
+  const id = `device_status:${stationId}`;
+  const db = await initDB();
+  const existing = await db.get('outbox', id);
+
+  if (existing && (existing.status === 'pending' || existing.status === 'retrying')) {
+    await db.put('outbox', {
+      ...existing,
+      payload,
+      timestamp: Date.now(),
+    });
+  } else {
+    await addToOutbox({
+      id,
+      type: 'device_status',
+      payload,
+      timestamp: Date.now(),
+    });
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Athlete cache helpers (unchanged)
+// ---------------------------------------------------------------------------
+export async function cacheAthlete(athlete: AthleteCache): Promise<void> {
   const db = await initDB();
   await db.put('athlete_cache', athlete);
 }
@@ -60,7 +187,7 @@ export async function getCachedAthlete(bandId: string): Promise<AthleteCache | u
   return db.get('athlete_cache', bandId);
 }
 
-export async function clearAthleteCache() {
+export async function clearAthleteCache(): Promise<void> {
   const db = await initDB();
   await db.clear('athlete_cache');
-}
+  }
diff --git a/src/pages/AdminDashboard.tsx b/src/pages/AdminDashboard.tsx
index b9c37d5..195f407 100644
--- a/src/pages/AdminDashboard.tsx
+++ b/src/pages/AdminDashboard.tsx
@@ -1,130 +1,204 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { supabase } from '../lib/supabase';
 import { motion } from 'motion/react';
-import { 
-  Users, 
-  CreditCard, 
-  Activity, 
-  CheckCircle, 
-  Wifi, 
-  WifiOff, 
+import {
+  Users,
+  CreditCard,
+  Activity,
+  CheckCircle,
+  Wifi,
+  WifiOff,
   Search,
   Download,
-  MoreVertical,
   AlertTriangle,
   Clock,
-  Home
+  Home,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
 } from 'lucide-react';
 import { DRILL_CATALOG } from '../constants';
 
+const PAGE_SIZE = 25;
+const COMPLETION_THRESHOLD = DRILL_CATALOG.length || 5;
+
+interface DashboardStats {
+  athletes: number;
+  bands: number;
+  results: number;
+  completed: number;
+}
+
+interface AthleteRow {
+  id: string;
+  first_name: string;
+  last_name: string;
+  position: string | null;
+  bands: { display_number: number | null } | null;
+  results: { drill_type: string; value_num: number | null }[];
+}
+
+interface StationRow {
+  id: string;
+  name: string;
+  drill_type: string;
+  status: { is_online: boolean; last_seen_at: string; pending_queue_count: number } | null;
+}
+
 export default function AdminDashboard() {
-  const [stats, setStats] = useState({
-    athletes: 0,
-    bands: 0,
-    results: 0,
-    completed: 0
-  });
-  const [stations, setStations] = useState<any[]>([]);
-  const [athletes, setAthletes] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<DashboardStats>({ athletes: 0, bands: 0, results: 0, completed: 0 });
+  const [stations, setStations] = useState<StationRow[]>([]);
+  const [athletes, setAthletes] = useState<AthleteRow[]>([]);
+  const [totalAthletes, setTotalAthletes] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [statsLoading, setStatsLoading] = useState(true);
+  const [tableLoading, setTableLoading] = useState(true);
+  const [exportLoading, setExportLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+  const currentPageRef = useRef(currentPage);
+  currentPageRef.current = currentPage;
 
-  useEffect(() => {
-    async function fetchData() {
-      setLoading(true);
-      
-      // 1. Fetch Stats
-      const { count: athleteCount } = await supabase.from('athletes').select('*', { count: 'exact', head: true });
-      const { count: bandCount } = await supabase.from('bands').select('*', { count: 'exact', head: true }).eq('status', 'assigned');
-      const { count: resultCount } = await supabase.from('results').select('*', { count: 'exact', head: true });
-      
-      // 2. Fetch Stations Health
-      const { data: stationList } = await supabase.from('stations').select('*');
-      const { data: statusData } = await supabase.from('device_status').select('*');
-      
-      const mergedStations = (stationList || []).map(s => {
-        const status = (statusData || []).find(st => st.station_id === s.id);
+  const fetchSummary = useCallback(async () => {
+    try {
+      const [
+        { count: athleteCount },
+        { count: bandCount },
+        { count: resultCount },
+        { data: resultAthleteIds },
+        { data: stationList },
+        { data: statusData },
+      ] = await Promise.all([
+        supabase.from('athletes').select('*', { count: 'exact', head: true }),
+        supabase.from('bands').select('*', { count: 'exact', head: true }).eq('status', 'assigned'),
+        supabase.from('results').select('*', { count: 'exact', head: true }),
+        supabase.from('results').select('athlete_id').limit(10000),
+        supabase.from('stations').select('id, name, drill_type'),
+        supabase.from('device_status').select('station_id, is_online, last_seen_at, pending_queue_count'),
+      ]);
+
+      const countByAthlete: Record<string, number> = {};
+      for (const row of resultAthleteIds ?? []) {
+        countByAthlete[row.athlete_id] = (countByAthlete[row.athlete_id] ?? 0) + 1;
+      }
+      const completed = Object.values(countByAthlete).filter((n) => n >= COMPLETION_THRESHOLD).length;
+
+      const mergedStations: StationRow[] = (stationList ?? []).map((s) => {
+        const ds = (statusData ?? []).find((st) => st.station_id === s.id);
         return {
-          ...s,
-          status: status || null
+          id: s.id,
+          name: s.name,
+          drill_type: s.drill_type,
+          status: ds ? { is_online: ds.is_online, last_seen_at: ds.last_seen_at, pending_queue_count: ds.pending_queue_count } : null,
         };
       });
-      
-      // 3. Fetch Athlete Progress
-      const { data: athleteData } = await supabase
-        .from('athletes')
-        .select('*, bands(display_number), results(drill_type)')
-        .order('created_at', { ascending: false });
 
-      setStats({
-        athletes: athleteCount || 0,
-        bands: bandCount || 0,
-        results: resultCount || 0,
-        completed: athleteData?.filter(a => {
-          // Dynamic completion check: has results for all required drills of the event
-          // For now, we'll assume a simple check if they have at least 5 results as a fallback
-          // or if they have results for all unique drill types in the catalog (if event required_drills is not available)
-          return a.results?.length >= 5;
-        }).length || 0
-      });
-      
+      setStats({ athletes: athleteCount ?? 0, bands: bandCount ?? 0, results: resultCount ?? 0, completed });
       setStations(mergedStations);
-      setAthletes(athleteData || []);
-      setLoading(false);
+    } finally {
+      setStatsLoading(false);
     }
+  }, []);
 
-    fetchData();
-    const interval = setInterval(fetchData, 30000);
-    return () => clearInterval(interval);
+  const fetchAthletePage = useCallback(async (page: number, search: string) => {
+    setTableLoading(true);
+    try {
+      const from = page * PAGE_SIZE;
+      const to = from + PAGE_SIZE - 1;
+      let query = supabase
+        .from('athletes')
+        .select('id, first_name, last_name, position, bands(display_number), results(drill_type, value_num)', { count: 'exact' })
+        .order('created_at', { ascending: false })
+        .range(from, to);
+
+      if (search.trim()) {
+        const isNumeric = /^\d+$/.test(search.trim());
+        if (isNumeric) {
+          query = query.eq('bands.display_number', parseInt(search.trim(), 10));
+        } else {
+          query = query.or(`first_name.ilike.%${search.trim()}%,last_name.ilike.%${search.trim()}%`);
+        }
+      }
+
+      const { data, count, error } = await query;
+      if (error) {
+        if (import.meta.env.DEV) console.error('[AdminDashboard] fetchAthletePage error:', error);
+        return;
+      }
+      setAthletes((data as AthleteRow[]) ?? []);
+      setTotalAthletes(count ?? 0);
+    } finally {
+      setTableLoading(false);
+    }
   }, []);
 
-  const filteredAthletes = athletes.filter(a => 
-    `${a.first_name} ${a.last_name}`.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    a.bands?.display_number?.toString().includes(searchTerm)
-  );
+  useEffect(() => {
+    fetchSummary();
+    fetchAthletePage(0, '');
+    const interval = setInterval(fetchSummary, 30_000);
+    return () => clearInterval(interval);
+  }, [fetchSummary, fetchAthletePage]);
 
-  const exportCSV = () => {
-    const drillIds = DRILL_CATALOG.map(d => d.id);
-    const headers = ['ID', 'Number', 'Name', 'Position', ...drillIds.map(id => DRILL_CATALOG.find(d => d.id === id)?.label || id)];
-    
-    const rows = athletes.map(a => {
-      const drillResults = drillIds.map(id => {
-        const res = a.results?.find((r: any) => r.drill_type === id);
-        return res ? res.value_num : '';
-      });
+  useEffect(() => {
+    fetchAthletePage(currentPage, searchTerm);
+  }, [currentPage, searchTerm, fetchAthletePage]);
 
-      return [
-        a.id,
-        a.bands?.display_number || 'N/A',
-        `${a.first_name} ${a.last_name}`,
-        a.position || 'N/A',
-        ...drillResults
-      ];
-    });
-    
-    const csvContent = [headers, ...rows].map(e => e.join(",")).join("\n");
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement("a");
-    const url = URL.createObjectURL(blob);
-    link.setAttribute("href", url);
-    link.setAttribute("download", `combine_results_${new Date().toISOString().split('T')[0]}.csv`);
-    link.style.visibility = 'hidden';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentPage(0);
+      setSearchTerm(searchInput);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  const exportCSV = async () => {
+    setExportLoading(true);
+    try {
+      const drillIds = DRILL_CATALOG.map((d) => d.id);
+      const headers = ['ID', 'Number', 'Name', 'Position', ...drillIds.map((id) => DRILL_CATALOG.find((d) => d.id === id)?.label ?? id)];
+      const { data: allAthletes, error } = await supabase
+        .from('athletes')
+        .select('id, first_name, last_name, position, bands(display_number), results(drill_type, value_num)')
+        .order('created_at', { ascending: false })
+        .limit(2000);
+      if (error) {
+        if (import.meta.env.DEV) console.error('[AdminDashboard] exportCSV error:', error);
+        return;
+      }
+      const rows = (allAthletes as AthleteRow[]).map((a) => {
+        const drillResults = drillIds.map((id) => {
+          const res = a.results?.find((r) => r.drill_type === id);
+          return res?.value_num != null ? res.value_num : '';
+        });
+        return [a.id, a.bands?.display_number ?? 'N/A', `${a.first_name} ${a.last_name}`, a.position ?? 'N/A', ...drillResults];
+      });
+      const csvContent = [headers, ...rows].map((e) => e.join(',')).join('\n');
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', `combine_results_${new Date().toISOString().split('T')[0]}.csv`);
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } finally {
+      setExportLoading(false);
+    }
   };
 
+  const totalPages = Math.ceil(totalAthletes / PAGE_SIZE);
+  const canGoPrev = currentPage > 0;
+  const canGoNext = currentPage < totalPages - 1;
+
   return (
     <div className="min-h-screen bg-zinc-50">
       <nav className="bg-white border-b border-zinc-200 px-8 py-4 sticky top-0 z-10">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <Link 
-              to="/" 
-              className="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-900"
-              title="Back to Home"
-            >
+            <Link to="/" className="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-900" title="Back to Home">
               <Home className="w-6 h-6" />
             </Link>
             <div className="h-8 w-px bg-zinc-200 mx-2" />
@@ -134,12 +208,20 @@ export default function AdminDashboard() {
             <h1 className="text-xl font-black uppercase italic tracking-tighter">Admin Dashboard</h1>
           </div>
           <div className="flex items-center gap-4">
-            <button 
-              onClick={exportCSV}
+            <button
+              onClick={() => { fetchSummary(); fetchAthletePage(currentPage, searchTerm); }}
               className="flex items-center gap-2 px-4 py-2 bg-zinc-100 hover:bg-zinc-200 rounded-xl text-sm font-bold transition-colors"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Refresh
+            </button>
+            <button
+              onClick={exportCSV}
+              disabled={exportLoading}
+              className="flex items-center gap-2 px-4 py-2 bg-zinc-100 hover:bg-zinc-200 rounded-xl text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <Download className="w-4 h-4" />
-              Export CSV
+              {exportLoading ? 'Exporting...' : 'Export CSV'}
             </button>
             <div className="w-10 h-10 bg-zinc-200 rounded-full border-2 border-white shadow-sm" />
           </div>
@@ -147,26 +229,27 @@ export default function AdminDashboard() {
       </nav>
 
       <main className="max-w-7xl mx-auto px-8 py-8 space-y-8">
-        {/* Stats Grid */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <StatCard icon={<Users />} label="Athletes Registered" value={stats.athletes} color="blue" />
-          <StatCard icon={<CreditCard />} label="Bands Assigned" value={stats.bands} color="purple" />
-          <StatCard icon={<Activity />} label="Results Captured" value={stats.results} color="emerald" />
-          <StatCard icon={<CheckCircle />} label="Completed Drills" value={stats.completed} color="amber" />
+          <StatCard icon={<Users />} label="Athletes Registered" value={stats.athletes} color="blue" loading={statsLoading} />
+          <StatCard icon={<CreditCard />} label="Bands Assigned" value={stats.bands} color="purple" loading={statsLoading} />
+          <StatCard icon={<Activity />} label="Results Captured" value={stats.results} color="emerald" loading={statsLoading} />
+          <StatCard icon={<CheckCircle />} label="Completed Drills" value={stats.completed} color="amber" loading={statsLoading} />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Athlete Table */}
           <div className="lg:col-span-2 space-y-4">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-bold">Athlete Progress</h2>
+              <div className="flex items-center gap-3">
+                <h2 className="text-xl font-bold">Athlete Progress</h2>
+                {!tableLoading && <span className="text-sm text-zinc-500">{totalAthletes} total</span>}
+              </div>
               <div className="relative">
                 <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
-                <input 
-                  type="text" 
+                <input
+                  type="text"
                   placeholder="Search athletes..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
                   className="pl-10 pr-4 py-2 bg-white border border-zinc-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-zinc-900 w-64"
                 />
               </div>
@@ -184,129 +267,94 @@ export default function AdminDashboard() {
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-zinc-100">
-                  {filteredAthletes.map((athlete) => (
-                    <tr key={athlete.id} className="hover:bg-zinc-50 transition-colors">
-                      <td className="px-6 py-4 font-black text-zinc-400">
-                        {athlete.bands?.display_number || '--'}
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="font-bold">{athlete.first_name} {athlete.last_name}</div>
-                        <div className="text-xs text-zinc-400">{athlete.parent_email}</div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <span className="px-2 py-1 bg-zinc-100 rounded text-xs font-bold">{athlete.position || 'N/A'}</span>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                          <div className="flex-1 h-2 bg-zinc-100 rounded-full overflow-hidden">
-                            <div 
-                              className="h-full bg-emerald-500 rounded-full" 
-                              style={{ width: `${Math.min((athlete.results?.length || 0) / 5 * 100, 100)}%` }}
-                            />
-                          </div>
-                          <span className="text-xs font-bold">{athlete.results?.length || 0}/5</span>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        {athlete.results?.length >= 5 ? (
-                          <span className="text-emerald-600 flex items-center gap-1 text-xs font-bold">
-                            <CheckCircle className="w-3 h-3" /> Ready
-                          </span>
-                        ) : (
-                          <span className="text-amber-600 flex items-center gap-1 text-xs font-bold">
-                            <Activity className="w-3 h-3" /> Testing
-                          </span>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
+                  {tableLoading ? (
+                    <tr><td colSpan={5} className="px-6 py-12 text-center text-zinc-400 text-sm">Loading...</td></tr>
+                  ) : athletes.length === 0 ? (
+                    <tr><td colSpan={5} className="px-6 py-12 text-center text-zinc-400 text-sm">{searchTerm ? 'No athletes match your search.' : 'No athletes registered yet.'}</td></tr>
+                  ) : (
+                    athletes.map((athlete) => {
+                      const resultCount = athlete.results?.length ?? 0;
+                      const progress = Math.min(Math.round((resultCount / COMPLETION_THRESHOLD) * 100), 100);
+                      const isComplete = resultCount >= COMPLETION_THRESHOLD;
+                      return (
+                        <motion.tr key={athlete.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="hover:bg-zinc-50 transition-colors">
+                          <td className="px-6 py-4 text-sm font-bold text-zinc-900">{athlete.bands?.display_number ?? '—'}</td>
+                          <td className="px-6 py-4">
+                            <div className="font-semibold text-zinc-900 text-sm">{athlete.first_name} {athlete.last_name}</div>
+                          </td>
+                          <td className="px-6 py-4 text-sm text-zinc-500">{athlete.position ?? '—'}</td>
+                          <td className="px-6 py-4">
+                            <div className="flex items-center gap-2">
+                              <div className="flex-1 bg-zinc-100 rounded-full h-2 min-w-[60px]">
+                                <div className={`h-2 rounded-full transition-all ${isComplete ? 'bg-emerald-500' : 'bg-blue-500'}`} style={{ width: `${progress}%` }} />
+                              </div>
+                              <span className="text-xs text-zinc-500 whitespace-nowrap">{resultCount}/{COMPLETION_THRESHOLD}</span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4">
+                            {isComplete ? (
+                              <span className="inline-flex items-center gap-1 px-2 py-1 bg-emerald-50 text-emerald-700 text-xs font-bold rounded-full">
+                                <CheckCircle className="w-3 h-3" /> Done
+                              </span>
+                            ) : (
+                              <span className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 text-xs font-bold rounded-full">
+                                <Clock className="w-3 h-3" /> In Progress
+                              </span>
+                            )}
+                          </td>
+                        </motion.tr>
+                      );
+                    })
+                  )}
                 </tbody>
               </table>
+
+              {totalPages > 1 && (
+                <div className="px-6 py-4 border-t border-zinc-100 flex items-center justify-between">
+                  <span className="text-sm text-zinc-500">Page {currentPage + 1} of {totalPages} &nbsp;·&nbsp; {totalAthletes} athletes</span>
+                  <div className="flex items-center gap-2">
+                    <button onClick={() => setCurrentPage((p) => p - 1)} disabled={!canGoPrev || tableLoading} className="p-2 rounded-lg hover:bg-zinc-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors" aria-label="Previous page">
+                      <ChevronLeft className="w-4 h-4" />
+                    </button>
+                    <button onClick={() => setCurrentPage((p) => p + 1)} disabled={!canGoNext || tableLoading} className="p-2 rounded-lg hover:bg-zinc-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors" aria-label="Next page">
+                      <ChevronRight className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
 
-          {/* Station Health */}
           <div className="space-y-4">
             <h2 className="text-xl font-bold">Station Health</h2>
-            <div className="space-y-4">
-              {stations.length === 0 ? (
-                <div className="p-8 bg-white rounded-3xl border border-zinc-200 text-center text-zinc-400 text-sm">
-                  No stations configured.
-                </div>
+            <div className="space-y-3">
+              {statsLoading ? (
+                <div className="bg-white rounded-2xl border border-zinc-200 p-4 text-sm text-zinc-400">Loading stations...</div>
+              ) : stations.length === 0 ? (
+                <div className="bg-white rounded-2xl border border-zinc-200 p-4 text-sm text-zinc-400">No stations configured.</div>
               ) : (
                 stations.map((station) => {
-                  const status = station.status;
-                  const lastSeen = status ? new Date(status.last_seen_at) : null;
-                  const now = new Date();
-                  const diffMinutes = lastSeen ? Math.floor((now.getTime() - lastSeen.getTime()) / 60000) : null;
-                  const isStale = diffMinutes !== null && diffMinutes > 2;
-                  const isOffline = !status || !status.is_online || isStale;
-                  
-                  const lastSync = status?.last_sync_at ? new Date(status.last_sync_at) : null;
-                  const syncDiffMinutes = lastSync ? Math.floor((now.getTime() - lastSync.getTime()) / 60000) : null;
-                  const isSyncStale = syncDiffMinutes !== null && syncDiffMinutes > 10;
-
+                  const isOnline = station.status?.is_online ?? false;
+                  const lastSeen = station.status?.last_seen_at ? new Date(station.status.last_seen_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : null;
+                  const pendingCount = station.status?.pending_queue_count ?? 0;
                   return (
-                    <div key={station.id} className="bg-white p-6 rounded-3xl border border-zinc-200 shadow-sm space-y-4 relative overflow-hidden">
-                      {isOffline && status && <div className="absolute top-0 left-0 w-1 h-full bg-red-500" />}
-                      {!status && <div className="absolute top-0 left-0 w-1 h-full bg-zinc-300" />}
-                      
+                    <div key={station.id} className="bg-white rounded-2xl border border-zinc-200 p-4 space-y-2">
                       <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          <div className={`p-2 rounded-lg ${!isOffline ? 'bg-emerald-100 text-emerald-600' : status ? 'bg-red-100 text-red-600' : 'bg-zinc-100 text-zinc-400'}`}>
-                            {!isOffline ? <Wifi className="w-4 h-4" /> : <WifiOff className="w-4 h-4" />}
-                          </div>
-                          <div>
-                            <h3 className="font-bold">{station.name}</h3>
-                            <p className="text-[10px] font-mono text-zinc-400 uppercase">{status?.device_label || 'No device connected'}</p>
-                          </div>
-                        </div>
-                        <div className={`px-2 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${
-                          !isOffline ? 'bg-emerald-100 text-emerald-700' : status ? 'bg-red-100 text-red-700' : 'bg-zinc-100 text-zinc-500'
-                        }`}>
-                          {!status ? 'Not Active' : !isOffline ? 'Online' : 'Offline'}
-                        </div>
-                      </div>
-
-                      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-zinc-50">
                         <div>
-                          <div className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-1">Outbox</div>
-                          <div className={`text-xl font-black ${status?.pending_queue_count > 50 ? 'text-red-600' : status?.pending_queue_count > 10 ? 'text-amber-600' : 'text-zinc-900'}`}>
-                            {status?.pending_queue_count ?? '--'}
-                          </div>
+                          <div className="font-bold text-sm text-zinc-900">{station.name}</div>
+                          <div className="text-xs text-zinc-400">{station.drill_type}</div>
                         </div>
-                        <div>
-                          <div className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-1">Last Sync</div>
-                          <div className={`text-xs font-bold ${isSyncStale ? 'text-red-600' : 'text-zinc-600'}`}>
-                            {lastSync ? lastSync.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '--'}
-                          </div>
+                        <div className={`flex items-center gap-1 text-xs font-bold px-2 py-1 rounded-full ${isOnline ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-600'}`}>
+                          {isOnline ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
+                          {isOnline ? 'Online' : 'Offline'}
                         </div>
                       </div>
-
-                      <div className="space-y-2">
-                        {status?.pending_queue_count > 50 && (
-                          <div className="p-2 bg-red-50 border border-red-100 rounded-xl flex items-center gap-2 text-red-700 text-[10px] font-bold uppercase">
-                            <AlertTriangle className="w-3 h-3" />
-                            Critical: Large pending queue
-                          </div>
-                        )}
-                        {isSyncStale && (
-                          <div className="p-2 bg-amber-50 border border-amber-100 rounded-xl flex items-center gap-2 text-amber-700 text-[10px] font-bold uppercase">
-                            <AlertTriangle className="w-3 h-3" />
-                            Warning: Stale sync ({syncDiffMinutes}m ago)
-                          </div>
-                        )}
-                        {isStale && status && !status.is_online && (
-                          <div className="p-2 bg-zinc-100 border border-zinc-200 rounded-xl flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase">
-                            <Activity className="w-3 h-3" />
-                            Device heartbeat lost
-                          </div>
-                        )}
-                        {!status && (
-                          <div className="p-2 bg-zinc-50 border border-zinc-100 rounded-xl flex items-center gap-2 text-zinc-400 text-[10px] font-bold uppercase">
-                            <Clock className="w-3 h-3" />
-                            Waiting for first heartbeat
-                          </div>
+                      <div className="flex items-center justify-between text-xs text-zinc-400">
+                        {lastSeen && <span>Last seen {lastSeen}</span>}
+                        {pendingCount > 0 && (
+                          <span className="flex items-center gap-1 text-amber-600 font-semibold">
+                            <AlertTriangle className="w-3 h-3" /> {pendingCount} pending
+                          </span>
                         )}
                       </div>
                     </div>
@@ -321,23 +369,35 @@ export default function AdminDashboard() {
   );
 }
 
-function StatCard({ icon, label, value, color }: { icon: React.ReactNode, label: string, value: number, color: string }) {
-  const colors: Record<string, string> = {
-    blue: 'bg-blue-50 text-blue-600',
-    purple: 'bg-purple-50 text-purple-600',
-    emerald: 'bg-emerald-50 text-emerald-600',
-    amber: 'bg-amber-50 text-amber-600'
-  };
+interface StatCardProps {
+  icon: React.ReactNode;
+  label: string;
+  value: number;
+  color: 'blue' | 'purple' | 'emerald' | 'amber';
+  loading?: boolean;
+}
 
+const COLOR_MAP: Record<StatCardProps['color'], string> = {
+  blue: 'bg-blue-50 text-blue-600',
+  purple: 'bg-purple-50 text-purple-600',
+  emerald: 'bg-emerald-50 text-emerald-600',
+  amber: 'bg-amber-50 text-amber-600',
+};
+
+function StatCard({ icon, label, value, color, loading }: StatCardProps) {
   return (
-    <div className="bg-white p-6 rounded-3xl border border-zinc-200 shadow-sm space-y-4">
-      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${colors[color]}`}>
-        {React.cloneElement(icon as any, { className: 'w-5 h-5' })}
+    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-3xl border border-zinc-200 shadow-sm p-6 space-y-3">
+      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${COLOR_MAP[color]}`}>
+        {React.cloneElement(icon as React.ReactElement, { className: 'w-5 h-5' })}
       </div>
       <div>
-        <div className="text-3xl font-black tracking-tight">{value}</div>
-        <div className="text-xs font-bold uppercase tracking-wider text-zinc-400">{label}</div>
+        {loading ? (
+          <div className="h-8 w-16 bg-zinc-100 rounded animate-pulse" />
+        ) : (
+          <div className="text-3xl font-black text-zinc-900">{value.toLocaleString()}</div>
+        )}
+        <div className="text-sm text-zinc-500 font-medium mt-1">{label}</div>
       </div>
-    </div>
+    </motion.div>
   );
-}
+               }
diff --git a/src/pages/AdminLogin.tsx b/src/pages/AdminLogin.tsx
index 2c2e56b..b3e16db 100644
--- a/src/pages/AdminLogin.tsx
+++ b/src/pages/AdminLogin.tsx
@@ -76,7 +76,7 @@ export default function AdminLogin() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:ring-2 focus:ring-zinc-900"
-              placeholder="admin@coreelite.com"
+              placeholder="your@email.com"
               required
             />
           </div>
@@ -105,4 +105,4 @@ export default function AdminLogin() {
       </div>
     </div>
   );
-}
+                                           }
diff --git a/src/pages/ClaimBand.tsx b/src/pages/ClaimBand.tsx
index e3b6f80..a9f98c0 100644
--- a/src/pages/ClaimBand.tsx
+++ b/src/pages/ClaimBand.tsx
@@ -5,39 +5,110 @@ import { QRScanner } from '../components/QRScanner';
 import { motion } from 'motion/react';
 import { QrCode, CheckCircle2, AlertCircle, User, ArrowLeft } from 'lucide-react';
 
+// ---------------------------------------------------------------------------
+// Public-safe error constants.
+// Technical error details (DB messages, constraint names, table names) are
+// intentionally never rendered in the UI. They are logged to the console in
+// development mode only.
+// ---------------------------------------------------------------------------
+const PUBLIC_ERROR_BODY =
+  'Please try again in a moment. If the problem continues, ask event staff for help.';
+
+function logDevError(context: string, err: unknown) {
+  if (import.meta.env.DEV) {
+    console.error(`[ClaimBand] ${context}`, err);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// RPC error code -> public-safe UI message
+// Maps the structured codes returned by claim_band_atomic() to friendly text.
+// Internal codes are never rendered directly.
+// ---------------------------------------------------------------------------
+const RPC_ERROR_MESSAGES: Record<string, string> = {
+  invalid_token:      'This claim link is invalid. Please return to registration and try again.',
+  expired_token:      'This claim link has expired. Please return to registration to receive a new one.',
+  token_already_used: 'This registration link has already been used. If you need help, ask event staff.',
+  band_not_found:     'That wristband number was not found for this event.',
+  band_unavailable:   'This wristband is already assigned. Please scan a different one.',
+  athlete_not_found:  "We couldn't locate your athlete record. Please ask event staff for help.",
+  claim_failed:       "We're having trouble right now.",
+};
+
+// Token-level errors that should show the "invalid link" full-screen state
+// rather than an inline banner (because there is no valid athlete loaded yet).
+const LINK_LEVEL_CODES = new Set([
+  'invalid_token',
+  'expired_token',
+  'token_already_used',
+]);
+
+// ---------------------------------------------------------------------------
+// Link error full-screen UI map
+// ---------------------------------------------------------------------------
+const LINK_ERROR_UI: Record<string, { title: string; body: string }> = {
+  invalid_token: {
+    title: 'Invalid or missing link',
+    body: 'This claim link is invalid. Please return to registration and try again.',
+  },
+  expired_token: {
+    title: 'Link has expired',
+    body: 'This claim link has expired. Please return to registration to receive a new one.',
+  },
+  token_already_used: {
+    title: 'Wristband already claimed',
+    body: 'This registration link has already been used. If you need help, please ask event staff.',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
 export default function ClaimBand() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const token = searchParams.get('athleteToken');
 
   const [athlete, setAthlete] = useState<any>(null);
+  // linkError holds a code from LINK_ERROR_UI -- shown before athlete is loaded
+  const [linkError, setLinkError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  // claimError is an inline public-safe string shown after a failed claim attempt
+  const [claimError, setClaimError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
-  const [assignedBand, setAssignedBand] = useState<any>(null);
+  const [assignedBand, setAssignedBand] = useState<{ display_number: number; band_id: string } | null>(null);
   const [manualEntry, setManualEntry] = useState(false);
   const [bandNumber, setBandNumber] = useState('');
 
+  // -------------------------------------------------------------------------
+  // On mount: validate the token and load the athlete.
+  // This is still a client-side read -- we only need to confirm the token is
+  // valid and load the athlete's name for display. The actual mutation is
+  // handled by the RPC.
+  // -------------------------------------------------------------------------
   useEffect(() => {
     if (!token) {
-      setError('Invalid or missing claim token.');
+      setLinkError('invalid_token');
       setLoading(false);
       return;
     }
 
     async function fetchClaim() {
-      const { data: claim, error: claimError } = await supabase
+      const { data: claim, error: claimErr } = await supabase
         .from('token_claims')
         .select('*, athletes(*)')
         .eq('token_hash', token)
         .single();
 
-      if (claimError || !claim) {
-        setError('Claim session not found.');
+      if (claimErr) {
+        logDevError('fetchClaim token lookup', claimErr);
+        setLinkError('invalid_token');
+      } else if (!claim) {
+        setLinkError('invalid_token');
       } else if (claim.used_at) {
-        setError('This wristband has already been claimed.');
+        setLinkError('token_already_used');
       } else if (new Date(claim.expires_at) < new Date()) {
-        setError('Claim session has expired.');
+        setLinkError('expired_token');
       } else {
         setAthlete(claim.athletes);
       }
@@ -46,89 +117,109 @@ export default function ClaimBand() {
     fetchClaim();
   }, [token]);
 
+  // -------------------------------------------------------------------------
+  // handleClaim -- the single entry point for all claim attempts.
+  // Calls claim_band_atomic() which executes all DB mutations in one
+  // server-side transaction. If any step fails, the DB rolls back automatically.
+  // -------------------------------------------------------------------------
   const handleClaim = async (bandId: string) => {
     if (success || loading) return;
     setLoading(true);
-    setError(null);
+    setClaimError(null);
 
     try {
-      // Atomic Claim Logic
-      // 1. Check if band is available
-      const { data: band, error: bandError } = await supabase
-        .from('bands')
-        .select('*')
-        .eq('band_id', bandId)
-        .single();
+      const { data: result, error: rpcError } = await supabase.rpc('claim_band_atomic', {
+        p_token: token,
+        p_band_id: bandId,
+      });
 
-      if (bandError || !band) throw new Error('Invalid wristband ID.');
-      if (band.status !== 'available') throw new Error('This wristband is already assigned or void.');
-
-      // 2. Update Band
-      const { error: updateBandError } = await supabase
-        .from('bands')
-        .update({
-          status: 'assigned',
-          athlete_id: athlete.id,
-          assigned_at: new Date().toISOString(),
-        })
-        .eq('band_id', bandId);
-
-      if (updateBandError) throw updateBandError;
-
-      // 3. Update Athlete
-      const { error: updateAthleteError } = await supabase
-        .from('athletes')
-        .update({ band_id: bandId })
-        .eq('id', athlete.id);
+      if (rpcError) {
+        // Network-level or Postgres-level error (not an application error)
+        logDevError('handleClaim rpc call', rpcError);
+        setClaimError(RPC_ERROR_MESSAGES['claim_failed']);
+        return;
+      }
 
-      if (updateAthleteError) throw updateAthleteError;
+      // result is the jsonb payload returned by the function
+      if (!result?.success) {
+        const code: string = result?.code ?? 'claim_failed';
+        logDevError('handleClaim rpc returned failure', result);
 
-      // 4. Mark Token Used
-      await supabase
-        .from('token_claims')
-        .update({ used_at: new Date().toISOString() })
-        .eq('token_hash', token);
+        if (LINK_LEVEL_CODES.has(code)) {
+          // Token became invalid between page load and claim attempt
+          // (e.g., another tab used it). Show the full-screen link error.
+          setLinkError(code);
+          setAthlete(null);
+        } else {
+          setClaimError(RPC_ERROR_MESSAGES[code] ?? RPC_ERROR_MESSAGES['claim_failed']);
+        }
+        return;
+      }
 
-      setAssignedBand(band);
+      // Success
+      setAssignedBand({
+        band_id: result.band_id,
+        display_number: result.display_number,
+      });
       setSuccess(true);
-    } catch (err: any) {
-      setError(err.message);
     } finally {
       setLoading(false);
     }
   };
 
+  // -------------------------------------------------------------------------
+  // handleManualSubmit -- resolves a display_number to a band_id, then
+  // delegates to handleClaim. The band lookup is a read-only SELECT; the
+  // mutation still goes through the RPC.
+  // -------------------------------------------------------------------------
   const handleManualSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!bandNumber) return;
+    if (!bandNumber || !athlete) return;
 
     setLoading(true);
-    setError(null);
+    setClaimError(null);
 
     try {
-      // Lookup by display_number
       const { data: band, error: bandError } = await supabase
         .from('bands')
-        .select('*')
+        .select('band_id, display_number, status')
         .eq('event_id', athlete.event_id)
         .eq('display_number', parseInt(bandNumber))
         .single();
 
-      if (bandError || !band) throw new Error('Wristband number not found for this event.');
-      
+      if (bandError || !band) {
+        logDevError('handleManualSubmit band lookup', bandError);
+        setClaimError(RPC_ERROR_MESSAGES['band_not_found']);
+        return;
+      }
+
+      // Delegate to handleClaim -- it will call the RPC
       await handleClaim(band.band_id);
-    } catch (err: any) {
-      setError(err.message);
+    } catch (err: unknown) {
+      logDevError('handleManualSubmit unexpected', err);
+      setClaimError(RPC_ERROR_MESSAGES['claim_failed']);
+    } finally {
       setLoading(false);
     }
   };
 
-  if (loading && !athlete && !error) return <div className="p-8 text-center">Verifying session...</div>;
+  // -------------------------------------------------------------------------
+  // Loading state -- shown while token is being validated on mount
+  // -------------------------------------------------------------------------
+  if (loading && !athlete && !linkError) {
+    return <div className="p-8 text-center text-zinc-500">Verifying session...</div>;
+  }
 
-  if (error && !athlete) {
+  // -------------------------------------------------------------------------
+  // Invalid / expired / already-claimed link screen.
+  // Shown when the token is bad before any athlete is loaded.
+  // No DB errors, table names, or stack traces are ever rendered here.
+  // -------------------------------------------------------------------------
+  if (linkError && !athlete) {
+    const { title, body } = LINK_ERROR_UI[linkError] ?? LINK_ERROR_UI['invalid_token'];
     return (
       <div className="max-w-md mx-auto px-4 py-16">
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           className="bg-white p-8 rounded-3xl border border-zinc-200 shadow-xl text-center space-y-6"
@@ -137,20 +228,18 @@ export default function ClaimBand() {
             <AlertCircle className="w-10 h-10" />
           </div>
           <div>
-            <h2 className="text-2xl font-bold mb-2">Invalid or missing link</h2>
-            <p className="text-zinc-500 text-sm">
-              This claim link is invalid or expired. Please return to registration and try again.
-            </p>
+            <h2 className="text-2xl font-bold mb-2">{title}</h2>
+            <p className="text-zinc-500 text-sm">{body}</p>
           </div>
-          
+
           <div className="space-y-3 pt-4">
-            <button 
-              onClick={() => navigate('/register?event=coreelite2026')}
+            <button
+              onClick={() => navigate('/register')}
               className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold hover:bg-zinc-800 transition-all"
             >
               Return to Registration
             </button>
-            <button 
+            <button
               onClick={() => navigate('/')}
               className="w-full py-4 bg-white border border-zinc-200 text-zinc-600 rounded-2xl font-bold hover:bg-zinc-50 transition-all"
             >
@@ -162,11 +251,14 @@ export default function ClaimBand() {
     );
   }
 
+  // -------------------------------------------------------------------------
+  // Main claim flow
+  // -------------------------------------------------------------------------
   return (
     <div className="max-w-md mx-auto px-4 py-8">
       <div className="mb-6">
-        <Link 
-          to="/" 
+        <Link
+          to="/"
           className="flex items-center gap-2 text-zinc-500 hover:text-zinc-900 transition-colors text-sm font-bold"
         >
           <ArrowLeft className="w-4 h-4" />
@@ -181,19 +273,28 @@ export default function ClaimBand() {
         {athlete && (
           <div className="flex items-center justify-center gap-2 text-zinc-500">
             <User className="w-4 h-4" />
-            <span>Athlete: <strong>{athlete.first_name} {athlete.last_name}</strong></span>
+            <span>
+              Athlete: <strong>{athlete.first_name} {athlete.last_name}</strong>
+            </span>
           </div>
         )}
       </header>
 
-      {error && (
-        <motion.div 
+      {/* -----------------------------------------------------------------------
+          Inline error banner -- shown after a failed claim attempt while the
+          athlete is already loaded. Only public-safe messages are rendered.
+      ----------------------------------------------------------------------- */}
+      {claimError && (
+        <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           className="mb-6 p-4 bg-red-50 border border-red-200 rounded-2xl flex items-start gap-3 text-red-700 text-sm"
         >
-          <AlertCircle className="w-5 h-5 shrink-0" />
-          <p>{error}</p>
+          <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
+          <div>
+            <p className="font-semibold">{claimError}</p>
+            <p className="mt-1 text-red-600">{PUBLIC_ERROR_BODY}</p>
+          </div>
         </motion.div>
       )}
 
@@ -206,14 +307,16 @@ export default function ClaimBand() {
               </div>
               <div>
                 <h3 className="font-bold">Scan Wristband QR</h3>
-                <p className="text-zinc-400 text-xs">Point your camera at the QR code on the athlete's wristband.</p>
+                <p className="text-zinc-400 text-xs">
+                  Point your camera at the QR code on the athlete's wristband.
+                </p>
               </div>
             </div>
             <QRScanner onScan={handleClaim} />
           </div>
-          
+
           <div className="space-y-4">
-            <button 
+            <button
               onClick={() => setManualEntry(!manualEntry)}
               className="w-full py-3 text-zinc-500 text-sm font-bold hover:text-zinc-900 transition-colors"
             >
@@ -221,16 +324,20 @@ export default function ClaimBand() {
             </button>
 
             {manualEntry && (
-              <motion.form 
+              <motion.form
                 initial={{ opacity: 0, height: 0 }}
                 animate={{ opacity: 1, height: 'auto' }}
                 onSubmit={handleManualSubmit}
                 className="bg-white p-6 rounded-3xl border border-zinc-200 shadow-sm space-y-4"
               >
                 <div className="space-y-1">
-                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Wristband Number (1-500)</label>
-                  <input 
+                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                    Wristband Number (1-500)
+                  </label>
+                  <input
                     type="number"
+                    min="1"
+                    max="500"
                     value={bandNumber}
                     onChange={(e) => setBandNumber(e.target.value)}
                     className="w-full p-4 text-2xl font-black bg-zinc-50 border border-zinc-100 rounded-2xl text-center outline-none focus:border-zinc-900"
@@ -238,7 +345,7 @@ export default function ClaimBand() {
                     autoFocus
                   />
                 </div>
-                <button 
+                <button
                   type="submit"
                   disabled={!bandNumber || loading}
                   className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold shadow-lg disabled:opacity-50"
@@ -250,11 +357,12 @@ export default function ClaimBand() {
           </div>
 
           <div className="text-center text-zinc-400 text-xs px-8">
-            Please ensure the wristband is securely fastened before scanning. This links the athlete's identity to their testing number.
+            Please ensure the wristband is securely fastened before scanning. This links the
+            athlete's identity to their testing number.
           </div>
         </div>
       ) : (
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           className="bg-white p-8 rounded-3xl border border-zinc-200 shadow-xl text-center space-y-6"
@@ -264,22 +372,26 @@ export default function ClaimBand() {
           </div>
           <div>
             <h2 className="text-2xl font-bold mb-1">Wristband Assigned!</h2>
-            <p className="text-zinc-500">Athlete #{assignedBand.display_number} is ready for testing.</p>
+            <p className="text-zinc-500">Athlete #{assignedBand?.display_number} is ready for testing.</p>
           </div>
-          
+
           <div className="p-6 bg-zinc-50 rounded-2xl border border-zinc-100">
-            <div className="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-1">Athlete Number</div>
-            <div className="text-6xl font-black text-zinc-900">{assignedBand.display_number}</div>
+            <div className="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-1">
+              Athlete Number
+            </div>
+            <div className="text-6xl font-black text-zinc-900">
+              {String(assignedBand?.display_number ?? '').padStart(3, '0')}
+            </div>
           </div>
 
-          <button 
+          <button
             onClick={() => navigate('/')}
             className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold hover:bg-zinc-800 transition-all"
           >
-            Return Home
+            Done -- Return Home
           </button>
         </motion.div>
       )}
     </div>
   );
-}
+        }
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 28fdb06..6e6b5b0 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -7,6 +7,21 @@ import { ChevronRight, CheckCircle2, AlertCircle, ArrowLeft } from 'lucide-react
 import { v4 as uuidv4 } from 'uuid';
 import { Link } from 'react-router-dom';
 
+// ---------------------------------------------------------------------------
+// Public-safe error message shown to unauthenticated users.
+// Technical details are intentionally omitted from the UI and sent to the
+// console only in development mode.
+// ---------------------------------------------------------------------------
+const PUBLIC_ERROR_MESSAGE = "We're having trouble right now.";
+const PUBLIC_ERROR_BODY =
+  'Please try again in a moment. If the problem continues, ask event staff for help.';
+
+function logDevError(context: string, err: unknown) {
+  if (import.meta.env.DEV) {
+    console.error(`[Register] ${context}`, err);
+  }
+}
+
 export default function Register() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -14,7 +29,8 @@ export default function Register() {
   const [event, setEvent] = useState<any>(null);
   const [availableEvents, setAvailableEvents] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<{ message: string; details?: string } | null>(null);
+  // `message` is always public-safe. `details` is NEVER rendered in the UI.
+  const [error, setError] = useState<{ message: string } | null>(null);
 
   const [formData, setFormData] = useState({
     firstName: '',
@@ -41,10 +57,10 @@ export default function Register() {
     async function resolveEvent() {
       setLoading(true);
       setError(null);
-      
+
       try {
         const paramSlug = searchParams.get('event') || searchParams.get('slug');
-        
+
         // 1. Try to fetch by slug if provided
         if (paramSlug) {
           const { data: slugEvent, error: slugError } = await supabase
@@ -52,15 +68,10 @@ export default function Register() {
             .select('*')
             .eq('slug', paramSlug)
             .maybeSingle();
-          
+
           if (slugError) {
-            const isTableMissing = slugError.message.includes('Could not find the table') || slugError.code === '42P01';
-            setError({ 
-              message: isTableMissing ? 'Database not initialized.' : 'Database error while looking up event.', 
-              details: isTableMissing
-                ? 'The "events" table is missing from the database. Please run the schema migrations in Supabase.'
-                : `RLS or Connection Error: ${slugError.message}` 
-            });
+            logDevError('resolveEvent › slug lookup', slugError);
+            setError({ message: PUBLIC_ERROR_MESSAGE });
             setLoading(false);
             return;
           }
@@ -81,13 +92,8 @@ export default function Register() {
           .limit(1);
 
         if (liveError) {
-          const isTableMissing = liveError.message.includes('Could not find the table') || liveError.code === '42P01';
-          setError({ 
-            message: isTableMissing ? 'Database not initialized.' : 'Error fetching active events.', 
-            details: isTableMissing
-              ? 'The "events" table is missing from the database. Please run the schema migrations in Supabase.'
-              : `RLS or Connection Error: ${liveError.message}` 
-          });
+          logDevError('resolveEvent › live event lookup', liveError);
+          setError({ message: PUBLIC_ERROR_MESSAGE });
           setLoading(false);
           return;
         }
@@ -106,23 +112,19 @@ export default function Register() {
           .order('created_at', { ascending: true });
 
         if (allError) {
-          const isTableMissing = allError.message.includes('Could not find the table') || allError.code === '42P01';
-          setError({ 
-            message: isTableMissing ? 'Database not initialized.' : 'Error fetching event list.', 
-            details: isTableMissing 
-              ? 'The "events" table is missing from the database. Please run the schema migrations in Supabase.'
-              : `RLS or Connection Error: ${allError.message}` 
-          });
+          logDevError('resolveEvent › all events lookup', allError);
+          setError({ message: PUBLIC_ERROR_MESSAGE });
         } else if (allEvents && allEvents.length > 0) {
           setAvailableEvents(allEvents);
         } else {
-          setError({ 
-            message: 'No events are currently scheduled.', 
-            details: 'The events table is empty or no events are in "live" or "draft" status.' 
+          // No events scheduled — friendly, non-technical message
+          setError({
+            message: 'Registration is not open yet. Please check back closer to the event date.',
           });
         }
-      } catch (err: any) {
-        setError({ message: 'An unexpected error occurred.', details: err.message });
+      } catch (err: unknown) {
+        logDevError('resolveEvent › unexpected', err);
+        setError({ message: PUBLIC_ERROR_MESSAGE });
       } finally {
         setLoading(false);
       }
@@ -181,7 +183,7 @@ export default function Register() {
           media_release: formData.mediaRelease,
           data_consent: formData.dataConsent,
           marketing_consent: formData.marketingConsent,
-          waiver_version: '2026.1'
+          waiver_version: '2026.1',
         });
 
       if (waiverError) throw waiverError;
@@ -203,19 +205,22 @@ export default function Register() {
       if (tokenError) throw tokenError;
 
       // 4. Create Parent Portal Token
-      const portalToken = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-      await supabase
-        .from('parent_portals')
-        .insert({
-          athlete_id: athlete.id,
-          event_id: event.id,
-          portal_token: portalToken
-        });
+      const portalToken =
+        Math.random().toString(36).substring(2, 15) +
+        Math.random().toString(36).substring(2, 15);
+      await supabase.from('parent_portals').insert({
+        athlete_id: athlete.id,
+        event_id: event.id,
+        portal_token: portalToken,
+      });
 
       // Success!
       navigate(`/claim-band?athleteToken=${token}`);
-    } catch (err: any) {
-      setError({ message: 'Registration failed.', details: err.message });
+    } catch (err: unknown) {
+      logDevError('handleSubmit', err);
+      setError({
+        message: 'Registration could not be completed. Please try again or ask event staff for help.',
+      });
       setLoading(false);
     }
   };
@@ -236,12 +241,14 @@ export default function Register() {
     return (
       <div className="max-w-2xl mx-auto px-4 py-16">
         <header className="text-center mb-12">
-          <h1 className="text-4xl font-black uppercase italic tracking-tighter mb-4">Choose Your Event</h1>
+          <h1 className="text-4xl font-black uppercase italic tracking-tighter mb-4">
+            Choose Your Event
+          </h1>
           <p className="text-zinc-500">Select an upcoming combine to begin your registration.</p>
         </header>
 
         <div className="grid gap-4">
-          {availableEvents.map(ev => (
+          {availableEvents.map((ev) => (
             <button
               key={ev.id}
               onClick={() => navigate(`/register?event=${ev.slug}`)}
@@ -249,15 +256,17 @@ export default function Register() {
             >
               <div className="flex justify-between items-start mb-2">
                 <h3 className="text-xl font-bold group-hover:text-zinc-900">{ev.name}</h3>
-                <span className={`px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
-                  ev.status === 'live' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'
-                }`}>
+                <span
+                  className={`px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
+                    ev.status === 'live'
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : 'bg-amber-100 text-amber-700'
+                  }`}
+                >
                   {ev.status}
                 </span>
               </div>
-              <div className="flex gap-4 text-sm text-zinc-400">
-                <span>{new Date(ev.created_at).toLocaleDateString()}</span>
-                <span>•</span>
+              <div className="flex gap-4 text-zinc-500 text-sm">
                 <span>{ev.location}</span>
               </div>
             </button>
@@ -267,317 +276,444 @@ export default function Register() {
     );
   }
 
+  // -------------------------------------------------------------------------
+  // Public-safe error screen.
+  // Shows a friendly message only — no DB errors, table names, or migration
+  // instructions are ever rendered here.
+  // -------------------------------------------------------------------------
   if (error && !event) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-zinc-50 px-4">
-        <div className="max-w-md w-full bg-white p-8 rounded-3xl border border-zinc-200 shadow-xl text-center space-y-6">
+      <div className="min-h-screen flex items-center justify-center bg-zinc-50 p-4">
+        <div className="bg-white p-8 rounded-3xl border border-zinc-200 shadow-xl text-center max-w-sm space-y-6">
           <div className="w-16 h-16 bg-red-50 text-red-600 rounded-full flex items-center justify-center mx-auto">
             <AlertCircle className="w-8 h-8" />
           </div>
           <div>
-            <h2 className="text-2xl font-bold text-zinc-900 mb-2">{error.message}</h2>
-            <p className="text-zinc-500 text-sm">{error.details}</p>
+            <h2 className="text-xl font-bold mb-2">{error.message}</h2>
+            <p className="text-zinc-500 text-sm">{PUBLIC_ERROR_BODY}</p>
           </div>
-          <div className="pt-4 space-y-3">
-            <button 
+          <div className="space-y-3 pt-2">
+            <button
               onClick={() => window.location.reload()}
-              className="w-full py-3 bg-zinc-900 text-white rounded-xl font-bold hover:bg-zinc-800 transition-all"
+              className="w-full py-3 bg-zinc-900 text-white rounded-2xl font-bold hover:bg-zinc-800 transition-all"
             >
               Try Again
             </button>
-            <button 
+            <button
               onClick={() => navigate('/')}
-              className="w-full py-3 bg-white border border-zinc-200 text-zinc-600 rounded-xl font-bold hover:bg-zinc-50 transition-all"
+              className="w-full py-3 bg-white border border-zinc-200 text-zinc-600 rounded-2xl font-bold hover:bg-zinc-50 transition-all"
             >
               Return Home
             </button>
           </div>
-          {import.meta.env.DEV && (
-            <div className="mt-8 p-4 bg-zinc-50 rounded-xl text-left">
-              <p className="text-[10px] font-bold uppercase text-zinc-400 mb-2">Admin Troubleshooting</p>
-              <ul className="text-[10px] text-zinc-500 list-disc pl-4 space-y-1">
-                <li>Check if an event exists in the <code>events</code> table.</li>
-                <li>Ensure the event <code>status</code> is set to 'live' or 'draft'.</li>
-                <li>Verify RLS policies allow public SELECT on <code>events</code>.</li>
-                <li>Visit <button onClick={() => navigate('/admin/diagnostics')} className="underline">Diagnostics</button></li>
-              </ul>
-            </div>
-          )}
         </div>
       </div>
     );
   }
 
+  // -------------------------------------------------------------------------
+  // Inline submission error banner (shown mid-form after a failed handleSubmit)
+  // -------------------------------------------------------------------------
+  const InlineErrorBanner = () =>
+    error ? (
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mb-6 p-4 bg-red-50 border border-red-200 rounded-2xl flex items-start gap-3 text-red-700 text-sm"
+      >
+        <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
+        <div>
+          <p className="font-semibold">{error.message}</p>
+          <p className="mt-1 text-red-600">{PUBLIC_ERROR_BODY}</p>
+        </div>
+      </motion.div>
+    ) : null;
+
+  // -------------------------------------------------------------------------
+  // Main multi-step registration form (unchanged structure)
+  // -------------------------------------------------------------------------
   return (
     <div className="max-w-2xl mx-auto px-4 py-8">
-      <div className="mb-8 flex items-center justify-between">
-        <Link 
-          to="/" 
+      <div className="mb-6">
+        <Link
+          to="/"
           className="flex items-center gap-2 text-zinc-500 hover:text-zinc-900 transition-colors text-sm font-bold"
         >
           <ArrowLeft className="w-4 h-4" />
           Back to Home
         </Link>
-        <div className="flex items-center gap-2 text-sm text-zinc-400">
-          <span className={step >= 1 ? "text-zinc-900 font-bold" : ""}>1. Profile</span>
-          <ChevronRight className="w-4 h-4" />
-          <span className={step >= 2 ? "text-zinc-900 font-bold" : ""}>2. Waiver</span>
-          <ChevronRight className="w-4 h-4" />
-          <span className={step >= 3 ? "text-zinc-900 font-bold" : ""}>3. Claim Band</span>
-        </div>
       </div>
 
-      <div className="mb-8">
-        <h1 className="text-3xl font-black uppercase italic italic tracking-tighter">
-          Athlete Registration
-        </h1>
-        <p className="text-zinc-500">{event?.name} • {event?.location}</p>
+      {event && (
+        <header className="mb-8">
+          <div className="flex items-center gap-2 mb-1">
+            <span
+              className={`px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
+                event.status === 'live'
+                  ? 'bg-emerald-100 text-emerald-700'
+                  : 'bg-amber-100 text-amber-700'
+              }`}
+            >
+              {event.status}
+            </span>
+          </div>
+          <h1 className="text-3xl font-black uppercase italic tracking-tighter">
+            {event.name}
+          </h1>
+          <p className="text-zinc-500 text-sm mt-1">{event.location}</p>
+        </header>
+      )}
+
+      {/* Step progress indicator */}
+      <div className="flex items-center gap-2 mb-8">
+        {[1, 2, 3].map((s) => (
+          <React.Fragment key={s}>
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all ${
+                step >= s
+                  ? 'bg-zinc-900 text-white'
+                  : 'bg-zinc-100 text-zinc-400'
+              }`}
+            >
+              {step > s ? <CheckCircle2 className="w-4 h-4" /> : s}
+            </div>
+            {s < 3 && (
+              <div
+                className={`flex-1 h-0.5 transition-all ${
+                  step > s ? 'bg-zinc-900' : 'bg-zinc-200'
+                }`}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </div>
 
+      <InlineErrorBanner />
+
       <AnimatePresence mode="wait">
+        {/* Step 1 — Athlete Info */}
         {step === 1 && (
-          <motion.div 
+          <motion.div
             key="step1"
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
             className="space-y-6"
           >
+            <h2 className="text-2xl font-bold">Athlete Information</h2>
+
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1">
-                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">First Name</label>
-                <input 
-                  name="firstName" 
-                  value={formData.firstName} 
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  First Name *
+                </label>
+                <input
+                  name="firstName"
+                  value={formData.firstName}
                   onChange={handleInputChange}
-                  className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none" 
-                  placeholder="John"
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="First"
+                  required
                 />
               </div>
               <div className="space-y-1">
-                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Last Name</label>
-                <input 
-                  name="lastName" 
-                  value={formData.lastName} 
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Last Name *
+                </label>
+                <input
+                  name="lastName"
+                  value={formData.lastName}
                   onChange={handleInputChange}
-                  className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none" 
-                  placeholder="Doe"
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="Last"
+                  required
                 />
               </div>
             </div>
 
+            <div className="space-y-1">
+              <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                Date of Birth *
+              </label>
+              <input
+                type="date"
+                name="date_of_birth"
+                value={formData.date_of_birth}
+                onChange={handleInputChange}
+                className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                required
+              />
+              {dateOfBirthError && (
+                <p className="text-red-600 text-xs mt-1">{dateOfBirthError}</p>
+              )}
+            </div>
+
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1">
-                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Date of Birth</label>
-                <input 
-                  type="date"
-                  name="date_of_birth" 
-                  value={formData.date_of_birth} 
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Grade
+                </label>
+                <select
+                  name="grade"
+                  value={formData.grade}
                   onChange={handleInputChange}
-                  className={`w-full p-3 bg-white border ${dateOfBirthError ? 'border-red-500 ring-1 ring-red-500' : 'border-zinc-200'} rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none`} 
-                />
-                {dateOfBirthError && <p className="text-[10px] font-bold text-red-500 mt-1">{dateOfBirthError}</p>}
-              </div>
-              <div className="space-y-1">
-                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Position</label>
-                <select 
-                  name="position" 
-                  value={formData.position} 
-                  onChange={handleInputChange}
-                  className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none"
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
                 >
-                  <option value="">Select Position</option>
-                  <option value="QB">Quarterback</option>
-                  <option value="RB">Running Back</option>
-                  <option value="WR">Wide Receiver</option>
-                  <option value="TE">Tight End</option>
-                  <option value="OL">Offensive Line</option>
-                  <option value="DL">Defensive Line</option>
-                  <option value="LB">Linebacker</option>
-                  <option value="DB">Defensive Back</option>
+                  <option value="">Select grade</option>
+                  {['6th', '7th', '8th', '9th', '10th', '11th', '12th'].map((g) => (
+                    <option key={g} value={g}>
+                      {g}
+                    </option>
+                  ))}
                 </select>
               </div>
-            </div>
-
-            <div className="space-y-4 pt-4 border-t border-zinc-100">
-              <h3 className="font-bold">Parent/Guardian Information</h3>
               <div className="space-y-1">
-                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Full Name</label>
-                <input 
-                  name="parentName" 
-                  value={formData.parentName} 
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Position
+                </label>
+                <select
+                  name="position"
+                  value={formData.position}
                   onChange={handleInputChange}
-                  className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none" 
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-1">
-                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Email</label>
-                  <input 
-                    type="email"
-                    name="parentEmail" 
-                    value={formData.parentEmail} 
-                    onChange={handleInputChange}
-                    className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none" 
-                  />
-                </div>
-                <div className="space-y-1">
-                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Phone</label>
-                  <input 
-                    type="tel"
-                    name="parentPhone" 
-                    value={formData.parentPhone} 
-                    onChange={handleInputChange}
-                    className="w-full p-3 bg-white border border-zinc-200 rounded-xl focus:ring-2 focus:ring-zinc-900 outline-none" 
-                  />
-                </div>
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                >
+                  <option value="">Select position</option>
+                  {['QB', 'RB', 'WR', 'TE', 'OL', 'DL', 'LB', 'DB', 'K/P', 'ATH'].map((p) => (
+                    <option key={p} value={p}>
+                      {p}
+                    </option>
+                  ))}
+                </select>
               </div>
             </div>
 
-            <button 
+            <button
               onClick={() => {
-                if (!formData.firstName || !formData.lastName || !formData.date_of_birth || !formData.parentEmail) {
-                  if (!formData.date_of_birth) {
-                    setDateOfBirthError('Date of birth is required.');
-                  }
-                  setError({ message: 'Missing Required Fields', details: 'Please complete all required fields including Date of Birth.' });
+                if (!formData.firstName || !formData.lastName || !formData.date_of_birth) {
+                  setDateOfBirthError(!formData.date_of_birth ? 'Date of birth is required.' : null);
                   return;
                 }
-                setError(null);
-                setDateOfBirthError(null);
                 setStep(2);
               }}
-              className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold text-lg shadow-lg hover:bg-zinc-800 transition-all flex items-center justify-center gap-2"
+              className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all"
             >
-              Continue to Waiver
-              <ChevronRight className="w-5 h-5" />
+              Continue <ChevronRight className="w-5 h-5" />
             </button>
           </motion.div>
         )}
 
+        {/* Step 2 — Parent / Guardian Info */}
         {step === 2 && (
-          <motion.div 
+          <motion.div
             key="step2"
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
             className="space-y-6"
           >
-            <div className="bg-white p-6 rounded-2xl border border-zinc-200 space-y-4 max-h-96 overflow-y-auto text-sm text-zinc-600 leading-relaxed">
-              <h2 className="text-lg font-bold text-zinc-900">Release of Liability & Consent</h2>
-              <p>I, the undersigned parent/guardian, hereby give permission for the athlete named above to participate in the Core Elite Combine 2026. I understand that athletic testing involves inherent risks of injury.</p>
-              <p>I release Core Elite and its staff from any and all liability for injuries sustained during the event. I also consent to the use of any photos or videos taken during the event for promotional purposes.</p>
-              <p>In case of emergency, I authorize the staff to seek medical attention for the athlete if I cannot be reached immediately.</p>
-              <div className="pt-4 border-t border-zinc-100 space-y-4">
-                <div className="space-y-4">
-                  <label className="flex items-start gap-3 cursor-pointer group">
-                    <input 
-                      type="checkbox" 
-                      name="injuryWaiverAck"
-                      checked={formData.injuryWaiverAck}
-                      onChange={handleInputChange}
-                      className="mt-1 w-4 h-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
-                    />
-                    <span className="text-xs font-medium text-zinc-700 group-hover:text-zinc-900">
-                      I acknowledge the injury waiver and release of liability. <span className="text-red-500">*</span>
-                    </span>
-                  </label>
-                  <label className="flex items-start gap-3 cursor-pointer group">
-                    <input 
-                      type="checkbox" 
-                      name="mediaRelease"
-                      checked={formData.mediaRelease}
-                      onChange={handleInputChange}
-                      className="mt-1 w-4 h-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
-                    />
-                    <span className="text-xs font-medium text-zinc-700 group-hover:text-zinc-900">
-                      I consent to the media release for promotional purposes. <span className="text-red-500">*</span>
-                    </span>
-                  </label>
-                  <label className="flex items-start gap-3 cursor-pointer group">
-                    <input 
-                      type="checkbox" 
-                      name="dataConsent"
-                      checked={formData.dataConsent}
-                      onChange={handleInputChange}
-                      className="mt-1 w-4 h-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
-                    />
-                    <span className="text-xs font-medium text-zinc-700 group-hover:text-zinc-900">
-                      I consent to the collection and processing of athletic performance data. <span className="text-red-500">*</span>
-                    </span>
-                  </label>
-                  <label className="flex items-start gap-3 cursor-pointer group">
-                    <input 
-                      type="checkbox" 
-                      name="marketingConsent"
-                      checked={formData.marketingConsent}
-                      onChange={handleInputChange}
-                      className="mt-1 w-4 h-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
-                    />
-                    <span className="text-xs font-medium text-zinc-700 group-hover:text-zinc-900">
-                      I would like to receive updates and marketing materials (Optional).
-                    </span>
-                  </label>
-                </div>
-
-                <div className="space-y-1">
-                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Emergency Contact Name</label>
-                  <input 
-                    name="emergencyContactName" 
-                    value={formData.emergencyContactName} 
-                    onChange={handleInputChange}
-                    className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none" 
-                  />
-                </div>
-                <div className="space-y-1">
-                  <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Emergency Contact Phone</label>
-                  <input 
-                    name="emergencyContactPhone" 
-                    value={formData.emergencyContactPhone} 
-                    onChange={handleInputChange}
-                    className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none" 
-                  />
-                </div>
-              </div>
+            <div className="flex items-center gap-3 mb-2">
+              <button
+                onClick={() => setStep(1)}
+                className="p-2 rounded-xl hover:bg-zinc-100 transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+              <h2 className="text-2xl font-bold">Parent / Guardian</h2>
             </div>
 
-            <div className="space-y-2">
-              <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Parent/Guardian Signature</label>
-              <SignatureCanvas onSave={(url) => {
-                setSignature(url);
-                setError(null);
-              }} onClear={() => setSignature(null)} />
+            <div className="space-y-1">
+              <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                Parent / Guardian Name *
+              </label>
+              <input
+                name="parentName"
+                value={formData.parentName}
+                onChange={handleInputChange}
+                className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                placeholder="Full name"
+                required
+              />
             </div>
 
-            {error && (
-              <div className="p-4 bg-red-50 border border-red-100 rounded-2xl flex items-center gap-3 text-red-600 text-sm">
-                <AlertCircle className="w-5 h-5" />
-                <div>
-                  <div className="font-bold">{error.message}</div>
-                  {error.details && <div className="text-[10px] opacity-70">{error.details}</div>}
-                </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  name="parentEmail"
+                  value={formData.parentEmail}
+                  onChange={handleInputChange}
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="email@example.com"
+                  required
+                />
               </div>
-            )}
+              <div className="space-y-1">
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Phone *
+                </label>
+                <input
+                  type="tel"
+                  name="parentPhone"
+                  value={formData.parentPhone}
+                  onChange={handleInputChange}
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="(555) 000-0000"
+                  required
+                />
+              </div>
+            </div>
 
-            <div className="flex gap-4">
-              <button 
-                onClick={() => setStep(1)}
-                className="flex-1 py-4 border border-zinc-200 rounded-2xl font-bold text-zinc-600 hover:bg-zinc-50 transition-all"
+            <div className="space-y-1">
+              <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                Relationship to Athlete
+              </label>
+              <select
+                name="guardianRelationship"
+                value={formData.guardianRelationship}
+                onChange={handleInputChange}
+                className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
               >
-                Back
-              </button>
-              <button 
-                onClick={handleSubmit}
-                disabled={!signature || !formData.injuryWaiverAck || !formData.mediaRelease || !formData.dataConsent || loading}
-                className="flex-[2] py-4 bg-zinc-900 text-white rounded-2xl font-bold text-lg shadow-lg hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+                <option value="">Select relationship</option>
+                {['Parent', 'Guardian', 'Grandparent', 'Other'].map((r) => (
+                  <option key={r} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Emergency Contact Name
+                </label>
+                <input
+                  name="emergencyContactName"
+                  value={formData.emergencyContactName}
+                  onChange={handleInputChange}
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="Full name"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                  Emergency Contact Phone
+                </label>
+                <input
+                  type="tel"
+                  name="emergencyContactPhone"
+                  value={formData.emergencyContactPhone}
+                  onChange={handleInputChange}
+                  className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:border-zinc-900 transition-colors"
+                  placeholder="(555) 000-0000"
+                />
+              </div>
+            </div>
+
+            <button
+              onClick={() => {
+                if (!formData.parentName || !formData.parentEmail || !formData.parentPhone) return;
+                setStep(3);
+              }}
+              className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all"
+            >
+              Continue <ChevronRight className="w-5 h-5" />
+            </button>
+          </motion.div>
+        )}
+
+        {/* Step 3 — Waiver & Signature */}
+        {step === 3 && (
+          <motion.div
+            key="step3"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            className="space-y-6"
+          >
+            <div className="flex items-center gap-3 mb-2">
+              <button
+                onClick={() => setStep(2)}
+                className="p-2 rounded-xl hover:bg-zinc-100 transition-colors"
               >
-                {loading ? 'Processing...' : 'Complete Registration'}
-                {!loading && <CheckCircle2 className="w-5 h-5" />}
+                <ArrowLeft className="w-4 h-4" />
               </button>
+              <h2 className="text-2xl font-bold">Waiver & Consent</h2>
+            </div>
+
+            <div className="bg-zinc-50 p-4 rounded-2xl border border-zinc-200 text-xs text-zinc-600 space-y-2 max-h-40 overflow-y-auto">
+              <p className="font-bold">Participation Waiver — Core Elite Combine 2026</p>
+              <p>
+                By signing below, I acknowledge that participation in athletic combine activities
+                involves inherent risks of injury. I voluntarily assume all risks associated with
+                participation and release Core Elite and its organizers from any liability.
+              </p>
+              <p>
+                I consent to emergency medical treatment if necessary. I grant permission for
+                photographs and video taken during the event to be used for promotional purposes
+                unless I opt out below.
+              </p>
             </div>
+
+            <div className="space-y-3">
+              {[
+                { name: 'injuryWaiverAck', label: 'I acknowledge the injury waiver and assume all risks *' },
+                { name: 'dataConsent', label: "I consent to my athlete's data being stored and used for combine results *" },
+                { name: 'mediaRelease', label: 'I grant media release permission for photos/video (optional)' },
+                { name: 'marketingConsent', label: 'I agree to receive event updates and marketing communications (optional)' },
+              ].map(({ name, label }) => (
+                <label key={name} className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name={name}
+                    checked={formData[name as keyof typeof formData] as boolean}
+                    onChange={handleInputChange}
+                    className="mt-0.5 w-4 h-4 rounded accent-zinc-900"
+                  />
+                  <span className="text-sm text-zinc-700">{label}</span>
+                </label>
+              ))}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">
+                Guardian Signature *
+              </label>
+              <SignatureCanvas onSave={setSignature} />
+              {signature && (
+                <p className="text-xs text-emerald-600 font-semibold flex items-center gap-1">
+                  <CheckCircle2 className="w-3 h-3" /> Signature captured
+                </p>
+              )}
+            </div>
+
+            <button
+              onClick={handleSubmit}
+              disabled={
+                !signature ||
+                !formData.injuryWaiverAck ||
+                !formData.dataConsent ||
+                loading
+              }
+              className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  Registering...
+                </>
+              ) : (
+                <>
+                  Complete Registration <CheckCircle2 className="w-5 h-5" />
+                </>
+              )}
+            </button>
           </motion.div>
         )}
       </AnimatePresence>
     </div>
   );
-}
+      }
diff --git a/src/pages/StaffLogin.tsx b/src/pages/StaffLogin.tsx
index b0d87df..7bfa9ab 100644
--- a/src/pages/StaffLogin.tsx
+++ b/src/pages/StaffLogin.tsx
@@ -21,16 +21,17 @@ export default function StaffLogin() {
       setError(error.message);
       setLoading(false);
     } else {
-      // In a real app, we'd fetch the station config or list
-      navigate('/staff/station/SPEED-1');
+      // Navigate to station selection so staff choose their own station.
+      // The previous hardcoded redirect to /staff/station/SPEED-1 has been removed.
+      navigate('/staff/select-station');
     }
   };
 
   return (
     <div className="min-h-screen flex flex-col items-center justify-center px-4">
       <div className="w-full max-w-md mb-8">
-        <Link 
-          to="/" 
+        <Link
+          to="/"
           className="flex items-center gap-2 text-zinc-500 hover:text-zinc-900 transition-colors text-sm font-bold"
         >
           <ArrowLeft className="w-4 h-4" />
@@ -57,19 +58,19 @@ export default function StaffLogin() {
 
           <div className="space-y-1">
             <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Email Address</label>
-            <input 
+            <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               className="w-full p-3 bg-zinc-50 border border-zinc-200 rounded-xl outline-none focus:ring-2 focus:ring-zinc-900"
-              placeholder="coach@coreelite.com"
+              placeholder="your@email.com"
               required
             />
           </div>
 
           <div className="space-y-1">
             <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Password</label>
-            <input 
+            <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
@@ -79,7 +80,7 @@ export default function StaffLogin() {
             />
           </div>
 
-          <button 
+          <button
             type="submit"
             disabled={loading}
             className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all disabled:opacity-50"
diff --git a/src/pages/StaffStationSelect.tsx b/src/pages/StaffStationSelect.tsx
new file mode 100644
index 0000000..130e605
--- /dev/null
+++ b/src/pages/StaffStationSelect.tsx
@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '../lib/supabase';
+import { motion, AnimatePresence } from 'motion/react';
+import { MapPin, Zap, Clock, ChevronRight, RefreshCw, LogOut } from 'lucide-react';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const LAST_STATION_KEY = 'ce_last_station_id';
+
+function logDevError(context: string, err: unknown) {
+  if (import.meta.env.DEV) {
+    console.error(`[StaffStationSelect] ${context}`, err);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+interface Station {
+  id: string;
+  name: string;
+  drill_type: string;
+  status: string;
+  event_id: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export default function StaffStationSelect() {
+  const navigate = useNavigate();
+
+  const [stations, setStations] = useState<Station[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastStationId, setLastStationId] = useState<string | null>(null);
+  const [lastStation, setLastStation] = useState<Station | null>(null);
+
+  useEffect(() => {
+    const saved = localStorage.getItem(LAST_STATION_KEY);
+    if (saved) setLastStationId(saved);
+    loadStations(saved);
+  }, []);
+
+  const loadStations = async (savedId?: string | null) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { data: events, error: eventError } = await supabase
+        .from('events')
+        .select('id, name, status')
+        .in('status', ['live', 'draft'])
+        .order('created_at', { ascending: false })
+        .limit(1);
+
+      if (eventError) {
+        logDevError('loadStations event lookup', eventError);
+        setError('Could not load event information. Please try again.');
+        return;
+      }
+
+      if (!events || events.length === 0) {
+        setError('No active event found. Please contact the event director.');
+        return;
+      }
+
+      const activeEvent = events[0];
+
+      const { data: stationData, error: stationError } = await supabase
+        .from('stations')
+        .select('id, name, drill_type, status, event_id')
+        .eq('event_id', activeEvent.id)
+        .order('name', { ascending: true });
+
+      if (stationError) {
+        logDevError('loadStations station lookup', stationError);
+        setError('Could not load stations. Please try again.');
+        return;
+      }
+
+      const list: Station[] = stationData ?? [];
+      setStations(list);
+
+      if (savedId) {
+        const match = list.find((s) => s.id === savedId);
+        setLastStation(match ?? null);
+        if (!match) {
+          localStorage.removeItem(LAST_STATION_KEY);
+          setLastStationId(null);
+        }
+      }
+    } catch (err: unknown) {
+      logDevError('loadStations unexpected', err);
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelect = (station: Station) => {
+    localStorage.setItem(LAST_STATION_KEY, station.id);
+    navigate(`/staff/station/${station.id}`);
+  };
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+    navigate('/staff/login');
+  };
+
+  const statusBadge = (status: string) => {
+    const map: Record<string, { label: string; className: string }> = {
+      active:   { label: 'Active',   className: 'bg-emerald-100 text-emerald-700' },
+      inactive: { label: 'Inactive', className: 'bg-zinc-100 text-zinc-500' },
+      paused:   { label: 'Paused',   className: 'bg-amber-100 text-amber-700' },
+    };
+    const { label, className } = map[status] ?? { label: status, className: 'bg-zinc-100 text-zinc-500' };
+    return (
+      <span className={`text-xs font-bold px-2 py-0.5 rounded-full uppercase tracking-wider ${className}`}>
+        {label}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-zinc-50">
+        <div className="animate-pulse text-zinc-400 font-medium">Loading stations...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-zinc-50 px-4">
+        <div className="max-w-sm w-full bg-white p-8 rounded-3xl border border-zinc-200 shadow-xl text-center space-y-6">
+          <div className="w-16 h-16 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto">
+            <MapPin className="w-8 h-8" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold mb-2">Stations unavailable</h2>
+            <p className="text-zinc-500 text-sm">{error}</p>
+          </div>
+          <button
+            onClick={() => loadStations(lastStationId)}
+            className="w-full py-3 bg-zinc-900 text-white rounded-2xl font-bold hover:bg-zinc-800 transition-all flex items-center justify-center gap-2"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Try Again
+          </button>
+          <button
+            onClick={handleSignOut}
+            className="w-full py-3 bg-white border border-zinc-200 text-zinc-600 rounded-2xl font-bold hover:bg-zinc-50 transition-all"
+          >
+            Sign Out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-50 px-4 py-10">
+      <div className="max-w-lg mx-auto space-y-8">
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-3xl font-black uppercase italic tracking-tighter">
+              Select Station
+            </h1>
+            <p className="text-zinc-500 text-sm mt-1">
+              Choose the testing station you are operating today.
+            </p>
+          </div>
+          <button
+            onClick={handleSignOut}
+            className="flex items-center gap-1.5 text-zinc-400 hover:text-zinc-700 text-sm font-bold transition-colors pt-1"
+          >
+            <LogOut className="w-4 h-4" />
+            Sign out
+          </button>
+        </div>
+
+        <AnimatePresence>
+          {lastStation && (
+            <motion.div
+              key="rejoin"
+              initial={{ opacity: 0, y: -8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              className="bg-zinc-900 text-white p-5 rounded-3xl shadow-lg"
+            >
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-white/10 rounded-xl">
+                    <Clock className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="text-xs font-bold uppercase tracking-wider text-zinc-400 mb-0.5">
+                      Last used
+                    </p>
+                    <p className="font-bold text-lg leading-tight">{lastStation.name}</p>
+                    <p className="text-zinc-400 text-xs">{lastStation.drill_type}</p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => handleSelect(lastStation)}
+                  className="shrink-0 px-5 py-2.5 bg-white text-zinc-900 rounded-2xl font-bold text-sm hover:bg-zinc-100 transition-all"
+                >
+                  Rejoin
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {stations.length === 0 ? (
+          <div className="bg-white p-8 rounded-3xl border border-zinc-200 text-center text-zinc-400">
+            <MapPin className="w-8 h-8 mx-auto mb-3 opacity-40" />
+            <p className="font-medium">No stations found for this event.</p>
+            <p className="text-sm mt-1">Please contact the event director to set up stations.</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-xs font-bold uppercase tracking-wider text-zinc-400 px-1">
+              All Stations ({stations.length})
+            </p>
+            {stations.map((station) => (
+              <motion.button
+                key={station.id}
+                onClick={() => handleSelect(station)}
+                whileTap={{ scale: 0.98 }}
+                className={`w-full bg-white p-5 rounded-2xl border text-left flex items-center justify-between gap-4 hover:border-zinc-400 hover:shadow-md transition-all ${
+                  station.id === lastStationId
+                    ? 'border-zinc-900 shadow-md'
+                    : 'border-zinc-200'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className="p-2.5 bg-zinc-100 rounded-xl shrink-0">
+                    <Zap className="w-5 h-5 text-zinc-700" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-zinc-900">{station.name}</p>
+                    <p className="text-zinc-500 text-sm">{station.drill_type}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0">
+                  {statusBadge(station.status)}
+                  <ChevronRight className="w-4 h-4 text-zinc-400" />
+                </div>
+              </motion.button>
+            ))}
+          </div>
+        )}
+
+        <div className="text-center">
+          <button
+            onClick={() => loadStations(lastStationId)}
+            className="text-zinc-400 hover:text-zinc-700 text-sm font-bold flex items-center gap-1.5 mx-auto transition-colors"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+            Refresh stations
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+          }